Es ist manchmal leichter gesagt als getan, Ihre Website von der Masse abzuheben. Glücklicherweise können Sie sich auf die Rolle eines kleinen Heimwerkers einlassen, indem Sie kreative Anpassungsmaßnahmen hinzufügen, die dies sicherstellen Ihr Blog unterscheidet sich von anderen.

In diesem Tutorial zeige ich Ihnen, wie Sie den Divi-Builder zum Anpassen verwenden Ihr Blog, und insbesondere der 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 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 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.

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.

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.

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:

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

Gehe zu " Header & Navigation> Header-Elemente 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 wie folgt aussieht:

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

Allgemeines CSS

Der folgende Code wird in Ihrem " Themenoption> CSS-Feld 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, es wird Ihnen erlauben, die Menüs auf Ihrem anzupassen Wordpress-Blog.

[vc_row center_row=“yes“][vc_column width=“1/2″][vcex_button target=“blank“ layout=“expanded“ align=“center“ font_family=“Raleway“ font_weight=“700″ style=“flat“ custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI THEMA HERUNTERLADEN [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=“https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials“ target=“blank“ layout=“expanded“ align=“center“ font_family = „Raleway“ font_weight=“700″ style=“flat“ custom_background=“#c4226e“ custom_hover_background=“#8d184f“ custom_color=“#ffffff“ custom_hover_color=“#ffffff“ icon_right=“fa fa-download“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi Tutorials

• 5 Websites, die Divi Restaurant Thema verwenden
• Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
• So ändern Sie die Menüfarbe zwischen Divi-Seiten
• So personalisieren Sie die Gitter eines Blogs mit Divi
• Wie die Rolle Divi-Editor auf Wordpress verwenden
• So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
• So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
• Funktionen, die Sie wahrscheinlich nicht über Divi kennen
• Wie man Divi Builder auf WordPress benutzt
• Wie benutzt man das Divi Video-Scroll-Modul?
• Wie benutze ich das Divi Builder Flip Modul?
• So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
• Wie benutzt man das Divi-Textmodul?
• So erstellen Sie einen Schieberegler auf Divi
• So bearbeiten Sie eine Divi-Benutzerrolle
• Wie benutzt man das Divi Social Media Modul?
• So verwenden Sie das Shop-Modul zum Thema WordPress Divi
• So verwenden Sie das Divi-Sidebar-Modul
• Wie benutzt man das Divi Preistabellen Modul?
• Wie verwende ich das Titelmodul von Divi-Publikationen?
• So fügen Sie ein Video-Modul von Divi hinzu
• Wie man das Artikelnavigationsmodul benutzt
• Wie benutzt man das Divi-Suchmodul?
• So verwenden Sie das Divi-Wallet-Modul
• Wie man das Personenmodul im Divi Builder benutzt
• Wie man das Geldbörsenmodul mit Divi-Filter verwendet
• So verwenden Sie das Schiebermodul mit voller Breite
• Wie benutzt man das Divi Builder Image Modul?
• So verwenden Sie das vollständige Navigationsmodul von Divi Builder
• So verwenden Sie das Bildergalerie-Modul
• So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
• So verwenden Sie das Divi Full Width Portfolio-Modul
• So verwenden Sie das Divi-Header-Modul in voller Breite
• Wie benutze ich das Divi Counter Modul?
• So verwenden Sie den Artikel-Schieberegler in Divi Builder
• Wie benutze ich das Divi Email Optin Modul?