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

3 Kommentare

Kokos auf 8 Januar 2020 zu 22 h 13 min

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
Antworten
Germain Jung am 10. Oktober 2018 um 10 h 20 min

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,
Antworten
- Thierry Bertrand am 10. Oktober 2018 um 16 h 32 min
  
  Hallo Germain,
  
  Möchten Sie, dass es auf allen Seiten oder nur auf wenigen Seiten weiß ist?
  Antworten