Fehler 1: Du fügst den ganzen Text in ein einziges Text-Element ein
Für Texte verwendest du das Text-Widget von Elementor:
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 oder Container 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 als das Text-Widget von Elementor.
Fehler 2: Du fügst alle Module in einen Container ein
Dieser Fehler ist sehr ähnlich zu #1, und trifft auf Container (früher: Abschnitte) zu.
Elementor macht es aufgrund der flexiblen Container viel einfacher als Divi die Inhalt sinnvoll zu strukturieren.
Gerade mit den Containern kannst du beliebig viel verschachteln und Spalten in Spalten in Spalten erstellen… doch achte auch hier immer darauf, dass du logische Abschnitte bildest.
Zum Beispiel hast du hier zuerst 2 Spalten, anschließend 3 Spalten:
Das sieht wunderbar aus und diese Freiheit zu verschachteln ist einer der größten Vorteile von Elementor gegenüber Divi. Dennoch sind hier deine Möglichkeiten der Formatierung eingeschränkt.
Verwende stattdessen eigene Container für jeden logischen Abschnitt deiner Website und erstelle die Spalten bzw. innere Container in diesen Abschnitten:
Das erlaubt dir mehr Freiheiten bei der Formatierung der einzelnen Abschnitte. Zum Beispiel unterschiedliche Hintergrundfarben, um deine Website besser aufzulockern.
Wasserdichte Angebote schreiben in nur 10 Minuten?
Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.
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:
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:
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 oder leere Container um ein Design zu erreichen.
Benutze stattdessen:
Erstens: Die Einstellung für die Inhaltsbreite des Containers, 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.
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:
Viel einfacher, oder?
Im Navigator von Elementor siehst du den strukturellen Unterschied noch besser:
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.
Das Problem dabei?
Du verteilst die Einstellungen auf unterschiedlichen Seiten in unterschiedlichen Widgets. 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.
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.
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 einem Welchsel 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.
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!
Verwende also von Beginn an den großartigen Theme Builder von Elementor Pro, um deine Website strukturiert aufzubauen!
Elementor Pro um bis zu 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 Jahren exklusiv in meinen Projekten 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 als Elementor Programmierer sehr viele extra Plugins, z.B.
- ein Newsletter-Plugin
- ein 404 Plugin
- ein Formular-Plugin
- ein Popup-Plugin …
Vermeide unbedingt die Verwendung von externen Plugins wie Ele Custom Skin oder CrocoBlock’s JetEngine*. Elementor Pro bringt alles mit, was du zr Anpassung von Blog-Beiträgen, Templates und Co benötigst.
Der Vorteil, wenn du auf externe Plugins verzichtest? Die Funktionen in Elementor 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.
Warum du als Profi Elementor Pro einsetzen solltest, das habe ich ausführlich in meinem Vortrag am WordCamp Vienna gesprochen.
Fehler 9: Du hast keine Lizenz für Elementor Pro
Glaub mir: du sparst am falschen Ende, wenn du dir die knapp 50 Euro pro Jahr für Elementor Pro* nicht leisten willst.
Du kannst zwar einige Funktionen mit externen Plugins nachrüsten (z.B. Ele Custom Skin oder CrocoBlock’s JetEngine*). Aber auch diese sind nicht unbedingt kostenlos und niemals so gut integriert, wie Elementor und Elementor Pro.
Gerade in den letzten Monaten hat Elementor massiv an Entwicklungstempo zugelegt. Loop Builder, Mega Menu, Tabs mit beliebigen Inhalten und vieles mehr sind jetzt standardmäßig verfügbar.
Diese Entwicklung von neuen, perfekt integrierten Funktionen unterstützt du mit deiner Lizenz. Und seien wir uns ehrlich, die paar Euro im Jahr sollten für das wichtigste Plugin deiner Website doch drinnen sein. Und WordPress-Plugins können nicht kostenlos sein.
Investiere daher in Elementor Pro*. Du bekommst für wenig Geld den besten Support, den ich kenne (abgesehen von den Website Heroes natürlich), den Theme Builder, den Loop Builder, das Mega Menu und viele weitere Widgets, für die du sonst erst Alternativen suchen müsstest.
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!
Du willst weitere Fehler in deinem Business vermeiden und so richtig als Web-Designer durchstarten? Dann ist mein WordPress Membership genau das richtige für dich. Hier lernst du Step-by-Step in einer großartigen Community, wie du dein Webdesign-Business zum fliegen bringst. Hier findest du mehr Details zum exklusiven WordPress-Business-Membership.
Lass uns einfach Websites bauen,
Michael
Fragen zu den häufigsten Fehlern
Soll ich den ganzen Text in ein Elementor-Text-Modul einfügen?
Nein, auf keinen Fall.
Verwende mehrere Text-Module, wo es Sinn macht.
Wie viele Abschnitte in Elementor soll ich verwenden?
Das hängt stark von deinem Design ab. Wenn du aber den gesamten Inhalt in nur einen Abschnitt gibst, dann kannst du z.B. den Hintergrund nicht mehr individuell gestalten oder Module einfach verschieben.
Soll ich das Abstands-Widget noch verwenden?
Abgesehen von Ausnahmefällen solltest du das Abstands-Widget nicht verwenden. Verwende stattdessen die Einstellungen für Margin und Padding.
Kann ich Farben und Schriften auch global definieren?
Ja, auf jeden Fall solltest du das tun. Ansonsten musst du bei einer Änderung oder Anpassung jedes einzelne Element deiner Website durchgehen. Das ist lästig, zeitaufwendig und nicht im Sinne des Erfinders :-)
Definiere die Farben und Schriften daher unbedingt global.
Was muss ich bei Copy&Paste aus Word oder anderen Programmen beachten?
Füge den Text unbedingt mit Cmd+Shift+V (Mac) bzw. Strg+Shift+V (Windows) ein. Ansonsten können ungewünschte Formatierungen übernommen werden.
Kann ich Elementor auch für Beiträge im Blog verwenden?
Können schon – aber es ist absolut nicht sinnvoll. Verwende für Beiträge den Gutenberg-Editor und gestalte die Seite, indem du ein Template (Single + Archiv) anlegst.
Damit stellst du sicher, dass alle Beiträge gleich aussehen und du z.B. die Seitenleiste oder die Kommentarfunktion einfach für alle Beiträge ändern kannst.
Soll ich den Theme-Builder von Elementor Pro verwenden?
Ja, auf jeden Fall. Denn nur so kannst du einfach und zentral an einer Stelle den Header und den Footer definieren und festlegen, wie Blog-Beiträge aussehen sollen.
Welche zusätzlichen Plugins benötige ich, wenn ich Elementor einsetze?
Relativ wenige – denn Elementor (Pro) ist so mächtig, dass viele Funktionen schon von Haus aus mit dabei sind. Du benötigst also keine extra Plugins, sondern kannst auf Funktionen in Elementor zurückgreifen.
Beispiele hierfür sind Popups, Formulare, Newsletter-Formulare, Captcha-Plugins usm.
Welchen Page-Builder kann ich anstatt Elementor verwenden?
Du kannst anstatt von Elementor auch einen der 7 folgenden Page-Builder verwenden:
- Divi – schau dir hier den Vergleich von Divi und Elementor an.
- Beaver Builder
- Brizy
- Thrive Architect
- Oxygen
- Visual Composer
- WPBakery Page Builder
Hier findest du einen Vergleich von Page-Buildern für WordPress.
10 Responses
Hallo Michael, vielen Dank für diesen interessanten Beitrag. In vielem habe ich mich als Elementor Beginnen wiedererkannt, einige Fehler konnte ich zwischenzeitlich abstellen.
Jetzt lese ich in Deinem Beitrag von der nativen Unterstützung von Mega Menüs durch Elementor. Das würde Crocoblock bei mir endlich überflüssig machen. Aber ich bin mir ziemlich sicher, daß es mit Elementor Bordmitteln immer noch nicht geht. Oder übersehe ich was Wesentliches? Danke und viele Grüße, Sascha
Hallo Sascha,
auf die MegaMenü’s direkt von Elementor warte ich auch schon sehr lange… in der nächsten Version von Elementor Pro (3.12) ist es soweit. Ich rechne damit, dass diese noch im März erscheint. Dann kann man endlich die Crocoblocks Megamenüs entfernen.
lg Michael
Hallo Michael,
eine schöne Übersicht :-)
Hast du einen Tipp für Folgendes?
Beim Responsive kommt es leider oft vor, dass die Spalten/Textinhalte zu schmal werden, bevor der Umbruch kommt. Dadurch ist der Textbereich viel zu schmal, wenn man das Browserfenster verkleinert.
Gibt es eine Möglichkeit für die Spalte oder das Textmodul in Elementor eine Mindestbreite einzustellen?
Viele Grüße, Andreas
Hallo Andreas,
dafür fallen mir mehrere Lösungen ein.
1.) Du kannst unter Website-Einstellungen > Layout > Breakpoints weitere Breakpoints definieren und dann früher die Spalten umbrechen.
2.) Du kannst mit eigenem CSS (Modul auswählen > Erweitert > Eigenes CSS) folgendes einfügen: selector { min-width: 230px; }
Letzteres wird dir aber unter Umständen das Layout zerstören. Und: wenn du noch mit Abschnitten und Spalten arbeitest, dann solltest du dir Container ansehen. Damit hast du mehr Möglichkeiten…
lg Michael
Hallo Michael,
vielen Dank für den Artikel. Ich habe einige Tipps mitgenommen. Hauptgrund für Dich um Blog-Einträge mit dem Gutenberg-Editor zu schreiben ist, dass dann alles konsistent gleich aussieht, richtig? Gibt es weitere Gründe?
Hallo Stefan,
der Hauptgrund ist der, dass du mit einem Elementor-Template das Aussehen von allen Blog-Beiträgen beeinflussen kannst.
Sollte sich dein Design ändern, musst du nicht 100te Blog-Artikel händisch bearbeiten.
Oder solltest du wie ich eine Autoren-Box einfügen, dann musst du das nur 1x, und nicht 100 Mal tun.
Das ist der große Vorteil. Und für den Inhalt von Blog-Beiträgen ist der Block-Editor vollkommen ausreichend.
lg Michael
Ich dachte ich finde bei dir die Lösung. Bei mir steht im HEader “Zum Inhalt wechseln” Wie geht das weg? Wenn ich auf deiner Seite suche, hast du das im Header oben auch, zwar mit der selben Headerfarbe, aber wie geht es weg?
Hallo Marco,
das ist eine Accessibility-Funktion für Screenreader, und die Zeile sollte nur für Screenreader sichtbar sein. Du kannst diese Funktion unter Design > Theme-Einstellungen > “Link überspringen deaktiveren” abschalten. Kann ich dir aber nicht empfehlen.
Wenn der Text angezeigt wird, obwohl du keinen Screenreader verwendest, dann hast du vermutlich einen Bug in deinem CSS oder eine Einstellung in deinem Browser geändert.
lg Michael
Ich hatte gehofft, hier einen Tipp für das Definieren von Standards zu finden. Wenn ich ein Element, z. B. ein Akkordeon, mit allen Einstellungen fertig habe und dann im Kontextmenü “Als Standard” wähle, sieht das nächste eingefügte Akkordeon nicht aus wie vorher eingestellt.
Wie kann ich diese Einstellungen festlegen und abrufen?
Gruß
Burkhard
Hallo Burkhard,
wenn das nicht klappt kannst du das dem Support von Elementor melden, damit sie den Fehler beheben.
Ich speichere Standard-Sections immer als Template ab und kann sie damit flexibel einfügen, wo ich möchte.
lg Michael