Dynamische Inhalte mit Elementor (CPT & ACF)

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.

Ja 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:

WordPress Online Kurs von WPC
Alles was du brauchst, um deine eigene WordPress Seite zu erstellen und das zu einem Top-Preis! (Werbung - Button enthält Gutschein-Link)

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.

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.

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.

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

Jetzt YouTube Channel 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.

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.

Noch mehr Elementor Tutorials?

Wenn du Lust auf weitere Elementor Tutorials von WPC hast, kannst du einen Blick auf meinen neuen 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. 🙂

NEU: Elementor Online Kurs von WPC
Hol dir jetzt knapp 40 Elementor Video Tutorials zu einem Top-Preis!
(Werbung - Button enthält Gutschein-Link)
BESTSELLER

Danijel

Hi, mein Name ist Danijel Rose, ich bin der Gründer von WebGeckos, WordPress Trainer und Berater aus Bad Tölz, südlich von München. Über meine WordPress Erfahrungen blogge ich hier auf WPC. Mit WordPress erstelle ich vor allem gerne hochwertige Firmenwebsites, Mitgliederseiten und WordPress Multisites.

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

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

Wir verwenden Cookies, um die Website für dich optimal zu gestalten und zu verbessern. Durch die weitere Nutzung der Website stimmst du der Verwendung von Cookies zu. Mehr Informationen findest du in der Datenschutzerklärung.