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.

(*) = Affiliate Partner Links

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.

Mit Elementor erstellte Seite 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.

Elementor Templates PRO und kostenlos

Elementor Templates PRO und kostenlos

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.

Elementor Templates Bedingungen festlegen

Bedingungen festlegen bei Elementor Theme Builder Templates

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.

Elementor Globales Widget erstellen

Globales Widget mit Elementor Pro erstellen

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.

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.

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

WPC Tipp: Elementor Templates mit Bedacht einsetzen!

Aus Sicht der Perforrmance empfehle ich dir, die Theme Builder Funktion von Elementor nur für Seiten zu verwenden, für die es aus deiner Sicht unbedingt notwendig ist.

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.

Beitrag ohne Elementor - Gute Performance

Beitrag ohne Elementor – Gute Performance

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!

Performance Verlust durch Verwendung von Elementor Templates

Performance Verlust durch Verwendung von Elementor Templates

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!

Blog-Beitrag komplett mit Elementor Widgets erstellt

Beitrag mit Elementor Widgets erstellt

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

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.

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.

WPC Tipp: Fehlersuche mit dem Page Template Elementor Canvas

Das Elementor Canvas Template eignet sich auch gut, um Fehleranalyse zu betreiben. Sollte dein Design Darstellungsprobleme aufweisen, kannst du kurzzeitig die Canvas-Vorlage aktivieren, um evtl. Konflikte mit Skripten, die im Header und Footer geladen werden, auszuschließen.

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

Danijel Rose - WordPress Consultant

Danijel

Hi, mein Name ist Danijel Rose, ich bin der Gründer von WebGeckos, WordPress Trainer und Berater aus Bad Tölz, südlich von München. Über meine WordPress Erfahrungen blogge ich hier auf WPC. Mit WordPress erstelle ich vor allem gerne hochwertige Firmenwebsites, Mitgliederseiten und WordPress Multisites.

Das könnte Dich auch interessieren …

6 Antworten

  1. Super Bericht, hat mir sehr gut gefallen! Das Elementor Pro muss ich für jede Worpress Homepage kaufen? oder????

    • D
      Danijel sagt:

      Vielen Dank für das tolle Feedback und den Kommentar!
      Ja, man braucht eine Lizenz von Elementor PRO pro Website. Es gibt aber auch die unlimited Lizenz*, mit der man unzählige Websites erstellen kann, auch für Kunden.
      Schöne Grüße, Danijel

  2. C
    Carlos Barraza sagt:

    Danke für das Envato Elements tips. Ich habe schon ein Subscription, aber wüsste ich nicht über die Plugin. 😀

  3. P
    Paddy sagt:

    Hey, danke für den aufschlussreichen Bericht. Das Envato Plugin kannte ich auch noch nicht. Muss ich doch glatt mal testen.

    Über die Performance-Qual habe ich mich auch schon genervt. Ist aber ein generelles Problem der Page Builder-Anbieter. Die wollen immer mehr und noch mehr als die Mitbewerber reinpacken. Die Folgen sind entsprechend. Hatte kürzlich mal testweise das komplette Thrive-Paket installiert.

    Das Backup der Seite war vor der Installation 12 MB. Nach kompletter Thrive-Install wuchs es an auf 196 MB. Krass! Auch wenn das jetzt noch nichts über Performance sagt, aber es zeigt, dass da Massen an Daten installiert werden. Natürlich auch Bilder.

    Lese hier immer gerne mit, weil da Tiefgang und Fleisch am Knochen ist. Danke!

    • D
      Danijel sagt:

      Tiefgang und Fleisch am Knochen 🙂 Finde ich Klasse!
      Vielen Dank für das tolle Feedback und den informativen Kommentar. Ja, mit dem Thrive Leads Plugin habe ich auch schon mal einen Vorher/Nachher Test gemacht und war wirklich sehr überrascht, welchen Performance-Verlust ein einziges Plugin verursachen kann.
      Würde mich freuen, wenn Du Deine Erfahrungen mit dem Envato Plugin hier wieder teilen könntest.
      Schöne Grüße, Danijel

Schreibe einen Kommentar zu Paddy Antworten abbrechen

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

WordPress Kurs von WPC mit Elementor!

Hol dir jetzt den WordPress Kurs von WPC mit vielen hilfreichen Elementor Tutorials!

WordPress & SEO Online Kurse Gutschein

Wir verwenden Cookies, um die Website für dich optimal zu gestalten und zu verbessern. Durch die weitere Nutzung der Website stimmst du der Verwendung von Cookies zu. Mehr Informationen findest du in der Datenschutzerklärung.