Ein weiterer Teil unseres Divi Theme Tutorials zu den Grundeinstellungen. Im Designmodifikator (oder englisch Customizer) sind weitere Einstellungen für das Divi Theme zu finden. Der Name ist Programm, daher sind im Designmodifikator auch überwiegend solche Einstellungen zu finden, die Auswirkungen auf die Art der Darstellung des Divi Themes haben, während alles andere eher in den Divi Theme-Optionen im Administrationsbereich zu finden ist.

Einige Optionen im Designmodifikator sind allerdings WordPress Standardeinstellungen, die unabhängig vom aktiviertem Theme immer zu finden sind.

Divi Designmodifikator aufrufen

Zum Designmodifikator (Customizer) gelangt man über mehrere Wege:

  1. Wenn Du oben links im Adminbar über den Namen Deiner Website fährst klappt automatisch ein kleines Menü aus, in dem unter anderem auch ein Eintrag „Designmodifikator“ lautet.
  2. Im Administrationsbereich ist ebenfalls ein Eintrag unter „Design“ zu finden. Erstaunlicherweise steht hier auch bei deutschsprachigen Menüs die englische Bezeichnung „Customizer“.
  3. Im Adminbereich im Bereich der Einstellungen für „Divi“ ist ebenfalls ein Menüpunkt „Designmodifikator“ zu finden.

Eigentlich ist es gleichgültig auf welchem Weg Du den Designmodiikator aktivierst. Allerdings wenn Du die Auswirkungen Deiner Einstellungen auf eine bestimmte Seite direkt sehen willst, ist es ratsam auf genau diese Seite zu gehen und dort über Variante 1 den Designmodifikator aufzurufen.

Anzeige des Divi Designmodifikators

Das Menü des Designmodifikators wird nämlich links eingeblendet, während rechts die aktuelle Seite weiter dargestellt wird:

Divi Theme Einstellungen Customizer

Sobald der Designmodifikator aktiviert ist, kannst Du trotzdem rechts auf Deiner Seite weitersurfen, um z.B. weitere Bereiche aufzurufen bei denen Du sehen willst wie sich Deine Änderungen auswirken. Das ist nämlich das Interessante an dem Designmodifikator: alle Einstellungen werden gleich im rechten Bereich dargestellt.

Wichtig: Die Änderungen werden Dir zwar sofort angezeigt, aber erst dann wirklich übernommen und für andere sichtbar, wenn Du auf den „Veröffentlichen“ Button (1) klickst. Wenn Du den Designmodifikator verlässt ohne zu veröffentlichen, gehen sämtliche Deiner Änderungen verloren!

Achtung: Divi stellt noch einen weiteren Einstellungsbereich zur Verfügung: den Modulmodifikator! In diesem Bereich können spezielle Designeinstellungen für bestimmte Module gesetzt werden. Manchmal verirrt sich ein Anfänger in diesen Bereich und wundert sich wo denn die Einstellungen des Designmodifikators geblieben sind.

Ausblenden

Wenn Du Deine Website kurz ungestört in voller Breite betrachten willst, kannst Du den aktiven Designmodifikator kurzfristig „Ausblenden“ (4). Es bleibt nur unten links ein sehr kleines Pfeilsymbol zu sehen, über das Du den Bereich auch wieder einblenden kannst.

Responsive Ansichten

Da heute sehr viel über Smartphones und Tablets im Internet gesruft wird, ist es wichtig auch auf die Darstellung auf kleineren Bildschirmen zu achten (Responsive Design). Deshalb findest Du im Designmodifikator unten rechts drei kleine Symbole über die Du auf die Handy-, Tablet- oder Desktopansicht umschalten kannst. So kannst Du auch überprüfen wie sich Deine Eisntellungen auf den kleineren Bildschirmen auswirken.

Einstellungen exportieren oder importieren

Über den Button (3) kannst Du die aktuellen Einstellungen exportieren oder auch bereits gesicherte Einstellungen importieren, was zum Übertragen von Einstellungen von einer Seite auf eine andere recht hilfreich sein kann, um nicht nochmal alle Einstellungen einzeln vornehmen zu müssen.

Die Einstellungsbereiche des Designmodifikators

Wir werden uns gleich die verschiedenen Einstellungsbereiche genauer ansehen. Hierbei können die Optionen in weiteren Untermenüs verschachtelt sein.

Wichtig: Die Einstellungen des Modulmodifikators überschreiben stets die allgemeineren Einstellungen des Designmodifikators. Falls Du Dich mal wunderst, warum sich z.B. eine Schrift nicht über den Designmodifikator verändert, schau erst einmal im Modulmodifikator nach, ob dort ggf. etwas anderes eingestellt ist. Das gleiche gilt, falls Du im Divi Builder für ein Modul spezielle Einstellungen getroffen hast. Diese überschreiben ebenfalls die Einstellungen des Designmodifikators. Auch falls Du irgendwo Veränderungen über CSS-Code vorgenommen hast, überschreiben diese Änderungen ebenfalls die Einstellungen des Designmodifikators!

Allgemeine Einstellungen

Der erste Bereich bietet Optionen, die für Deine gesamte Website gelten:

Divi Theme Customizer: Allgemeine Einstellungen

Website-Identität

Hier finden sich zum Teil WordPress Standardeinstellungen, auf die auch im Administrationsbereich zugegriffen werden kann. Dazu gehört der Titel der Website und der Untertitel. Beide werden vom Divi Theme nirgends direkt angezeigt, aber erscheinen z.B. als Website Titel im Browser oder in Google Sucherergebnissen.

Weiter unten lässt sich ein Bild für das „Website-Icon“ auswählen. Damit wird das Favicon für die Website zugewiesen. Diese Einstellung war früher in den Divi Theme-Optionen zu finden.

Layout-Einstellungen

In den Layout-Einstellungen finden sich einige Grundlegende Einstellungen für Deine Website:

Divi Theme Layout Einstellungen

Als erstes kannst Du das „Boxlayout aktivieren“. Damit wird rechts und links ein Rand dargestellt (1).

Divi Theme Einstellungen: Boxed Layout Inhaltsbreite

Über die „Inhaltsbreite“ bestimmst Du wie breit der Bereich für die Inhalte angezeigt wird (2). Dies bezieht sich aber natürlich nur auf die Desktopansicht.

Achtung: Da die Einblendung des Designmodifikators etwas Platz wegnimmt, kann es sein, dass Du diese Änderungen erst siehst, wenn Du den Modifikator ausblendest.

Die Auswirkungen der folgenden Abstandseinstellungen lassen sich am einfachsten über einen Screenshot des Divi Backendbuilders darstellen:

Divi Theme: Abstaende für Spalten, Zeilen und Sektionen

Die Spaltenabstände bestimmen wie breit der Abstand zwischen verschiedenen Spalten (1) im Divi Builder ist. Diese Option wirkt sich allerdings auch auf den Abstand zur Sidebar ohne den Divi Builder aus.

Die Breite der Sidebar selbst kann durch aktivieren der Option „Verwenden Sie benutzerdefinierte Sidebar“ und dem anschließend erscheinenden Slider individuell eingestellt werden.

Es folgen Einstellungen für die Sektionshöhe (2) und die Zeilenhöhe (3), die sich nur bei der Nutzung des Divi Builders auswirken.

Achtung: Falls Du im Divi Builder in den Sektions-, Zeilen- oder Moduleinstellungen eigene Werte für Abstände definiert hast, musst Du diese auch dort ändern.

Zu guter Letzt kannst Du hier die sogenannte Akzentfarbe wählen. Diese wird an verschiedenen Stellen verwendet wie z.B. für Links oder aktive Menüpunkte.

Typographie

An dieser Stelle finden sich sehr viele allgemeine Einstellungsmöglichkeiten für die Schrift auf Deiner Website wie z.B. Schriftgröße und -farbe, Zeilenhöhe, verwendete Schriftarten, etc.

Dabei wird zwischen den Einstellungen für den „Body“ und den „Header“ unterschieden. Die Einstellungen für den „Body“ beeinflussen den einfachen Fließtext, während die Optionen für den „Header“ sich auf alle Überschriftentexte beziehen.

Hintergrund

An dieser Stelle lässt sich eine Hintergrundfarbe oder ein Hintergrundbild für Deine Website auswählen.

Achtung: Es geht hierbei um den Hintergrund, der nur sichtbar ist, wenn unter „Layout-Einstellungen“ ein Boxlayout aktiviert ist!

Header & Navigation

Hier finden sich alle Einstellungen, die sich auf den Header beziehen und die Hauptnavigation betreffen.

Headerformat

Unter Kopfzeilen-Stil lassen sich vier verschiedene Formate wählen:

  1. Standard: Die übliche Darstellung des Divi Headers mit links dem Logobild und rechts der Hauptnavigation.
  2. Zentriert: Hier wird das Logobild zentriert dargestellt und darunter ebenfalls zentriert die Hauptnavigation.
  3. Zentriert, innenliegendes Logo: Hier wird das Logo zentriert zwischen die Hauptnavigation platziert.
  4. Slide-in: Es erscheint oben rechts ein Burgermenü. Ein Klick darauf lässt rechts die Navigation als Auswahlmenü hereinschieben.
  5. Vollbild: Es erscheint oben rechts ein Burgermenü. Ein Klick darauf lässt mittig einen Bereich mit der Navigation erscheinen.

Über „Vertikale Navigation aktivieren“ kann die Navigation seitlich links oder rechts eingeblendet werden.

Über die Option „Navigation zum Scrollen verbergen“ sorgt dafür, dass die Navigation zunächst nicht angezeigt wird und erst erscheint, wenn der Besucher die Seite etwas nach unten scrollt.

Wichtig: Diese Einstellung kann im Editor für individuelle Seiten und Beiträge überschrieben werden.

Primäre Menüleiste

Die Primäre Menüleiste ist die Hauptnavigation mit dem Logo und den Links. Es lässt sich auch eine kleine sogenannte „Sekundäre Menüleiste“ oberhalb der primären Menüleiste einblenden (siehe Screenshot weiter unten). Dies ist mit Hilfe der Einstellungen im Bereich „Headerelemente“ oder durch die Definition eines Menüs für die sekundäre Menüzeile möglich.

„Volle Breite nutzen“ bewirkt, dass die Begrenzungen für die Inhalte in diesem Headerbereich sich nicht an den Begrenzungen des Inhaltsbereichs orientiert, sondern wirklich bis ganz rechts und ganz nach links ausdehnen.

Mit „Logobild verbergen“ lässt sich die Anzeige des Logobildes im Header ausblenden. Das kann auch dann interessant sein, wenn man noch kein eigenes Logobild über die Theme-Optionen eingestellt hat, aber nicht möchte dass das Standard Divi-Logo angezeigt wird.

Die folgenden Einstellungen beeinflussen alle die Darstellung der Navigation und sind weitgehend selbsterklärend. Ansonsten einfach mal ein wenig experimentieren, denn Du weiß ja, dass die Einstellungen erst (und nur dann) übernommen werden, wenn Du auf „Veröffentlichen“ klickst!

Nur die Einstellungen für das „Drop-Down-Menü“ sind erst dann zu sehen, wenn Du in Deiner Navigation Unterpunkte erstellt hast. Diese erscheinen dann, wenn Du mit der Maus über den oberen Menüpunkt fährst. Das ist das sogenannte Drop-Down-Menü.

Sekundäre Menüleiste

Die „Sekundäre Menüleiste“ ist ein schmaler Bereich der noch oberhalb der primären Menüleiste angezeigt wird.

Wichtig: Damit die „Sekundäre Menüleiste“ angezeigt wird, müssen im Bereich „Headerelemente“ entsprechende Elemente für die sekundäre Menüleiste eingetragen bzw. ausgewählt werden. Alternativ kann auch im Administrationsbereich unter „Design“ > „Menüs“ ein eigenes Menü für die sekundäre Menüleiste angelegt werden.

Die Einstellungsmöglichkeiten entsprechen weitgehend denen der primären Menüleiste.

Festgelegte Navigationseinstellungen

Hinter dieser etwas merkwürdigen Bezeichnung verbergen sich die Einstellungen für die primäre Menüzeile, wenn diese so konfiguriert ist, dass diese auch beim Scrollen auf der Seite immer im oberen Bereich fixiert angezeigt wird. Diese kann dann beim Scrollen der Seite nach unten optisch anpasst werden. Von Haus aus gelten die Standardeinstellungen bei denen sich die primäre Menüleiste beim Scrollen etwas verkleinert und das Logobild ebenfalls.

Dieses Verhalten ist relativ benutzerfreundlich, weil damit das Menü weniger Platz einnimmt und trotzdem noch sicht- und erreichbar ist. Falls das Menü gleich bleiben soll, müssen hier nur die gleichen Einstellungen wie unter „Primäre Menüleiste“ gesetzt werden.

Headerelemente

In diesem Bereich lassen sich weitere Elemente für den Header aktivieren oder auch eintragen. Dazu gehört als erstes die Option „Socialicons zeigen“, die dafür sorgt, dass die in den Theme-Optionen definierten Social-Links über ein Symbol in der sekundären Menüleiste dargestellt werden. Weiterführende Informationen findest Du in unserem Artikel zu den Divi Socialicons.

Über „Suchsymbol anzeigen“ wird rechts neben den Navigationslinks ein Lupensymbol eingeblendet. Ein Klick auf selbiges lässt ein Suchfeld erscheinen.

In den folgenden zwei Feldern lässt sich eine Telefonnummer und eine E-Mailadresse angeben, die beide mit einem passendem Symbol oben links in der sekundären Menüleiste eingeblendet werden.

Wichtig: Die sekundäre Menüleiste wird nur angezeigt, wenn eines der Elemente Socialicons, Telefonummer, E-Mail aktiv ist oder ein Navigationsmenü für die sekundäre Menüleiste erstellt wurde!

Alles weitere im Teil 2

Die weiteren Funktionen des Designmodifikators werden wir im folgenden zweiten Teil unserer Divi Theme Tutorial Serie besprechen.