Divi Grundeinstellungen: Customizer (Teil 2)

von | Tutorial

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.

Im Bereich Footer finden sich 5 Unterabschnitte:

Divi Theme Customizer Footer Einstellungen

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:

Divi Theme Footer Bereiche

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.

Divi Theme Footer Widgets

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.

Divi Theme Footer Menü

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

Divi Theme Customizer Footer Layout Einstellungen

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.

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.

Divi Theme Customizer Footer Widgets Einstellungen

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ü

Divi Theme Customizer Fusszeilenmenü Einstellungen

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.

Divi Theme Customizer Bottom Bar Einstellungen

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

Schaltflächen (Buttons)

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

Divi Theme Customizer Button Layout Einstellungen

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.

Divi Theme Customizer Blog Einstellungen

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:

Divi Theme Customizer Mobile Designs Tablet

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.

Divi Theme Customizer Farbschema

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 Tutorial

Dieser Artikel ist im Rahmen unseres Divi Theme Tutorials 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.

10 Kommentare

  1. Andreas

    Schöne Anleitung.

    Ich möchte die Größe des Logos für mobile Geräte ändern und finde diese Möglichkeit nicht in den Einstellungen. Geht das über css und wenn ja welcher Eintrag ist hier zu ändern?

    Antworten
  2. Georgi

    wie kann ich die Footer-Höhe verändern auf in Summe nur eine Zeile mit der Copyright-Info? Und wie kann man wenn auf der Seite ein Bild sein soll, es so machen, dass dieses Bild bis in den Footer hinuntergeht – also diese eine Footer-Zeile über dem Bild mit transparentem Hintergrund ist? Danke für die Weiterhilfe!

    Antworten
  3. Nils

    Hi Georgi,

    Deine erste Frage verstehe ich nicht ganz. Es gibt ja drei Bereiche im Divi Footer. Ich würde jetzt vermuten, Du sprichst von der „Unteren Leiste“ (engl. „Bottom Bar“) und die ist ja bereits einzeilig. Insofern ist der Footer von Haus aus bereits einzeilig und die anderen Bereiche werden nur eingeblendet, wenn Du das entsprechend einstellst. Das wird in meinem Artikel aber auch erklärt.

    Deine zweite Frage hat Elegant Themes bereits in dem Artikel How to Add Creative Background Designs to Divi’s Bottom Footer Bar beantwortet. Der einzige Unterschied ist, dass Du eben statt eines Übergangs ein Hintergrundbild für die Sektion verwendest und deshalb die weitere Anleitung ab „Adding the bottom divider“ nicht mehr benötigst. Vor allem brauchst Du keinen CSS-Code zum Z-Index eintragen.

    Antworten
  4. Stef

    Hallo Nils,
    ich nutze die aktuelle Divi Version und leider wird mir das Optionsfeld „Header & Navigation“ nur für den Bruchteil einer Sekunde angezeigt und verschwindet daraufhin wieder, sodass ich die Option gar nicht erst auswählen kann. Könnte das ein Konflikt mit irgendeiner anderen Option sein? Lieben Gruß und danke schon mal für die Hilfe.

    Antworten
    • Nils

      Hi Stef,

      ich vermute das ist eher kein Konflikt, sonder da arbeitet Divi wie es soll (It’s not a bug, it’s a feature).

      Seit Divi 4.0 sind ja Theme Builder Funktionen integriert. Die bisherigen Einstellungsmöglichkeiten für Header und Footer sind nur dann zugänglich, wenn man den Standard Divi Header oder Footer verwendet. Sobald Du ein eigenes Header oder Footer Template erstellst, stehen diese Funktionen im Customizer nicht mehr zur Verfügung.

      Siehe auch hier.

      Antworten
  5. Steffi

    Lieber Nils,

    auf der Startseite meiner Website würde ich gerne meine Navigation bis zum Scrollen verbergen, bei allen anderen Seiten allerdings nicht, hier soll sie durchgehend sichtbar sein.
    Gibt es hierfür eine Möglichkeit, evtl. über CSS?

    Vielen Dank!

    Antworten
    • Steffi

      Hat sich erledigt 🙂 Geht ganz einfach über die Divi Seiteneinstellungen.

      Liebe Grüße

      Antworten
  6. Jana

    Hallo Nils, ich habe als Akzentfarbe #2d2d2d hinterlegt und im Farbschema Standard eingestellt. Dennoch erscheint im Menü der aktive Link in einem Blauton. Erst wenn ich die Seite etwas nach unten scrolle und die Navigationsleiste sich verkleinert, erscheint das Menü in der Akzentfarbe bzw. mit den Einstellungen welche ich in der primären Menüleiste ausgewählt habe. Ich arbeite das erste Mal mit diesem Theme und konnte auf dieser Website bereits schon sehr hilfreiche Informationen erhalten – prima. Danke und Grüße

    Antworten
    • Nils

      Hallo Jana,

      ich habe mir das gerade mal angesehen und da scheint es in der Tat etwas Schwierigkeiten zu geben. Es gibt ja im Customizer drei Einstellungsbereiche die die Linkfarbe im Menü betreffen.

      1. Allgemeine Einstellungen > Layout Einstellungen: Hier legst du eigentlich die Akzentfarbe fest.

      2. Header & Navigation > Primäre Menüleiste: Hier wird die Linkfarbe für das Menü festgelegt, wenn noch nicht gescrollt wurde.

      3. Header & Navigation > Einstellungen für die fixe Navigation: Hier wird die Linkfarbe für das Menü festgelegt, wenn der Besucher auf der Seite scrollt.

      In allen drei Bereichen muss die passende Linkfarbe hinterlegt sein. Nach deiner Aussage sollte bei „Primäre Menüleiste“ noch ein falscher Farbwert eingestellt sein. Es scheint zumindest in der aktuellen Version nicht der Fall zu sein, dass ein Umstellen der Akzentfarbe sich auch immer automatisch auf die Linkfarbe des „Primären Menüs“ und den „Einstellungen für die fixe Navigation“ auswirkt.

      Außerdem werden die Einstellungen auch häufiger nicht gleich in der Customizer Vorschau angezeigt und man muss manchmal erstmal aus dem Customizer herausgehen, damit sich die Einstellung auswirkt. Ich bin mir nicht ganz sicher, ob das alles so wie gedacht funktioniert und vielleicht solltest du einfach den Elegant Themes Support mal anschreiben.

      Unabhängig davon kann ich die entsprechende Farbe erscheinen lassen, wenn ich dafür sorge, dass an allen drei o.g. Stellen der passende Farbwert hinterlegt ist. Ich vermute die Automatik funktioniert nicht, weil Divi nicht sicher prüfen kann/will, ob die in den beiden Menüeinstellungen hinterlegten Farben bereits verändert sind und deshalb nicht mit geändert werden sollten. Wenn ich dort auf die Farbauswahl gehe und einfach auf den „Standard“ Button klicke, wird mir dann automatisch der Farbwert, der aktuell als Akzentfarbe gesetzt ist hinterlegt.

      Antworten

Einen Kommentar abschicken

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