#47: Elementor 4

00:00:05: Hallo!

00:00:06: Guten Morgen, guten Abend wie auch immer.

00:00:08: Liebe Menschen da draußen und herzlich willkommen zu einer brandneuen Folge von unserem Webcafé heute hoffentlich nicht im Café sondern in einer gemütlichen Terrasse draußen unter den Bäumen.

00:00:21: Inzwischen ist der Sommer angekommen.

00:00:22: es ist warm hier in meinem kleinen Büro und ich fürchte auch beim Felix und deswegen hoffe ich dass ihr euch da draußen irgendwo gemütlich macht Und nicht so sehr leidet wie wir hier für euch.

00:00:35: Hallo Felix!

00:00:36: Ja, okay bei mir ist es tatsächlich relativ warm aber ich habe eigentlich sonst mein Thermometer hier heute aber nicht.

00:00:41: Aber ich würde mal schätzen Es geht schon so Richtung um zwanzig Grad in meinem Büro Obwohl es ganz gut isoliert ist aber für den

00:00:46: Podcast reicht's.

00:00:47: und jetzt noch mit der ganzen Technik und Beleuchtung was wir hier leiden?

00:00:51: Was hast du zur Abkühlung Felix?

00:00:53: Ich hab tatsächlich heute keinen Tee dabei sondern ich habe hier die Leute mit Kamera werden sehen Apfelsaft dabei und das ist erstmal unspektakulär, genau genommen ist sogar eine Apfelshorle.

00:01:03: Und die ist von den befreundeten Bauern vor mir, von den eigenen Obstbäumen also wirklich selbst gepresste Apfelessaft.

00:01:10: und da habe ich mir dann ein bisschen Sprudelwasser rein gemacht und zwar Eiswürfel reingepackt weil das bei dem Wetter glaube ich mit Tee sonst nicht funktioniert hätte.

00:01:16: Und es gibt natürlich die nötige Energie.

00:01:18: wir nehmen ja schon wieder nachmittags auf und da ist natürlich ein bisschen schöner Fruchtzucker drin.

00:01:22: Das trägt mich hier über die Folge.

00:01:24: Ich hoffe das sieht nur aus wie Tequila Sunrise Und ist es nicht auch.

00:01:29: Verdammt geil, du bist mir auf die Schliche gekommen!

00:01:32: Ja wir erzählen das die ganze Zeit mit.

00:01:34: ja Leute können das sehen und jetzt kann man uns tatsächlich endlich aussehen... Wir sind jetzt auf Insta mit unseren ersten Reels.

00:01:40: unter Webcafepodcast heißt das und da kann man jetzt nach und nach die ganzen Dinge sehen, die wir hier so bereden.

00:01:47: aber da freuen wir uns natürlich auf große Geisterung.

00:01:50: Da sieht man auch Kays neuen Podcast Hintergrund.

00:01:53: Ich weiß nicht ob wir den letzten mal schon erwähnt hatten Kai hat ganz IKEA-Lehr gekauft und abgegradet.

00:01:59: Und jetzt sieht es doch sehr professionell aus, auch bei dir Herr Kai!

00:02:02: Danke, danke...

00:02:03: Aber was ist das für ein Getränk dabei?

00:02:04: Ja ich habe einen Kaffee weil ich nämlich extra Kaffe gekauft haben damit ich mal wieder etwas Neues präsentieren kann.

00:02:10: Zwar warte machen wir hier ein bisschen ASMR.

00:02:14: Wir haben es in sieben gekauft aber aus einer Rösterei in Marienheide.

00:02:18: Und heißt börgischer Jung glaube ich spricht man das aus.

00:02:21: Und er verspricht.. Jetzt pass auf.. Das sind Kaffees, keine Espresso muss mal ein bisschen aufpassen.. Arhorn-Sirupgetreide, so gut zu beschönen.

00:02:29: Brötchenkruste, Toast salziges Karamell sehr aromatisch und besonders säurearm soll der sein.

00:02:35: Und bei Brotkruste hatte er mich also ein Café, der im Prinzip den ganzen Sandwiches nicht dabei.

00:02:42: und jetzt habe ich es mit so bisschen Milch angesetzt und ein paar Eiswürfel reingeworfen.

00:02:46: Ich probiere das mal.

00:02:47: Also wir finden die Barista daraus nicht hören was ich hier gemacht hab.

00:02:54: Lecker!

00:02:56: Wird er seiner Beschreibung gerecht oder?

00:02:58: Das wirkt ja nicht so begeistert.

00:03:01: Ich glaube, ich habe die Zubereitung jetzt etwas verdorben durch die Eiswürfel, die ich oben draufgeworfen hab.

00:03:06: Nein, hier ist ganz lecker!

00:03:07: Ich mag nur Kaffee nicht so kräftig.

00:03:09: deswegen habe ich es lieber ein bisschen mit Milch runtergedünnt aber das ist mir diesmal nicht so gelungen.

00:03:13: Naja... hoffe ihr da draußen habt leckere Dinge.

00:03:17: und damit kommen wir zum Thema der heutigen Folge in meine Aufzeichnung.

00:03:22: hier steht Felix.

00:03:23: Du möchtest unbedingt über Elementor 4 reden und ich kann mir eigentlich nur vorstellen, dass du mit uns gerne über den Levelaufstieg deines neuesten Dungeon & Dragons Elementarmagiers sprechen möchtes der jetzt im letzten Abenteuer Stufe 5 erreicht hat und du jetzt mit uns hier in großer Runde die nächste Skillung erörtern.

00:03:44: möcht es

00:03:45: Kay, jetzt würde ich natürlich gerne deine Metapher hier aufnehmen.

00:03:48: Aber ich habe wirklich absolut keinen Plan von Dungeons & Dragons außer dass ich glaube das ist ein Pen-in-Paper Spiel.

00:03:53: Ja okay!

00:03:56: Aber so ist es.

00:03:57: wir haben einen Upgrade bekommen von Elementor Version vier... ...dass ich in letzter Zeit tatsächlich schon ganz intensiv testen durfte.

00:04:04: und ich glaub das ist das erste mal dass wir ein technisches Thema haben Kai indem ich fitter bin als du oder vielleicht sogar anders gesagt indem du fast gar keine Ahnung hast.

00:04:12: Ja, wir wissen vielleicht einmal kurz den großen Bogen spannen damit die Leute, die uns schon bei Feuer Magier verloren haben jetzt noch mal ein bisschen ans Board kommen.

00:04:18: Es geht um WordPress und insbesondere um einen Pluckin.

00:04:23: ist das wohl glaube ich im Kern aber mehr so eine Art Bausteinen-Editor für diese WordPress Seiten, die man da machen kann.

00:04:29: Wir setzen da ja eigentlich von Haus aus seit Jahrzehnten kann man ja inzwischen sagen auf Enfold.

00:04:36: Das war immer unser Go to.

00:04:37: um ein fancy Editor zu haben mit dem die Nutzer schönere Seiten bauen können gibt es inzwischen auch ganz gute Dinge von WordPress selber, da müssen wir gleich auch mal drüber sprechen.

00:04:45: machen mit denen eigentlich nicht benutzen.

00:04:47: Aber jetzt der neueste heiße Schrei.

00:04:49: wie ich immer von dir und mit großer Begeisterung gehört habe ist eben dieses Elementor Und du hast dich da jetzt richtig rein gehackt die letzte Zeit und kannst jetzt auch zu dem neuesten Update Version vier einiges sagen.

00:05:01: So ist es.

00:05:02: Da waren jetzt schon wieder ein paar Themen drin, die du aufgemacht hast.

00:05:04: vielleicht noch mal zur Einordnung.

00:05:06: Enfold was wir früher verwendet haben is tatsächlich einen Theme also nen Template for WordPress.

00:05:12: das heißt dass bringt wirklich die ganze Seite mit sich und die kann man dann customisen also den anderen Hedder verwenden.

00:05:17: die bringen so verschiedene Styles mit Und die haben aber auch so'n Drag and Drop Editor.

00:05:21: während Elementor jetzt tatsächlich nur der Editor ist der für den Seiten Inhalt zuständig ist und ist wird so bisschen ähnlich verwendete Und man vergleicht das immer sehr, weil Elementor so umfassend ist, dass man damit eigentlich auch ganze Themes erstellen kann.

00:05:36: Und Elementor verwendet man in vielen Fällen wirklich mit einem Hello-Theme und es ist wirklich ein Theme was reduziert ist auf gar nichts also wirklich einen ganz basic Theme.

00:05:46: Du machst dann sogar Header und Futter und alle Elemente drin sind, machst du letztlich mit Elementor?

00:05:50: Das heißt technisch gesehen ist Elementor und Plugin und Enfoldern zum Beispiel in einem Theme aber am Ende wollen sie natürlich genau das gleiche.

00:05:59: Genau und du sagst jetzt, das ist relativ neu oder der letzte heiße Schrei.

00:06:03: Also bei uns zumindest?

00:06:04: Ich würde mal sagen Jein weil einerseits verwenden wir es auch schon mehrere Jahre und Elementor selbst ist auch schon zehn Jahre alt.

00:06:10: Oh!

00:06:11: Und das ist ganz interessant.

00:06:12: ich hab das jetzt mal nachgeguckt.

00:06:13: Das wirklich eins der Top drei würd' ich mich mal festlegen plug ins weltweit die überhaupt eingesetzt werden für WordPress.

00:06:20: da gibt's immer sehr viele unterschiedliche Statistiken.

00:06:22: oder bei der einen Seite ist dann YoastSeo auf Platz Eins bei der anderen Es ist irgendwie ein WooCommerce, bei dem anderen ist ein Elementor.

00:06:29: Aber Elementor hat jedenfalls über zehn Millionen Installationen und das spricht glaube ich für sich dass es mindestens mein der beliebteste what you see is what u get editor oder blockeditor für WordPress ist.

00:06:39: Genau!

00:06:40: Und jetzt hatte ich den ganzen Text hier oder das Skript für den Podcast schon fertig und hab gedacht da können wir schön mit rein starten.

00:06:47: und was kommt dann?

00:06:49: Update of WordPress sieben und Elementor schickt Version vier Punkt eins ins Rennen, die viele von den Pain Points, die ich vorher anmeckern wollte erledigt hat.

00:07:00: Und deswegen muss ich das hier nochmal so ein bisschen umschreiben und vielleicht auch für die Leute da draußen dann zur Einordnung.

00:07:04: also ich referenzierte tatsächlich schon Elementor vier Punkt Eins der dann doch eine ganze Menge Sachen anders macht.

00:07:11: Da komme ich gleich ja noch mal drauf ... und dann eben in Kombination mit WordPress sieben, dass er tatsächlich auch ein paar neue Features mitbringt.

00:07:17: Und vielleicht können wir da sogar mal eben einsteigen?

00:07:19: Mhm!

00:07:19: Ich bin ganz Ohr... Also man hat schon gemerkt, WordPress und jetzt vor allem Elementor ist nicht so die Baustelle wo ich gerne rumtourne.

00:07:26: Das bekomme ich nur so über Bande mit wenn du oder Kollegen dir irgendwas erzählen.

00:07:31: Deswegen bin ich da ganz offen gespannt was du uns tolles erzählst.

00:07:34: Genau.

00:07:35: In WordPress macht man natürlich nicht so eine ganz klassische Softwareentwicklung sondern es ist natürlich auch viel Design und man baut eben Webseiten zusammen.

00:07:41: WordPress selbst, dass wissen die Leute da draußen.

00:07:44: Ja hoffentlich ist einfach ein CMS also ein Content Management System mit dem man Webseiten pflegen kann und Webseite erstellen können.

00:07:50: Hat mir

00:07:51: Folge achtzehn sogar eine ganze Folge zu sehr gerade?

00:07:53: Ach tatsächlich!

00:07:54: Guck mal wir haben schon so viel folgen das ich schon in den ersten Folgen vergesste, die wir gemacht haben und es gut.

00:07:59: Also vielleicht doppelt sich ein bisschen.

00:08:00: was aber zur WordPress sieben.

00:08:01: jedenfalls ganz kurzen Abriss sind natürlich viele Sachen jetzt passiert aber vielleicht zu die wichtigsten.

00:08:06: Das erste, was man sieht ist, wenn man sich jetzt im WordPress anmeldet und das WordPress sieben ist.

00:08:09: Dass es ein anderes Color scheme ist.

00:08:11: D.h.,

00:08:12: die zum Beispiel Menüpunkte haben hier so ein bisschen kräftigeres Blau.

00:08:15: Das Ganze ist ein bisschen mehr flat.

00:08:17: Die haben abgerundete Ecken.

00:08:19: Also jedenfalls sieht's dann ganz anders aus.

00:08:21: für mich ein bisschen frischer oder moderner komme ich gut mit zurecht hat aber letztlich natürlich für die Produktivität keine Auswirkungen.

00:08:27: Was man dann aber zum Beispiel aussieht ist, weil man die Seiten wechselt im Abbildbereich Da gibt's jetzt so leichten Fades zwischen den Seiten.

00:08:32: Das fühlt sich ein bisschen single-page mäßiger an, ich glaube die Seite wird trotzdem im Hintergrund noch neu geladen.

00:08:38: aber dadurch dass man da so einen kleinen Fade hat, fühlt es sich jetzt irgendwie so ein bisschen moderner schneller frischer an.

00:08:42: also da haben sie ein bisschen was dran gemacht und ich denke das Keyfeature vom WordPress Sieben ist, dass die AI-Connectoren haben, was sich natürlich sehr toll anhört.

00:08:52: für die Leute, die uns da jetzt hören wenn ihr gerade eine WordPress-Seite vor euch habt und auf WordPress Sieb schon geupdatet habt Das findet ihr, wenn ihr in den Einstellungsmenüpunkt geht.

00:09:01: Da habt ihr jetzt so einen Eintrag der heißt glaube ich sogar Konnektoren auf Deutsch.

00:09:05: Auf Englisch wahrscheinlich Connector oder sowas in die Richtung und da kann man jetzt Claude- oder OpenAI Geschichten also jedenfalls AIs connecten... ...und kann dann direkt mit den AIs in WordPress auch interagieren.

00:09:18: und das ist so ja das große Ding was WordPress sieben jetzt mitbringt.

00:09:21: Da habe ich tatsächlich noch nicht mehr drum gespielt.

00:09:24: wo ich gleich nach drauf komme vielleicht ganz kurz ist die Elementor AI Die er jetzt auch neu gemacht wurde.

00:09:30: Da können wir noch mal kurz drauf eingehen, da habe ich zumindest kurze Tests mitgemacht.

00:09:33: Hättest du zufällig wenn du dich damit schon beschäftigt hast ob das so Konnektoren sind die dir dann beim Content generieren helfen also dass du sagst hier ich hatte gerne ein Blog post über dies und

00:09:41: genau korrekt?

00:09:42: oder kann der dir auch helfen und sowas sagen wie ich möchte gerne die Admin-Email-Adresse von meiner WordPress-Installation ändern und dann kann er da so ins System selber eingreifen.

00:09:52: Also

00:09:53: was ich auf jeden Fall weiß, ist dass der so Post schreiben kann das dir zum Beispiel auch.

00:09:57: du kannst mir sagen hier optimiere mal meine Titel auf SEO und dann geht ihr durch alle Posts, durch den Optimit-Eddie.

00:10:02: ob das jetzt in den Einstellungen mit der App an den E-Mail jetzt das konkret kann ich dir nicht sagen.

00:10:06: so genau habe ich mir das noch nicht angucken weil es jetzt wirklich sehr frisch ist und ich immer ein bisschen Vorbehalte hab das merkt ihr bestimmt später auch im Podcast AI zu verwenden Weil da doch viel noch ziemlich am Murgs bei rauskommt.

00:10:18: Gleich für die Elementor AI können vielleicht als nächstes machen, auch noch Beispiele mitgebracht, wo ich einfach mal so Komponenten gebaut habe und das ist jetzt für mich als Programmierer nicht der richtige Weg, ist aber sicherlich für Leute da draußen, die mit Programmieren nicht soviel am Hut haben und die nur zu schnellen Ergebnissen kommen wollen und die jetzt nicht die Wahnsinns Enterprise Website bauen, ist es vielleicht ein guter Weg einfach schnell zur Ergebnis zu kommen und vor allem kostengünstig vielleicht auch Sachen selbst machen zu können.

00:10:41: Und dann haben wir, du hast das eben schon angesprochen, WordPress hat ja seinen eigenen Editor.

00:10:46: Den Gutenberg-Editor heißt ja soweitig informiert bin und der ist sehr vor Ewigkeiten schon eingeführt worden bringt diesen blockbasierten Ansatz mit, der auch total richtig war bisher aber immer unbrauchbar weil es viel zu wenig Blöcke gibt mit viel zu wenige Funktionen viel zu unflexibel.

00:11:03: Und ein Riesen-Painpoint war eben auch, dass die Blöcke nicht custom zu stylen waren.

00:11:08: Das heißt du hattest gar keine Möglichkeit so ein individuelles CSS zum Beispiel draufzupacken und das ist jetzt eine Funktion, die WordPress sieben neben einem paar neuen Blöcken nachreicht.

00:11:16: D.h.,

00:11:16: man kann jetzt wirklich die Elemente auch stylen, die Blocke steilen und kann das auch live im Editor dann sehen?

00:11:23: Und das natürlich ganz praktisch!

00:11:24: Ja ich hatte immer das Gefühl dieser Standard WordPress Editor der ist eigentlich nur dafür da um innerhalb von einer Contentseite den Inhalt ein bisschen schöner aufzubereiten, mal da einen Bild rein zu machen hier in Absatz oder sowas.

00:11:36: Aber schon so in der Idee dass du eigentlich einen fortlaufenden Text hast während jetzt auch Enfold und Elementor ja mehr dazu hingehen und sagen wir gestalten die ganzen Seiten mit irgendwelchen Grid Layouts wo Elemente links und rechts sind oben und solche großflächige Elemente.

00:11:51: das geht da glaube ich ein bisschen über das hinaus was auch da WordPress selber ja eigentlich denkt von seiner Webseite.

00:11:57: Genau,

00:11:58: aber da will WordPress natürlich hin auch mit diesem Gutenberg-Editor und ich würde mal vermuten dass wir da so in zehn Jahren noch ankommen und vielleicht gerne extra ein Editor mehr brauchen.

00:12:06: oder vielleicht kommen da die AI Funktionen dann im Galopp auch hinterher sodass wir auf diese Editoren vielleicht auch komplett verzichten und vielleicht nur noch mit AI die Sachen machen und da direkt Code rauskommt.

00:12:16: Aber da will ich jetzt keine Prognose wagen.

00:12:18: Jedenfalls ist Custom CSS erstmal ganz guter Schritt so dass man da auch als Programmierer, wie wir das sind noch ein bisschen mehr Freiheiten bekommt.

00:12:25: Genau und wir wollen jetzt ja gar nicht so viel über WordPress selbst reden sondern mehr über Elementor.

00:12:29: aber einen letzten Punkt noch... Da hatte ich mich eigentlich sehr darauf gefreut.

00:12:33: bei WordPress ist es jetzt im Moment so, dass wenn jemand eine Seite bearbeitet und jemand anders da drauf geht dann steht er halt die Seite wie gerade von jemandem anders bearbeitet Und du kannst den Content nicht bearbeiten.

00:12:43: Dann wurde groß angekündigt, dass es jetzt so eine Funktion gibt Wie das zum Beispiel bei Google Sheets ist Dass man den Cursor von dem anderen sieht Ja, kollaborieren kann und an dem Text zusammenarbeiten kann und live auch die Änderung von einem anderen Menschen sieht.

00:12:56: Das ist jetzt aber tatsächlich nicht im WordPress eben reingekommen anders als versprochen weil die scheinbar da Probleme hatten mit externen Plugins und so.

00:13:03: und dann gibt es natürlich wahnsinnig viele Abhängigkeiten und offensichtlich wie sich das ein bisschen verzettelt und es ist jetzt gar nicht so konkret angekündigt Aber zumindest die Funktion gibt's erst mal nicht.

00:13:14: Ich glaube aber, dass es ein bisschen andere Revisionen jetzt gibt.

00:13:16: Wo man das noch ein bisschen genauer sehen kann was auch geändert wurde also quasi mehr oder weniger so eine Live-Vorschau statt nur den Code zu sehen.

00:13:23: Da bin ich jetzt aber noch nicht zu tief eingestiegen, aber diese Zusammenarbeitungsfunktion die gibt's jedenfalls derzeit noch nicht.

00:13:29: Genau wenn du Lust hast gehen wir mal zur Elementor rüber weil das eigentlich Kern dieses Podcast sein sollte.

00:13:34: Ja gerne!

00:13:35: Es ist ja Anfang... Ja, ich muss jetzt lügen.

00:13:38: Ich sag mal vielleicht Anfang April Ende März Mitte März so um den Dreh ist Elementor 4 rausgekommen und das was Elementor 4 jetzt ganz neu mitbringt ist die neuen Atomic Funktionen.

00:13:49: Wollen wir jetzt vielleicht bevor wir wirklich in der Details von Elementor einsteigen einmal nochmal kurz einen Schritt zurückgehen und sagen warum wir überhaupt so erweiterte Editor verwenden haben?

00:13:58: jetzt glaube ich schon halbwegs klar gemacht aber warum Elementor auf einmal das Ding ist bzw.

00:14:03: was bei uns auch intern dazu geführt hat, dass wir jetzt diesen Wechsel von Endfold gemacht haben.

00:14:08: Ja, Elementor ist einfach viel flexibler und hat ein viel größeres Ukosystem mit ganz viele Plug-ins die man reinpacken kann egal was für einen Plug in mal verwendet.

00:14:16: ob das jetzt ich sag mal sowas wie ein Membership Plugin ist zum Beispiel wie Padmemberships Pro oder Learn Dash, WooCommerce, egal was vom Plug In du dir schnappst die haben normalerweise eine Integration Irgendwie für Elementor, das heißt du hast dann auch Widgets die du verwenden kannst.

00:14:31: Für Newsletter, Plugins wie Mailchimp oder so.

00:14:32: Die bringen alle ihre eigenen Widgets mit, die du direkt per Dragon Drop dann auf die Seite ziehen kannst, stylen kannst und das natürlich super praktisch.

00:14:39: Und Endfold ist jetzt nicht ganz unbekannt aber hat viel kleineres Ökosystem und der Editor ist auch viel eingeschränkt.

00:14:47: Das muss man sich allein schon so vorstellen bei Endfold und es gibt noch andere Editoren, der nahm mich jetzt gerade nicht weiß.

00:14:53: Aber die, dass wir ähnlich machen da hast du letztlich auf der Page, also auf der Seite vom WordPress dieses kleine Editor-Fenster wo du eigentlich nur abstrakte Darstellungen von den Komponenten hast, die du auf der Seiten hast.

00:15:05: Also wenn du eine Überschrift hast, hast du da so ein Blog und das steht an Überschwift und vielleicht noch der Text der Überschaft drin.

00:15:11: Und bei Elementor siehst du wirklich die Seite wie sie ist, also es ist wirklich what you see is what do get.

00:15:15: Du hast also einen Full Size, also ein Vollbildeditor wo du auf de rechten Seite wirklich deine Website siehst wie sie dann später nahezu auch aussieht und auf der linken Seite hast du dann so deine Komponenten verwenden kannst.

00:15:28: das ist also viel näher hinter am echten Ergebnis.

00:15:31: Und deswegen viel einfacher für die Leute damit Webseiten zu erstellen, für den Kunden viel einfache Inhalte zu pflegen... ...und ja es ist einfach insgesamt der modernere und bessere Editor State of the Art.

00:15:42: jetzt will ich aber nicht zu sehr in Lobhut leiche abdriffen weil Elementor wirklich auch enorme Schwächen hat.

00:15:48: also ich habe noch keinen besseren Editor gefunden.

00:15:50: Aber ist jetzt auch nicht so dass man mit Elementor jetzt nur hoch jauchzen, die ganze Zeit Luftsprünge macht.

00:15:56: Ein Mini-Beispiel ist.

00:15:57: du kannst keine Komponenten auf die oberste Ebene verschieben per Dragon Drop und das ist nervig ohne Ende.

00:16:03: Und das sind so Sachen wo man dann immer wieder drauf stößt.

00:16:05: und dieses Dragon Drop funktioniert auch mal mehr, mal weniger gut Aber insgesamt ist es schon der beste Editor die man so findet im Moment.

00:16:12: Ich glaube das muss man sich nochmal vergegenwärtigen.

00:16:14: Das hat mich zumindest überrascht als ich mich das erste Mal damit beschäftigt habe.

00:16:17: Jetzt in Vorbereitung auf diese Folge Normalerweise ist bei WordPress so, wenn du da eine Seite editierst bist du in einem abstrakten Admin-Bereich wo du so eine abstrakte Repräsentation deiner Seite hast die so ein bisschen aussieht wie so ein Worddokument vielleicht.

00:16:31: Wo du mehr oder weniger stylos Reintipps was du da machst und wenn du das dann speicherst dann überträgt WordPress das in dem Frontend in das Theme und bereitet es schön auf und setzt irgendwelche Styles oder sonst irgendwas.

00:16:44: Und wie du es eben gesagt hast beim Endfold Editor war das auch so ähnlich.

00:16:48: Nur eben das mit nicht mehr so'n fortlaufenden Text, sag ich jetzt mal ganz grob abstrahiert für diesen Standard-Editor.

00:16:54: Sondern du konntest mit so Dragon Drop aus so einer Menüleiste runterziehen.

00:16:58: So hier hätte ich gerne eine Kachel ... Das ist ein Bild und dann wähl ich da einen Bild aus... Und dann hier ist ein Textblock und dann schreibe ich da ein Text rein.

00:17:05: Aber es sieht schon wirklich sehr abstrakt aus wie so ein Baukast wenn man die tatsächliche Seite öffnet wo das Film auch angewendet wird und sonst irgendwas.

00:17:13: Das sah schon teilweise sehr anders aus!

00:17:16: Auch vom Layout von der ganzen Gestaltung ... sodass man immer so einen kleinen Übertrag machen musste zwischen... Okay, ich bin jetzt hier in dem Editor.

00:17:22: Ich habe so ein ganz abstraktes Bild von dem was ich vorhab und hoffe dass das Ergebnis nachher ungefähr zu dem hinkommt.

00:17:28: Und das ist natürlich besonders schwer für Kunden den man auch Zugang zu der eigenen Seite geben möchte, damit die da etwas machen.

00:17:35: Bei diesem Elementor ist es wirklich so in dem Backend selber hat man nicht so eine abstrakte Vorschau-Seite sondern wirklich diese Seite wie sie nachher auch in der Realität aussieht Und kann da, wie du das schon gesagt, what you see is.

00:17:49: What do get-mäßig?

00:17:50: Bausteine hin und her schieben Texte, Farben usw.

00:17:53: anpassen sieht direkt was das für Auswirkungen hat.

00:17:55: Ganz genau!

00:17:57: Ja und bisher war es so dass mein Elementor eben seine ganzen Komponenten hatte und jede Komponente hatte dann Haufen Eigenschaften.

00:18:04: also da gab's mehrere Tabs die sich auch mal schön unterschieden haben sodass nicht konsistent war und dann konntest du eine Schriftgröße festlegen, ne Farbe festlegen hintergrundfarbe fest legen im Bild festlegen und so weiter und hast es dann eben auf der rechten Seite gesehen.

00:18:17: Und die größten Schwächen von Elementor waren eben, ich konnte mir zwar so Templates bauen, die ich dann wieder verwenden konnte.

00:18:23: Also ich kann jetzt zum Beispiel nimm mal ein Call to Action Button einfach also einen Full With Element auf der Seite wo eine Überschrift ist kleiner Text und dann unten im Button zum Beispiel jetzt kaufen oder zum Shop oder so.

00:18:35: Und das Template kann ich zwar verwenden ist dann aber letztlich auf jeder Seite eigentlich isoliert und wenn ich das auf einen Seite steile, dann ist es auf einer Seite nicht gestylt.

00:18:44: Ich weiß am Ende nicht welches Templates jetzt gerade aktuell und das führt halt zu so Inkonsistenzen auch wenn ich irgendwas global ändern wollte.

00:18:50: Es gab schon so globale Farben und so, aber das war immer total hakelig.

00:18:54: Bei größeren Projekten hatte man irgendwann immer so das Problem dass die Seite inkonsistent wurde und die Wartung oder die Anpassung von Elementen sehr aufwendig wurde.

00:19:03: Und das ist eben genau, was Elementor in Version vier besser machen will mit diesem sogenannten Atomic Editor oder mit diesen Atomic Elementen.

00:19:11: Ich hab so ein bisschen das Gefühl die wandeln sich von einem klassischen Pagebilder eigentlich zu einem Design System hin und es hat natürlich jetzt wahnsinnig viele Vor- und Nachteile.

00:19:21: ich kann so viel schon mal vorwegnehmen.

00:19:22: für mich als Programmierer ist das cool weil ich damit sehr flexibel und dynamisch arbeiten kann.

00:19:29: Für Leute, die das als was you see is what you get Editor verwendet haben und wirklich per Dragon Drop sich die Sachen stahlen wollten.

00:19:35: Ist es mitunter sicherlich schwieriger?

00:19:37: Können wir gleich an den konkreten Beispielen auch noch mal sehen woran das liegt genau?

00:19:42: Und Kai die Essenz so des Ganzen ist eigentlich dass sie so ein bisschen diesen Tailwind Ansatz fahren.

00:19:47: tailwind müsste dir ja etwas sagen.

00:19:49: Ja Tailwind finde ich konzeptional gut.

00:19:52: selber habe ich es nicht benutzt.

00:19:54: aber Traditionell hat man CSS ja eher so geschrieben, dass man ein Element hatte.

00:19:58: Das wollte man besonders designen.

00:19:59: dann hat man dem eine recht eindeutige Klasse gegeben weiß ich nicht sowas wie Artikelheader oder sowas.

00:20:05: und irgendwo in der CSS Datei hatte ich dann die klasse Artikel header nochmal und hab da reingeschrieben wie sie gerne aussehen soll.

00:20:12: das ist ein sehr individueller Ansatz weil ich jedes einzelne Element individuell gestalte.

00:20:17: Und Tailwind ist dann so ein bisschen revolutionär hingegangen und hat wieder gesagt Ja, eigentlich fanden wir so wie das früher war mit CSS schon gut.

00:20:26: Nämlich auf den Elementen selber per Inline-Style reinschreiben was man gerne hätte.

00:20:30: Wir abstrahlen es allerdings ein bisschen indem wir also teilweise einzelne CSS Eigenschaften aber auch manchmal so welche die sinnvollerweise zusammengehören unter CSS Klassen bündeln und ich kombiniere dann in dem Element was ich stylen möchte verschiedene CSS Klassens zusammen.

00:20:45: Also habe ich eine klasse für p zwei zum Beispiel.

00:20:48: das heißt dann gibt mir ein Zweierspacing-Pattern und dann mache ich noch M drei.

00:20:53: Und da gibt es noch einen Margin, und dann mach' ich font minus bold.

00:20:56: Dann gibt das eine fette Schriftart.

00:20:57: Und so kann ich mir aus diesem Utility System von Tailwind im Prinzip für jedes Element individuell zusammensuchen was ich gerne hätte.

00:21:04: So ist das da auf jeden Fall.

00:21:05: Genau!

00:21:06: Und dann steilt man eigentlich Sachen in dem an einem HTML-Element mit unterbestimmt mal zehn, fünfzehn, zwanzig Klassen gibt und die so steilt.

00:21:15: also dann machst du nen Round Border daraus, dann machst Du den Button als Primary Und genau so packt man eigentlich nur CSS-Klassen dran und macht so CSS.

00:21:24: Ich fand den Ansatz immer gedanklich, ein bisschen schwierig aber da können wir glaube ich eine sehr beraten Folge noch mal drauf gehen.

00:21:30: jedenfalls macht Elementor jetzt einen ähnlichen Ansatz geht also hin und macht globale Klassen unvariablen die ich eben auf Elemente verwenden kann.

00:21:39: Und jetzt in Elementer vier.

00:21:41: Punkt eins kam als Update dass nicht nur hundert Klassen pro Element erlaubt sind sondern bis zu tausend.

00:21:50: Und Kai, du merkst schon das ist schon auch das erste Problem nämlich genau wie es verwendet wird und ob das alles so sinnvoll ist.

00:21:56: Also wenn ich mir überlege da hat ein Element oder eine Komponente über hundert Klassen jetzt natürlich entsprechend noch unübersichtlich auf die Nachteile kommen wir gleich nochmal zu sprechen.

00:22:04: aber das nun mal als ersten Eindruck.

00:22:06: Genau Aber grundsätzlich haben wir diese Atomic-Elemente Die erstmal halbwegs umgestalt sind und das sind nicht alle Elemente Elementor vorher mitbrachte.

00:22:16: In Atomic gibt's jetzt vielleicht so ein paar Hände voll an Komponenten, also ich sag mal es sind so vielleicht so zwanzig die ich verwenden kann.

00:22:23: Also das sind die Klassiker.

00:22:24: wie einen Button Das sind die Grid Geschichten, Diff und Flex komm' ich gleich auch nochmal zu.

00:22:30: Und dann hast du sowas wie ein Formular Du hast natürlich Überschrift und Textblöcke und sowas.

00:22:34: Also eigentlich die wichtigsten Elemente da und Dann gehe ich hin... ...und kann die jetzt noch über den Style Tab schon auch Custom Style.

00:22:43: Ich könnte eine Textfarbe vergeben, ich könnte Textgröße vergeben und so weiter und sofort.

00:22:47: aber ich kann denen auch diese Klassen geben und die Klassen sind eben zentral und global.

00:22:51: das heißt wenn ich jetzt zum Beispiel in der Klasse mache Padding Small oder Spacing Small würde ich es dann vielleicht nennen?

00:22:57: Dann ist es vielleicht ein Spacing von einem REM und dieses Spacing small kann ich auf jede beliebige Komponente anwenden Und wenn ich die an einer Stelle veränder, sind auch alle Komponenten automatisch angepasst.

00:23:10: Das hat jetzt mehr Vor- als Nachteile würde ich sagen.

00:23:14: Kommen wir auch noch drauf?

00:23:15: Genau das ist so ein bisschen eine Idee.

00:23:16: und dann würde ich jetzt ne Komponente, ich sag mal ne Überschriftenkomponinte würde ich mir jetzt draufziehen.

00:23:20: Dann würde ich der sagen Spacing Large Ich würd ja sagen Text Center Ich würds sagen von Size Large mein Wien oder X Large Color Primary Und so würde ich dann letztlich eine komponente steilen.

00:23:33: und im Internet findet man hoffenweise Videos dazu, wie Leute wahnsinnig schnell supergale Designs damit aufbauen.

00:23:39: Also das erstmal so grundsätzlich zu Funktionsweise.

00:23:42: was das technisch bedeutet ist natürlich dass du viel weniger Inland-Styles hast.

00:23:46: also Elementor hat uns vorher sehr viel mit Inland Styles gearbeitet.

00:23:50: jetzt hast du natürlich mit diesen Klassen wieder Verwendbarkeit drin das heißt Du hast viel weniger Duplik Geld Code und so.

00:23:55: das heißt es ist technisch letztlich eigentlich auch sauberer.

00:23:57: Ich versuch das gerade im Kopf mir so ein bisschen zusammen zu konstruieren.

00:24:01: Da kommt vielleicht dann doch ganz recht, dass ich mich da nicht so tief auskenne.

00:24:04: Ich würde vielleicht noch mal einen kleinen Bogen spannen und dann erklärst du mir nachher ob mein Problem jetzt mit diesem ganzen Konzept gelöst ist.

00:24:12: Der große und ja auch erfolgreiche Trick von WordPress ist es gleichzeitig umfangreich genug ist, dass Entwickler wie wir damit das meiste umsetzen können was wir wollen Aber gleichzeitig einfach genug, dass wir auch unsere Kunden da ruhigen Gewissens drauf lassen können.

00:24:28: Damit die Änderungen an ihrer Webseite selber machen können.

00:24:30: Weil es ist ja doselig wenn sich im Impressum die Adresse ändert das sie uns erst irgendwie ein Ticket schreiben müssen.

00:24:36: Dann kostet das nachher noch irgendwie sinnlose Geld wie ihr sind rausgerissen oder sowas.

00:24:39: Nee dann bekommen Sie die Zugangsdaten zu Ihrer Seite eine kleine Einweise und können dann selber das machen was Sie da machen können in bestimmten Rahmen.

00:24:47: Und das ist natürlich Fluch-und Segen zugleich weil einerseits auch was so die Gestaltung von einzelnen Webseiten angeht, möchte man natürlich einerseits eine gewisse Gestaltungsfreiheit haben.

00:24:57: Aber gleichzeitig das hast du vorhin auch schon gesagt ist es wichtig bei so großen Seiten eine gewissen Persistenz zu haben.

00:25:04: Das heißt wenn ich auf zehn unterschiedlichen Content-Seiten bin dann sollen die alle schon also nicht sehr ähnlich sondern größtenteils ähnlich aussehen mit derselben Überschrift stylingsmäßig und so weiter Mit dem selben Textformatierung weiß ich nicht was.

00:25:17: Es gibt ja wirklich nur manchmal So seltene Lending Pages die wirklich so aggressiv aus dem Raster fallen, dass sich da so ein Custom Styling lohnt.

00:25:26: Und das ist immer so bisschen Fluch und Segen bei dieser ganzen Feeling Geschichte, dass man einerseits den Leuten Tools an die Hand geben möchte um sich gestalterisch auszudrücken aber gleichzeitig auch nicht zu viele Tools damit es ruinieren können weil dann auf Seite A ist dann Mitarbeiter a dran und hat da ein ganz tolles Design Konzept Und Mitarbeiter B auf Seite B hat sich was ganz anderes ausgedacht und die sind beide für sich schön, aber passen halt überhaupt nicht ins System.

00:25:50: Was du jetzt alles gerade beschrieben hast klingt so ein bisschen nach wir geben den Leuten tausend Tools an die Hand damit Designer wie du auf einzelnen Seiten total ausrasten können.

00:26:00: mir ist jetzt allerdings noch nicht ganz klar wie dieses Atomic Concept mit dabei helfen kann zu sagen okay wenn ich so einen Call to Action Button mache dann möchte ich dir in einer zentralen Stelle designen Call to Actions-Button so viel sie benutzen möchten auf ihren Seiten, aber die sehen bitte immer gleich aus.

00:26:15: Kann man nicht großartig verändern und ich möchte Sie zentral steuern können?

00:26:18: Ja das ist super geil zusammengefasst besser als ich es hätte machen können und ganz viele Punkte angesprochen, die ich sagen muss und wo du mich jetzt mal drauf hingeschubst hast weil Elementor macht nämlich genau das jetzt in Version vier einerseits extrem viel besser und auf der anderen Seite eine riesen Katastrophe draußen Weil genau wie du gesagt hast, ich will dem Kunden eigentlich die Möglichkeit geben seine Seite zu bearbeiten.

00:26:41: Aber in einem Rahmen das ich weiß ist fliegt nichts auseinander und da kannst du jetzt mit Elementor VIV so Komponenten machen also eigene Komponente d.h.

00:26:49: Du bastelst jetzt ein paar Elemente zusammenlöstest Überschriften Button im Text Und jetzt kannst du den Block der Drohme herum sagen du bist jetzt eine Komponte und die kann ich wieder verwenden an ganz vielen verschiedenen Stellen.

00:26:59: Ich vereinfache dass jetzt alles ein bisschen.

00:27:02: aber dieser Kompontente kannst du dann sagen Wie der Button beschriftet ist, das kann ich bearbeiten.

00:27:07: Ich hab das Feld wie der Text da drüber ist und ich kann vielleicht noch den Link bearbeiten wo der Button hin zeigt.

00:27:13: Alles andere Farben und so weiter lasse ich aber nicht bearbeitbar Und die Komponente kann ich jetzt in den Website reinsetzen wenn jetzt der Kunde hinkommt er kann einen Text bearbeiten kann link bearbeiten hat auch nur die Felder die für ihn relevant sind und dass natürlich super komfortabel und mega gut weil der kunde nicht irgendwie den Design zerschießt weil in dem Moment wo der Kune sieht ich kann Textfarbe anpassen machte das natürlich auch und Das ist natürlich jetzt so und so.

00:27:34: Ich weiß gar nicht, ob man das überhaupt mit Rechten versehen kann.

00:27:36: Du könntest theoretisch die Komponente natürlich insgesamt bearbeiten, hättest wieder den Vorteil, dann würden auch alle Komponenten bearbeitet werden.

00:27:41: Das heißt es ist dann wieder konsistent.

00:27:43: Aber das ist so ein Ansatz von Elementor zu sagen jetzt kann der Kunde wirklich nur die Felder aber arbeiten, die für ihn noch relevant sind und ich vereinfache dass alles.

00:27:51: Das klingt ja total gut für das was ich vorhab?

00:27:53: Genau!

00:27:54: Und das bringt aber natürlich in der ersten Version also Version vier und in vier point eins wird's nicht besser sein, bringt auch wahnsinnige Nachteile mit weil du eben nur bestimmten Feldern sagen kannst, dass sie bearbeitbar sind.

00:28:06: Und was du zum Beispiel nicht sagen kannst hatte ich jetzt letztens den Fall... Ich hab immer auf der Website oben einen Headerbereich wo dann ein großes Bild hinter ist und da habe ich eine Überschrift.

00:28:15: Da will ich natürlich das Ding als Komponente machen und will es auf jeder Seite einsetzen so, dass ich immer weiß, das ist ne hundert VH also so groß wie der Bildschirm-Ausschnitt jetzt im Moment.

00:28:24: die Überschaft hat immer gleiche Größe diese meine gleiche Positionen usw.. Das was ich aber austauschen will ist einerseits der Text der Überscript.

00:28:31: das kann ich natürlich machen Und ich will aber das Hintergrundbild austauschen.

00:28:34: Das Hintergrund Bild kann nicht als dynamisches Element festlegen,

00:28:37: d.h.,

00:28:38: ich kann diese Komponente nicht verwenden.

00:28:40: Das wird zwangsläufig in den nächsten Versionen kommen von der Elementor, aber da schon mal die kurze Warnung, so richtig Enterprise Ready um wieder Bustworlds reinzubringen, also so richtig Production Ready ist ein Vier nicht hundertprozentig!

00:28:55: Jetzt muss ich hingehen, kann die Komponente zwar auch verwenden und habe mir eine Komponenten gemacht.

00:28:59: Und macht dann aber rechte Maustaste auf die Kmponente und kann die quasi ja ich weiß gar nicht wie man es nennt, aber entkoppeln... ...und dann baut sie sich quasi wieder in ihre Einzelteile auf ist nicht mehr abhängig von den anderen Kompontenten.

00:29:10: Und da kann ich das Hintergrundbild natürlich anpassen.. ..aber in dem Moment wo ich jetzt sage die Überschrift des anderen Positionn würde das nicht auf allen Seiten so angepasst werden Es sei denn ich nehme da wieder dann Klassen und sag dann irgendwie Heading, Spacing oder was und das passt sich dann wieder global an.

00:29:25: Aber das ist natürlich nicht der Sinn dieser Komponenten eigentlich, die ich dann einmal anlegen will und überall bearbeiten will.

00:29:30: also da steckt er schon noch ein bisschen in Kinderschuhen um wo es auch nicht gut funktioniert ist wenn man verschachtelte Elemente hat.

00:29:35: Ich hatte jetzt den Fall dass ich zum Beispiel einen Tab in einem Accordion also einen Accordions Inhalt.

00:29:41: Das wollte ich als Komponente machen, weil... ...ich da die Überschrift von diesem Tab Stylen wollte.

00:29:46: Ich wollte dem ganz nahezu einen einheitlichen Look geben und dann hätte ich natürlich gerne diesen Tab als Kmponente gemacht.

00:29:53: Und innerhalb dieser Komponenten muss ich aber wieder weitere Kompontent verwenden und das funktioniert halt in der aktuellen Version auch nicht.

00:29:58: Ich könnte dann zwar sagen, ich kann den Tab Titel bearbeiten und so und ich kann auch Links bearbeiten Aber ich kann es nicht sagen wenn ich darin zum Beispiel noch ein weiteres Element habe dass sich das auch ... dynamisch nach außen exposen kann, dass der Kunde das selbst bearbeiten kann.

00:30:10: Und da hast du auch wieder das Problem.

00:30:12: dann würdest du die Komponente reinladen... Würdest du sie wieder entkoppeln?

00:30:15: Hättest dann die gleiche Optik.

00:30:17: aber wenn es dann zentral bearbeitet ist, hast du es halt nicht überall.

00:30:19: und das sind so die Sachen wo ich sage Ich würde glaube jetzt stand jetzt sagen, ich würde trotzdem Elementor-Besong IV verwenden.

00:30:27: Aber man muss sich schon noch mit ein paar Kinderkrankheiten abfinden.

00:30:29: also ganz klar.

00:30:30: Und dazu gehen auch so Sachen Wenn ich den Elementor Editor lade so alle drei vier Male verliete einfach meine Styles Da muss ich neu laden, dann sind die Styles wieder da.

00:30:39: Aber das sind so ganz klar... Ich weiß gar nicht ob das jetzt noch Alpha ist.

00:30:43: also wer so viel hört sich einigermaßen fertig an aber es sind schon Sachen die mich sehr ärgern.

00:30:47: oder?

00:30:47: ich hatte jetzt als ich die Website wo ich jetzt aktiv dran war gerade geladen habe hat er mir einfach die ganze Startseite die ganzen Spacings zerschossen und hab' ich das in Elementor aufgemacht und da sah's aber super aus!

00:30:57: Dann habe ich einen Text verändert, hab' dann Punkt weg gemacht, hab das nochmal gespeichert und dann sah´s wieder gut aus.

00:31:02: Und da sind natürlich Sachen die willst du eigentlich nach Produktivumgebung nicht haben und deswegen da auf jeden Fall Vorsicht geboten.

00:31:07: Und wenn ich es irgendwie herauszögern könnte, da noch ein Monat zu warten Elementor zu verwenden bin ich mir ziemlich sicher dass die vier machen.

00:31:12: weil ich habe eben auch schon gesagt Version Vier Eins ist jetzt rausgekommen und da haben wir nicht nur das Klassenehmet auf tausend erhöht was jetzt gar nicht so wahnsinnig in meinem Sinne ist oder was sich zumindest nicht brauchen würde.

00:31:22: vorher konnte Ich immer wenn ich eine klasse bearbeiten wollte musste ich eine Klasse erstellen und konnte dann in der Klasse sagen ich will die Klasse bearbeitet oder Wenn ich eine Variable gemacht habe es gibt also globale variablen musste ich die Variable irgendwo einsetzen und konnte dann darüber in dieses variablen Menü gehen.

00:31:37: Aber das ist natürlich von der UI total sinnlos, jetzt gibt es oben einen Button Design System.

00:31:42: da kann ich draufklicken, da kann man globalen Klassen und Variabilien sehen und kann ja auch bearbeiten und kann dann zum Beispiel sehen was du kallas ich habe usw.

00:31:50: Das macht natürlich total Sinn.

00:31:51: also da ist vier Punkte.

00:31:52: eins schon mal deutlich komfortabler geworden und man merkt so langsam versuchen diese Kinderkrankheiten rauszumachen.

00:31:59: Ich bin immer ein großer Fan von der Abstraktion, das klingt zumindest so Als wären sie mit der Abstraktion auf dem richtigen Weg und die Sachen, die du jetzt beschrieben hast sind dann mehr so Kinderkrankheiten.

00:32:08: Die dann auch mit Nutzer Feedback gelöst werden können?

00:32:11: Ja, jetzt würde ich gerne so vielleicht sogar den Kernpunkt nochmal kommen.

00:32:15: Und das ist genau dieses System mit den Klassen.

00:32:18: Jetzt ist es für mich als DNA, der die Website erstellt.

00:32:21: Ist das natürlich intuitiv!

00:32:23: Ich erstelle mir selbst meine Klassen... ...ich mache zum Beispiel einen Spacing Small oder ich mache einen Front-Size Large Und ich weiß einerseits, dass es diese Klassen gibt.

00:32:30: Ich weiß auch wo ich die verwenden kann und ich weiß auch, wo ich sie schon verwendet hab.

00:32:34: Denn wenn ich jetzt eine Klasse verinne, muss ich damit rechnen, die verändert sich an mehreren Stellen.

00:32:38: Wenn du sagst so ne Klasse machen, dann meinst du das nicht irgendwie mit einem CSS-Block wie man das meint?

00:32:43: Mit ihr Punktklasse geschreift der Klammer auf und hat irgendwelche Regeln.

00:32:45: Sondern ich stelle mir da wirklich einen UI-Editor vor, wo man irgendwelchen Inputs durch die Gegenschubst.

00:32:52: Ja genau, ich habe auf diesen Atomic Elementen oben so eine Art Textzeile ... Ja, sieht aus wie so Text vergeben kann.

00:32:59: Das sind eben diese Klassen und da kann ich eine beliebige Klasse jetzt reintippen.

00:33:02: Und wenn nicht die Klasse aktiviert habe also wenn die markiert ist dann kann ich über diesen Editor die ganzen Styles festlegen.

00:33:09: Also dann könnte ich da eine Textfarbe festlegen, eine Textgröße in Spacing usw.

00:33:13: Und alles was ich mache, wenn diese Klasse markiert isst wird automatisch in dieser Klasse gespeichert.

00:33:18: Und ich kann auch lokale Styles fest legen.

00:33:21: Die lokale Klasse ist immer automatisch mit Vergeben in den Elementen Und ich kann aber auch in diesen Klassen eben was bearbeiten.

00:33:28: Muss sich dann, wenn ich das Styles festlege trotzdem CSS können dass ich sage okay... Ich muss jetzt wissen welche Property ich mit welchem Wert belege weil das ja für Nicht-Programmierer meistens sehr kryptisch ist was da passiert.

00:33:39: oder gibt es da irgendwelche Tools um das zu vereinfachen?

00:33:42: Ja genau das ist über dieses Styles Panel von Elementor klickst du dir quasi die Eigenschaft zusammen also im Border Radius oder so gibst du dann da ein oder einen Spacing.

00:33:50: Also da sagst du dann im Prinzip Schriftart gleich Areal, ohne dass du wissen musst wie das jetzt in CSS unter der Haube aussieht.

00:33:55: Ja

00:33:56: bzw.,

00:33:56: du wählst dann einfach aus der Liste der Schriftenareale aus und so ist es dann übrigens auch einer der riesen Nachteile weil das ganz schnell passiert, dass man eine Klasse markiert hat.

00:34:06: also ich sage mal ich habe jetzt irgendwie ne klasse Box Shadow wo ich jetzt irgendwie einen Box Shadow vergeben will.

00:34:11: Und jetzt merke ich, die Komponente braucht aber noch ein Spacing und macht da noch nen Padding rein Hab aber nicht gemerkt, dass ich jetzt gerade auf der Klasse bin.

00:34:17: Das heißt in meinem Editor sieht es natürlich super aus weil das Spacing da ist.

00:34:20: Dass ich aber auch an der Startseite allen Elementen die Box Shadow haben jetzt auf einmal ein Spacing gegeben habe.

00:34:25: Das merke ich dann erst drei Klicks später.

00:34:27: oder wenn ich Startseiter das nächste mal aufrufe und das ist wirklich so eine der riesen Riesen-Downsites... Ich hab mir bestimmt schon zwanzig dreißig Mal die Seite zerschossen und dann ist irgendwie im Futter was auseinandergeflogen oder so, weil ich aus Versehen auf irgendeine blöde Klasse was drauf gepackt hat, was eigentlich in den lokalen Style sollte oder vielleicht sogar in einer eigenen Klasse?

00:34:45: und da muss man sich sehr dran gewöhnen.

00:34:48: Und das ist natürlich was auch, was dir ein Kunde super gut zerschießen kann.

00:34:51: wenn der Elementor grundsätzlich kennt und sagt ah ich brauche jetzt hier aber bei der Überschrift vielleicht eine andere Farbe macht das auf eine spezielle Klasse.

00:34:58: und jetzt haben alle Elemente die eigentlich einen Padding haben sollen haben wir jetzt auf einmal eine Textfarbe bekommen und es hat bestenfalls Auswirkungen auf Seiten die ich nicht direkt auf den ersten Blick sehe.

00:35:06: dann fliegt ihr natürlich die Seite fröhlich auseinander.

00:35:10: Das ist beim Programmieren ja immer das Problem, dass du entweder ultimative Flexibilität hast und alles machen kannst was du möchtest.

00:35:16: Und dann ist die Chance fantastisch groß, dass durch ein falsches Semi-Colon irgendwo die ganze Webseite zerschießt oder andererseits, dass so viele Restriktionen wie möglich auferlegst damit so wenig wie möglich schiefgehen kann.

00:35:27: Dann beschwert man sich bei jeder Aktion warum das denn nicht geht?

00:35:30: Ich glaube da den Mittelweg zu finden zwischen wir als Entwickler, erfahrener Entwickler diese auch mit CSS und sowas auskennen können genau das umsetzen was sie sich vorstellen muss abgebildet werden, genauso wie auf der anderen Seite Menschen aus der Buchhaltung die noch nie eine Zeile HTML gesehen haben müssen aber trotzdem das Impressum ändern können.

00:35:49: Stelle ich mir auch unglaublich schwierig vor das konzeptionell zu ändern.

00:35:51: also vielleicht wirklich sowas über das Rollensystem.

00:35:54: dass man sagt basierend auf unterschiedlichen Nutzerrollen schaltet man unterschiedliche Sachen in dem Editor frei könnte ich mir gut vorstellen aber ansonsten ist einfach schwerer grad von dem mich auch ausgestanden nicht.

00:36:04: weiß jemand ihn auflösen soll?

00:36:05: Ja, ein Riesenproblem ist natürlich auch dass du keine so richtige Revision hast innerhalb dieser Klassen.

00:36:09: Also da bin ich wenn sie sicher bin ich auf Zuschriften von unseren Hörern und höheren gespannt.

00:36:15: aber soweit ich das sehe gibt es keine Variante jetzt zu sehen.

00:36:19: Ich habe jetzt auf einer bestimmten Klasse eine Eigenschaft hinzugefügt oder weggemacht.

00:36:23: also ich hab ja in WordPress schon generell die revisionen Und auch im Elementor können das.

00:36:28: Aber ich kann glaube ich schlecht nachvollziehen dass sich jetzt in der bestimmten klasse was verändert hat und warum wir jetzt die seite auseinander geflogen ist.

00:36:32: muss ich dann eben Ja, schon relativ aufwendig dann auseinander dröseln?

00:36:37: und ja also das ist schon kompliziert muss man sich mal mindestens dran gewöhnen.

00:36:42: Und eine riesen problem was diese klassen mitbringen.

00:36:44: da wollte ich vor ein paar minuten schon drauf hinaus.

00:36:47: Ich weiß jetzt welche klassen es gibt und ich weiß auch wo ich die verwenden kann und ich weiss auch wo ihr die verwendet habt.

00:36:51: das heißt aber längst nicht dass der kunde oder auch ein kollege oder eine kollegin das weiß.

00:36:55: das heißt Ich hab jetzt vielleicht eine schöne Klasse, die jetzt Padding Small heißt.

00:36:58: Ich sag das die ganze Zeit immer, ich bin gar nicht so Fan von diesem Small Large und so, weil wenn ich dann Small gemacht habe, dann brauch ich noch was kleineres, da mach ich X-Small... Und wenn ich da noch etwas kleinere brauche, dann stehe ich auf dem Schlauch ne?

00:37:06: Supersmall!

00:37:07: Deswegen gebe ich eher so, also ich mache grundsätzlich REM Werte in diesen Paddings und dann mache ich zum Beispiel Padding II und dann weiß ich dass es zwei REM.

00:37:15: Da finde ich, da kann jeder was mit anfangen.

00:37:18: Wenn ich da eine kleine Woche mache, mach ich ja Padding I und dann bin ich ein bisschen flexibler darin.

00:37:23: aber das ist eine andere Geschichte.

00:37:25: Da hat bestimmt jeder aus ein bisschen seinen eigenen Ansatz.

00:37:27: Aber das Problem ist, wenn du jetzt hingehst, dann weißt du nicht, dass es eine Padding Small-Klasse gibt?

00:37:31: Du könntest natürlich die Liste der ganzen Klassen durchgehen und legst dir vielleicht deine eigene Klasse an.

00:37:39: Dann wird das so einen Boost.

00:37:41: Und dann funktioniert's eben nicht mehr so schön wie man sich das vorher vorgestellt hat.

00:37:45: Dann fliegt dieses System auseinander.

00:37:47: Elementor will eigentlich ein Drag and Drop Editor sein.

00:37:49: Das heißt ich gucke mir die Seite an... ...und ich kann intuitiv jedes Element steilen, so wie ich das will.

00:37:54: Ich kann aber nicht intuitiv Klassen vergeben, weil ich gar nicht weiß welches gibt und das kann sogar ich selbst sein der in einem halben Jahr hingeht.

00:38:00: Und ich weiß ja nicht mehr welche Klasse ich da alle vergeben habe es sei denn ich hab jetzt auf allen Webseiten das gleiche Design System oder dass irgendwie wahnsinnig gut dokumentiert.

00:38:07: Und das vielleicht auch so.

00:38:08: der Tipp den ich raus geben würde macht euch wirklich vorhin Gedanken wie wollt ihr das Design System in Elementor für diese Seite aufbauen?

00:38:15: Und bestenfalls ist es irgendwie dokumentiert und gut verwendbar und dann wird man da auch zu ganz guten Ergebnissen kommen.

00:38:22: Aber Ja Also ich, der alleine an der Seite arbeitet kommt damit zu supergeilen Ergebnissen so im Team.

00:38:28: Habe ich da noch ein paar Fragezeichen dahinter?

00:38:29: Aber das klingt doch fast so als müsste man bei einer neuen Seite sich wie du es gesagt hast gescheites Design Konzept überlegen und dann eben diese modularen Bausteine anlegen dass Du sagst okay ich leg jetzt hier so Button an und überall auf der Seite soll dieser Button verwendet werden aber dann spart man sich eigentlich dieses ganze Custom Styling und CSS Klassen Gedöns und gibt nur diesen Button raus.

00:38:51: Und wenn du da dran was änderst, kannst du halt an der zentralen Stelle den Button verändern?

00:38:55: Genau das würde jetzt funktionieren wir diese Komponenten schon so gut funktionieren würden wie man sich vorstellt.

00:39:00: Das ist jetzt immer noch nicht so richtig.

00:39:02: Aber das sind natürlich die Idee die ich auch habe mit der Seite in der ich jetzt aktuell arbeite dass ich nicht nur einzelne Komponente baue sondern ganze Webseiten Templates auch.

00:39:09: also ich hab zum Beispiel immer so Seiten, die jetzt vorgeschaltet sind vor bestimmten Contents.

00:39:14: Also in dem Fall sind es dann Sportarten und dann habe ich diese Sportart Seite, die einen bestimmten Aufbau hat.

00:39:19: da sind wiederum Komponenten drin Und wenn ich jetzt eine neue Sportart anlege Dann kann ich dieses Template wieder verwenden und muss letztlich nur die Inhalte bearbeiten.

00:39:26: Das ist genau natürlich die Idee Wo man auch hin will und wo dann hinterher nicht jemand noch groß steilen muss oder customisen muss.

00:39:33: das ist genau der Ansatz den Ich dann auch hier fahren will und wohin man wahrscheinlich hinkommen will.

00:39:37: in dem Moment wo ich aber ne neue Optik ... eine neuen Typseite entwickeln will, muss ich mich natürlich schon damit auskennen.

00:39:43: Was ist da vorher auch vorgelegt von einem anderen Entwickler?

00:39:46: Das schreit ja geradezu danach, dass wir uns in einem halben Jahr zu dem... ...Vier-Punkt-Fünf-Update nochmal zusammensetzen und dann noch mal so ein kleines Recap machen was jetzt von deinen Schmerzpunkten gelöst wurde oder wie sich jetzt sowas auch mal in der Produktion bewahrheitet hat mit vielen Leuten, die darauf umtouren.

00:40:02: Total!

00:40:03: Ja und vielleicht noch abschließend zu diesen Klassenkonstellationen, was ich da als Empfehlung rausgeben würde Ich finde, es macht total Sinn sich bestimmte Klassen zu machen.

00:40:13: Also ich habe so eine Boxklasse die sorgt dafür dass die Breite von dem Inhalt in einem Container auf neunundsechzig Pixel begrenzt ist und sich auch in gewisser Weise responsive verhält.

00:40:22: Und so eine Klasse auf ganz viele Elemente anzuwenden mache natürlich total Sinn.

00:40:25: wenn ich jetzt hinterher hingehen will und sage die Websites soll tausend zwonner Pixel sein kann ich das easy anpassen in dieser klasse mega!

00:40:32: Ich würde aber nicht hingehen uns zum Beispiel jetzt sagen Dass ich jetzt, ich sag mal vielleicht Schriftgröße könnte man sogar auch noch feiernheitlichen.

00:40:41: Aber ein Padding zum Beispiel.

00:40:42: Also es gibt ganz viele Klassen wo ich sage das macht viel mehr Sinn die in der Komponente weiterhin mit den Elemente-Elementen zu bearbeiten oder eine Hinterumdreh festzulegen.

00:40:51: und so dass will ich nicht über ne Klasse machen sondern das will ich weiter über diesen Click-Editor machen.

00:40:55: Das heißt da ich weiß nicht ob man so ganze hinterher kommt aber mein Ansatz ist Ich gebe ner Komponent bestimmt fünf oder sechs Klassen schon Mal.

00:41:02: Und dann mache ich aber auch relativviel in diesem klassischen Style Tab von Elementor, nämlich die Sachen, die individuell sind.

00:41:09: Weil ich will nicht für jede individuelle Eigenschaft eine Klasse haben und ich will nichts Text-Kalablu machen sondern ich kann ja einfach die blaue Farbe auswählen, die sowieso mein Globalen Styles habe so und dann weiß ich nicht warum solche für ne Klasse verwenden und nicht diesen schönen Editor verwenden der sowieso da ist und er auch weiterhin funktioniert.

00:41:26: Und ich glaube so dieser Mix aus beiden Welten ist eigentlich geil.

00:41:29: alles was sich global mit einem ... schnellen Befehl anpassen will, das macht natürlich Sinn als Klasse zu machen.

00:41:36: Und alles was relativ individuell für das Element ist... ...das kann ich eigentlich auch weiterhin über diese Elementorfunktion dann weiterhens sein wie ich das bisher auch gemacht habe mit dem Vorteil,... ...dass sich zum Beispiel so globalen Variablen für Farben oder Schriftgrößen verwenden kann.

00:41:48: Oder ich hab z.B.

00:41:49: eine Variable für so ein Standardspacing und dann packe da eher einen Default-Spacing auf den Top Wert.... ....als dass ich jetzt sage Default Spaceng Top als Klassel.

00:41:58: So, das fühlt sich für mich irgendwie intuitiv an!

00:42:01: Ja.

00:42:02: Felix, würdest du dir jetzt sagen ist für neue Seiten Elementor IV immer das Go-Tour wenn wir was Neues anlegen?

00:42:06: Oder gibt es doch noch Szenarien wo du sagst Boah, Elementor III gehen wir nochmal zurück oder vielleicht sogar Enfold oder ganz etwas anderes?

00:42:13: Wir haben natürlich zwei Systeme die ihre Nachteile haben also ElementorIII mit allen Nachteilen die glaube ich jeder kennt der Elementor mal verwendet hat und ElementorIV mit mindestens den Nachteilern die ich gerade genannt habe und da kommen sicherlich ein paar dazu.

00:42:27: Ich würde hingen und sagen Elementor IV ist wahrscheinlich der richtige Ansatz.

00:42:31: Aber wie ich das eben schon gesagt habe, wenn man doch irgendwie herauszögern kann, dass man noch die eine oder andere Version abwarten kann... Also im Moment hat man das Gefühl jede Version macht richtig Impact und macht den Ease schon mal viel besser.

00:42:43: Also so ein bisschen unter Vorbehalt ne?

00:42:44: Okay!

00:42:45: Das gehen auch ganz positiv ins Gesamt.

00:42:46: Genau.

00:42:47: Jetzt sind wir noch gar nicht auf die AI-Features eingegangen.

00:42:50: Ich

00:42:51: glaube, das jetzt breit auszutreten ist ein bisschen zu viel verlangt und sprengt hier dem Podcast.

00:42:56: Aber vielleicht gehe ich eben eine Minute darauf ein, werden bisher immer die Elementor AI so hieß das?

00:43:00: War auch ein zusätzlich bezahltes Feature.

00:43:02: Haben wir übrigens auch noch nicht gesagt während Enfold ja einen einmalig, neunfünfzig Dollar sind das glaube ich ist.

00:43:07: Oh!

00:43:07: Ist Enfold ein Abo und dass wird dann jährlich gezahlt und gibt es verschiedene Pläne.

00:43:11: Und der ist auch nicht so ganz billig, das muss man nochmal vorweg schicken.

00:43:13: Gibt auf verschiebende Agentur-Lizenzen usw.

00:43:16: und sofort genau diese Elementor.

00:43:18: Ai war bisher auch immer im Zusätzliches Paket was man bezahlen musste.

00:43:22: Und jetzt gibt es ganz neu diese Angie, das ist halt die AI von Elementor.

00:43:26: Die aber nicht auf Elementor begrenzt ist sondern eigentlich seitenweit auch einzusetzen ist und so bisschen den WordPress eigenen Sachen und diesen Konnektoren so bisschen Konkurrenz macht.

00:43:35: Da habe ich wirklich nur eine Viertelstunde dran rumgespielt und hab mir so ne Beispielkomponente machen lassen.

00:43:39: Auch wenn man sich das bei YouTube anguckt dann kriegen die da Wahnsinnsergebnis in kurzer Zeit.

00:43:45: Und ich hab jetzt eben schon über diesen Call-to-Action Bereich gesprochen, damit auf der vollen Seitenbereite mit so einem Vektor Pattern im Hintergrund Überschrift kleinen Textglock und Call to Action Button darunter.

00:43:56: Dann habe ich dieser Angie gesagt die im Moment zumindest testweise frei verfügbar ist.

00:44:00: Ich weiß nicht ob das dauerhaft so ist, glaube er nicht Aber zumindest kann man sie im Moment einfach ausprobieren.

00:44:04: Dazu muss man sagen, ich habe diesen Elementor pro Plan Kann auch sein dass es damit zusammenhängt Und hab dann gesagt ja warum mir diese Komponente?

00:44:10: Hab das ein Jahrmassen einfach beschrieben Um, man muss sagen, rein optisch ist wirklich ziemlich exakt das rausgekommen was ich mir vorgestellt habe.

00:44:18: Und da wollte ich in diese Komponente reingehen und wollte noch ein bisschen Spacings anpassen und wollte Texte anpassen usw.

00:44:23: Und hab dann gemerkt, Texte am passen, Links abpassen und so kann nicht.

00:44:26: So ähnlich wie diese Atomic-Components die wir jetzt neu im Elementor haben.

00:44:30: Aber ich komme nicht zum Beispiel an Spacing dran.

00:44:31: Kann ich nichts teilen?

00:44:33: Keine Chance.

00:44:33: also ich könnte jetzt nicht sagen der Button soll ein bisschen Erabstand nach oben haben.

00:44:36: Dann habe ich natürlich versucht herauszufinden was macht Angie überhaupt.

00:44:40: Das ist auch wieder so'n bisschen Long Story Short.

00:44:42: Die liegt innerhalb von dem Aangie-Menüpunkt, den man ganz normal im WordPress findet.

00:44:46: Gibt so ein Code Snippetbereich und da liegt die wirklich ... ja ich sag mal wie so eine Art Mini Pluck innen hinterlegt die wirklich PRP Dateien.

00:44:53: In meinem Fall zwei PRP-Dateien.

00:44:54: Eine Style Datei, eine CSS Datei auch separatlicht die wirklich an oder es war irre viel Code darin.

00:45:01: Da merkst du schon?

00:45:01: Ich bin dann nicht so irre vom Begeistert weil das eigentlich eine Komponente wäre, die ich mir in Elementor jetzt zusammenbauen würde als Komponente mehr speichern würde wiederverwenden würde und eben gerade keinen Custom Code hab' und die Klassen wieder verwenden kann, die ich habe usw.

00:45:15: Und was Angie jetzt gemacht hat ist sie hat wirklich komplett Custom CSS, komplett Custom PHP... ...und hat die Felder wirklich auch über PHP dann in Elementor Expose also quasi wie ich jetzt in Elemento drei eine eigene Komponente machen würde.

00:45:27: wenn ich einen Plug-in anbiete und dafür eine Komponente machen würde Dann würde ich das eben genauso machen Ist aber für mich hier Absolut der falsche Weg, also führt am Ende zu einem okayen Ergebnis.

00:45:38: Ich könnte natürlich Angie jetzt auch sagen ich will das Spacing auf dem Button haben.

00:45:40: Wenn wir ein bisschen mehr Abstand haben dann würde die das auch machen, Custom im CSS.

00:45:44: Aber

00:45:44: jetzt ist ja gar kein Elementor für gebraucht!

00:45:45: Das ist ja komplett von außen an das System rangeflanscht?

00:45:48: Genau von außendrang geflansht und nur als Elementor in den Elementor... Und wenn ich jetzt die Klasse in meinen Primary-Button veränder, dann verändern natürlich diese Komponente nicht.

00:45:57: Weil die Klasse da nicht verwendet wurde.

00:45:59: Nicht mehr das?

00:45:59: Jetzt kann ich hingehen und AG sagen sie soll diese Klasse verwenden aber du merkst schon, da dreht man sich im Kreis.

00:46:04: irgendwie ist es nicht so das Richtige.

00:46:06: Das hatte ich ja eingangs schon ein bisschen gesagt.

00:46:07: Ich bin mit diesen AI Funktionen einerseits total begeistert dass man sich zum Beispiel mal eben ganz schnell ein bisschen Testeinträge reinballern kann.

00:46:16: Bereich zum Beispiel, und da habe ich mir ganz schnell mal eben ein paar Testimonials reingepackt.

00:46:20: Ohne dass sie da selbst groß drüber nachdenken musste.

00:46:21: das war mega.

00:46:23: aber für diese richtigen Coding- und Stylingaufgaben also genügendes meinen Ansprüchen nicht.

00:46:29: Okay!

00:46:30: Das ist doch ein schönes Fazit.

00:46:31: keine AI machen lieber die Agentur bezahlen.

00:46:34: Ich finde damit können wir es auch belassen.

00:46:37: außer du hast jetzt noch die eine Sache wo du denkst boah... Ohne das über Elementor IV zu wissen, kann man den Podcast nicht beenden.

00:46:43: Auch ein fantastisch reißerischer Titel?

00:46:46: Ja ich glaube nicht!

00:46:47: Ich bin on fire und kann jetzt noch eine Stunde darüber erzählen.

00:46:50: Bin einerseits ganz begeistert auf der anderen Seite noch ein bisschen skeptisch.

00:46:54: aber ich glaub hier ist für so einen kleinen Wrap-up.

00:46:55: und für die Leute die mal mit WordPress und Elementor gearbeitet haben es ist schon ganz informativ und ich glaube da machen wir lieber nochmal Follow up.

00:47:01: Schreibst du mir jetzt auf Elementor Recap Dann kommt es nicht weg, dann machen wir auch mal die eine Sache von dem im Podcast.

00:47:08: immer sagen müssen wir noch mal drüber reden.

00:47:10: Aber spannend!

00:47:11: Also ich fand das alles sehr gut verfolgbar für mich der da an der Oberfläche mit zu tun hatte.

00:47:17: Ich bedanke mich bei den Menschen da draußen trotz des Wetters dass sie uns zugehört haben und wir machen jetzt Feierabend oder?

00:47:24: So machen was Kai, ich geh jetzt erstmal in Schwimmert.

00:47:26: Das klingt sehr gut Fantastisch.

00:47:28: Danke Felix Und danke liebe Menschen da draussen fürs Zuhören und bis zum nächsten Mal

00:47:34: Ciao, ciao.

00:47:34: Mach's gut!