Fehler 1: Du fügst zu viel Text in ein einzelnes Text-Modul ein
Divi* ist großartig. Außer du willst viel Text (wie zum Beispiel in der Datenschutzerklärung) damit bearbeiten. Das Editor-Fenster ist sehr klein und die Tool-Leiste verschwindet, wenn du scrollst.
Direkt auf der Website zu arbeiten ist oft nicht praktikabel, da die Bearbeitungsmöglichkeiten sehr eingeschränkt sind.
Teile daher deinen Text in Absätze auf. Nicht zu kurz – sonst hast du zu viele Elemente und die Performance von Divi leidet. Aber auch nicht zu lange – sonst wird das Bearbeiten sehr mühsam.
Vor allem wenn du Text auf deiner Webseite verschieben willst.
Direkt im Text geht das nicht so komfortabel, wie wenn du einfach das ganze Text-Modul nach oben oder unten verschiebst.
Fehler 2: Du verwendest nur eine Sektion für den gesamten Inhalt
Dieser Fehler ist verwandt mit Fehler #1 und trifft sowohl auf Sektionen als auch auf Spalten zu.
Oft erlebe ich, dass der gesamte Inhalt in einer laaaaaangen Sektion angelegt wird. Es ist dann leider nicht einfach möglich
- einen Abschnitt anders zu gestalten
- einem Teil deiner Website eine andere Hintergrundfarbe zuzuweisen
- einzelne Teile deiner Website in der Divi Bibliothek zu speichern.
Lege daher für jeden logischen Abschnitt deiner Webseite (Lead image, Call To Action, Kundenstimmen, E-Mail-Opt-In …) eine eigene Sektion an. Das erleichtert den logischen Aufbau der Seite und ermöglicht die individuelle Gestaltung der einzelnen Sektionen.
Hol dir Divi bis zu 20% günstiger!
Ein spezielles Angebot für dich – hole dir Divi unschlagbar günstig mit dem folgenden Rabatt-Gutschein:
Fehler 3: Du änderst die Styles bei jedem Element individuell
Die Einstellungen von Divi unter dem “Design”-Tab regen den Spieltrieb an. Da wird dann wie wild für jeden Text eine Einstellung geändert. Spätestens bei der dritten Seite ist dann das Design nicht mehr konsistent.
Willst du später die Schriftart oder die Farbe des Textes ändern, artet das somit sehr schnell in einer Klick-Orgie aus.
Effizienter ist es daher die globalen Presets zu verwenden und einmalig richtig einzustellen:
Jetzt kannst du die Schriftgröße aller Überschriften zentral ändern. Einmal für alle Seiten. Solltest du doch eine individuelle Einstellung benötigen, dann kannst du das ganz einfach pro Modul überschreiben.
Hinweis: die Vorlagen von Elegant Themes verwenden KEINE globalen Styles – der erste Schritt ist daher für mich immer die Schriften und Farben so gut es geht in globale Styles zu packen, um ein einheitliches Designsystem sicherzustellen.
Fehler 4: Du verwendest keine globalen Elemente
Jede Seite deiner Website benötigt einen Handlungsaufruf. Oft wird dieser dann via Copy&Paste von einer Seite auf die andere kopiert. Dasselbe gilt für Kontaktformulare und Newsletteranmeldungen. Diese sind über verschiedenste Seiten deiner Website verstreut.
Änderst du dein Wording, musst du jede einzelne Seite bearbeiten und sicherstellen, dass du die Texte und Module überall anpasst.
Speicherst du hingegen ein globales Element in der Divi-Bibliothek ab, musst du die Änderung nur einmal durchführen und sie wird auf allen Seiten automatisch übernommen.
Speichere daher gemeinsame Element als “Global” in der Bibliothek und füge sie von dort wieder ein.
Globale Elemente sind an der giftgrünen Farbe erkennbar.
Änderungen daran wirken sich sofort auf alle Seiten deiner Website aus, die dieses globale Element eingefügt haben.
Fehler 5: Du setzt die Abstände nicht richtig
Divi bietet viele Möglichkeiten. Zu viele Möglichkeiten. Und gerade Anfänger wissen oft nicht, welche Seiteneffekte manche Einstellungen haben. So ist “Transformieren” eine spannende Möglichkeit, sollte aber nicht zu Layoutzwecken eingesetzt werden.
Dasselbe gilt für die Abstände “Margin” (Außenabstand) und “Padding” (Innenabstand). Diese werden oft per Drag’n’Drop dazu verwendet um “Elemente auszurichten”.
Das ist die völlig falsche Methode, denn spätestens wenn du dein Layout am Tablet oder Mobilgerät betrachtest wirst du erkennen, dass das keine so gute Idee war.
Wichtig: Verstehe, wie Margin und Padding funktionieren und wende sie gezielt an. Am besten, indem du die Zahlen direkt eingibst und nicht, indem du Drag & Drop verwendest. Da erwischt du nicht immer das richtige Element und so entsteht ein Margin-Padding-Min-Height-Kuddelmuddel…
Daher auch hier – zuerst ein wenig planen und dann konsistent einsetzen, zum Beispiel den Abstand zwischen Sektionen nur unten einstellen.
Und anschließend IMMER mobil testen.
Fehler 6: Du fügst Text direkt aus Word in Divi ein
Oftmals werden Texte in E-Mails, Microsoft Word oder Google Docs geschrieben. Kopierst du den Text und fügst ihn mit Cmd+V (Strg+V unter Windows) ein, dann werden netterweise auch die Formatierungen für dich übernommen.
Doch halt – irgendwas stimmt dann nicht? Denn die Klassen, Styles und so weiter, die übernommen werden, die passen so gar nicht. Siehst du dir den Quelltext an, dann steht da zum Beispiel folgendes:
Im Endeffekt fügst du unnötiges Markup ein, welches dann wieder Probleme macht, die schwer zu finden sind.
Verwende beim Einfügen von Text daher immer Cmd+Shift+V (Strg+Shift+V unter Windows). Das fügt nur den Text aus der Zwischenablage ein, aber keine Formatierungen.
Fehler 7: Du verwendest den Theme Builder nicht
Neu seit Divi 4 – der Divi Theme Builder.
Dieser erlaubt dir den Header und Footer für unterschiedliche Seiten, Artikel, Auflistungen usw. zu gestalten und zentral zu ändern. Das hat wieder den Vorteil, dass du Änderungen nur einmal vornehmen musst, und nicht auf jeder einzelnen Seite.
Startest du also frisch, dann verwende den Divi Theme Builder. Nur so stellst du sicher, dass deine Seite einfach zu warten ist und konsistent aussieht.
Fehler 8: Du verwendest Divi
Man muss es leider sagen, wie es ist.
Divi ist am absteigenden Ast.
Elegant Themes (das ist der Hersteller von Divi) programmiert seit über einem Jahr hinter verschlossenen Türen an Divi 5 herum, in der Zwischenzeit gibt es keinerlei Updates für Divi.
Bei Elementor* sieht die Sache hingegen komplett anders aus:
- Elementor entwickelt sich monatlich in Riesenschritten weiter (MegaMenü, Flexbox Container, CSS Grid, Loop. Builder…) – hier findest du die offizielle Roadmap von Elementor.
- Elementor hat eine solide technische Basis und lässt sich einfach erweitern, ein kompletter Rewrite wie bei Divi 5 ist daher nicht notwendig
- Elementor kommuniziert mit seinen Entwicklern und hat ein offizielles Github-Repository.
Ich habe sowohl Divi als auch Elementor verwendet und kann sagen: Elementor ist definitiv die bessere Plattform.
Solltest du also eine Alternative zu Divi suchen: teste Elementor* Pro.
Weitere Details zum Unterschied zwischen Divi und Elementor findest du hier:
- Divi vs. Elementor
- WordPress Pagebuilder im Vergleich
- Vortrag: Elementor im Vergleich zu anderen Pagebuildern
Fragen zu den häufigsten Fehlern
Wie viel Text soll ich in ein Text-Modul einfügen?
Auf keinen Fall zu viel – wenn es vom Text und Layout her Sinn macht, dann verwende unbedingt eigene Text-Module.
Wie viele Sektionen soll meine Seite haben?
Das hängt stark vom Design ab – aber alle Elemente in eine einzelne Sektion geben nimmt dir die Möglichkeit, diese individuell zu gestalten.
Kann ich globale Farben und Schriften in Divi definieren?
Ja, und das solltest du auf jeden Fall tun. Ansonsten musst du bei einer Änderung oder Anpassung jedes einzelne Modul auf deiner ganzen Website anpassen.
Mache dich also mit den globalen Farben und Einstellungen von Divi vertraut.
Wie setze ich Abstände in Divi richtig?
Verwende für Abstände nur die Funktionen Margin (Außenabstand) und Padding (Innenabstand). Achte dabei darauf, dass du die Einstellungen auch für Tablets & Mobilgeräte entsprechend anpasst.
Soll ich den Theme Builder von Divi verwenden?
Ja, auf jeden Fall! Denn nur damit kannst du einfach und zentral den Header, den Footer oder auch das Design der Blog-Beiträge anpassen.
Become a Pro!
Wie du an den Fehlern erkannt hast geht es oft darum, dir selbst langfristig das Leben einfacher zu machen. Und zwar indem du
- den Theme Builder von Divi verwendest
- Stile global definierst
- den Inhalt gut strukturierst
Durch dieses strukturierte Arbeiten wird deine Website einfacher zu warten, zu ändern und sieht auch optisch ansprechender aus!
Hast du einen weiteren Tipp für mich? Ich freue mich auf deinen Kommentar!
Michael
PS: ein spezielles Angebot für dich: Divi um 20% günstiger*.
13 Antworten
Hey, danke, das ist wieder mal hilfreich, Michael :) Gerade Punkt 1 hat mich schon oft geärgert…
Einen weiteren Tipp hab ich tatsächlich: Verlasse dich nicht auf die DIVI mobil-Ansicht sondern schau mit deinem echten Smartphone, wie es aussieht ;)
Danke für diesen Tipp, Devi!
Hi Michael, sehr toller Beitrag – ich lerne bzw. spiele gerade etwas mit Divi rum um mir ne Webseite zu bauen.
Aber zu deinem Tipp 5 habe ich eine Frage: Ich verstehe den Tipp so, dass du sagst über „Transformieren“ und „Margin, Padding“ sollte keine Layoutgestaltung erfolgen, weil falsche Methode….. Ich oute mich mal und gestehe, dass ich genau über Transformieren besonders gerne Bilder an die gewünschte Position schiebe, nach oben und unten schiebe usw…. In der Tat müssen dann mobil oder bei anderen Bildschirmgrößen Anpassungen vorgenommen werden – was ist denn deiner Ansicht nach die korrekte oder bessere Methode?
Ich freue mich über eine Rückmeldung und stöbere solange bisschen durch deinen Blog…. VG Thomas
Hallo Thomas,
danke für deinen Kommentar!
Wenn du weißt, was du mit Margin, Padding und Transformieren erreichst, die Möglichkeiten bewusst einsetzt und auf Mobilgeräte achtest, dann passt es. Aber wenn die Unterschiede zwischen Margin (vor allem negativen), Padding und Transform nicht klar sind und „irgendwie“ gearbeitet wird, dann eben nicht.
Ein Beispiel: eine Kundin hat alle Bilder mittels negativer Margins mittig ausgerichtet… das klappt dann spätestens am Mobilgerät nicht mehr. Falls das Layout nicht auch schon bei größeren oder kleineren Bildschirmen kaputt ist… außerdem wird gerade bei Drag’n’Drop oft die Min-Height verändert, auch das ist nicht gerade ideal und meist nicht gewollt….
Liebe Grüße, Michael
Hallo Michael,
bin hier auf Deine Site gestoßen und habe mich lange mit Deinen z.B. Divi vs. Elementor Recherchen, ausgiebig beschäftigt. Deine Bemühungen und Tipps gaben mir neue Inspiration auf die Sicht der Dinge und der Wahl von Anbietern.
Vielen Dank dafür…
Viele Grüße
Erik Benz
Lieber Erik,
vielen Dank für das Lob!
Liebe Grüße, Michael
Hallo Michael,
ich bin erst an meiner zweiten Divi Seite. Habe aber ein Problem mit den Textformatierungen. Allgemein für alle Schriften sowie auch für die H1 bis H6. Du hast oben geschrieben: „Effizienter ist es daher die globalen Einstellungen zu verwenden und einmalig richtig einzustellen“… kann ich Textformatierungen auch global abspeichern? Oder meinst Du damit das alle Schriften per CSS zu formatieren und das CSS zu speichern. Globale Einstellungen für Texteinstellungen geht doch garnicht oder? Auf meiner zweiten Divi Seite habe ich auch das Problem, das ich viel module und Elemente in die Bibliothek abgespeichert habe, manche auch als globales Element. Ich sehe sie auch im Backend von WordPress, wenn ich sie aber in der Visuellen Darstellung von Divi abrufen will sind keine vorhanden? Bei meiner ersten Seite hatte das super geklappt. Vielen Dank schon mal für Deine Hilfe! LG Tom
Hallo Tom,
die globalen Einstellungen haben nichts mit der Bibliothek oder „Globalen Modulen“ zu tun.
Es geht rein darum, was die (globalen) Standardeinstellungen von Texten, Überschriften etc. sind.
Das hat sich mit einer der letzten Divi-Versionen geändert, ich habe daher den „Fehler #3“ aktualisiert.
Wegen deinem zweiten Problem – achte darauf, ob das globale Element als Modul, Zeile oder Abschnitt gespeichert wurde, denn nur dort ist es dann auch sichtbar. So kannst du globale Module nur dort einfügen, wo du Module einfügen kannst, das selbe gilt dann bei Zeilen und Abschnitten.
lg
Michael
Vielen Dank Michael für den Tip mit den Presets! Das wusste ich nicht! Werde ich gleich ausprobieren!
Wegen den globalen modulen muss ich nochmal schauen!
Vielen Dank!
LG
Tom
Hello Michael, bedank mich für deine Tipps und kann diese nur bestätigen. Hab momentan eine andere Herausforderung. Aufgabe war, eine landingpage zu gestalten. Theme Builder benutzt. Startseite super geworden. Divi macht Freude. Jedoch, wenn ich eine neue Seite zB Impressum anlege kann ich keine individuelle Seite gestalten. Es wird immer die im Theme Builder gestaltete Startseite gezeigt. Welche Häckchen muss gesetzt oder entfernt werden :-)
Beste Grüsse vom Concierge aus Berlin
Hallo Gerry,
das klingt so, als hättest du die gesamte Seite im Theme Builder erstellt? Dort solltest du nur Header und Footer erstellen. Beim Content-Teil musst du das Content-Widget einfügen, sonst wird der Inhalt der aktuellen Seite nicht angezeigt.
lg Michael
Lieber Michael,
vielen Dank für all deine Tipps, waren sehr hilfreich!
Ich habe noch eine offene Frage: ich baue derzeit eine Seite. Der Header ist im Theme Builder eingestellt, dennoch wird mein Bild abgeschnitten (sollte unten links eine dezente Spitze mit Schräge aufzeigen, diese wird aber nicht angezeigt)…
Was mache ich falsch?
Danke und lieben Gruß,
Valentina
Hallo Valentina,
freut mich, wenn die Tipps hilfreich waren.
Da ich deine Website nicht kenne, kann ich nicht sagen, welches Bild abgeschnitten wird, sorry. Wenn du Hilfe benötigst kannst du dich ja an die Website Heroes wenden.