„Dein Weg zum Online Business ist WordPress. Dein Navi ist WPC.“

Dynamische Inhalte Elementor CPT UI und ACF
WPC - Dein WordPress Blog

Dynamische Inhalte mit Elementor (CPT & ACF)

Video Tutorials Serie: Was sind dynamische Inhalte und wie werden diese in Elementor eingebunden?

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.

Elementor Meetup in München in der tollen Location "Heinrich Marketing"
Elementor Meetup in München in der tollen Location Heinrich Marketing

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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.

Kostenlose WordPress & Elementor Video Tutorials

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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. 🙂

5/5 - (1 vote)
Vielen Dank fürs Teilen dieser Seite

9 Antworten

  1. 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

  2. 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

    1. 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

  3. 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

    1. 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Related Posts

Ähnliche Beiträge