Divi Grundeinstellungen: Customizer (Teil 2)

Weiter geht es mit den Divi Theme Einstellungen im Designmodifikator (engl. Customizer). Einige generelle Hinweise und die Erläuterung der "Allgemeinen Einstellungen" und der Optionen für "Header & Navigation" findest du im ersten Teil unserer Designmodifikator Artikel aus unserer Divi Tutorial Reihe.

Video zu Header und Footer

Falls du dir alles in Ruhe ansehen willst: In einer Folge unseres Divi Webcasts, sind wir näher auf die Gestaltung von Header und Footer eingegangen.

Footer

Im Bereich Footer finden sich 5 Unterabschnitte:

Bevor wir uns den verschiedenen Einstellungsmöglichkeiten widmen ist als erstes wichtig zu verstehen welche Bereiche Divi für den Footer unterscheidet. Früher bestand bei den meisten Websites der Footer nur aus einem kleinen Bereich ganz unten auf jeder Seite.

Mittlerweile werden oft großflächige Footergestaltungen genutzt. Das unterstützt natürlich auch das Divi Theme. Hierbei werden drei Bereiche unterschieden:

1. Footer Sektionen (engl. Footer Sections)

Dieser Bereich wird erst angezeigt, wenn im Adminbereich unter "Design" > "Widgets" Inhalte in die Fußzeilenbereiche #1 bis #6 gezogen werden.

Hinweis: Seit kurzem sieht der Widget-Bereich etwas anders aus, da hier nun auch der Block Editor zum Einsatz kommt. Wir werden den Artikel bald entsprechend ergänzen. Grundsätzlich bleibt das Vorgehen aber sehr ähnlich wie vorher.

Dies ist auch direkt im Designmodifikator im Einstellungsbereich "Widgets" möglich.

Achtung: Diese Einstellungen sind in der obersten Ebene des Deisgnmodifikators zu finden. Es existiert leider ein gleichnamiger Einstellungsbereich in den "Footer" Einstellungen, den wir weiter unten erläutern.

2. Footer Menü (engl. Footer Menu)

Auch dieser Bereich wird nur angezeigt, wenn im Administrationsbereich unter "Design" > Menüs" ein Menü als Fußzeilenmenü definiert wurde.

Alternativ kann dies auch direkt im Designmodifikator im Einstellungsbereich "Menüs" erledigt werden.

3. Untere Leiste (engl. Bottom Bar)

Die untere Leiste wird immer angezeigt!

Falls Du diese doch ausblenden willst, findest Du weiter unten im Abschnitt "Untere Leiste" eine passende Lösung.

Footer Layout

Hier lassen sich zwei Einstellungen setzen:

1. Das "Spaltenlayout" bestimmt die Anzahl und Anordnung der Spalten für die Fußzeilenbereiche in der "Footer Sektion". Bitte beachte dabei, dass auch wenn Du z.B. in Fußzeilenbereich #3 ein Widget eingefügt hast, aber nur ein zweizeiliges Spaltenlayout wählst, wird die dritte Spalte nicht angezeigt.
2. Die "Fußzeilen Hintergrundfarbe" bestimmt den Hintergrund für die "Footer Sektion" (1) und auch für das "Footer Menü" (2). Dabei wird als Standardeinstellung aber der Hintergrund des "Footer Menüs" automatisch ein klein wenig heller dargestellt als die festgelegte Fußzeilen Hintergrundfarbe. Dies lässt sich allerdings im Einstellungsbereich "Fußzeilenmenü" anpassen.

Für die Hintergrundfarbe der "Unteren Leiste" (3) gibt es eine gesonderte Einstellung.

Widgets

Achtung: Hier geht es um die "Widgets" Einstellungen im Bereich "Footer". Es gibt einen weiteren eigenen "Widgets" Bereich in der obersten Einstellungsebene des Designmodifikators. Dort finden sich die üblichen WordPress Widgets Standardeinstellungen.

Für die Footer Widgets kannst Du diverse Einstellungen zur Darstellung der Texte, Links und Überschriften für die "Footer Sektion" (1) vornehmen.

Footerelemente

Hier lässt sich nur die Anzeige der Social Icons wie Facebook, Twitter & Co. in der "Unteren Leiste" (3) ein- oder ausschalten. Warum diese Einstellung ein eigenen Menüpunkt erhalten hat, während die Einstellungen für die Größe und Farbe der Social Icons im Einstellungsbereich "Untere Leiste" zu finden sind, weiß wohl nur Elegant Themes!?

Mehr Infos zur Darstellung von Social Icons findest Du in unserem Artikel "Soziale Netzwerke mit Icons in das Divi Theme einbinden".

Fußzeilenmenü

Hier lassen sich Einstellung für die Darstellung der Hintergrundfarbe und der Links im "Footer Menü" (2) treffen. Als Standardeinstellung wird die Hintergrundfarbe einfach etwas heller als die Einstellung für die Hintergrundfarbe des "Footer Sektionen" (1) Bereiches festgelegt. Dies lässt sich aber hier auch problemlos anpassen.

Untere Leiste

Hier finden sich alle Einstellungsmöglichkeiten für die "Untere Leiste" oder auch "Bootom Bar" wie z.B. Schriftgröße, Hintergrundfarbe, etc.

Achtung: Erstaunlicherweise muss die Anzeige der Social Icons im Footer im Einstellungsbereich "Footerelemente" ein- oder ausgeschaltet werden, während die Größe und Farbe in diesem Bereich geregelt wird.

Hier sind auch die Einstellungen für die "Fußzeilen-Credits" zu finden. Als Standard findet sich der Text "Designed by Elegant Themes | Powered by WordPress" in der Unteren Leiste.

Wer einen eigenen Text verfassen möchte, trägt diesen einfach in das Feld "Fußzeilen-Credits ändern" ein. Falls Du Links integrieren willst, musst Du HTML-Code verwenden:

© <a href="https://divi.world/">Divi.world</a> 2016-2019

Wenn in der Unteren Leiste kein Text angezeigt werden soll, musst Du einfach den Haken vor "Fußzeilen-Credits abschalten" setzten.

Falls Du die "Untere Leiste" komplett ausblenden willst, hilft folgender CSS-Code, den Du idealerweise in der style.css Deines Divi Child Themes platzierst:

#footer-bottom {
    height: 0 !important;
    overflow: hidden;
    padding: 0;
}

Weitere Hinweise zur Anpassung der Einträge in der Bottom Bar findest Du in unserem Artikel "Texte im Footer ändern".

Schriftart im Footer

Die Schriftart in allen vom Customizer gesteuerten Footerbereichen richtet sich nach der im Customizer unter "Allgemeine Einstellungen" > "Typographie" eingetragenen Schriftart für den Body. Wenn du hier eine andere Schriftart als im Body verwenden willst, musst du entweder mittels des Theme Builders einen eigenen Footer gestalten oder auf CSS zurückgreifen, das du am besten in die style.css deines Child Themes oder dem Bereich "Zusätzliches CSS" des Customizers einträgst:

#main-footer {
font-family: 'Times New Roman', Helvetica, Arial, Lucida, sans-serif !important;
}

Mit #main-footer werden alle drei Footerbereiche angesprochen. Du kannst dies auch mit #footer-widgets (Footer Sections), #et-footer-nav (Footer Menu) oder #footer-info (Bottom Bar) ersetzen und so gezielt jeweils einen der drei Footerbereiche ansprechen.

Schaltflächen (Buttons)

Hier lassen sich die allgemeinen Designeinstellungen für Schaltflächen (engl. Buttons) anpassen.

Dabei finden sich unter Schaltflächenstil" alle möglichen Designoptionen und unter "Schaltflächenstil beim Herüberfahren" können abweichende Einstellungen gesetzt werden, die nur beim Überfahren mit der Maus angezeigt werden. Ein sogenannter Hover-Effekt.

Achtung: Zumindest bei unserer Installation setzten sich Änderungen an diesen Einstellungen nicht wie gewohnt sofort in der Vorschau um. Selbst nach dem Speichern bzw. Veröffentlichen der Änderungen im Designmodifikator wurden zunächst keine Änderungen an den Buttons dargestellt. Erst ein Reload der Seite sorgte dafür, dass die neuen Button Einstellungen auch wirklich angezeigt wurden.

Dies sind die allgemeinen Einstellungen für die Buttons. Wenn du ein Button Modul verwendest, kannst Du im Modul andere Einstellungen nutzen. Diese überschreiben dann die allgemeinen Einstellungen.

Wichtig: Standardmäßig wird die Textfarbe von Buttons durch die Akzentfarbe gesetzt. So lange dies der Fall ist, wird in Modulen mit einer Texteinstellung auf "dunkel" die Akzentfarbe als Textfarbe für die Buttons verwendet. Ist die Texteinstellung "hell" gewählt werden die Buttons automatisch weiß angezeigt. Sobald Du eine eigene Textfarbe für die Buttons auswählst, wird diese immer angezeigt.

Blog

In diesem Bereich findet sich nur der Untereintrag "Post". Hier kann die Darstellung der Meta-Informationen (die Infos zu Autor, Veröffentlichungsdatum, Kategorien, Kommentare) und der Artikelüberschrift angepasst werden.

Wichtig: Dies beeinflusst nur die Darstellung auf der einzelnen Artikelseite und nicht die Darstellung in der Blogansicht über mehrere Artikel!

Mobile Designs

Entsprechend den allgemeinen "Layout-Einstellungen" für die Sektions- und Zeilenhöhe und der Typographie, können hier gesonderte angepasste Einstellungen für die Darstellung auf dem "Tablet" und dem "Handy" gesetzt werden. Die Vorschau passt sich praktischerweise gleich an den gewählten Darstellungsmodus an:

Außerdem kann das "Menü für mobile Geräte" (das sogenannte Burgermenü) in Bezug auf Text- und Hintergrundfarbe und der Anzeige des Logobildes angepasst werden.

Farbschemata

An dieser Stelle kann zwischen dem Standard Farbset und vier weiteren vorgegebenen Farbschemata gewählt werden.

Wichtig: Eigentlich ist dieser Bereich ein Überbleibsel aus der frühen Zeit des Divi Themes. Du solltest es bei der Standardeinstellung belassen, denn die verschiedenen Farbpaletten unterscheiden sich eigentlich nur durch eine unterschiedliche Akzentfarbe, die als Standard blau ist. Hierbei stehen nur Grün, Orange, Pink und Rot zur Auswahl. Falls Du keinerlei Anpassungen über CSS vorgenommen hast wird die Akzentfarbe für eine ganze Reihe von Elementen genutzt wie z.B. Links, Buttons, Hintergrund der sekundären Menüleiste, etc. (siehe Grundeinstellung für die Akzentfarbe).

Wenn du eines der anderen hier vorgegebenen Farbschemata nutzt, wird nur diese Akzentfarbe mit dem vorgegebenen Farbwert geändert, aber leider mit einem !important im CSS. D.h. Du kannst diese Farbe im Falle eines Falles nicht mehr beeinflussen.

Da ist es besser Du passt die Akzentfarbe selbst direkt in den Layout-Einstellungen an, falls Du diese verändern willst.

WordPress Customizer Einstellungen

Die folgenden Einstellungsbereiche für "Menüs", "Widgets", "Startseiten-Einstellungen" und "Zusätzliches CSS" sind WordPress Standardeinstellungsbereiche im Customizer und gehören nicht speziell zum Divi Theme.

Deshalb werden wir diese auch nicht weiter erläutern.

Wichtig: eigenen CSS-Code einfügen

Falls Du eigenen CSS-Code integrieren willst, empfehlen wir den Weg über ein eigenes Divi Child Theme und dem Anpassen des CSS in der dort enthaltenen Datei style.css um alle Änderungen klar an einer Stelle versammelt und gesichert zu haben und möglichen Nachteilen aus dem Weg zu gehen.

Divi Theme Anleitung

Dieser Artikel ist im Rahmen unseres Divi Theme Anleitungs erschienen und die Fortsetzung der ersten Teils "Divi Grundeinstellungen: Designmodifikator".

Weitere Informationen kannst Du in dem Artikel "The Ultimate Guide to the Divi Theme Customizer" von Elegant Themes finden.