Inhaltsverzeichnis

Divi Builder richtig einstellen

Divi Builder: Jetzt in 3 Schritten den Divi Customizer richtig einstellen

Die wichtigsten Einstellungen bevor du dich an die Arbeit im Divi Builder machst!

Mit über 800.000 Installationen, 200 Layout Packs, 70.000 Facebook Mitgliedern, unzähligen Erweiterungen und 50 lokalen Gruppen gehört das Divi – Theme von Elegant Themes zu den meistgenutzten WordPress Themes weltweit. Der Divi Builder kommt nicht nur mit einer riesigen Fülle an großartigen Designs daher, sondern besitzt auch eine vielfältige Anzahl an verschiedensten Funktionen, mit denen eine Website ausgestattet werden kann. Daher ist es so beliebt!

Divi Installationen und Zahlen

Divi Theme einrichten

Wenn du planst, deine WordPress Website zukünftig mit dem Divi Theme zu nutzen, dann ist es wichtig, deine Seite vorab sauber einzurichten. Und zwar nicht nur innerhalb des Divi Builders, sondern was viele vergessen, ebenso im WordPress Customizer. Eine ordentliche Einrichtung vorab erspart dir nämlich später bei der Erstellung deiner Inhalte einen Haufen Arbeit. Klingt logisch. Ist es auch. Wie du Divi und somit den Divi Builder installierst, kannst du hier nachlesen.

Innerhalb des WordPress Customizers verbergen sich zahlreiche Einstellungsmöglichkeiten, die das Aussehen deiner Website grundlegend verändern können. Daher ist es immer sinnvoll, sich vorab zu überlegen, wie deine Website (wie z.B. Farbpalette, Schriften, Navigation, Fußzeile, Layout der Website, etc.) später aussehen soll. Schreib alles auf und mach dich erst dann an die Arbeit, wenn du soweit bist. Eine gute Planung ist die halbe Miete.

Mein Tipp: Nimm dir jetzt die Zeit, damit du später Zeit sparst!

Also los geht`s – Erste Schritte im Customizer

Um zum Customizer zu gelangen (Divi Builder sollte bereits installiert und aktiviert sein), gibt es zwei Wege. Entweder über den Reiter Design – Customizer oder direkt über Divi – Theme Customizer. Beide Wege führen zum Ziel. Bei einem Klick darauf findest du auf der linken Seite eine Menüleiste mit unterschiedlichen Einstellungen. Ebenso siehst du auch, welches Theme gerade aktiv ist. Das Divi Theme (oder auch das entsprechende Child Theme, falls du dieses schon verwendest).

Divi Builder: Einstellungen

Die allgemeinen Einstellungen für deine Divi-Seite

Wir beginnen mit den allgemeinen Einstellungen. Bei einem Klick auf den Menüpunkt „Allgemeine Einstellungen“ öffnet sich ein Untermenü mit den unterschiedlichen Einstellungen, um deine Website grundlegend einzurichten. Für uns interessant, sind vor allem die Reiter „Layout-Einstellungen“ und „Typografie“ im Divi Builder.

Divi Builder: Allgemeine Einstellungen

Layout-Einstellungen

Im ersten Schritt kannst du dich entscheiden, ob du ein Boxlayout verwenden möchtest oder lieber auf das Standardlayout einer Website zurückgreifen möchtest. Das Boxlayout gibt der Website einen linken und rechten Rand. Und wird auch gerne für reine Blogs verwendet.

Divi Builder: Layout

Danach stellst du unter „Inhaltsbreite der Website“ die Breite des Inhalts deiner Website ein. Der Standardwert von 1080 px hat sich in der Praxis bewährt, daher ist es sinnvoll hier den vorgegebenen Wert so belassen.

Die nächste Einstellung mit dem Namen „Spaltenabstände der Website“ ist meiner Meinung nach etwas unverständlich im Divi Builder übersetzt. Es handelt sich hierbei um den Rand zwischen den Spalten innerhalb einer Zeile. Also wenn du zum Beispiel innerhalb deiner Website ein Modul mit drei Spalten erstellst, steuert dieser Punkt den Abstand zwischen den Spalten an. Dabei definiert der Divi Builder das Ganze in Zahlen von 1 bis 4, die in Prozentzahlen folgende Werte ergeben.

1 steht für null Abstand zwischen den Spalten.
2 steht für einen rechten Rand von 3% zwischen den Spalten.
3 steht für einen rechten Rand von 5,5% zwischen den Spalten.
4 steht für einen rechten Rand von 8 % zwischen den Spalten.

Divi Builder: Oberfläche

Solltest du eine Seitenleiste für deine Website verwenden wollen, so kannst du über den Punkt „Verwenden Sie benutzerdefinierte Breite für Sidebar“ hier die Breite der Seitenleiste im Divi Builder definieren.

Unter den Punkten „Sektionshöhe“ und „Zeilenhöhe“ lässt sich der obere und untere Abstand für jede Sektion bzw. Zeile definieren. Ein kleiner Tipp: Ein höherer Abstand gibt einer Website mehr „Raum“, was sich positiv auf die Lesbarkeit auswirkt. Und nun zum letzten Punkt Akzentfarbe: Hiermit wird die Farbe für verschiedenste Elemente auf deiner Seite (wie z.B. das Hamburger Menü, Hintergrundfarbe für die sekundäre Menüleiste, aktiver Link… etc.) gesteuert.

Keine Sorge, die Farbe kannst du in den Einstellungen für die jeweiligen Elemente nochmal verfeinerter im Divi Builder anpassen. Das Gute daran ist, dass du hier nicht festgelegt bist. Als Tipp würde ich hier auf jeden Fall deine Akzentfarbe aus deiner Farbpalette wählen. Damit wird diese angezeigt, sobald du ein neues Element aufrufst und nicht die Standard-WordPress Farbe.

Typografie

Unter dem Punkt Typografie kannst du die Standardeinstellungen vom Divi Builder für Schriften definieren. Sehr praktisch, denn einmal definiert, werden bei jedem neuen Modul deine vorab eingestellten Schriften/Zeilenhöhen/Schriftgrößen etc. angezeigt. Aus meiner Sicht ist dies mit die wichtigste Einstellung im Divi Builder.

Divi Builder: Typografie

Es gibt hier zwei Auswahlfelder zur Typografie, die am hilfreichsten für den späteren Aufbau deiner Website sind – nämlich Schriftart Kopfzeile und Haupt-Schriftart. Unter dem Begriff „Schriftart Kopfzeile“ lässt sich die Schrift für Überschriften einstellen und unter dem Stichwort „Haupt-Schriftart“ richtest du die Schrift für den Fließtext (Body) ein. Auch hast du direkt die Möglichkeit die Schriftgröße und die Zeilenhöhe im Body anzupassen.

Divi Builder: Schriftart

Was die Farben angehen, kannst du hier die Farben für die Schrift im Body und für Links anpassen. Zur Linkfarbe lässt sich sagen, dass diese mit der Akzentfarbe, die du unter dem Punkt „Layout-Einstellungen“ einstellen kannst, identisch ist, sofern du sie an dieser Stelle nicht änderst.

Wow, das war ganz schön viel. Aber das meiste ist geschafft. Denn wir haben schon einiges an Einstellungen für den Divi Builder und deine neue Website damit vorgenommen. Nun geht es an die Feinarbeit.

Header & Navigation einrichten

Divi Builder: Header

Headerformat

Wir springen jetzt gleich zum Unterpunkt „Headerformat“ im Divi Builder. Hier kannst du bequem aus verschiedenen Optionen dein Wunschmenü erstellen. Ein kleiner Hinweis noch: Solltest du dich für ein zentriertes Menü entscheiden, so wird dein Logo auch zentriert dargestellt, ansonsten linksbündig. Auch kannst du dich hier entscheiden, ob du lieber das Menü im Kopfbereich haben möchtest oder vertikal in die Seitenleiste integriert.

Divi Builder: Headerformat

Primäre Menüleiste

Nicht wundern! Unter diesem Punkt könnte man im Divi Builder jetzt annehmen, dass die primäre Menüleiste, das Aussehen der obersten Leiste steuert. Das ist nicht so! Die oberste Leiste (hier das Menü mit dem magentafarbenen Hintergrund) nennt sich „Sekundäre Menüleiste“. Ein wenig verwirrend, oder? Zurück zum Reiter „Primäre Menüleiste“ – hier kannst du eine Vielzahl an Einstellungen vornehmen.

Divi Builder: sekundäre Menüleiste

Hauptaugenmerk möchte ich aber auf den folgenden Punkt legen: „Logo Max Höhe“. Hier werde ich oft gefragt, welche Größe das Logo am besten haben sollte, damit es sich gut in das Menü integriert.

Für die Desktopversion gilt: Für ein Logo im Querformat hat sich eine minimale Höhe von 45 – 55 px und eine minimale Breite von 250 px etabliert. Optimal ist ein Logoformat von 90 x 500 px. Als Bildformat eignet sich das PNG Format, mit dem sich auch transparente Logos abbilden lassen, am besten. Neben der Menühöhe spielt auch die Schriftgröße im Menü eine bedeutende Rolle, wie dein Logo dargestellt wird. Hier kannst du ein wenig an den Werten im Divi Builder herumspielen, bis du die ideale Darstellung gefunden hast.

Da die Anzeige von quadratischen oder hochformatigen Logos in Standardmenüs nicht immer optimal ist, ist es ratsam, wenn du neben deinem Hauptlogo noch eine Variante im Querformat besitzt. Ist keine vorhanden, so lässt sich alternativ über eine andere Darstellung deiner Menüleiste z.B. ein zentriertes Menü, dieses Problem lösen. Ebenso als Alternative kann das Logo aus dem Menü herausgenommen und zentriert auf der Seite dargestellt werden. Es gibt hier vielfältige Möglichkeiten im Divi Builder.

Für die mobile Ansicht gilt: Weniger ist mehr. Logos mit viel Textanteil oder aufwendigen Elementen, die verkleinert unleserlich erscheinen würden, lassen sich auch für Mobilgeräte darstellen. Der Trick: Viele Designer greifen auf verkleinerte Logos, die nur einen Teil des Logotextes, z.B. in Form von Initialen, umfassen oder weniger Bildelemente enthalten, zurück.

Das oberste Menü oder die sekundäre Menüleiste

Wie vorher schon erwähnt, ist die sekundäre Menüleiste, die Leiste, die sich oberhalb der primären Menüleiste oder des Hauptmenüs befindet. Sie wird gerne dazu genutzt, um Kontaktangaben oder Social Media Buttons anzuzeigen. Die Einstellungen ähneln den Einstellungen der primären Menüleiste und sind auch für Anfänger selbsterklärend.

Divi Builder: sekundäre Menülesite Einstellungen

Einstellungen für fixe Navigation

Und schon wieder ist es nicht wirklich ersichtlich, was genau damit gemeint ist. Zur Aufklärung, es handelt sich hierbei um Einstellungen für das primäre Menü. Die Einstellungen greifen dann, wenn du möchtest, dass deine Menüzeile im oberen Bereich fixiert angezeigt werden soll. Standard ist, dass beim Scrollen die Elemente im Menü etwas kleiner werden. Wenn du dies nicht möchtest, dann wähle hier die gleichen Einstellungen der Elemente wie im Bereich „Primäre Menüleiste“.

Divi Builder: Fixe Navigation

Headerelemente

Hier kannst du diejenigen Elemente aktivieren, die du gerne in deiner sekundären Menüleiste angezeigt haben möchtest, wie z.B. Social Media Icons. Die Verlinkung zu den Social Media Icons lässt sich im Divi unter Divi – Theme Optionen – Allgemein einstellen.

Divi Builder: Headerelemente

Wenn du wissen möchtest, wo die Suche erscheint. Diese wird in der primären Menüleiste angezeigt.

Buttons, Buttons, Buttons

Damit du nicht immer von vorne anfangen musst, wenn du einen neuen Button erstellst, macht es Sinn, den Buttonstil vorab im Customizer zu definieren. Du findest die Einstellungen für Buttons unter Design – Customizer – Buttons (Schaltfläche).

Divi Builder: Buttons

Hier findest du zwei Unterkategorien, die allgemeinen Einstellungen für Buttons „Style des Buttons (Schaltfläche)“ und die Einstellungen für den Hover Modus „Style des Buttons (Schaltfläche) beim Hover“. Dabei besagt der Hover Modus nichts anderes, als dass du über ein bestimmtes Element auf einer Webseite, hier Button, fährst, und sich dabei das Aussehen des Elements verändert, z. B. durch eine Änderung der Buttonfarbe. Das ist der Hover-Effekt.

Der Hover-Effekt macht deine Webseite für Nutzer interessanter. Außerdem lassen sich eine ganze Menge an Einstellungen für deinen Button anpassen, insbesondere Hintergrundfarbe, Umrandung, Schrift, Icon, …etc.

Was sich hierüber nicht einstellen lässt, sind Verläufe für Buttonhintergründe und du kannst hier auch nur einen einzigen Buttonstil definieren. Möchtest du vielleicht zwei Buttonstile nutzen (z.B. einen Button für dunkle Hintergründe und einen für helle Hintergründe), oder Verläufe hinzufügen, so empfehle ich dir dies in Divi Builder direkt einzurichten und diese(n) Button als globale(s) Element(e) in der Bibliothek zu speichern.  So hast du die Möglichkeit bei Bedarf immer darauf zurückgreifen zu können.

So das war es nun mit diesem Tutorial zu den wichtigsten Einstellungen im Customizer.

Ein paar abschließende Worte zur Arbeit mit Divi

Wie du siehst, ist es nicht schwer, im Vorfeld deine neue Divi Website im Customizer mithilfe des Divi Builders einzurichten. Mit ein bisschen Übung und guter Vorplanung lassen sich die Anpassungen sogar in relativ kurzer Zeit  durchführen.

Und es lohnt sich bereits dann, wenn du möchtest, dass einige Elemente deiner Website vordefiniert sind und du diese nur noch mit deinen Inhalten füllen brauchst (wie z.B. Call-to-Action Buttons oder Fließtext). Auch wenn es an der einen oder anderen Stelle etwas umständlich erscheinen mag, detaillierte Anpassungen vorzunehmen, so lässt sich aus eigener Erfahrung berichten, dass sich der Zeitaufwand mehr als lohnen wird. Denn danach kannst du dich ganz entspannt deiner Website widmen. Also am besten, probiere es einfach aus!

Hoffentlich hat dir das Tutorial Spaß gemacht und hilft dir bei der Einrichtung deiner Website weiter. Solltest du weitere Fragen oder Anmerkungen haben, so würden wir uns sehr über eine Mitteilung von dir freuen. Schreib uns, wie es dir mit deiner neuen Divi Website ergangen ist, zeig uns deine neue Website oder was dir zum Thema WordPress sonst noch so einfällt.
Wir freuen uns darüber.

Über den/die Autor/in:

Artikel teilen:

Facebook
Twitter
LinkedIn
WhatsApp
Reddit
XING

Über den/die Gastautor/in

Meriem Benois

Was sich über die Jahre aus Neugier und Leidenschaft entwickelt hat, hat Meriem Benois zu ihrem Beruf gemacht. Seit 2021 ist sie Webdesignerin mit Herz & Seele, Gründerin und Leiterin der Agentur Raster & Pixel, die sich auf WordPress-Seiten für Coaches, Trainer, Berater und Dienstleister spezialisiert hat. Dabei erstellt sie nicht nur Websites mit dem beliebten Divi Theme sondern bietet ebenso Support für Divi für ihre Kunden.

Ähnliche Artikel

Eine Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.