In Elementor dynamische Attribute zu benutzen kann Ihnen viele Vorteile und dynamische Inhalte liefern. Wie sie funktionieren, erklären wir Ihnen.
Elementor bietet Ihnen eine Vielzahl an starken Funktionen, mit denen Sie die Inhalte Ihrer Webseite dynamisch ausliefern können.
Eine dieser Funktionen sind die dynamischen Attribute. Was das genau ist, wie Sie sie benutzen und welche Vorteile sie bringen, erklären wir Ihnen in diesem Artikel.
Was sind in Elementor dynamische Attribute?
Stellen Sie sich vor, Sie haben ein Template in Elementor erstellt, in dem Beiträge angezeigt werden. Beispielsweise ein Template für Blog-Beiträge. Nun haben Sie in diesem Template ein Text-Widget, in dem Sie jeweils den Titel des Blog-Beitrags ausgeben wollen.
Möchten Sie dies manuell machen, müssten Sie den Inhalt dieses Widgets für jeden Beitrag anpassen und eingeben. Dies ist nicht nur sehr umständlich und fehleranfällig, sondern kostet zudem noch jede Menge Zeit.
Genau dafür können Sie auf die dynamischen Attribute in Elementor zurückgreifen. Hierbei können Sie aus eine schier unendliche Menge an Attributen auswählen, um diese in allen möglichen Widgets in Elementor anzeigen zu lassen.
Hierzu zählen beispielsweise Infos über den oder die Verfasser:in des Beitrags, Daten des Beitrags, Informationen zur URL des Beitrags oder sogar Inhalte von Feldern, die Sie mittels Advanced Custom Fields in Ihre Webseite eingebunden haben.
Der Name „dynamische Attribute“ leitet sich davon ab, dass diese Attribute eben nicht von Ihnen manuell, sondern dynamisch von Ihrer Webseite eingetragen werden.
Welche Vorteile bringen dynamische Attribute?
Dynamische Werte in Loops: Ein großer Vorteil in der Nutzung dieser Attribute ist die Dynamik. Sie ersparen sich eine Menge Arbeit, wenn Sie bestimmte Eigenschaften von Widgets automatisch befüllen lassen können, ohne diese Arbeit selbst manuell übernehmen zu müssen.
Sie können beispielsweise ein Template für das Loop Grid in Elementor erstellen und hier verschiedene Beiträge oder Produkte auf Ihrer Startseite anzeigen lassen. Innerhalb des Templates könnten Sie das Bild des Beitrags oder des Produkts sowie den Titel einbinden. Mithilfe der dynamischen Attribute können Sie die entsprechenden Widgets mit Daten füllen.
Ein Beispiel dafür, wie Sie das realisieren, haben wir am Ende des Artikels bei den Beispielen erstellt, sodass Sie dieses Szenario selbst einmal anwenden können.
Inhalte leichter ändern: Ein weiterer Vorteil besteht darin, dass Sie Inhalte an der Webseite selbst oder von anderen Mitarbeitenden ändern lassen können, ohne dass Sie diesen in WordPress Berechtigungen geben müssen, um Elementor-Templates zu verändern.
Damit Sie dies realisieren können, müssen Sie Custom Fields erstellen, beispielsweise mithilfe von Advanced Custom Fields. Diese können Sie an Beiträge oder Produkte binden und die Felder im Elementor-Template einbinden.
Danach können Sie schneller und leichter Inhalte der Seite ändern. Auch hierfür finden Sie am Ende der Seite ein passendes Beispiel.
Wo kann ich diese Attribute verwenden?
Sie können in Elementor dynamische Attribute in sehr vielen Widgets verwenden. Egal, ob es sich beispielsweise um ein Text-, ein Überschrifts- oder ein Bild-Widget handelt. In vielen Widgets können Sie außerdem Beschreibungen oder Links mithilfe von dynamischen Attributen einbinden.
Eigenschaften in Widgets, in denen Sie als Wert ein dynamisches Attribut verwenden können, erkennen Sie in Elementor an einem bestimmten Icon. Dies sieht so aus:
Alle Eigenschaften, in denen Sie dieses Icon sehen, können mit einem dynamischen Attribut gefüllt werden.
Wie kann ich in Elementor dynamische Attribute benutzen?
Wie kann ich ein dynamisches Attribut verwenden? Die Verwendung von dynamischen Attributen in Elementor ist schnell und einfach umzusetzen. Dafür wählen Sie einfach ein Widget aus, welches beispielsweise über einen Text verfügt. Dies könnte zum Beispiel ein Überschrift-Widget sein.
Markieren Sie das Widget und schauen Sie an der linken Seite, wo Sie die Eigenschaften des Widgets finden. Halten Sie nach dem Icon für dynamische Attribute Ausschau und klicken Sie es an. Nachdem Sie es angeklickt haben, erscheint eine Übersicht mit den Attributen, die Sie einbinden können.
Welche Einstellungen gibt es für dynamische Attribute? Haben Sie hier ein Attribut angewählt, dann erscheint der Name des Attributs im Widget-Fenster links in der entsprechenden Eigenschaft. Klicken Sie nun auf den Namen des ausgewählten Attributs, dann öffnet sich ein Fenster mit weiteren potenziellen Einstellungen, die Sie vornehmen können.
In dem Reiter „Einstellungen“ finden Sie die Eigenschaft „Metaschlüssel“. Dieses Feld ist zumeist irrelevant, wenn Sie ein Feld einbinden.
Im Reiter „Erweitert“ können Sie weitere, optionale Einstellungen vornehmen. Hier finden Sie 3 Felder: „Vorher“, „Nachher“ sowie „Ersatzbild“. Hier können Sie jeweils einen Text hinterlegen.
Inhalte, die in dem Feld „Vorher“ eingetragen werden, werden vor dem Inhalt des dynamischen Feldes angezeigt. Inhalte, die im Feld „Nachher“ eingetragen werden, werden entsprechend nach dem Inhalt des dynamischen Feldes angezeigt.
Möchten Sie beispielsweise den Preis eines Produkts mittels dynamischen Attributs einbinden und diesen Preis in einen Satz einbauen, dann könnten Sie im Feld „Vorher“ einen Text wie „Dieses Produkt kostet “ eintragen und im Feld „Nachher“ könnten Sie “ €.“ eintragen.
Die Ausgabe würde dann, bei einem Produkt mit einem Preis von 10 €, wie folgt aussehen: „Dieses Produkt kostet 10 €.“
Das Feld „Ersatzbild“ mag vom Namen her etwas irritieren. Hierbei handelt es sich um einen Text, der angezeigt wird, wenn es Probleme beim Einbinden des Inhalts des dynamischen Attributs gibt.
Wie kann ich ein dynamisches Attribut wieder entfernen? Möchten Sie das Attribut wieder entfernen, können Sie auf das X-Icon an der rechten Seite der Eigenschaft klicken. Damit können Sie wieder manuelle Werte verwenden.
Dynamische Attribute von Advanced Custom Fields in Elementor einbinden
Wenn Sie Attribute einbinden wollen, dessen Inhalte aus Feldern von Advanced Custom Fields stammen, dann müssen Sie noch weitere Schritte beachten. Hierzu wählen Sie als Erstes den Wert „ACF Feld“ aus.
Anschließend klicken Sie auf den Bereich, in dem „ACF Feld“ steht. Nun öffnet sich ein Fenster, in denen Sie auswählen müssen, welches ACF-Feld als dynamisches Attribut eingebunden werden soll.
Auch hier können Sie unter dem Reiter „Erweitert“ wieder einstellen, ob Texte vor beziehungsweise nach dem Inhalt des Attributs eingebunden werden sollen. Auch einen Text der angezeigt wird, wenn es Fehler bei der Ausgabe des Attributs gibt, können Sie hier ebenfalls auswählen.
Beispiele für dynamische Attribute
Im Folgenden finden Sie verschiedene Beispiele für Einsatzgebiete, in denen Sie von der Nutzung der dynamischen Attribute in Elementor profitieren können. Natürlich ist der Einsatz dieser Funktion nicht auf diese Beispiele beschränkt.
Vielmehr sollen Sie dadurch einen Einblick erhalten, der Sie vielleicht inspiriert und verdeutlicht, wie mächtig diese Funktion sein kann.
Beispiel 1: Dynamische Attribute für Produkte in einer Loop verwenden
In diesem Beispiel gehen wir davon aus, dass Sie auf Ihrer Webseite WooCommerce benutzen. Das Ziel ist es, dass Sie auf der Startseite eine Box mit Produkten angezeigt wird. Von den Produkten soll das Bild des Produkts sowie der Titel angezeigt werden. Beide Elemente sollen so verlinkt sein, dass sie zum Produkt führen.
Dazu erstellen Sie zunächst ein Template für Ihre Loop. In diesem Beispiel besteht das Template aus einem Container, in dem die Widgets „Beitragsbild“ und „Produktname“ verwendet werden.
Nun kommen die dynamischen Attribute zum Einsatz, damit beide Elemente auch auf das Produkt verlinken. Wählen Sie zuerst das Widget „Beitragsbild“ aus. Wählen Sie hier in den Eigenschaften an der linken Seite für Link den Wert „Individuelle URL“ aus. Anschließend wählen Sie im Feld darunter das Icon für dynamische Attribute aus.
Hier können Sie nun die „Post-URL“ als Wert auswählen. Dadurch wird der Link zum Produkt hinterlegt, sobald das Template für eine Loop auf Ihrer Seite eingebunden wird. Wiederholen Sie den Vorgang auch für das Widget „Produktname“.
Wenn Sie nun das Template auf Ihrer Startseite einbinden und Produkte als Daten wählen, dann werden Sie sehen, dass sowohl das Bild als auch der Name des Produkts auf Ihr Produkt verlinkt.
Beispiel 2: Dynamische Attribute durch Advanced Custom Fields in Blog-Beitrag anzeigen
In dem zweiten Beispiel möchten wir ein bereits vorhandenes Template für Blog-Beiträge so bearbeiten, dass wir Änderungen in dem Beitrag durchführen können, ohne dass hierfür Änderungen am Elementor-Template durchgeführt werden müssen.
Dadurch können Änderungen am Beitrag beispielsweise auch von anderen Mitarbeitenden umgesetzt werden, ohne dass diese das Elementor-Template anpassen müssen beziehungsweise ohne, dass die Mitarbeitenden die entsprechenden Rechte überhaupt erhalten müssen.
Hierfür erstellen wir zuerst ein entsprechendes Feld in Advanced Custom Fields. Wenn Sie noch keine Feldgruppe für die Blog-Beiträge haben, dann erstellen Sie zunächst eine. Stellen Sie die notwendige Regel für die Feldgruppe ein, sodass diese bei Beiträgen angezeigt wird, die vom Typ „Blog“ sind.
Erstellen Sie nun ein Feld. In diesem Beispiel nennen wir das Feld „kreative Beschreibung“ und möchten es anschließend mit Inhalt befüllen, der vor dem bisherigen Inhalt des Blog-Beitrags angezeigt wird, um eine kurze Zusammenfassung zu geben.
Wechseln Sie nun in das Elementor-Template für Ihre Blog-Beiträge. Erstellen Sie hier ein Text-Widget und ziehen es an die gewünschte Stelle.
Anstatt hier händisch Text einzufügen, klicken Sie hier nun wieder auf das Icon für dynamische Attribute. Hier wählen Sie am unteren Ende der Liste „ACF Feld“ aus. Klicken Sie anschließend im linken Bereich auf das Feld, in dem „ACF Feld“ steht. Bei „Einstellungen“ -> „Schlüssel“ wählen Sie nun das ACF-Feld aus, welches hier eingebunden werden soll.
Unter Ihren Blog-Beiträgen können Sie nun Inhalte in das Feld eintragen, die dann anschließend an der von Ihnen gewählten Stelle dynamisch in das Elementor-Template geladen werden.
Neben der Möglichkeit dynamische Attribute in Elementor zu verwenden, können Sie auch viele weitere dynamische Funktionen nutzen, um Ihre Seite zu gestalten und mit Inhalt zu füllen. Eine weitere dieser Möglichkeiten sind die Dynamic Conditions in Elementor, mit denen Sie Inhalte dynamisch ein- oder ausblenden können.
