Bei unserem letzten Elementor Meetup in München haben wir das Thema „Dynamische Inhalte mit Elementor“ behandelt. Zusammen mit meinem Kollegen aus dem Meetup Organisationsteam Andreas Hartmann habe ich das Thema vor ca. 35 Teilnehmern vorgestellt. Da das Interesse zu diesem Thema in der Elementor Community sehr groß ist, habe ich eine Video Tutorials Reihe darüber aufgenommen und in diesem Beitrag zusammengefasst.
Statische Websites vs. Dynamische Websites
Was ist eigentlich der Unterschied zwischen statischen und dynamischen Webseiten? Statische Webseiten bestehen im wesentlichen aus HTML und CSS Code. Der Inhalt, der im Quellcode steht wird 1:1 im Browser wiedergegeben. Die statischen Seiten verwenden weder ein Content Management System (CMS) noch eine Datenbank. Im Gegensatz dazu, handelt es sich bei den meisten Seiten, die mit einem CMS erstellt wurden, um dynamische Webseiten. So auch bei WordPress.
Je nachdem welche Seite durch den Besucher aufgerufen wird, verwendet WordPress das entsprechende Template, um den Inhalt anzuzeigen. In diesem Template ist jedoch nicht der finale Inhalt enthalten, der den User interessiert, sondern weitere PHP Anweisungen und Unter-Templates (sog. Template Tags). Um mehr über dieses Thema zu erfahren, empfehle ich dir meinen Beitrag über WordPress Templates bearbeiten und verstehen. Durch diesen PHP Code werden die richtigen Inhalte gemäß dem Aufruf des Users aus der Datenbank geholt. Da WordPress für die Darstellung aller Seiten Templates verwendet, kann man sagen, dass in WordPress alle Inhalte dynamisch sind.
Was ist mit dynamischen Inhalten in Elementor gemeint?
Ich muss zugeben, der Titel des Elementor Meetups und damit auch der Titel der Video Serie ist nicht ganz glücklich gewählt worden. Denn wenn alle Inhalten in WordPress dynamisch sind, dann sind natürlich auch alle Inhalte in Elementor dynamisch. Was meinen wir also damit, wenn wir von dynamischen Inhalten in Elementor sprechen?
Wenn man mit Elementor eine Seite erstellt, positioniert man die ausgewählten Widgets auf der Seite und füllt diese mit Text, Bildern, Links etc. aus. Diese Art von Seiten haben ein gewisses statisches Verhalten, da sich ihr Inhalt nicht ändert, solange man den Content im Elementor Editor nicht anpasst. Das gleiche ist auch der Fall, wenn man mit dem WordPress Editor eine Seite erstellt.
Im Unterschied dazu, können wir mit Elementor Templates die Inhalte dynamischer gestalten. Wenn wir z. B. wie in der Videoreihe ein Elementor Single Template für einen Inhaltstyp (Post Type) erstellen, ist der final angezeigte Content abhängig davon, welche Einzelansicht des Inhaltstyps der User aufgerufen hat. Diese dynamischen Inhalte lassen sich in WordPress bequem mit weiteren Attributen wie Custom Fields oder Custom Taxonomies erweitern, wie in den Videos zu sehen ist.
Strukturierung von WordPress Inhalten
Bevor man sich mit dynamischen Inhalten in Elementor und allgemein in WordPress beschäftigt, ist es wichtig, sich Gedanken über die Strukturierung der WordPress Inhalte auf der eigenen Seite zu machen. Die richtigen Fragen dazu solltest du dir stellen, noch bevor du anfängst, deine WordPress Seite aufzusetzen.
In meinem WordPress Kurs findest du einen Abschnitt, der sich mit dem Thema Strukturierung und Klassifizierung von WordPress Inhalten beschäftigt:
Um dein Wissen über Custom Post Types (CPT), Custom Taxonomies und Custom Fields zu vertiefen, empfehle ich dir ebenfalls den WordPress Kurs. In der Video Reihe werden die Begriffe auch kurz erklärt.
Tutorials Serie: Dynamische Inhalte mit Elementor
Die Videoreihe besteht aus 5 Folgen und ist kostenlos auf YouTube verfügbar:
Teil 1: Elementor & Custom Post Types mit dem Plugin CPT UI
In diesem Video werden wir einen neuen Custom Post Type anlegen und eine einfache Portfolio Seite für unseren neuen CPT mit Hilfe des Portfolio Widgets von Elementor Pro erstellen. Während der Erstellung des CPTs werden wir auch gleichzeitig eine Archivseite anlegen, damit wir alle Inhalte des neuen Inhaltstyps gruppiert auf einer Seite anzeigen können. Am Ende des Videos zeige ich dir noch eine Funkton des CPT UI Plugins, welches das Plugin sehr sympathisch macht und warum ich das Plugin lieber verwende als beispielsweise das Pods Plugin.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Teil 2: Elementor Single Template erstellen
Wenn du mehr über die Vorlagen in Elementor erfahren möchtest, empfehle ich dir meinen Beitrag Elementor Templates. Der verlinkte Artikel zeigt auch, warum du das Single Template mit Bedacht einsetzen solltest.
In diesem Tutorial werden wir ein Single Template mit Elementor Pro erstellen und es unserem neuen Custom Post Type zuordnen. Das Single Template werden wir verwenden, um alle Inhalte unseres zuvor erstellten Inhaltstyps gleich darzustellen und in der Optik klar von anderen Inhaltstypen wie Beiträge oder Seiten zu trennen. In dem Single Template werden wir anschließend die ersten Inhalte des Custom Post Types anzeigen lassen. Bei den dynamischen Inhalten handelt es sich um Beitragsbild, Beitragstitel und Beitragsinhalt.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Teil 3: Elementor & Advanced Custom Fields mit dem Plugin ACF
Damit wir unseren Custom Post Type klassifizieren können, werden wir in diesem Video eigene Custom Fields mit dem Plugin Advanced Custom Fields (ACF) erstellen. Diese individuellen Felder werden wir dann ebenfalls in unserem Single Template einsetzen. Damit ergänzen wir die Inhalte des Custom Post Types um Unterscheidungsmerkmale wie Größe, Preis, Erscheinungsdatum etc.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Teil 4: Elementor & Custom Taxonomies
Es gibt Unterscheidungsmerkmale, für die lieber eine Custom Taxonomie als ein Custom Field verwendet werden sollte. Im folgenden ein paar Hinweise, die für eine Custom Taxonomie sprechen:
- Die Unterscheidungsmerkmale lassen sich in Bereiche zusammenfassen (z. B. Erscheinungsjahr anstelle des genauen Erscheinungsdatums)
- Die Unterscheidungsmerkmale besitzen nur wenige Werte
- Du benötigst für dieses Unterscheidungsmerkmal eine Archivseite
Wenn diese Bedingungen zutreffen, ist es sinnvoller eine Custom Taxonomie zu erstellen. Beim Gegenteil legst du lieber ein Custom Field für das Unterscheidungsmerkmal an.
YouTube Kanal von WPC abonnieren und keine Tutorials mehr verpassen!
Wir werden in dem Video zwei neue Custom Taxonomies erstellen und diese in unserem Single Template einspielen. Dabei zeige ich dir auch einen entscheidenden Unterschied zwischen hierarchischen und nicht hierarchischen Taxonomien. Du erfährst auch, warum es manchmal Sinn macht, eine hierarchische Taxonomie zu erstellen, obwohl du keine Hierarchie verwenden möchtest.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Teil 5: CSS Klassen dynamisch vergeben mit Elementor & ACF
Das ist wirklich ein Klasse-Tipp, den Andreas Hartmann mit der Elementor Community geteilt hat: CSS Klassen dynamisch vergeben! Du kannst jedem Element auf deiner Seite eine dynamische CSS Klasse zuordnen. Das Design ist somit abhängig vom aufgerufenen Inhalt und wird gemäß der definierten CSS Anweisung angepasst.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Noch mehr Elementor Tutorials?
Wenn du Lust auf weitere Elementor Tutorials von WPC hast, kannst du einen Blick auf meinen Elementor Kurs werfen. Dort erstelle ich u. a. eine Top-10 Elementor Seite Schritt-für-Schritt – großer Lernerfolg und eine Menge Spaß sind garantiert. 🙂
9 Antworten
Hallo Daniel, vielen Dank für die Tutorials.
Folgende Frage hat sich für mich ergeben. Kann man auch einen ganzen Block anhand eines AFC ausblenden / nicht anzeigen?
Sonnige Grüße aus Dresden
Lutz
Hallo Lutz,
vielen Dank für das nette Feedback! Ja, das ist möglich. Mit dem Plugin Dynamic Conditions (https://wordpress.org/plugins/dynamicconditions/) lässt sich eine Logik implementieren, mit der man auch ganze Blöcke und verschiedene Elemente auf der Webseite ausblenden kann.
Viele Grüße, Danijel
Hi Danijel,
wir haben uns gefunden … im Bild oben 😀
LG Andreas
Hi Andreas,
ja, die gute alte Zeit als wir uns noch offline bei Elementor Meetups treffen konnten 🙂
LG, Danijel
P.S. Hab ich erledigt 😉
Vielen Dank für den schnellen und einfachen Einblick der dynamischen Inhalte.
Bin gerade dran die Plugins zu installieren gehe mal einige Use Cases durch. Können die dynamischen Inhalte auch mit Bedingunge verknüpft werden?
Ausgangsalge : Du hast Produkt A und B . Produkt A hat 3 Eigenschaften, Produkt B hat 5 Eigenschaften. Beim Produkt A kennst du die Eigenschaft 4 und 5 noch nicht.
Nun machst du ein Textfeld und befüllst es mit den 5 dynamischen Elementen. Wird Produkt B aufgerufen, erscheinen alle 5 Elemente. Wird Produkt A aufgerufen, erscheinen die ersten drei Elemente, aber Elemente 4 und 5 bleiben leer und du als Besucher siehst dass hier noch zwei Infos nicht vorhanden sind.
Kannst du diesen ACFs eine IF Bedingung hinzufügen? Wenn Feld leer, dann nichts einfügen.
Cheers, Mariano
Hi Daniel, ich konnte mittlerweile zwei lösungen finden.
Lösung 1 geht über PHP. Für mich als Laie für den Moment nicht in Frage. Darum bin ich auf…
Lösung 2 ausgewichen. Ein Plugin Namens „Dynamic Conditions“. Nach der Installation, ist es in Elementor integriert, in der Registerkarte „Erweitert“. Dort kannst du auswählen ob unter welchen Bedingungen ein Feld angezeigt oder versteckt werden soll. Du kannst somit auch zwei oder mehrere Verknüpfungen zusammenschalten.
Cheers, Mariano
Hallo Mariano,
ja genau, mit dem Plugin „Dynamic Conditions“ (https://wordpress.org/plugins/dynamicconditions/) kann man die Anzeige der einzelnen Elemente steuern. Ein alternatives Plugin mit noch mehr Funktionen ist „Dynamic Visibility for Elementor“ (https://wordpress.org/plugins/dynamic-visibility-for-elementor/). Finde ich super, dass du die Lösung auch gleich hier gepostet hast. Vielen Dank dafür!
Schöne Grüße, Danijel
Hallo Danijel,
vielen dank für Deine tollen Tutorials. Ich habe eine Menge lernen können. Leider bekomme ich bei meinem Projekkt den letzten Schritt nicht hin. Ich habe eine Sammlung von Python-Anweisungen erstellt. Wenn ich dann eine Elementorseite erstelle in der alle Beiträge meines Typs in voller länge angezeigt werden sollen, zeigt sie mir die ACF nicht an, nur die Überschriften von WordPress. Kann es sein, dass ich dafür die kostenpflichtige Version von ACF benötige?
In der Vorschau für mein Single werden die Überschrift von WP und darunter (wie ich es angelegt habe) die ACF. Alles schön formatiert.
Vielen Dank nochmals für Deine Mühe und die vielen tollen Tuts
Peter Bark
Hallo Peter,
vielen Dank für das tolle Feedback. Es ist natürlich schwierig den Fehler remote zu finden. Ich nehme mal an, dass Du die Python-Anweisungen wirklich als Code darstellen möchtest. Bin mir gar nicht sicher, ob ACF das überhaupt kann. Welchen Field Typ verwendest Du dafür? Ich habe das zwar noch nicht ausprobiert aber ich hätte angenommen, dass man dafür Filter Hooks braucht, um den Code richtig im Frontend anzuzeigen.
Andere Frage: Brauchst Du überhaupt ACF für diesen Anwendungsfall? Wenn Du eh Elementor verwendest, gibt es tolle Addons, die durch ein Code-Widget den Code sehr stylisch im Frontend präsentieren.
Schöne Grüße, Danijel