Archive mit Elementor

Archive mit Elementor gestalten

tl;dr: Als Blogsystem erfunden beherrscht WordPress Archive als Container für die Blogposts zu nutzen perfekt. Auch mit Elementor kann man diese Funktionalität gut nutzen. Mit einige Plugins kann man mehr Design und auch mehr Funktionalität umsetzen. Wie weit man kostenfrei kommt und wo sich der Kauf einer Pro-Version anbietet -wie man Archive mit Elementor gestalten kann behandelt dieser Artikel.

Was sind Archive - wie setzt man diese ein?

Die häufigsten Anwendungen von Archiven  sind wohl eine Auflistung der neuesten Blogposts oder eine Übersicht über Beiträge die einer bestimmten Kategorie zugeordnet wurden. Ein Archiv ist also die Antwort auf die Frage Zeige mir Inhalte nach bestimmten Kriterien und stelle diese dar. Diese Archive können in Seiten eingebunden werden, wo man zB die 3 neuesten Beiträge anzeigt oder auch auf einer eigenen Blogseite, wo über verschiedene Kategorien mehr als nur die aktuellsten Posts auffindbar sind. Übrigens: auch wenn man nicht daran denkt: WordPress serviert Archivseiten und Schlagwortseiten (und Google findet diese auch, beispielsweise Kategorie-Seiten) auch dann, wenn wir uns nicht darum kümmern. Es ist also eine gute Idee, sich über die Gestaltung der Archive Gedanken zu machen. Das URL-Format (hier Beispiele) ist dann zB:
https://www.werkform.at/category/elementor/
https://www.werkform.at/tag/dynamische-attribute/
Damit diese Seiten als gestaltete Archive dargestellt werden muss man im Theme-Builder die Bedingungen entsprechend einstellen.
Elementor Archiv Bedingungen
Nicht vergessen: auch Kategorie- und Schlagwortseiten sind Archive, die über den Theme Builder gestaltet und angezeigt werden.

Wenn wir keine Gestaltung vornehmen findet Google Seiten wie hier oben links, mit einem Archiv-Template bekommt der User ein brauchbares Design serviert.

Kostenlos - wie weit komme ich?

Wenn ich Elementor in der Free-Version einsetze kann ich keine Archive einsetzen. Das Widget hierfür ist der Pro-Version vorbehalten. Die Single-Seite, also der eigentliche Beitrag, bleibt von den hier jetzt vorgestellten Plugins unbehelligt. Es obliegt also zB.  Gutenberg oder dem eingesetzten Theme, das einzelne Post zu gestalten.

Post Grid Elementor Addon

WPCAPS Post GridDas kostenlose Plugin Post Grid Elementor Addon erweitert die Widgets um ein Post Grid das sehr ähnlich dem Original von Elementor Pro aufgebaut ist. 5 verschiedene Layouts und eine ganze Reihe sinnvoller Konfigurationsmöglichkeiten machen dieses neue Plugin zu einer kleinen Alternative, wenn man wirklich nur diese Funktion zusätzlich benötigt. 

ElementsKit Lite

ElementsKitEine ganze Suite an Widgets bieten die Elements Kit Elementor addons. Solche großen Plugins mit sehr vielen Widgets begegnen uns häufiger. Das kostenlose Angebot hier umfasst hier 3 Layouts für ein Postgrid, die sich ein wenig mehr von der Elementor-Pro-Version unterscheiden und auch gut konfigurierbar sind. Zusätzlich bekommen wir Archiv-Elemente für Header oder Footer-Bereiche angeboten, die sogar ein Kategorielisting mit Tabs ermöglichen (Widget Post-Tab). 

Dazu noch Post-List Funktion und Kategorie-List Funktion. Also von der Funktionalität um  € 0,- ein klares Statement von diesem neuen Mitbewerber in diesem Marktsegment.

Essential Addons for Elementor

Wieder eine ganze Suite an Widgets bietet Essential Addons for Elementor, darunter auch ein Post Grid. Nett ist hier die Idee, dass man nicht nur einfach Posts, sondern auch Seiten in einem Post-Grid anordnen kann. Und über die Manuelle Auswahl kann man das sogar mischen. 

Ob das inhaltlich Sinn ergibt ist eine andere Frage, aber ich hier auch in der kostenlosen Version mit sehr vielen Optionen eine Übersicht erstellen, wo ich Seiten und Beiträge neben- und durcheinander anordne. 

Premium Addons for Elementor

In der PluginSuite von Premium Addons for Elementor heisst das Widget Premium Blog und in der tat, das kann einiges: neben eine ganze Reihe von sinnvollen Gestaltungs-Optionen hinter 3 Layouts kann man auch  einen Kategoriefilter über dem PostGrid einblenden.

Die ganze Geschichte wirkt sehr durchdacht und aufgeräumt, natürlich soll auch hier – wie bei den beiden Anbietern darüber – Appetit auf die jeweils eigene Pro-Version gemacht werden.

Premium Addons
Das Postgrid von Premium Addons wirkt sehr durchdacht ausgearbeitet.

Also: wer kostenlos vorankommen will hat mindestens 4 Möglichkeiten, Beiträge für seine Aktuelle Seite, seine Newsseite oder sein Kategoriearchiv zu gestalten. Das ist schon mal eine gute Nachricht. Wer jedoch mehr Gestaltungsspielraum braucht wird irgendwann zur Kreditkarte greifen müssen. 

In eigener Sache:
werkform hilft bei der grafischen Konzeption und der Gestaltung von Websites und Templates - auch für Archive. Kontaktiere mich um ein Angebot zu bekommen.
Werbung

Elementor Pro - was bietet der Hausherr?

Es ist naheliegend – und auch wirklich keine schlechte Idee – zuerst einmal bei Elementor selber nachzusehen, wie man die Archivfunktionalität umsetzen kann. Wer die Pro-Version aktiviert hat bekommt als erstes Widget Beiträge angeboten. Wie man es erwarten kann, sind die Layout-Optionen mannigfaltig und sinnvoll und wohl für fast alle Anwendungen ausreichend. 

Elementor Pro Beiträge
Das Beiträge Widget bietet 3 Layouts und wirklich sehr, sehr viele Konfigurationsmöglichkeiten.

Unter dem Tab Inhalt sind folgende Optionen zu finden:

Unter Stil kann man jeden einzelnen dargestellten Inhalt wie gewohnt gestalten:

Auch mit dem Widget Portfolio lassen sich sehr schöne Archivabfragen gestalten. Zusätzlich zu den aus dem Beiträge-Widget bekannten Möglichkeiten gibt es hier auch eine optionale Filterleiste, über die dann zB. Kategoriefilter angewendet werden können.

Elementor Portfolio Filter Leiste
Über die Filter Leiste lassen sich Schlagwörter, Kategorien oder auch (bei aktivem WooCommerce) Produktkategorien filtern.
Abfrage Portfolio Elementor
Die Abfragemöglichkeiten sind bei den Widgets „Beiträge” und „Portfolio” gleich.

Elementor kommt also gut mit den Mitbewerbern mit, die vielleicht einiges ein wenig anders, aber nichts so richtig revolutionär besser machen. Bei der praktischen Arbeit an Projekten tauchen dann aber, wenn man ein wenig tiefer in der Gestaltung steckt, neue Ansprüche auf. Denn egal wie viele Anforderungen jemand vorausgesehen hat und wie viele Tabs und Suboptionen wo versteckt sind: was mache ich, wenn ich etwas anderes benötige um ein einzelnes Post innerhalb eines Grids anders dazustellen?

Was wir dann benötigen ist nicht ein Widget, das 100 Optionen bietet sondern ein Template, das ich frei gestalten kann.

Elementor Custom Skin

Hier kommen wir zu dem – in seinen wesentlichen Funktionen noch dazu kostenlosen – Plugin Elementor Custom Skin (auch „Ele Custom Skin”). 

Wer dieses Plugin archiviert bekommt unter 

Dashboard > Templates > Theme Builder

2 neue Typen von Templates angeboten: Loop und Custom Grid. Ein Loop-Template ist der Bereich, der für die Darstellung des einzelnen Beitrags innerhalb eines Postgrids verwendet wird. Übrigens gilt das natürlich auch für die Archiv-Seite einer Suche, wie hier beschrieben

Elementor Custom Skin
Mit Elementor Custom Skin werden Loop und Custom Grid Templates aktiviert.

Als nächstes kann ich nun ein Template anlegen, mit welchem ich meine ganz eigenen Vorstellungen umsetzen kann. Für das Beispiel hier ist es nicht schön, dafür aber ausdruckstark. Die Anzeige mit den 4 Spalten am unteren Bildschirmrand macht das Plugin übrigens gleich automatisch mit, für die verschiedenen Elemente werden vorzugsweise dynamische Widgets aus dem Single-Bereich verwendet (Beitrags-Titel, Beitrags-Bild, Beitrag Information, …) oder auch die dynamischen Attribute verwendet (Beispiel beim Button: Link > dynamisch > Post-URL). 

Übrigens: wir müssen hier jetzt keine Anzeige-Bedingung festlegen, nach der wir beim Speichern gefragt werden. Ohne Bedingung Save&Close passt.

Loop Template mit Elementor Custom Skin
Ein Loop Template wird erstellt.

Im Nächsten Schritt steht dieses Template auch im Elementor-Pro Widget Beiträge zur Verfügung, wo ich es aktivieren kann. Dies geschieht, indem ich unter

Oberflächendesign > Individuell 

und danach unter Select default Template mein erstelltes LoopTemplate per Namen auswähle. Das kleine Video zeigt den Vorgang:

Video abspielen

Damit können wir uns schon sehr viel mehr bewegen als bisher. Zusätzlich bekommen wir mit dem Plugin eine zusätzliche Paginierungs Option serviert: Die kostenlose Version des Plugins bringt uns einen Load More Button. Der User kann also anstatt zu blättern um weitere Beiträge zu sehen auf der Seite bleiben und diese mit Klick nachladen.

Load More mit Elementor Custom Skin
Unter Paginierung spendiert uns das Plugin die Load More Funktion.

Elementor Custom Skin Pro

Um eine Jahresgebühr von $59,- gibt es Erweiterungen dieses schon in der kostenlosen Version sehr praktischen Plugins. Mit dieser Erweiterung stehen zusätzliche Display Modes für unser PostGrid bereit:
  • Masonry
  • Same Height
  • Show in Slider

Zusätzlich bekommt man eine weitere dynamische Inhalte serviert. Mehr dazu auf der Herstellerseite Dudaster.com.

Die Pro-Version liefert uns auch noch eine weitere Paginierungsoption: Infitine Load, kennt man auch unter LoadOnScroll bedeutet, das sich solange es weitere Beiträge gibt durch scrollen diese angezeigt bekomme, per Ajax-Request. Dh. das Ganze ist auch ladezeitoptimiert und dadurch user- und suchmaschinenfreundlich.

Sehr nett ist auch das Feature Alternating Templates. Damit kann man zum Beispiel abwechselnd linke und rechte Loop-Templates anzeigen oder auch abwechselnde Farben von Beitrag zu Beitrag realisieren.

Fazit

Archivseiten mit der freien Version von Elementor umzusetzen ist mit verschiedenen Plugins möglich. Hier der Überblick:

ProduktPreisPostgridAnmerkung
Elementor free
Post Grid Elementor Addonfreeja
Essential Addons for ElementorfreejaPro Version verfügbar
Premium Addons for ElementorfreejaPro Version verfügbar
Elements Kits LitefreejaPro Version verfügbar
Elementor Proab $ 49,-ja
Elementor Custom SkinfreeLoop Templates, Custom Gridbenötigt Elementor Pro
Elementor Custom Skin Proab $ 59,-Loop Templates, Custom Gridbenötigt Elementor Pro

Einfacher ist es, ElementorPro zu verwenden. Wer mehr benötigt ist mit Elementor Custom Skin (Pro) gut bedient. Diese Tools werden laufend weiter entwickelt, auch der Pro-Support funktioniert erfahrungsgemäß sehr gut. 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.