Elementor Templates PRO & kostenlos

Das zweite Elementor Meetup in München am 16. April 2019 widmete sich dem Thema Elementor Templates. Dabei wurden die verschiedenen Template-Typen sowohl für die kostenlose als auch für die Pro Version von Elementor unter die Lupe genommen. Der folgende Beitrag zeigt die unterschiedlichen Arten von Templates für den beliebtesten Page Builder sowie ein paar hilfreiche Tipps, die du bei der Erstellung und Anwendung von Elementor Templates beachten solltest.

Kostenlose Elementor Templates

Page Templates / Seitenvorlagen

Jede Seite, die mit Elementor erstellt wurde, kann als Template gespeichert und auf anderen Seiten wiederverwendet werden. Klicke dafür einfach auf den kleinen Pfeil neben dem Button Speichern und danach auf Als Template speichern.

Die Wiederverwendbarkeit und die damit einhergehende Zeitersparnis bei der Website-Erstellung ist auch der wesentliche Vorteil bei der Verwendung von Templates. Weiter unten findest du noch weitere Vorteile von Elementor Vorlagen.

Während des Meetups haben wir u. a. versucht, ein Single Post Template für einen Blog-Beitrag auf einer einfachen Seite anzuwenden. Dies lieferte natürlich nicht das gewünschte Ergebnis, weil die Bedingungen, für welche Beiträge wir das Single Post Template verwenden möchten, auf einer Seitenvorlagen nicht erscheinen. Um eine Vorlage für einen oder mehrere Blog-Beiträge zu erstellen, benötigt man die Theme Builder Funktionalität von Elementor Pro*.

Block Templates / Abschnittvorlagen

Was bei der gesamten Seite geht, geht auch für einzelne Website Abschnitte. Um eine Vorlage für einen Abschnitt hinzuzufügen, gehe zu Templates > Gespeicherte Templates > Abschnitt > Neu hinzufügen. Nun kannst du deinen Abschnitt designen und genauso wie zuvor die Seite als Template speichern.

Die Abschnittvorlagen eignen sich prima, um beispielsweise Designs für einen Call to Action Block über dem Footer, der auf mehreren Seiten (in leicht abgewandter Form) verwendet werden kann, zu erstellen.

Möchtest du, wenn du ein Template bearbeitest, dass alle Seiten und Abschnitte, auf denen dieses Template verwendet wird, automatisch mit angepasst werden? Das geht leider nur mit der Pro Version von Elementor*.

Elementor Pro Templates – Theme Builder

Mit der Pro Version von Elementor erhält man Zugang zu vielen zusätzlichen Seitenvorlagen.

Alle Templates, die mit einem PRO gekennzeichnet sind, stehen nur mit der kostenpflichtigen Version von Elementor zur Verfügung.

Darüber hinaus lässt sich mit dem Theme Builder wie der Name bereits vermuten lässt, ein komplettes eigenes Theme aufbauen. Damit ist es möglich, alle Unterseiten wie z. B. die Blog-, Beitrags- oder Archivseite komplett mit Elementor zu erstellen. Dabei ist zu beachten, dass weiterhin ein WordPress Theme aktiviert sein muss, obwohl das Theme selbst keine Funktion mehr übernimmt bzw. für keine Designs mehr zuständig ist.

Single Template

Der Theme Builder ermöglicht es, das anfangs erwähnte Template für einen Blog-Beitrag oder die Einzelansicht eines Custom Post Types wie Produkte, Rezepte etc. zu erstellen. Genau wie für anderen Theme Builder Vorlagen lassen sich Bedingungen festlegen, die regeln, für welche Posts die Vorlage angezeigt werden soll.

Du kannst die Bedingung hinzufügen, die eine Vorlage für einen, mehrere oder für alle Beiträge festlegt sowie auch Beiträge ausschließen, auf denen die Vorlage nicht verwendet werden soll.

Header & Footer

Mit der Pro Version von Elementor kann man eigene Kopf- und Fußzeilen erstellen und entscheiden, auf welchen Seiten man diese verwenden möchte. Mit diesem Feature ist es z. B. möglich, auf den einzelnen Unterseiten verschiedene Hauptmenüs anzuzeigen.

Archive Template

Mit dem Archive-Template kannst du deine Kategorie- oder Schlagwort-Seiten nach deinen Wünschen stylen. Weitere Anwendungsfälle für eine Archive-Vorlage ist die Suchergebnisseite, eine Autor-Seite oder eine Beitragsseite sortiert nach Datum.

Globales Widget

Als Pro User kannst du jedes Widget, welches du erstellt hast, als globales Widget speichern. Gehe dazu einfach auf den Bearbeitungsstift, rechte Maustaste und klicke auf Als global speichern. Überall wo du das Widget auf deiner Website eingesetzt hast oder besser gesagt jede Instanz deines globalen Widgets wird in Zukunft bei der Änderung automatisch mit angepasst. Dabei ist es egal, ob du das Template oder eine Instanz/Kopie von dem Widget änderst.

Das Template (Vorlage) Widget

Das globale Widget lässt sich, genauso wie jedes andere Elementor Template auch, bequem in das eigene Layout einsetzen. Dafür zieht man einfach das Template Widget an die entsprechende Stelle und wählt aus dem Drop-Down Menü das gewünschte Template aus. Eine weitere Möglichkeit, ein bestehendes Template im Layout zu platzieren, lässt sich mit dem Elementor Widget Shortcode realisieren (siehe weiter unten Nested Widgets).

Weitere Vorteile von Elementor Templates

Der Hauptvorteil ist natürlich klar – man spart eine Menge Zeit! Doch darüber hinaus gibt es noch weitere Vorteile, die einem vielleicht nicht sofort in den Sinn kommen.

Elementor Designs richtig umsetzen

Das tolle an den Elementor Templates ist auch der Lerneffekt. Wenn du wissen möchtest, wie bestimmte Designs in Elementor umgesetzt wurden, importiere einfach das Template, das dir gefällt, klicke auf die einzelnen Elemente und schaue dir an, wie die Elementor Designer die einzelnen Website Elemente umgesetzt haben. Der Lerneffekt ist bei den Pro Templates am höchsten, weil dort aufwendigere Designs umgesetzt wurden.

Nested Widgets

Möchtest du z. B. ein zwei-spaltiges Layout innerhalb eines Tabs- oder Accordion-Widgets realisieren, kannst du ein Template erstellen und im Text-Editor des gewünschten Widgets den Shortcode des Templates einfügen. Damit lassen sich Widgets in Widgets einsetzen. Den Shortcode findet man in der Liste der gespeicherten Templates in der gleichnamigen Spalte.

Im Sinne der Performance sind Nested Widgets jedoch keine gute Idee und sollten wenn möglich vermieden werden.

Redesign von Webseiten

Es kann durchaus sein, dass mir jetzt ein paar meiner Web Kollegen widersprechen werden, aber für mich hat der folgende Prozess bereits ein paar mal gut funktioniert.

Ein Kunde, der bereits eine WordPress Seite besitzt, möchte aus verschiedenen Gründen zu Elementor wechseln. Das bestehende Layout sollte mit ein paar Änderungen übernommen werden. Ich habe Elementor direkt auf der Kundenseite installiert und die Designs als Templates umgesetzt. Der Vorteil für den Kunden: Er kann die Entwicklung der einzelnen Layouts ohne zusätzliche Login-Daten direkt mitverfolgen. Warum ich nicht gleich Seiten erstellt und diese als Entwurf gespeichert habe? Letztendlich waren nur 6 Templates nötig, um danach ca. 20 Unterseiten relativ zügig zu erstellen.

Diese Art von Redesign sollte man aber nicht durchführen, wenn der Kunde bereits einen anderen Page Builder verwendet.

[vorsicht]Achte immer darauf, dass du keinen weiteren Page Builder neben Elementor auf deiner Seite aktiviert hast! Ansonsten kann es nämlich zu Fehlfunktionen kommen.[/vorsicht]

Auch wir haben während des Meetups viel Zeit mit der Fehlersuche verbracht, weil ein User parallel den Page Builder von SiteOrigin installiert und aktiviert hatte.

Nachteile von Elementor Templates

Gibt es überhaupt Nachteile bei der Verwendung von Templates? Ja, die gibt es leider.

Performance Verlust

Auch wenn Elementor im Vergleich zu manch anderen Page Buildern „relativ sauberen“ Quellcode ausliefert, so handelt es sich doch um einen Page Builder. Um den User die einfache Handhabung zu ermöglichen, müssen die Page Builder zusätzlichen Code produzieren und weitere Skripte laden. Diese zusätzlichen Zeilen Code machen deine Seite langsamer und schaden der Performance. Für jeden Beitrag ein eigenes Template zu erstellen, solltest du deshalb unbedingt vermeiden.

Der folgende Performance Test verdeutlich, dass es durchaus Sinn macht, die Elementor Templates sparsam anzuwenden.

In diesem Test habe ich einen Blog-Beitrag auf drei unterschiedliche Arten erstellt und anschließend mit GTmetrix.com die Performance des Artikels getestet.

1. Blog-Beitrag ohne Elementor

Zuerst habe ich den Beitrag ganz normal mit dem WordPress Classic Editor ohne Elementor erstellt.

Auf das Setup für den Performance Test müssen wir nicht genauer eingehen, weil alle drei Artikel die gleiche Basis besitzen.

2. Blog-Beitrag mit einem Single Post Template

Danach habe ich ein Template für ein Single Post erstellt und habe diese Vorlage einem neuen Beitrag zugeordnet, welcher genau den gleichen Inhalt und das gleiche Beitragsbild hatte wie der erste Artikel ohne Elementor. Der Performance Verlust des Beitrags ist erschreckend!

Fairerweise muss man dazu sagen, dass dieses Template die Facebook Kommentar-Funktion eingebunden hatte, die zusätzliche Skripte erfordert. Trotzdem handelt es sich um einen realistischen Anwendungsfall, da der User sich durchaus für dieses Template entscheiden und die Facebook Kommentare beibelassen könnte. Es war übrigens das gleiche Template, welches wir auch im Meetup verwendet haben. Unsere Beispielseite wäre durch dieses Template 3-mal langsamer geworden, 10-mal so groß und hätte 5-mal so viele Anfragen an den Server gestellt!

Wenn man die Facebook Kommentar-Funktion entfernt, ist die Seite immer noch 4-mal so groß wie der Beitrag ohne Elementor und stellt 3-mal so viele Anfragen an den Server.

[vorsicht]Man muss sich das mal vorstellen, allein durch die Verwendung eines Templates für den Blog-Beitrag werden anstatt 4 Javascript- und 3 CSS-Dateien nun 14 Javascript- und 11 CSS-Dateien geladen![/vorsicht]

Blog-Beitrag komplett mit Elementor Widgets erstellt

Ähnlichen Performance Verlust haben auch die Seiten, die zwar kein Elementor Template benutzen, aber komplett mit Elementor Widgets erstellt wurden.

Die gleiche Problematik besteht übrigens auch bei dem angeblich so schnellen Hello Theme von Elementor, wie du in meinem Beitrag über die besten Elementor Themes nachlesen kannst.

Ich finde es schade, dass Elementor vor lauter Popups und Motion Effects und wie die neuen fancy Funktionen alle heißen, anscheinend komplett das Thema Performance aus dem Fokus verloren hat.

In meinem Beitrag Elementor vs. Gutenberg gehen ich noch genauer darauf ein, auf welche Arten ein Blog-Beitrag entstehen kann und welche Methode aus Performance Sicht die beste ist.

[stay id=“4735″]

Unterschiedliche Farben und Schriftarten

Ein weiterer Nachteil: Wenn du verschiedene vorgefertigte Templates von Elementor verwendest, besitzt jede deiner Unterseiten unterschiedliche Farben und Schriftarten. Dem kannst du entgegenwirken, indem du die Fonts und die Farben global einstellst. Wie das geht, kannst du dir in den Elementor Video Tutorials hier auf dem Blog ansehen. Doch nach meiner Erfahrung wird nur die Farbe für den Haupttext übernommen. Die Farben für die Überschriften und die Fonts müssen trotz den globalen Einstellungen manuell nachgearbeitet werden.

Zumindest helfen die globalen Fonts-Einstellungen bei der schnellen Auswahl der richtigen Schriftart. Es muss nämlich nur die Option „Vorgabe“ für das jeweilige Element ausgewählt werden.

Solltest du, nachdem du die Vorgabe verwendet hast, die richtige Schriftart nur in der Bearbeitungsmaske von Elementor und nicht in der Vorschau der Seite sehen, gehe zu Elementor > Werkzeuge > Generell und klicke unter CSS erneuern auf Dateien erneuern.

Update vom 25.07.2020: Mit der Einführung der Funktion Theme Style in Elementor, können nun die Fonts und die Farben global eingestellt werden. Diese Einstellungen überschreiben auch die Templates Optionen allerdings nur die Elementor Templates. Solltest du die Vorlagen von Drittanbietern wie z. B. Crocoblock verwenden, werden diese Einstellungen durch die globalen Theme Styles nicht überschrieben.

Gefahr von Duplicate Content

Als ich anfing, mich mit Elementor Templates zu beschäftigen, dachte ich, dass die Gefahr von Duplicate Content besteht. Die Templates bestanden schließlich aus mehr oder weniger den gleichen Inhalten wie die Seiten, die mit dieser Vorlage erstellt wurden und waren aber unter einer andere URL erreichbar. Hier hat Elementor zum Glück vorgesort. Die Templates sind nicht öffentlich zugänglich und werden auch von den Suchmaschinen nicht indexiert.

Die Gefahr von Duplicate Content besteht aber dennoch. Dann nämlich, wenn du mehrere Seiten mit der gleichen Vorlage erstellst und den Inhalt nur geringfügig anpasst. Man könnte nämlich auf die Idee kommen, die Templates von Elementor dafür zu verwenden, möglichst schnell Landing Pages zu erstellen und nur die wesentlichen Keywords zu ändern, um das Ranking bei Google & Co. zu verbessern. Aber genau das Gegenteil wäre der Fall.

Unterschied zwischen Elementor Templates und WordPress Templates

WordPress Themes, Template Dateien, Page Templates, Elementor Templates etc. – so viele Begriffe und alle haben irgendetwas mit Vorlagen zu tun. Doch wo liegen die Unterschiede? Wie unterscheiden sich vor allem die Seitenvorlagen von Elementor mit den Page Templates von WordPress? Einen Einstieg in das Thema bietet dir mein Artikel WordPress Templates bearbeiten & verstehen. Dort werden die unterschiedlichen Arten von WordPress Templates vorgestellt.

Elementor verwendet ebenfalls die WordPress Page Templates und das bereits in der kostenlosen Version. Bei jeder Elementor Installation stehen dem Anwender zwei zusätzliche Page Templates zur Verfügung: „Elementor Volle Breite“ und „Elementor Canvas“. Während das Template „Volle Breite“ sowohl Header als auch Footer beinhaltet, enthält „Canvas“ weder Kopf- noch Fußzeile. Da es kaum eine Website gibt, die ohne Header und Footer auskommt, wird das Template „Canvas“ hauptsächlich mit der Pro Version eingesetzt. Mit der Pro Lizenz können nämlich die Kopf- und Fußzeile ebenfalls mit Elementor gestylt werden. Ein Anwendungsfall für das „Canvas“-Template in der kostenlosen Version wäre z. B. die Coming Soon Seite. Dort kann man durchaus auf Header und Footer verzichten.

Vereinfacht gesagt lässt sich die Ausgangsfrage mit nur einem Satz beantworten: Die Elementor Templates sind WordPress Page Templates, die bereits mit (Elementor) Widgets vorausgefüllt sind.

Envato Elementor Plugin – Envato Elements

Erst letzte Woche hat Envato das Plugin Envato Elements offiziell gelauncht. Mit über 1500 kostenlosen Elementor Page Templates hast du die Qual der Wahl, die passende Vorlage für dein Projekt herauszupicken. Eine Filterfunktion ermöglicht dir aber, das Wunsch-Layout schneller zu finden.

Wer meinen Blog kennt, weiß, dass ich kein großer Fan von Envato und dem dazugehörigen Theme Marktplatz Themeforest bin. Ich muss aber zugeben, dass das Plugin wirklich toll umgesetzt wurde. Das beste an dem Plugin sind aus meiner Sicht jedoch nicht die Templates, sondern die Optimierung des Workflows, welche durch das Plugin möglich ist. Direkt aus dem Adminbereich von WordPress kann man nach lizenzfreien Bildern suchen. Eine Suchfunktion über Tags und Freitext beschleunigt den Vorgang weiterhin. Das Plugin bietet damit eine riesen Zeitersparnis, so dass auch du es unbedingt in deinen Website Entwicklungsprozess einbauen solltest.

Denke aber daran, wenn du die Bilder auf diese Weise in deine WordPress Seite einbindest, fällt die manuelle Bildoptimierung weg. Du sollest deshalb unbedingt ein Plugin für die Bildoptimierung vorsehen.

Fazit

Oft wird die Frage gestellt: Lohnt sich die Anschaffung von Elementor Pro überhaupt? Meiner Meinung nach sind die zusätzlichen Widgets, die in der Pro Version enthalten sind, nicht das ausschlaggebende Kriterium, sich für die Pro Version zu entscheiden. Die Widget-Anzahl kann auch über kostenlose Plugins oder durch ein Premium Theme ergänzt werden. Selbst Plugins, die unter einer „Lifetime“-Lizenz vertrieben werden, wie z. B. Ultimate Addons for Elementor* oder JetPlugins*, könnten langfristig gesehen schonender für den Geldbeutel sein.

Der wahre Grund, der für die Pro Version spricht, sind die Templates und zwar ganz besonders die Theme Builder Templates. Als Pro User bekommt man den Zugang zu vielen Premium Templates, die das Geld auf jeden Fall wert sind. Selbst viele Vorlagen von dem erwähnten Envato Plugin, die zwar kostenlos sind, lassen sich nur mit der Pro Lizenz von Elementor verwenden. Wie so oft ist es eine Kosten/Nutzen Betrachtung. Und mit der Verwendung von Templates lässt sich sehr viel Zeit einsparen, was sich wiederum positiv auf die Entwicklungskosten einer Website auswirkt. Aus diesem Grund kann ich die Pro Version von Elementor besten Gewissens empfehlen, auch wenn es sich hierbei um einen Affiliate Partner Link handelt 😉

Du solltest aber, wie bereits erwähnt, die Templates mit Bedacht verwenden.