Elementor dynamische Inhalte

Dynamische Inhalte mit Elementor

tl;dr: Wer mit Elementor Pro arbeitet kann an vielen Stellen mit dynamischen Inhalten den Aufbau der Seiten vereinfachen. Welche Möglichkeiten dynamische Inhalte bieten behandelt dieser Beitrag,

Was sind Dynamische Inhalte? Ein Beispiel.

Nehmen wir an, wir wollen im Footer einer Website einen Copyright-Hinweis unterbringen. Und zwar inklusive Angabe von Jahreszahlen, also in der Art:

© 2009 - 2020 Cyberform. Alle Rechte vorbehalten.

Jetzt wollen wir natürlich, dass im Jahr 2021 auch genau das, also 2021, in der Zeile auftaucht. Die Lösung: wir müssen statt der Jahreszahl einen Dynamischen Inhalt einbinden. Das funktioniert so: 

  1. Anlegen eines Footers im Theme Builder des Elementor (aus der Bibliothek auswählen oder selber gestalten).
  2. Das Textfeld im Footer auswählen
  3. Rechts oben auf Dynamische Attribute klicken
  4. Aus der Liste Aktuelles Datum und Uhrzeit auswählen
  5. Auf Einstellungen (Icon) links neben Aktuzelles Datumsformat klicken
  6. Datmsformat Benutzerdefiniert auswählen
  7. Benutzerdefiniertes Format „ “ eingeben, ohne Anführungszeichen also LeerzeichenYLeerzeichen
  8. Den Tab Erweitert öffnen. Dort bei Vorher 2009 – und bei Nachher Cyberform. Alle Rechte vorbehalten. eingeben.
  9. Speichern. Ergebnis kontrollieren.
dynamischer Inhalt eingebunden mit Elementor
Im Textwidget wird nun der dynamische Inhalt angezeigt. Die Jahreszahl bleibt immer aktuell.

Womit wir das Prinzip der Dynamischen Inhalte / Dynamischen Attribute beispielsweise ausprobiert hätten. Wie man bei der Auswahl aus der Liste bereits ersehen konnte: die Möglichkeiten sind sehr breit gefächert und gehen weit über Textfelder hinaus. Man kann ganz schön viel Dynamik in den Inhalt einer Seite bringen.

Welche Dynamischen Inhalte (Dynamic Tags) gibt es?

Nicht alle dynamischen Tags sind für alle dynamischen Inhaltsfelder verfügbar. In der Dropdown-Auswahlliste eines Felds werden nur die entsprechenden Tags als Optionen aufgeführt, die auch möglich sind.

Anmerkung: ich habe hier versucht, die aktuellen deutschen Begriffe neben die englischen zu setzen. Nicht immer sind die deutschen Übersetzungen konsistent und eindeutig, in diesem Bereich kommt es oft zu Updates.

Beiträge / Post

Post Benutzerdefiniertes FeldPost Custom Field – Auswahl aus jedem möglichen angelegten Feld, das man für den aktuellen Post erstellt hat.  Mehr über eigene Felder im Elementor hier.
Post Datum / Post Date – Datum des aktuellen Posts
Post Ausschnitt / Post Excerpt – Textauszug des aktuellen Posts
Post ID / Post ID – Die WordPress ID das aktuellen Posts
Post Bedingungen / Post Terms – Ausgwählte Taxonomien für den aktuellen Post (Kategorien, Schlagworte, etc)
Post Zeit / Post Time – Die Zeitangabe, zu der der Post erstellt wurde
Beitrags Titel / Post Title – Titel des aktuellen Posts
Post URL / Post URL –  Die URL des aktuellen Posts

Archive

Archiv Beschreibung / Archive Description – Die Beschreibung des aktuellen Archives
Archiv Meta / Archive Meta – Zeigt alle Infos zum Archiv abhängig vom Meta-Key
Archiv Titel / Archive Title – Titel des aktuellen Archives
Archiv URL / Archive URL – Die URL des aktuellen Archives

Mehr über Archive und Elementor gibt es hier.

 

Site 

Seiten Titel / Page Title – Titel der Seite oder des Beitrages
Website Tagline / Site Tagline – Untertitel der Website
Seitentitel / Site Title – Name der Website (des Blogs)
Aktuelles Datum und Uhrzeit / Current Date Time – Zeigt die Aktuelle Uhrzeit und/oder das Datum an – siehe Beispiel am Anfang des Artikels
Request Parameter / Request Parameter – Zeigt die Parameter an, die mittels GET, POST oder als Query-Variablen übergeben wurden
Shortcode / Shortcode – Hier lässt sich ein Shortcode eintragen, der ausserhalb von Elementor definiert wurde
User Info / User Info – Zeigt eine Info aus der Auswahl möglicher Userinformationen an, zB.  ID, Anzeigename, Username, Vorname, Nachname, Biographie, E-Mail, Website oder User Meta-Daten
Site URL / Site URL – Die URL der Webseite
Interne Verknüpfung URL / Internal URL – Zeigt die interne URL für einen Link, ausgehend von Inhalt, Taxonomy, Media, oder Autor

Actions

Lightbox / Lightbox – Öffnet bei Klick eine Lightbox
Kontakt URL  / Contact URL – Erzeugt einen Link für zb: Telefon, Whatsapp, Skype, Google Kalender, etc – Beispiele
Popup / Popup – Öffnet, schliesst oder toggett ein Popup das im Theme Builder erstellt wurde.

Media

Beitragsbild / Featured Image – Zeigt das Beitragsbild an, mit Fallback-Einstellung
Featured Image Data
  / Featured Image Data – Zeigt die Metadaten des Beitragsbildes an, auswählbar sind Titel, Alt, Überschrift, Beschreibung, File URL und Attachment URL

Autor / Author

Autor Informationen / Author Info – Zeigt Informationen über den Autor des aktuellen Beitrages, wählbar sind Biographie, E-Mail oder Webseite
Autor Meta / Author Meta – Zeigt Metadaten des Autors ein, der Schlüssel muss eingegeben werden (Land, Geburtsdatum)
Autorenname / Author Name – Zeigt desn Displayname des Autors an
Autor-Url / Author URL – Die URL des Autors, also der Archivaufruf aller Beiträge des Autors

Kommentare / Comments

Kommentarnummer (sic!) / Comments Number – Anzahl der Kommentare des aktuellen BeitragesThe number of comments for the current post
Kommentar-URL / Comments URL – Die URL zum Kommentarform für den aktuellen Beitrag

Woocommerce

Produktpreis / Product Price – Preis des aktuellen Produktes
Produktbewertung / Product Rating – Das Rating des aktuellen Produktes
Produktverkauf / Product Sale – Der Abverkaufstatus des aktuellen Produktes
Produkt Kurzbeschreibung / Product Short Description – Die Kurzbeschreibung des aktuellen Produktes 
Pro Product SKU – The SKU (Stock Keeping Unit) of the current product
Produkt auf Lager / Product Stock – The stock number of the current product
Produkt Begriffe / Product Terms – Schlagwörder und Kategorien des aktuellen Produktes
Produktname / Product Title – name des aktuellen produktes

Elementor Nachhilfe
Noch Fragen? Harry Martin hilft dir weiter. Auch einzelne Nachhilfestunden.
Nachhilfe

Beispiel: Dynamische Aktionen

Unser Ziel ist das Erstellen einer Zeile mit Links zu unterschiedlichen Kontaktmöglichkeiten zu erstellen. wo der Webbesucher sich eine Datei zuschicken lassen kann (also etwa ein eBook oder eine Preisliste, die nicht auf der Webseite frei zugänglich sein soll). In etwa so:

Beispiel

Hier kannst du die beschriebene Datei anfordern:

Wenn nun einer dieser Links geklickt wird übergibt der Browser die Informationen entsprechend weiter: auf meinem Rechner ist zB eingestellt, dass beim E-Mail-Link (über Chrome)  G-Mail geöffnet wird, bei SMS wird die Nachrichten-App geöffnet und der WhatsApp-Link will die App am Rechner öffnen.

Die Umsetzung funktioniert wie folgt:

  1. Eine Icon-Liste mit dem entsprechenden Widget erstellen
  2. Ausrichtung horizontal anklicken, die 3 Texte eingeben und passende Icons aussuchen
  3. Beim Link Attribut dynamisch anklicken, dort dann aus der Auswahlliste „Actions > Kontakt-URL“ wählen
Dynamische Attribute
  1. Je nach gewählter Option die E-Mail-Werte oder eben die Telefonnummer eingeben.

Google Kalender

Eine nette Sache ist auch die Kontakt-URL mit der Option Google-Kalender. Hier kann ich über die Optionsfelder einen Kalendereintrag vorbereiten, der dann in einen Google-Kalender übernommen werden kann.

Der Eintrag Kontakt-URL mit der Option Google-Kalender kann schnell zu einer Convertion führen.

Mehr Dynamik - Leere Elemente ausblenden

Recht bald wenn man sich mit dynamischen Inhalten beschäftigt taucht folgende Frage auf: Was mache ich, wenn ein dynamischer Inhalt nicht gefunden wird?

Elementor bietet keine logischen Optionen an, aber dafür gibt es zwei sehr gute kostenlose Plugins, die hier weiter helfen_

Dynamic Conditions von RTO. Dieses Plugin setzt die Pro-Version von Elementor voraus. Bei aktiviertem Plugin taucht im Tab Erweitert bei jedem Widget die Abteilung Dynamic Conditions auf. Die Arbeitsweise ist recht einfach: 

  1. Zuerst wählt man einen Dynamischen Tag aus, zB. Autor URL > Author Website.
  2. Im nächsten Schritt legt man fest, ob das Element gezeigt oder versteckt werden soll, wenn die Bedingung erfülllt wird.
  3. Danach wählt man die Bedinung, zB. is empty.

Die Abfrage kann also lauten: Gibt es einen Eintrag bei der Website-URL des Autors dieses Artikels? 

Wenn diese Abfrage nun bei einem Button gesetzt wird der den Link zur Author-URL einbindet macht das Sinn: der Button wird nur angezeigt, wenn auch wirklich ein Wert vorhanden ist!

Ein weiterer Anbieter dieser Funktionalität ist Dynamic Visibility for Elementor. Dieses Tool ermöglicht eine ganze Reihe von Abfragekriterien (Zeit, Datum, Benutzerberechtigung, etc.) und ist auf jeden Fall einen näheren Blick Wert, wenn es komplex wird.

 

Dynamic Conditions for Elementor
Das Plugin Dynamic Conditions ermöglicht das dynamische Ein- und Ausblenden von beliebigen Inhalten.

Fazit

Die dynamischen Tags sind besonders in Verbindung mit eigenen Post-Typen und/oder Feldern unumgänglich. Aber auch bei der Gestaltung von Archiven sind sie sehr hilfreich. Kleiner Anforderungen auf Single-Pages und Seiten lassen sich auch gut mit dynamischen Inhalten umsetzen.  

6 Antworten

  1. Servus Haary, ist es auch möglich dynamische Uhrzeiten für wechselnde Öffnungszeit über dem Header einzubauen? Zum Beispiel „Heute geöffnet von… bis…“?

    LG

  2. Hallo,
    ich würde gerne über die dynamischen Inhalte ein Video einbinden. Ist dies möglich? Scheiter momentan noch an der Umsetzung.
    viele Grüße
    Bernd

    1. Hallo Bernd,

      Möglichkeit 1: du hast beim Video-Widget das Link-Feld das die URL enthält. Dieses Feld kann dynamisch beschickt werden (Icon rechts davon). Vermutlich wirst einen eigenes Feld (ACF, Toolset oder Pods) mit Videolink im Post haben.

      Möglichkeit 2: das funktioniert auch bei einem Videohintergrund. Auch dort gibt es ein Feld „Videolink“ das dynamisch beschickt werden kann.

      Viel Erfolg!
      Harry

  3. Hallo,
    mir scheint der Weg über Tooltip am sinnvollsten. Hier gibt es eine nette Lösung: https://tooltips.org die auch (nach Selbstdefinition, ich habs nicht ausprobiert) Elementor unterstützt. Dieser Anbieter scheint die Idee der Tooltips ziemlich ausgereizt zu haben. Viel Erfolg dabei und Danke für dein Kommentar.

  4. Hi Werkform.at,

    ich hoffe Sie sind gut ins neue Jahr gestartet. Ich entwickle ein dynamisches Portfolio und möchte gern innerhalb eines „Loops“ beim hover auf einem dynamischen „Post Title“ das „Featured Image“ an der Position des Mauscursors anzeigen. Ich habe etliche Herangehensweisen gefunden, welche sich aber drastisch unterscheiden (Tooltip Workaround, jquery, und einige mehr) und Elementor nicht einbeziehen. Vielleicht haben Sie einen Tipp? Auch: Vielen Dank für ihre sehr gute Dokumentation der Elementorfunktionalitäten. Ich wünschte, ich hätte Sie früher entdeckt und nicht so lange rum experimentiert. Vielen Dank!

    Mit freundlichen Grüßen
    Robert Crahmer

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Post Datum:
24. September 2020
Post Ausschnitt:
Elementor Pro - dynamische Inhalte an verschiedenen Stellen einbinden. Vom ©-Datum bis zum WhatsApp-Link - So wird die Website dynamischer.
Post ID:
12917
Post Bedingungen (Kategorien):
Post Bedingungen (Schlagwörter):
Post Zeit:
13:46
Beitrag Titel
Dynamische Inhalte mit Elementor
Seiten Titel:
Dynamische Inhalte mit Elementor
Website Tagline
Qualified Web Solutions
Seitentitel (Name der Website)
werkform
Aktuelles Datum und Uhrzeit
25. September 2023 22:17
User Info (Vorname)
User Info (Nachname)
User Info (E-Mail)
Interne Verknüpfung URL
Datenschutz
, Inhaber: Ing. Harald Martin (Firmensitz: Österreich), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.
Datenschutz
, Inhaber: Ing. Harald Martin (Firmensitz: Österreich), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.