Loop mit Elementor

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.

Inhalt

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. 

Die Aufgabenstellung

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 LoopEle Custom Skin (Pro)Dynamic Content for Elementor
VoraussetzungenElementor Pro
Experimente Flexbox und Loop enabled
Elementor Pro
Plugin Ele Custom Skin
Elementor Free
Plugin Dynamic Content for Elementor
WidgetsLoop GridBeiträgeDynamic Posts
Load on Clickjaja (Pro Version)nein
Load on Scrolljaja (Pro Version)nein
Abwechselnde Templates-ja, beliebigjedes 2. und First Item Template

Elementor Pro ab V 3.8

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:

  1. Einen Container Anlegen und das Widget Loop Grid drinnen platzieren
  2. Es erscheint ein Dummy mit einem Button Create a Template – dieses kann nun direkt innerhalb des soeben erstellten Grids angelegt werden
  3. Im Tab Layout des Loop-Grids stellt man nun die Spaltananzahl und die Anzahl der Items ein.
  4. Im Tab Abfrage kann man nun wählen, welche Post Types angezeigt werden sollen.
  5. Im Tab Paginierung kann man nun wählen ob Seitenzahlen, Vor-Zurück Navigation oder auch Load on Click oder Infinite Scroll angezeigt werden soll. 
  6. Einstellungen zum Aussehen der Paginierung bzw. Abstände kann man wie erwartet im Stil-Tab des Widgets Loop Grid vornehmen.

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. 

Ele Custom Skin (Pro)

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.  

Elementor Custom Skin erweitert die Auswahl im Oberflächendesign.

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.

 

Loop und Custom Grid
Zwei weitere Templkete Typen im Theme Builder: Loop und Custom Grid.

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.

Alternmating Templates Elementor Custom Skin
Alternierende Templates ermöglichen sehr flexible Designs.

Dynamic Content for Elementor

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.

 

Dynamic Content
Das Widget Dynamic Content bietet sehr umfangreiche Gestaltungsmöglichkeiten.

Jedes einzelne Design hat eine Reihe Features:

  • Grid
  • Grid with Filters (also zb. Kategoriefilter)
  • Carousel
  • Dual Carousel
  • Acordeon
  • List
  • Tabelle
  • Timeline
  • 3D
  • Grid to Fullscreen 3D
  • Crossroads Slideshow

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.

Fazit

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.