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 600.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]

Es ist manchmal einfacher gesagt als getan, Ihre Website von der Masse abzuheben. Glücklicherweise können Sie sich selbst dazu bringen, das Kleine selbst zu machen, indem Sie kreative Personalisierungselemente hinzufügen, mit denen sich Ihr Blog von den anderen Blogs abhebt.

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:

Dies bedeutet, dass alle Änderungen, die wir hier vornehmen, nur auf der Seite wirksam werden, die wir gerade 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.

Ich werde zunächst zeigen, wie die Hintergrundfarbe im Menü angewendet wird. Dann zeige ich Ihnen separat, wie Sie die sozialen Symbole anpassen können.

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

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

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 sind. Die von mir gewählten Farben, die Sie auf Coolors.co finden, wenn Sie sie verwenden möchten, sind auf der dunkleren Seite, daher muss der Textlink eine helle Farbe haben. Ich habe mich für die weiße Farbe entschieden.

Ich benutze rgba (255,255,255,0.6), welches die Farbe des Links und Dunkelweiß als die Farbe des aktiven Links 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 bei "3-Linien" und ein Optionsfeld wird angezeigt.

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

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

Sie sollten etwas Ähnliches haben, vergessen Sie nicht, den Hexadezimalcode der Farbe Ihrer Wahl zu ändern:

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]

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

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.

Gehen Sie dann zu Ihren Einstellungen in der Untermenüleiste und stellen Sie die Hintergrundfarben und den Text ein. Ich wähle "Weiß" als Textfarbe, weil ich jedem sozialen Symbol einen runden farbigen Hintergrund hinzufügen werde, der mit der neuen Menüfarbe übereinstimmt, damit das Symbol angezeigt wird.

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

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 so aussieht:

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]

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

Allgemeines CSS

Der folgende Code wird in Ihrem " Theme-Option> CSS-Box Oder in der Stildatei des untergeordneten Themas.

# 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 änderst du die Farbe des Textes im Hauptheader? Da ein Hintergrund (auf meiner Hauptüberschrift) transparent ist, ist die Schriftfarbe, die ich gewählt habe (auf meiner Hauptüberschrift, die meine verschiedenen Themen anzeigt) über die Divi-Anpassungsschnittstelle schwarz. Ich möchte jedoch, dass es auf einigen Seiten weiß ist, weil 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