Loop mit Elementor

Um die Loop-Funktionalität zu nutzen benötigt man Elementor mindestens in der Version 3.8. Zusätzlich muss man unter 

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. 

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.  

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:

• 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.

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.