Michael Baierl – WordPress-Profi aus Wien.

Neu bei Elementor?
Vermeide diese 8 typischen Anfängerfehler!

Elementor ist ein großartiger Page-Builder für WordPress. Du erstellst deine Seiten visuell per Drag’n’Drop und siehst sofort die Auswirkungen der Einstellungen. Du benötigst keinerlei Programmierkenntnisse um eine ansprechende Website zu erstellen.

Doch gerade Anfänger kann Elementor überfordern - und du kannst Fehler machen, die sich langfristig negativ auf die Performance deiner Website auswirken.

In unzähligen Schulungen meiner Kunden habe ich immer wieder dieselben Fehler beobachtet, die  du aber ganz einfach vermeiden kannst.

Die typischen Elementor Anfänger-Fehler sind meiner Erfahrung nach:

Inhalt

Fehler 1: Du fügst den ganzen Text in ein einziges Text-Element ein

Für Texte verwendest du das Text-Modul von Elementor: 

Elementor-Fehler: zu viel Text in einem Text-Modul

Ich sehe oft, dass viel zu viel Text in ein einzelnes Text-Modul gepackt wird. Das hat den großen Nachteil, dass das Bearbeiten sehr mühsam wird und du einzelne Abschnitte nicht mehr so einfach verschieben kannst.

Verwende daher für einzelne “logische” Textabschnitte eigene Textelemente. Pro Absatz. Pro Hauptüberschrift. Eventuell auch pro Unterüberschrift. 

Verwende auch das Überschriften-Modul. Dieses bietet dir mehr Möglichkeiten die Überschriften zu formatieren.

Fehler 2: Du fügst alle Module in einen einzigen Abschnitt ein

Dieser Fehler ist sehr ähnlich zu #1, und trifft auf Abschnitte zu. 

Elementor macht es aufgrund der Struktur etwas einfacher als Divi nicht zu viele Inhalte in einen einzelnen Abschnitt zu packen. 

Doch dann war da das Modul “Innerer Abschnitt” (“Inner Section”). Dieses Element erlaubt dir Spalten in Spalten zu erstellen, z.B. so:

Elementor-Fehler mit dem Modul "Innerer Abschnitt" ("Inner Section")

Diese Freiheit zu verschachteln ist wunderbar und einer der größten Vorteile von Elementor gegenüber Divi. Doch hier sind zwei “Inner Sections” in einem Abschnitt. Das erzeugt elemeund schränkt deine Möglichkeiten zur Formatierung ein.

Verwende stattdessen eigene Abschnitte und erstelle die Spalten in diesen Abschnitten:

Elementor Fehler: Verwende Abschnitte richtig

Das erlaubt dir mehr Freiheiten bei der Formatierung der einzelnen Abschnitte.

Verwende innere Abschnitte nur, wenn es vom Layout her wirklich Sinn macht und es keine andere Lösung gibt. 

7 Bausteine für dein Online-Business

Du träumst von deinem eigenen Online-Business, weißt aber nicht genau, wie du starten sollst? 

Hole dir gleich meinen Report über die 7 Bausteine für dein Online-Business – für Newsletter-Abonnenten kostenlos.

Also gleich anmelden!

Fehler 3: Du verwendest leere Spalten und das Abstands-Widget für dein Design

Das Abstands-Widget stammt noch aus früheren Versionen von Elementor:

Elementor Fehler mit dem alten Abstand-Widget

Leider setzen einige fertige Themes für Elementor* nach wie vor auf diese veraltete Technik um ein “Design” herzustellen.

Das ganze sieht dann zum Beispiel so aus, um eine schmale Spalte mit Abstand zu erzeugen:

Elementor-Fehler: leere Spalten und Abstands-Widget für das Design verwenden.

Das Problem?

Um dieses Layout responsive, also für Mobilgeräte, zu gestalten, musst du sehr tief in die Trickkiste greifen. Und es wird nie wirklich gut funktionieren.

Verwende daher weder das Abstands-Widget noch Spalten um ein Design zu erreichen. 

Benutze stattdessen:

Elementor-Fehler: verwende die Inhaltsbreite des Abschnitts

Erstens: Die Einstellung für die Inhaltsbreite des Abschnitts, um die maximale Breite zu definieren. Diese Einstellung hat den Vorteil, dass sie ohne weitere Änderungen auf Mobilgeräten korrekt angezeigt wird.

Du musst also keine (leeren) Spalten ausblenden oder sonstige Einstellungen für Mobilgeräte vornehmen.

Fehler mit Elementor und Margin bzw. Padding

Zweitens: Padding und Margin für Abstände.

Padding definiert dabei den inneren Abstand (also im Abschnitt / Widget selbst) und Margin den Abstand zum nächsten Abschnitt / Widget.

Beide Einstellungen sind responsive, das heißt du kannst durch einen Klick auf das kleine Computer-Symbol einen anderen Wert für Tablets oder Mobilgeräte wählen.

Der korrekte Abschnitt sieht dann folgendermaßen aus:

Elementor-Fehler: Margin, Padding und Inhaltsbreite korrekt verwendet.

Viel einfacher, oder?

Im Navigator von Elementor siehst du den strukturellen Unterschied noch besser:

Elementor-Fehler sind auch im Navigator von Elementor sichtbar.

Weniger Elemente bedeuten eine schlankere Website, die schneller lädt. Und das wirkt sich wieder positiv auf dein Google-Ranking aus.

Fehler 4: Du änderst die Stile für jedes Element 

Elementor bietet für jedes Modul unter “Stil” sowie “Erweitert” sehr viele Möglichkeiten, um das Design des jeweiligen Moduls anzupassen. So hast du zum Beispiel die Möglichkeit jede erdenkliche Einstellung für Schriften oder Farben zu wählen.

Elementor-Fehler: Stil für jedes Element festlegen

Das Problem dabei?

Du verteilst die Einstellungen auf unterschiedlichen Seiten in unterschiedlichen Modulen. Das macht es sehr schwer, ein konsistentes Design zu erstellen. Möchtest du später eine Farbe oder eine Schrift ändern, dann musst du jedes einzelne Modul in jeder einzelnen Seite bearbeiten.

Uff.

Verwende daher unbedingt vom Start weg die globalen Einstellungen für Farben, Schriften, Buttons usw.

Du erreichst diese, indem du das Hamburger-Menü ganz links oben wählst und dann Site Settings anklickst.

Elementor-Fehler: Site Settings nicht verwenden.

Stelle hier die globalen Farben deines Designs, die Standard-Typografie, das Aussehen von Formularfeldern usw. ein. 

Keine Sorge, du kannst selbstverständlich bei jedem Element nach wie vor eigene Einstellungen wählen, aber diese Settings hier sind die Standard-Einstellungen für deine gesamte Website.

Fehler 5: Du fügst Text direkt aus Word in Elementor ein

Beim Erstellen deiner Website liegen die Texte vermutlich in Form einer E-Mail, eines Word-Dokumentes, PDFs oder Google Docs bereit. Oder du kopierst die Texte von deiner alten Website und fügst sie mit Cmd+V (Strg+V unter Windows) in das Text-Modul ein.

Dabei werden auch die meisten Formatierungen übernommen. Das ist doch perfekt, oder?

Nein, ist es leider nicht. Denn wenn du Inhalte direkt aus Word in Elementor einfügst, dann werden im Hintergrund extra Klassen und <div>-Tags und <span>-Tags mit übernommen.

Anstelle des Textes und der minimal nötigen Formatierung hast du jetzt HTML-Code, der deine Website aufbläht, langsamer macht und der außerdem zu Fehlern führen kann.

Elementor-Fehler: Text von Word in Elementor einfügen

Füge daher Text immer mit der Tastenkombination Cmd+Shift+V (bzw. Strg+Shift+V unter Windows) ein. Du musst die Formatierungen wie Überschriften, Aufzählungen etc. zwar selbst nachziehen, aber der Quellcode deiner Website ist sauber und deine Website lädt schneller.

Fehler 6: Du verwendest Elementor für Beiträge

Standardmäßig ist Elementor für Beiträge, Seiten sowie alle weiteren Sammlungen (“Custom Post Types” genannt) aktiviert. 

Das Problem dabei? Elementor ist nicht (immer) der ideale Editor dafür. 

Denn bei Beiträgen oder anderen strukturierten Inhalten wie Events, Veranstaltungen oder WooCommerce Produkten erfolgt der Aufbau der Inhalte über strukturierte Felder. Es gibt mehrere Felder für Inhalte, Kurzbeschreibung, Preis usw.,  die dann mit Hilfe eines Templates die Inhalte ausgeben.

Elementor ist hier als Editor nicht die beste Wahl, da du die aufwendigen Funktionen für Layout und Formatierung gar nicht benötigst, dich aber langfristig in eine Sackgasse begibst. So musste ich bei der Umstellung von Divi zu Elementor erst einmal jeden einzelnen Blog-Artikel ändern. 

Hätte ich gleich den Gutenberg-Editor (auch Block-Editor genannt) verwendet, dann wäre die Umstellung von beliebig vielen Blog-Artikeln in ein paar Minuten erledigt gewesen. 

Vermeide daher die Verwendung von Elementor-Editor für Beiträge, Online-Kurse, Lektionen usw. indem du den Editor unter Elementor > Einstellungen für diese Beitragsarten deaktivierst. 

Elementor-Fehler: Elementor für Beiträge, Blog-Posts, Kurse usw. verwenden

Erstelle dann eine globale Vorlage für diese Beitragsart um die Inhalte anzuzeigen. Mehr dazu im nächsten Fehler!

Fehler 7: Du verwendest den Elementor Theme Builder nicht

Dieser Fehler hängt mit dem Vorherigen zusammen. Denn die Stärke von Elementor liegt im Theme Builder. Dieser erlaubt es dir deine Seite strukturiert und logisch aufzubauen, ohne Elemente auf jeder einzelnen Seite wiederzuverwenden.

So kannst du unter Templates > Theme Builder beliebig viele Templates anlegen, zum Beispiel:

  • für Header und Footer deiner Website
  • für die 404 Fehler-Seite
  • für Beiträge, Kurse, Projekte usw.
  • für Übersichten zu Beiträgen, Kursen, Projekten usw.

Du kannst dabei flexibel festlegen, wann und wo dein Template verwendet wird.

Ein anderer Header für alle Landingpages? Kein Problem.

Ein anderes Layout für Produkte einer bestimmten Kategorie? Kein Problem.

Ein anderes Menü für den Mitgliederbereich? Kein Thema!

Elementor-Fehler: du verwendest den Theme-Builder nicht!

Verwende also von Beginn an den großartigen Theme Builder von Elementor Pro, um deine Website strukturiert aufzubauen!

Elementor Pro um 20% günstiger!

Ein spezielles Angebot für dich – hole dir Elementor Pro unschlagbar günstig mit dem folgenden Rabatt-Gutschein:

Fehler 8: Du installierst extra Plugins für Funktionen, die Elementor schon mitbringt

Ich benutze Elementor seit längerem sehr intensiv und bin nach wie vor immer wieder überrascht, wie viele Funktionen dieser Page Builder mitbringt. Was auf den ersten Blick nach “oh, viele Funktionen sind aber unübersichtlich und langsam” klingt, stimmt so nicht.

Denn durch die konsequente Verwendung von Elementor erspare ich mir sehr viele extra Plugins, z.B.

  • ein Newsletter-Plugin
  • ein 404 Plugin
  • ein Formular-Plugin
  • ein Popup-Plugin …

Und noch viele mehr! In meinem Artikel über Plugins, die du mit Elementor nicht mehr benötigst (bald online!), findest du eine vollständige Übersicht.

Der Vorteil? Die Plugins und Funktionen sind alle von einem Hersteller und daher sehr gut integriert und aufeinander abgestimmt. Updates lösen keine Inkompatibilitäten aus und es gibt einen einzigen Ansprechpartner für Support-Anfragen.

Become a Pro!

Viele der typischen Anfängerfehler haben damit zu tun, dass Elementor Pro ein wirklich mächtiges Tool ist und sowohl sehr unstrukturiert, als auch professionell und strukturiert verwendet werden kann.

Starte daher bei der Erstellung deiner Website, indem du

  • globale Farben definierst
  • globale Schriften festlegst
  • den Theme Builder verwendest

Diese strukturierte Herangehensweise wird dir die Arbeit mit deiner Website langfristig sehr erleichtern!

Falls du weitere Tipps oder Fehler für mich hast freue ich mich auf deinen Kommentar!

Lass uns einfach Websites bauen,

Schreibe einen Kommentar

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

Projektanfrage

Wobei kann ich dich unterstützen?