Archive mit Elementor

tl;dr: Für Archive benötigt man Elementor Pro. Der Theme Builder hilft bei der Organisation von Loop-Templates, die im Loop Grid und Loop Carousel verwendet werden können.

Die Archive können für Blogs, Suchergebnisse und auch für alle Arten von eigenen Inhalten verwendet werden.

Voraussetzungen
Loop Template
Loop Grid
Taxonomie Filter
Loop Karusell
Fazit

Ähnliche Artikel:

Voraussetzungen

Die Empfehlung lautet eindeutig, bei Elementor Pro mit der Umsetzung von Archiven zu beginnen. Die vor Jahren noch gängigen Alternativen haben ihre Attraktivität verloren, denn über Loops und Grids kann man so gut wie alle sinnvollen Designs umsetzen.

Wer spezielle Anwendungen hat wie Timelines oder Tabellenansichten sollte einen Blick auf Dynamic Posts werfen.

Die Widgets Beiträge und Portfolio kann man wohl als veraltet betrachten und über

Dashboard > Elementor > Element Manager

deaktivieren. Für diesen Artikel wurde das Theme Hello Elementor verwendet,

Loop Template

Am Einfachsten ist der Beginn über das Loop Template. Unter

Dashboard > Templates > Theme Builder

ein neues Template anlegen. Alternativ dazu kann man auch zuerst ein Loop-Grid auf eine Seite ziehen und von dort aus das Loop-Template erstellen.

Beitrags-Widgets — Elementor empfiehlt die wichtigsten Widgets für die Gestaltung des Loop-Templates

Zuerst wird in den Einstellungen für das Template (3. Icon von links oben) der Titel vergeben. Sinnvolle Titel sind wichtig weil sie auch im Grid bei der Auswahl helfen.

In den Vorschau-Einstellungen kann man einen Beitrag wählen der typisch für den Anwendungsfall ist. Ausserdem kann hier auch eine Breite eingestellt werden: Im Normalfall wird die Breite ja durch die umgebende Konstruktion des Grids definiert. Im Editor fehlt diese und kann eben hier (als Hilfe bei der Gestaltung) gesetzt werden.

Einstellungen Loop Template — In den Einstellungen Namen und Vorschau definieren

Für die Gestaltung des Loop-Templates bietet Elementor gleich die richtigen Widgets an: Neben Beitrag Titel, Beitragsbild sind Post-Ausschnitt und div. Beitrag Informationen (Autor, Datum, ...) sinnvoll.

Wichtig ist die Entscheidung, wie vom Loop-Template auf das Single Post verlinkt werden soll: Man Widgets einzeln verlinken (im Beispiel unten zB: den Beitrag Titel, das Beitragsbild und einen Button mehr lesen.

Verlinkter Beitrag Titel — Der Beitrag Titel wird angezeigt, verlinkt wird auf die Post-URL

Alle Widgets im Theme Builder dienen als Platzhalter-Widgets, die Inhalte werden dann dynamisch aus der Datenbank geholt und angezeigt. Dem entsprechend wird der Link dann eben auf die Post-URL gesetzt, also den Permalink des angezeigten Beitrages.

Alternativ zu einzelnen Links kann auch der gesamte Container verlinkt werden

Wenn man den gesamten Bereich des Loops als Link ausführen will muss man 2 Dinge beachten:

Innerhalb des Containers dürfen keine Links vorkommen.
Der Link ist im Container unter Zusätzliche Optionen zu setzen, indem man den Tag des Containers auf a setzt und darunter den Link auf dynamisch > Post-URL einstellt.

Nun ist alles angerichtet, das erstellte Template kann in verschiedenen Auflistungen verwendet werden.

Loop Grid

Das Widget Loop Grid ist nun dort einzusetzen, wo das Archiv angezeigt werden soll. Das Widget hat 4 Bereiche die eingestellt werden müssen

Layout
Abfrage
Seitennummerierung
Weitere Optionen

Im ersten Bereich des Inhalts, Layout, wählt man den Template-Typ (Beiträge oder Taxonomie), darunter das zuvor erstellte Loop-Template.

In Spalten und Elemente pro Seite wird die Größe des Rasters definiert (1x1 ist auch möglich), ausserdem können die Loop-Elemente In Masonry (unterschiedliche Höhen, gleiche Spaltenbreiten) oder auch mit Gleicher Höhe (innerhalb der Zeile) angezeigt werden.

Besondere Beachtung verdient auch die hier versteckte Option Wenden Sie eine akternative Vorlage an. Ganz abgesehen von der sehr schlechten Wortwahl der Funktion ist diese sehr hilfreich, wenn man unterschiedliche Templates im selben Loop Grid anwenden will.

Loopgrid Alternate — Ein Loop-Grid mit 2 verschiedenen Templates

Loppgrid Layouteistellungen — Im Bereich Layout wählt man Template, Spaltenanzahl und Trefferanzahl aus

Das Beispiel zeigt ein Loop-Template, das die gesamte erste Zeile einnimmt. Mit den Optionen Einmal anwenden und Spaltenbreite: 3 erreicht man den hier gezeigten Effekt, dass der erste Beitrag mehr Platz und Aufmerksamkeit bekommt als die folgenden.

Es lassen sich beliebig viele solche Alternativen in einem Grid unterbringen.

Dadurch kann man auch die Anzahl der verwendeten Spalten ändern und mit dem selben Loop-Template unterschiedliche Breiten erreichen usw.

Alternate Template — Mit dieser Funktion lassen sich unterschiedliche Loop-Templates innerhalb eines Grids anwenden

Im Tab Abfragen findet man die Einstellung zur Auswahl was angezeigt werden soll und in welcher Reihenfolge.

Man kann

Beiträge
Seiten
Manuelle Auswahl
Aktuelle Suchanfrage
Ähnlich

Auswählen. Die Aktuelle Suchanfrage benötigt man für die Gestaltung einer Suchergebnisseite. Ähnlich ist am besten mit der Originalbezeichnung related zu verstehen, also zB. für die Anzeige innerhalb der gleichen Kategorie, des gleichen Autors etc.

Über die Einstellungen Datum und Sortierung kann man die Abfrage verfeinern:

Alle
Gestern
Letzte Woche
…
Individuell

für die Datumsabfrage und unterschiedlichste Sortierungsmöglichkeiten helfen bei der Gestaltung des Archives in Elementor.

Loop Grid Abfragen — In Abfragen definiert man was angezeigt werden soll und wie sortiert wird

Die zuvor im Layout getroffene Einstellung unter Elemente Pro Seite bringt in Kombination mit der Abfrage selber die Trefferanzahl, die sich dann auf verschiedene Ergebnisseiten verteilen.

Hier in Seitennummerierung kann man nun einstellen wie die Verlinkung zwischen den Seiten gestaltet werden soll. Neben den Angaben Nummern, Voriger/Nächster und Nummern +Voriger/Nächster gibt es 2 andere Möglichkeiten:

Beim Klicken laden erzeugt einen Button unter der Trefferliste, mit dem die nächste "Portion" an Treffern angezeigt wird.

Einloses Scrollen sorgt dafür, dass immer wenn der User am Ende der Seite angekommen ist erneut einmal die in Elemente pro Seite eingestellte Anzahl an Beiträgen geladen wird.

Loopgrid Paginierung — Die Seitennummerierung kann sehr flexibel definiert werden

Weiter Optionen hat nur eine Funktion: die "Nichts gefunden" -Meldung.

Hier kann der Text eingegeben werden der im Falle einer erfolglosen Abfrage ausgegeben werden soll.

Taxonomie Filter

Wer mit Kategorien oder Schlagworten arbeitet um seine Beiträge besser zu strukturieren will diese Strukturen auch für den Enduser zugänglich machen. Elementor hat dazu das Widget Taxonomy Filter eingeführt, mit dem einfache Einschränkungen in der Anzeige umgesetzt werden können.

Nachdem man das Widget platziert hat muss - es kann ja mehrere Loop Grids auf einer Seite geben - jener Loop-Grid Raster ausgewählt werden, auf den der Filter angewandt werden soll. Die Grids werden einfach automatisch durchnummeriert.

Im nächsten Schritt ist einzustellen, welche Taxomonie hernagezogen werden soll: Kategorien oder Schagwörter.

Tip: man kann auch 2 Filterleisten untereinander einsetzten: eine für Kategorien und ein zweite für Schlagwörter!

Danach ist eine Richtungseinstellung (horizontal oder vertikal) möglich.

Bei den Einstellungen darunter kann man nun definieren, ob Unterkategorien angezeigt werden sollen etc.

Das Beispiel oben zeigt: über dem Loop Grid wurde das Widget Taxonomie Filter eingesetzt (rote Markierung).

Wer sich fragt, was der kryptische Begriff Erster Artikel bedeuten soll (grün markiert): damit ist ein Link gemeint, der die Filterung zurücksetzt und wieder alle Beiträge anzeigt.

Loop Karusell

Wer die Beiträge nicht im Raster sondern im Stil eines Sliders anzeigen lassen will kann das Widget Loop-Karussell verwenden. Filtern ist damit nicht möglich, jedoch kann man die Abfrage wie auch beim Loop-Grid anpassen.

Im Tab Layout werden wieder die wichtigsten Parameter gesetzt. Zuerst wird das gewünschte Loop-Template ausgewählt. Man kann das selbe Loop-Template für Grids und Karusells (und Suchergebnisse) verwenden.

Anzahl der Slides gibt vor, wie viele Beiträge ausgelesen werden. Slides ausgestellt bedeutet, das man die Anzahl der voll sichtbaren Beiträge einstellen kann. Im Beispiel oben zwei (rot mit 1 und 2 markiert). Wenn man schon 2 Beiträge sieht kann man auch die Slides zum Scrollen einstellen, also ob nur 1, 2 oder x Beiträge weiter gescrollt werden soll beim Sliderwechsel.

Falls man das Loop-Template nicht mit einer fixen Höhe gestaltet hat bietet sich hier die Option Gleiche Höhe an. Elementor versucht dann die Loop-Templates auf den größten vorkommenden Wert der aktuellen Slides zu strecken. Im Screenshot sieht man unterschiedliche Höhen, diese entstehen wenn die Bilder verschiedene Formate haben oder die Texte unterschiedlich lang sind.

Im Tab Einstellungen sind die Optionen für das automatische Abspielen, Die Scroll Geschwindigkeit etc. untergerbracht. Die Optionen sind selbsterklärend.

Nicht ganz so schlüssig sit die Bezeichnung Offset Seiten. Das bedeutet, dass links und/oder rechts der ausgestellten Slider die benachbarten Slider sichtbar sein können. Die Breite dieser Marginalspalte ist ebenfalls hier zu setzen.

Damit ist dem User schnell klar, dass es hier weitere Inhalte gibt. Optionalen Pfeile und Punkte unter den Slides werden leicht übersehen.

Eingestellt werden diese Dinge in den Tabs Navigation und Seitennummerierung. (Blaue Markierung am Screenshot oben)

Karusell Einstellungen — Verschiedene Einstellungen steuern das Verhalten der Slides

Fazit

Natürlich kann Elementor auch Archiv-Seiten verwalten. Diese sind im Theme-Builder zu gestalten. Das Widget Loop-Grid ersetzt die in die Jahre gekommenen Widgets Beiträge, Portfolio und Beiträge archivieren.

Die Flexibilität ist für viele Standard-Ansprüche wie Blogs etc. völlig ausreichend. Wer besondere Layoutformen wie Timelines sucht sollte sich Dynamic Posts ansehen, wer minimalistische Auflistungen sucht Dynamic Shortcodes.

Obwohl Gutenberg große Fortschritte bei Archiven gemacht hat bleibt für pixelgenaues Design nach wie vor Elementor die erste Wahl. Besonders wenn man eigene Inhaltstypen und Felder verwendet wie mit ACF oder JET.

Veröffentlicht am: 4. Januar 2026
Letztes Update am: 12. August 2026