Springe zum Hauptinhalt

Wie die Farbe der Menüs zwischen den Seiten Divi sich ändern

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Manchmal ist es leichter gesagt als getan, Ihre Website von der Masse abzuheben. Glücklicherweise können Sie sich darauf einlassen, den kleinen Bastler zu spielen, indem Sie kreative Details der Personalisierung hinzufügen, die Ihr Blog von den anderen abheben.

In diesem Tutorial zeige ich Ihnen, wie Sie mit dem Divi Builder Ihr Blog anpassen können, insbesondere den CSS-Bereich.

Dies ist die Region, über die ich spreche:

Benutzerdefinierter WordPress CSS Builder Abschnitt

Dies bedeutet, dass alle Änderungen, die wir hier vornehmen, nur auf der Seite wirksam werden, die wir bearbeiten. Es ist eine unglaublich interessante und nützliche Funktion!

Hier ist das Endergebnis, das wir am Ende dieses Tutorials haben werden. Die Hintergrundfarbe des Navigationsmenüs ändert sich je nach der von Ihnen besuchten Seite. Als zusätzliche Option werden Sie feststellen, dass die Symbole auch die Farbe ändern.

Symbol, das die Farbteilung ändert

Ich werde zuerst zeigen, wie die Hintergrundfarbe im Menü angewendet wird. Dann werde ich Ihnen separat zeigen, wie die sozialen Symbole übereinstimmen.

Wenn Sie unser Tutorial noch nicht gelesen haben Präsentation des Themas WordPress DiviIch lade Sie ein, es zu tun.

Lassen Sie uns beginnen!

Wenden Sie Farben auf Menüs

Zuerst verwende ich das Standard-Header-Format. Wenn Sie ein anderes Format verwenden, sollte dieses Tutorial weiterhin wirksam sein, da die generische ID der "divs" auf Divi meines Wissens für alle Formate (# main-header) gleich ist. Wenn Sie Probleme mit anderen Formaten haben.

Divi-Header-Format

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Wir müssen sicherstellen, dass die Links unten angezeigt werden. Die Farben, die ich ausgewählt habe und die Sie auf Coolors.co finden, wenn Sie sie verwenden möchten, sind dunkler, daher muss ich den Textlink in eine helle Farbe bringen. Ich habe mich für die Farbe Weiß entschieden.

Personalisierung des Divi-Menüs

Ich verwende rgba (255,255,255,0.6), das die Linkfarbe und dunkelweiß als aktive Linkfarbe sein wird (für den gewünschten visuellen Effekt)

Gehen Sie dann zu der Seite, auf der Sie die erste Änderung anwenden möchten (Sie sollten die Menü-Links anstelle sehen). Klicken Sie auf das Symbol "3 Zeilen" und ein Optionsfeld wird angezeigt.

Wordpress Divi Builder

Fügen Sie nun das folgende CSS in dieses Feld ein:

# Hand-header {background: #474f61; }

Sie sollten etwas Ähnliches haben. Vergessen Sie nicht, den Hex-Code in die gewünschte Farbe zu ändern:

Divi-Einstellungen für die Farbanpassung

Klicken Sie auf " Speichern und aktualisieren Dies gilt für das Hauptmenü in einer Codezeile.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Jetzt müssen Sie nur noch denselben Code für alle Ihre Seiten hinzufügen und den Hex-Code jedes Mal ändern.

Soziale Netzwerksymbole (optional)

In diesem Teil ändern wir den Code, den wir bereits erstellt haben, und fügen dann Code auf der CSS-Ebene der Site hinzu. Anschließend erkläre ich, warum auf einzelnen Seiten CSS hinzugefügt werden sollte und warum einige nicht sein.

Sie müssen also zuerst sicherstellen, dass Sie Ihre sozialen Links eingerichtet haben. Gehe zu " Divi-Optionen> Allgemeines Thema Und fügen Sie Ihre URLs zu Ihren Social-Media-Seiten hinzu.

Soziale Divi-Ikone

Gehen Sie dann zu Ihren Einstellungen in der sekundären Menüleiste und stellen Sie die Hintergrund- und Textfarben ein. Ich wähle "Weiß" als Textfarbe, weil ich jedem sozialen Symbol einen runden Hintergrund hinzufügen werde, der mit der neuen Menüfarbe übereinstimmt, damit das Symbol angezeigt werden kann.

Anpassen des sekundären Menüs

Gehe zu " Header & Navigation> Header-Elemente Und kreuze das Kästchen an " Soziale Symbole anzeigen ".

Divi WordPress-Header-Element

Erinnern Sie sich, wie wir auf jeder Seite CSS hinzugefügt haben? Wir werden zurückgehen und das, was wir vorher geschrieben haben, bearbeiten. Ersetzen Sie das, was Sie dort haben, durch das folgende CSS. Wenn Sie feststellen, was anders ist, können Sie einfach den zusätzlichen Code hinzufügen.

# Hand-Header, # .und Top-header-sozial-Symbol {background: #474f61; }

Mit diesem Code kann unsere Website nicht nur die Hintergrundfarbe für das Menü auf dieser Seite ändern, sondern auch den Hintergrund unserer sozialen Symbole. Wir haben der Mischung gerade ein weiteres Element hinzugefügt. Sie sollten etwas haben, das wie folgt aussieht:

Benutzerdefinierter CSS-Code Divi Theme Editor

Möglicherweise müssen Sie überprüfen, ob die Hex-Farben auf jeder Seite korrekt sind.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Allgemeines CSS

Der folgende Code wird in Ihrem " Themenoption> CSS-Feld Oder in der Stildatei des untergeordneten Themas.

Benutzerdefinierte Optionen für Abschnittsthemen

# Top-header-sozial-Icons .und li {margin-left: 5px; } # .und Top-header-sozial-Symbol {padding: 4px; margin-bottom: 8px; Breite: 30px; Höhe: 30px; Grenzradius: 50%; line-height: 24px; }

Möglicherweise fragen Sie sich, warum dies im CSS-Feld der Seite nicht der Fall ist. Der Grund dafür ist, dass sich dieser bestimmte Code auf alle Zielelemente auswirkt, sodass es ineffizient ist, denselben Code an mehreren Stellen zu platzieren. Nur die Hintergrundfarbe ändert sich pro Seite, dieser Code ändert sich jedoch nicht pro Seite. Es ist nur eine bewährte Methode, um das Hinzufügen von Gewicht zu Ihrer Website zu vermeiden.

Das ist alles für dieses Tutorial. Ich hoffe, Sie können die Menüs in Ihrem WordPress-Blog anpassen.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 3

  1. Guten Tag,

    Vielen Dank für all Ihre Tutorials.
    Wissen Sie, ob wir das Untermenü divi (zweite Ebene unterhalb der Dropdown-Liste) in die Füllbreite einfügen können? Das nimmt die gesamte Breite der Seite ein

  2. Guten Tag,

    Wie ändern Sie die Farbe des Textes in der Hauptüberschrift? Mit einem transparenten Hintergrund (in meinem Haupt-Header) ist die Schriftfarbe, die ich (in meinem Haupt-Header, der meine verschiedenen Abschnitte darstellt) über die Divi-Anpassungsoberfläche ausgewählt habe, schwarz. Ich möchte jedoch, dass es auf EINIGEN SEITEN weiß ist, da das Foto unten zu dunkel ist.

    Comment faire?

    Merci par avance,

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
22 Aktien
Aktie13
tweet2
Registrieren7