tl;dr: Um auf Archivseiten einzelne Posts übersichtlich darzustellen gibt es viele vorgefertigte Möglichkeiten. Als professioneller Designer will man aber volle Kontrolle über das Design der einzelnen Loop-Einträge. In diesem Artikel werden die 3 Lösungen von Elementor Pro, Ele Custom Skin und Dynamischer Content für Elementor gegenübergestellt.
Für diesen Artikel wird eine Lokale WordPress-Installation verwendet. Alle Plugins wurden gekauft, dieser Artikel wurde nicht bezahlt, er enthält Affility-Links. Bitte benutze diese Links falls du dich entscheidest Elementor Pro oder Dynamic Content for Elementor zu kaufen.
Ende Oktober 2022 ist mit der Elementor Version 3.8 das Experiment Loop freigegeben worden. (Voraussetzung dafür ist, dass die Container aktiviert wurden. ) Damit kann man auch ohne Dritthersteller seine Loops frei gestalten und ist nicht mehr auf die Ideen von Plugin-Programmierern angewiesen. Dennoch kann es sinnvoll sein, eine Erweiterung zur Problemlösung zu verwenden. Einige Beispiele für die Aufgabe:
| Elementor Loop | Ele Custom Skin (Pro) | Dynamic Content for Elementor | |
|---|---|---|---|
| Voraussetzungen | Elementor Pro Experimente Flexbox und Loop enabled | Elementor Pro Plugin Ele Custom Skin | Elementor Free Plugin Dynamic Content for Elementor |
| Widgets | Loop Grid | Beiträge | Dynamic Posts |
| Load on Click | ja | ja (Pro Version) | nein |
| Load on Scroll | ja | ja (Pro Version) | nein |
| Abwechselnde Templates | - | ja, beliebig | jedes 2. und First Item Template |
Um die Loop-Funktionalität zu nutzen benötigt man Elementor mindestens in der Version 3.8. Zusätzlich muss man unter
Dashboard > Elementor > Einstellungen > Experimente
die beiden Funktionen Flexbox Container und Loop aktivieren. Damit werden 2 wichtige Dinge aktiviert: das neue Widget Loop Grid erscheint unter dem Pro-Widgets und eine neue Kategorie von Templates im Theme-Builder steht bereit: das Loop Item.
Die Arbeitsweise um hier zu einem guten Ergebnis zu kommen ist denkbar intuitiv und einfach umgesetzt:
Das Loop Item kann man entweder inline innerhalb des Grids oder auch über den Theme-Builder bearbeiten. Da es sich hier um ein Template und nicht nur um ein Widget handelt kann man alles einbauen, was man sich nur vorstellen kann. Keine Einschränkungen mehr.
Das Loop Grid selber bietet jedoch nur sehr eingeschränkte Gestaltungsmöglichkeiten: ausser den Abständen und einer Masonry-Option ist hier keine Gestaltung vorgesehen.
Das (auch) kostenlose Plugin Elementor Custom Skin hat schon früh die Notwendigkeit des individuellen Loops abgedeckt. Es funktioniert mit dem bestehenden Widget Posts (Beiträge), man muss also keine noch als Experiment bezeichnete Funktionen im Elementor aktivieren.
Funktioniert ähnlich wie beim Elementor Loop: der Theme-Builder wird um die 2 Typen Loop und Custom Grid erweitert.
Man kann also beliebig viele Loop-Templates anlegen. Das Custom Grid kann im Vergleich zum Loop Grid des Elementor Loops frei gestaltet werden.
Dazu steht ein Widget Loop Item bereit das beliebig verwendet werden kann. Es ist ein Platzhalter der dann innerhalb der Anwendung durch das Loop-Template ausgefüllt wird. Dadurch kann man zB unterschiedlich große Loop-Items realisieren und asymentrische Designs umsetzen.
Die zweite sehr mächtige Besonderheit sind die (in der Pro-Version) Alternierenden Templates. Damit lassen sich Loops erzeigen wo zB. jedes 3. Item einen anderen Hintergrund oder einen Rahmen hat etc. Das 2. Beispiel mit den 4 Technischen Geräten am Anfang der Seite wurde damit umgesetzt: die ersten 3 Items haben rechts einen Rahmen, das 4. nicht. Dadurch entstehen nur Linien zwischen den Items und nicht am linken und rechten Rand.
Ein weiteres wichtiges Feature ist Gleiche Höhe das dafür sorgt, dass alle Items innerhalb einer Zeile gleich hoch (also so hoch wie das höchste) werden. Das Plugin bietet auch eine Slider-Darstellung.
Einen etwas anderen Ansatz bietet das Plugin von dynamic.ooo: es funktioniert auch mit der kostenlosen Version des Elementor Plugins und bietet mit dem Widget Dynamic Content eine Reihe von sehr flexiblen Gestaltungsmöglichkeiten an.
Jedes einzelne Design hat eine Reihe Features:
Bei den ersten 5 dieser Optionen gibt es wiederum eine Reihe vordefinierter aber gut konfigurierbarer Item-Designs (mit Bild links, rechts, etc…) Ein Item-Design wiederum ist das Template, also die Möglichkeit wie bei den zuvor vorgestellten Möglichkeiten ein völlig freies Design zu gestalten.
Dazu verwendet Dynamic Content die „normalen“ Templates und nicht den Theme.Builder. Die notwendigen Widgets für Beitrags-Titel, Beitragsbild etc. werden auch von Dynamic gestellt, da diese ja Teil von Elementor Pro sind und in der freien Version fehlen.
Wie gewohnt maximal flexibel sind die Query, Filter etc. Bei den alternierenden Items kann man jedoch nur „Even Posts“ aktivieren, also jedes Zweite. Dafür wiederum besteht die Möglichkeit ein „First Item Template“ zu gestaltet. So kann man das erste Post im Blog größer als die folgenden darstellen also zB. 2paltig während die anderen 1spaltig breit sind.
Wie immer bei diesem Plugin sind die Möglichkeiten beinahe endlos, dafür ist es nicht ganz einfach zu bedienen. Die Dokumentation startet hier.
Endlich kann man auch ohne Erweiterung die Loop-Items frei gestalten. Allerdings gibt es immer noch oft Anfordungen wo man auf Ele Custom Skin oder Dynamic Content for Elementor setzen wird, um die Design- und Usability-Vorgaben umsetzen zu können. Alle vorgestellten Lösungen haben ihre Vorzüge, daher ist es sinnvoll, die einzelnen Features genau zu kennen.
