Möchten Sie wissen, wie Sie die Warenkorb- und Suchsymbole des Divi Fullwidth Menu-Moduls anpassen können?
Das Menü Ihrer Website ist einer der wichtigsten Teile von Ihnen Website aufgrund der direkten Auswirkungen, die es auf die Art und Weise haben kann, wie Benutzer in Ihrem Browser navigieren Inhalt.
Eine gut gestaltete Menüleiste kann einen großen Unterschied machen, indem sie die Navigation vereinfacht, wichtige Seiten hervorhebt und die allgemeine Benutzererfahrung verbessert.
Divis „Fullwidth Menu“-Modul bietet große Flexibilität, indem es Ihnen ermöglicht, den Warenkorb und die Suchsymbole nach Belieben anzupassen.
In diesem Tutorial zeigen wir Ihnen drei verschiedene Designs für das Modul „Menü in voller Breite“ mit unterschiedlichem Stil für Warenkorb- und Suchsymbole.
Lassen Sie uns beginnen!
Übersicht
Hier ist eine Vorschau auf das, was wir entwerfen werden.
Erster Entwurf
Für das erste Design platzieren wir eines der Symbole links und das andere rechts, indem wir eine zentrierte Menüstruktur auswählen. Wir werden auch die Farbe beim Hover ändern.
Zweiter Entwurf
Für das zweite Design platzieren wir die beiden Symbole auf der rechten Seite und ändern die Farbe beim Hover.
Dritter Entwurf
Für das dritte Design verwenden wir zusätzliches CSS, um die Symbole anzupassen.
Lesen Sie auch: Divi: So passen Sie das Modul "Countdown-Timer" mit einem GIF an
Anpassung der Warenkorb- und Suchsymbole des Divi-Moduls „Fullwidth Menu“.
Erstellen Sie den globalen Header
Für jedes der drei Menüdesigns öffnen wir zunächst den Builder von Themen von Divi.
Gehen Sie dazu im WordPress-Dashboard zu Divi > Themenersteller
klicken Sie dann auf Globale Kopfzeile hinzufügen
Dann wähle Erstellen Sie einen globalen Header
Fügen Sie einen neuen Abschnitt in voller Breite ein.
Löschen Sie dann den vorherigen Abschnitt.
Setzen Sie das Modul ein Menü voller Breite.
Laden Sie Ihr Logo über das Menü hoch.
Wir sind jetzt bereit, fortzufahren.
Erster Entwurf
Unser erstes Design wird die integrierten Hover-Effekte von Divi enthalten, um die Farbe von Text und Symbolen beim Hover zu ändern. Lasst uns beginnen.
Siehe auch: Divi: So fügen Sie dem Menümodul ein Hamburger-Symbol hinzu
Öffnen Sie zunächst die Moduleinstellungen und fügen Sie einen Hintergrund hinzu.
- Hintergrund: #fbf9f4
Gehen Sie zur Registerkarte Design und wählen Sie das Logo-Layout aus.
- Stil: Zentriertes Inline-Logo
Lassen Sie uns nun einige der Menütexteinstellungen ändern.
- Aktive Linkfarbe: #09148c
- Menüschriftart: Ruby
- Gewichtung der Menüschrift: Fett
- Schriftstil: TT und U (Großgeschrieben und Unterstrichen)
Stellen Sie als Nächstes die Menütextfarbe, die Textgröße und den Buchstabenabstand ein.
- Menütextfarbe: #000000
- Menütextgröße: 21px
- Buchstabenabstand: 1px
Wir möchten diesem Menü Hover-Effekte hinzufügen, also ändern Sie die Farbe des Menütextes beim Hover. Legen Sie beim Hover eine andere Menütextfarbe fest.
- Menütextfarbe (Hover): #b70018
Gehen Sie dann zu den Einstellungen Dropdown-Menü unter der Registerkarte Design.
- Hintergrundfarbe des Dropdown-Menüs: #fbf9f4
- Zeilenfarbe des Dropdown-Menüs: #b70018
- Menütextfarbe: #000000
Wir möchten, dass sich die Textfarbe des Dropdown-Menüs auch beim Hover ändert, also wählen Sie die Hover-Optionen für diese Einstellung und legen Sie eine andere Textfarbe fest.
- Textfarbe des Dropdown-Menüs (Hover): #b70018
- Farbe des aktiven Links im Dropdown-Menü: #b70018
- Hintergrundfarbe des mobilen Menüs: #fbf9f4
- Textfarbe des mobilen Menüs: #000000
Auch hier möchten wir, dass sich die Textfarbe des mobilen Menüs beim Hover ändert. Wählen Sie die Hover-Optionen für diese Einstellung aus und legen Sie dann beim Hover eine andere Textfarbe fest.
- Textfarbe für mobiles Menü (Hover): #b70018
Anpassung von Einkaufswagen und Suchsymbolen
Lassen Sie uns nun Einkaufswagen- und Suchsymbole hinzufügen und anpassen. Unter der Registerkarte Inhalt, geh zu verschiedenste Komponenten und Warenkorbsymbol und Suchsymbol aktivieren.
- Einkaufswagensymbol anzeigen: JA
- Suchsymbol anzeigen: JA
Gehen Sie zurück zur Registerkarte Design und Symboleinstellungen öffnen. Jedes unserer Symbole wird beim Hover schwarz und rot sein. Stellen Sie zunächst die Farbe Schwarz ein.
- Farbe des Einkaufswagensymbols: #000000
- Farbe des Suchsymbols: #000000
- Farbe des Hamburger-Menüsymbols: #000000
Wählen Sie als Nächstes das Hover-Symbol aus und fügen Sie die Farbe beim Hover hinzu.
- Farbe des Warenkorb-Symbols (Hover): #b70018
- Farbe des Suchsymbols (Hover): #b70018
- Farbe des Hamburger-Menüsymbols (Hover): #b70018
Symbolgröße festlegen.
- Warenkorb-Symbol Schriftgröße: 25 px
- Suchsymbol Schriftgröße: 25 px
Gehen Sie zum Abschnitt Abstand, dann legen Sie die obere und untere Polsterung fest.
- Polsterung (oben und unten): 5px
Abschließend fügen wir dem Menümodul oben und unten einen Rahmen hinzu. Rahmeneinstellungen öffnen.
- Obere Randbreite: 3px
- Breite des unteren Randes: 3px
Endgültiges Design
Und hier ist unser endgültiges Design.
Zweiter Entwurf
Unser zweites Design verwendet die integrierten Hover-Effekte von Divi, um die Größe von Menüsymbolen und Text beim Hovern zu ändern. Lasst uns beginnen.
Zuerst fügen wir dem Menümodul einen Hintergrundverlauf hinzu. Der Gradient hat drei Stopps, die Einstellungen sind wie folgt:
- Gradientenstopps:
- 0 %: rgba(255,255,255,0)
- 23 %: rgba(252,199,76,0.65)
- 82 %: rgba(232,119,255,0.32)
Legen Sie den Verlaufstyp und die Verlaufsposition fest.
- Verlaufstyp: Konisch
- Verlaufsposition: Unten
Dann gehen Sie auf die Registerkarte Design und legen Sie das Layout fest (Layout).
- Stil: Zentriert
Gehen Sie zum Abschnitt Menütext zum Anpassen des Menütextdesigns.
- Farbe des aktiven Links: #FFFFFF
- Schriftmenü: Syne
- Schriftdicke: fett
- Menü-Schriftstil: TT (Großbuchstaben)
- Textfarbenmenü: #FFFFFF
Stellen Sie nun die Menütextgröße und den Buchstabenabstand ein.
- Menütextgröße: 20px
- Menübuchstabenabstand: 2px
Da wir möchten, dass unsere Menütextgröße beim Hover erhöht wird, wählen Sie die Hover-Option.
- Menütextgröße: 22px
Ändern Sie als Nächstes die Designeinstellungen im Dropdown-Menü.
- Hintergrundfarbe des Dropdown-Menüs: #fcda90
- Zeilenfarbe des Dropdown-Menüs: #FFFFFF
- Textfarbenmenü: #FFFFFF
- Dropdown-Menü Aktive Linkfarbe: #FFFFFF
Legen Sie den Hintergrund und die Textfarbe des mobilen Menüs fest.
- Hintergrundfarbe des mobilen Menüs: #fcda90
- Textfarbe des mobilen Menüs: #FFFFFF
Anpassung von Einkaufswagen und Suchsymbolen
Beginnen wir nun mit der Anpassung unserer Menüsymbole. Gehe zu verschiedenste Komponenten unter der Registerkarte Inhalt und Warenkorbsymbol und Suchsymbol aktivieren.
- Warenkorbsymbol säen: JA
- Suchsymbol anzeigen: JA
Gehen Sie zurück zur Registerkarte Design und Symboleinstellungen öffnen.
- Farbe des Warenkorb-Symbols: #ffffff
- Farbe des Suchsymbols: #ffffff
- Farbe des Hamburger-Menüsymbols: #ffffff
Die Symbole haben beim Hover eine dunkelorange Farbe. Wählen Sie die Cover-Option und legen Sie die Farbe fest.
- Farbe des Warenkorb-Symbols (Hover): #fcac00
- Farbe des Suchsymbols (Hover): #fcac00
- Farbe des Hamburger-Menüsymbols (Hover): #fcac00
Legen Sie als Nächstes die Schriftgröße für den Einkaufswagen und die Suchsymbole fest.
- Warenkorb-Symbol Schriftgröße: 25 px
- Suchsymbol Schriftgröße: 25 px
Wählen Sie die Hover-Option, um das Symbol beim Hover zu vergrößern.
- Warenkorb-Symbol Schriftgröße (Hover): 30 px
- Schriftgröße des Suchsymbols (Hover): 30 px
Gehen Sie schließlich zum Abschnitt Abstand und stellen Sie die obere und untere Polsterung ein.
- Polsterung (oben und unten): 5px
Endgültiges Design
Hier ist das endgültige Design unseres zweiten Menülayouts.
Dritter Entwurf
Für unser endgültiges Design fügen wir mithilfe von benutzerdefiniertem CSS einen Hintergrundkreis hinter den Einkaufswagensymbolen hinzu.
Lesen Sie auch: Divi: So erstellen Sie ein klebriges und erweiterbares Hover-Menü
Lassen Sie uns beginnen.
Fügen Sie dem Modul zunächst eine Hintergrundfarbe hinzu.
- Hintergrund: #efb6ac
Dann gehen Sie auf die Registerkarte Design und öffne die Option Menütext.
- Farbe des aktiven Links: #e84322
- Menüschriftart: Cinzel
- Schriftstärke-Menü: Ultra Bold
Wir möchten, dass sich die Farbe des Menütexts beim Hover ändert. Stellen Sie zuerst die Menütextfarbe ein.
- Textfarbenmenü (Desktop): #e7644a
Klicken Sie auf das Hover-Symbol und legen Sie die Hover-Textfarbe fest.
- Menütextfarbe (Hover): #e84322
Stellen Sie als Nächstes die Menütextgröße und den Buchstabenabstand ein.
- Menütextgröße: 21px
- Menübuchstabenabstand: 1px
Wir möchten auch, dass der Buchstabenabstand beim Hover erweitert wird, also wählen Sie die Hover-Option für die Einstellungen.
- Menübuchstabenabstand: 2px
Stellen Sie die Textausrichtung auf links ein.
- Textausrichtung: links
Ändern Sie als Nächstes die folgenden Einstellungen im Dropdown-Menü.
- Hintergrundfarbe des Dropdown-Menüs: #efb6ac
- Farbe der Dropdown-Menüzeile: #e7644a
Lesen Sie auch: Divi: So erstellen Sie einen Testimonials-Bereich in Form eines Rasters
- Textfarbe des Dropdown-Menüs
- Desktop: #e7644a
- Hover: #e84322
- Farbe des aktiven Links im Dropdown-Menü: #e84322
Legen Sie den Hintergrund und die Textfarbe des mobilen Menüs fest.
- Hintergrundfarbe des mobilen Menüs: #efb6ac
- Textfarbe des mobilen Menüs:
- Desktop: #e7644a
- Hover: #e84322
Anpassung von Einkaufswagen und Suchsymbolen
Gehen Sie zuerst zu verschiedenste Komponenten unter der Registerkarte Inhalt und Warenkorbsymbol und Suchsymbol aktivieren.
- Einkaufswagensymbol anzeigen: JA
- Einkaufssymbol anzeigen: JA
Gehen Sie dann zurück zur Registerkarte Design und Symboleinstellungen öffnen. Legen Sie die Symbolfarbe fest.
- Farbe des Einkaufswagen-Symbols: #e7644a
- Farbe des Suchsymbols: #e7644a
- Farbe des Hamburger-Menüsymbols: #e7644a
Die Farbe dieser Symbole ändert sich beim Hover. Aktivieren Sie Hover-Optionen und legen Sie die Farbe fest.
- Warenkorb-Symbolfarbe (Hover): #e84322
- Farbe des Suchsymbols (Hover): #e84322
- Farbe des Hamburger-Menüsymbols (Hover): #e84322
Wir möchten auch, dass sich die Symbolgröße beim Hover erhöht. Stellen Sie zunächst die Schriftgröße des Symbols ein.
- Warenkorb-Symbol Schriftgröße: 22 px
- Suchsymbol Schriftgröße: 22 px
Stellen Sie als Nächstes die Schriftgröße des Symbols beim Hover ein.
- Warenkorb-Symbol Schriftgröße (Hover): 26 px
- Schriftgröße des Suchsymbols (Hover): 26 px
Dann gehen Sie zum Abschnitt Abstand und fügen Sie obere und untere Polsterung hinzu.
- Polsterung (oben und unten): 5px
Schließlich können wir dem globalen Header benutzerdefiniertes CSS hinzufügen, um die Kreise hinter dem Einkaufswagen und dem Suchsymbol hinzuzufügen.
Sie können dieses CSS nach Belieben an das Design Ihres Menümoduls anpassen.
Öffnen Sie die Einstellungen der Kopfzeilenvorlage und wechseln Sie dann zur Registerkarte Fortgeschrittener und fügen Sie das folgende benutzerdefinierte CSS ein.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
Endgültiges Design
Damit ist das Design unseres dritten und letzten Menülayouts abgeschlossen.
Endergebnis
Werfen wir nun einen Blick auf das endgültige Design der drei verschiedenen Menüs.
Erster Entwurf
Laden Sie DIVI jetzt herunter!!!
Zweiter Entwurf
Dritter Entwurf
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Das Menümodul sowie die Warenkorb- und Suchsymbole von Divi lassen sich einfach anpassen, um einzigartige Layouts und Designs für Ihr Unternehmen zu erstellen Website.
Sie können das Aussehen Ihrer Menümodule ganz einfach verbessern, indem Sie integrierte Divi-Einstellungen wie Hover-Effekte und benutzerdefiniertes CSS verwenden.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
