Vermeide diese 7 typischen Divi-Anfängerfehler!

Das Divi Theme mit dem Divi Visual Builder ist aus gutem Grund so erfolgreich. Man kann mit ihm sehr einfach ansprechende Websites erstellen. Auch ohne Programmierkenntnisse. 

Dazu kommt eine großartige Community die bei Problemen hilft und viele Erweiterungen von Divi programmiert hat - perfekt für Anfänger.

Doch aller Anfang ist schwer. Manche der zu Beginn gemachten Fehler lassen sich in weiterer Folge nur mehr schwer ausbügeln. 

Vermeide daher diese Anfänger-Fehler, wenn du Divi verwendest!
Vermeide diese 7 typischen Divi-Anfängerfehler!

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.

Divi Anfänger Fehler: zu viel Text

Direkt auf der Website zu arbeiten ist oft nicht praktikabel, da die Bearbeitungsmöglichkeiten sehr eingeschränkt sind.

Divi Anfänger Fehler: Bearbeitung direkt im Text

Teile daher deinen Text in Absätze auf. Nicht zu kurz – sonst hast du zu viele Elemente. 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.

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 Einstellungen zu verwenden und einmalig richtig einzustellen:

Divi Anfänger Fehler: Globale Einstellung verwenden

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

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.

7 Bausteine eines erfolgreichen Online-Business - jetzt herunterladen!

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.

Divi Anfänger Fehler: Divi Bibliothek verwenden

Globale Elemente sind an der giftgrünen Farbe erkennbar.

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.

Divi Anfänger Fehler: Transformieren von Elementen

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

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

Divi Anfänger Fehler: “Margin” (Außenabstand) und “Padding” (Innenabstand)

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.

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:

Divi Anfänger Fehler: Divi Styles von Microsoft Word

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.

Divi Anfänger Fehler: 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.

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!

PS: ein spezielles Angebot für dich: Divi um 20% günstiger*.

4 Kommentare

  1. Devi

    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 ;)

    Antworten
    • Michael

      Danke für diesen Tipp, Devi!

  2. Thomas

    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

    Antworten
    • Michael

      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

Einen Kommentar abschicken

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

Die Daten werden wie in der Datenschutzerklärung angegeben verarbeitet und gespeichert.