Möchten Sie mit dem Vollbildmenümodul in Divi eine globale Kopfzeile erstellen?
Der Header ist eines der wichtigsten Elemente eines jeden Website und steht im Mittelpunkt die Benutzererfahrung. Das Navigationsmenü gibt Ihren Benutzern eine Vorstellung davon, was sie auf Ihrer erwarten können Website und hilft ihnen, die benötigten Informationen zu finden.
Darüber hinaus kann eine sekundäre Menüleiste ein großartiger Ort sein, um einen Call-to-Action oder „to“ hervorzuheben fördern ein Angebot. Ganz zu schweigen davon, dass der Header einer der wichtigsten Teile Ihres Dokuments ist Website, da es normalerweise auf jeder Seite erscheint. Dies ist eine großartige Gelegenheit, Ihr Branding zu präsentieren und einen Header zu erstellen, der mit dem Design des Rests Ihrer Website übereinstimmt.
Mit den Theme Builder-Optionen von Divi können Sie einen benutzerdefinierten globalen Header erstellen und das Erscheinungsbild Ihrer Header- und Menümodule auf Ihrer gesamten Website anpassen.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Vollbild-Menümodul von Divi einen globalen Header erstellen.
Lassen Sie uns beginnen!
Übersicht
Hier ist eine Vorschau des globalen Headers, den wir entwerfen werden.
Öffnen Sie den Theme-Builder
Da wir in diesem Beispiel einen globalen Header erstellen, navigieren wir zu „Theme Builder“, den Sie im WordPress Divi-Menü finden. Wählen Sie Globale Kopfzeile hinzufügen und dann Globale Kopfzeile erstellen aus.
Erstellen Sie die sekundäre Menüleiste
Wenn Sie das globale Header-Layout zum ersten Mal öffnen, ist es mit einem regulären Abschnitt vorinstalliert. Wir ändern dies zu unserer sekundären Menüleiste, die sich über unserem Menü in voller Breite befindet und einen Call-to-Action-Text und eine Schaltfläche enthält.
Öffnen Sie zunächst die Abschnittseinstellungen und fügen Sie die Hintergrundfarbe hinzu.
- Hintergrund: #92A8A1
Als nächstes der Abschnittsrand.
- Innerer Randscheitel: 0px
- Unterer interner Rand: 0px
Fügen Sie nun eine Zeile ein. Für dieses Beispiel verwenden wir das unten gezeigte Layout.
Harmonisieren Sie in den Zeileneinstellungen unter Sizing des Reiters Style die Spaltenhöhen.
- Spaltenhöhen harmonisieren: JA
Legen Sie als Nächstes den oberen und unteren Rand wie folgt fest:
- Oberer innerer Rand: 5px
- Unterer Innenrand: 5px
Da unsere sekundären Header-Elemente vertikal ausgerichtet werden sollen, fügen wir dem Hauptzeilenelement benutzerdefiniertes CSS hinzu.
1.
align-items:center;
Nachdem unsere Linie nun konfiguriert ist, können wir die Module für unsere einfügen Inhalt. Fügen Sie zunächst auf der linken Seite einen Textbaustein ein.
Modifiziere den Inhalt von Text. Dies ist der perfekte Ort, um einen Call-to-Action einzufügen fördern ein Angebot.
- Text: "Treten Sie unserer Mailingliste bei, um 10 % Rabatt auf Ihre Bestellung zu erhalten!" »
Greifen Sie auf die Registerkarte Stil des Textmoduls zu und ändern Sie die Parameter wie folgt:
- Schriftart „Text“: Poppins
- „Text“ Schwaches Licht: Mittel
- Textfarbe "Text": #FFFFFF
Als nächstes fügen Sie rechts das Button-Modul hinzu.
Schaltflächentext hinzufügen.
- Text: "Holen Sie sich ein kostenloses Angebot"
Richten Sie auf der Registerkarte „Stil“ die Schaltfläche in der Mitte aus.
- Tastenausrichtung: Mitte
Lassen Sie uns nun das Aussehen der Schaltfläche anpassen.
- Benutzerdefinierte Stile für „Button“ verwenden: Ja
- Schaltflächentextgröße: 14px
- Schaltflächentextfarbe: #FFFFFF
- Hintergrundschaltfläche: #2F5349
- Breite des Button-Rahmens: 0px
- Randradius-Schaltfläche: 50px
- Buchstabenabstand der Schaltfläche: 1px
- Button-Schriftart: Poppins
Fügen Sie das Modul Vollbildmenü hinzu
Nachdem das sekundäre Menü erstellt wurde, können wir zum Hauptmenü übergehen. Wir werden das Menü mit dem Modul Vollbildmenü erstellen. Fügen Sie der globalen Kopfzeile einen neuen Abschnitt „Vollbild“ hinzu.
Wählen Sie das Modul Vollbildmenü aus und fügen Sie es ein
Als Nächstes passen wir die Einstellungen des Vollbildmenüs an.
- Farbe des aktiven Links: #2F5349
- Schriftmenü: Poppins
- Dim Light Menu: Semi Bold
- Menü Stil kopieren: TT
- Menütextfarbe: #000000
- Textfarbe des Hover-Menüs: #2F5349
- Menütextgröße: 15px
- Buchstabenabstand im Menü: 2px
Ändern Sie die Farbe des Hamburger-Menüsymbols in Schwarz.
- Farbe des Hamburger-Menüsymbols: #000000
Bevor wir das Logo zu unserem Menü hinzufügen, ändern wir die Größenoptionen. Wir werden die integrierten Responsive-Optionen von Divi verwenden, um eine andere maximale Höhe für PC und Handy festzulegen.
- Maximale Logohöhe auf PC: 3vw
- Maximale Logohöhe auf Mobilgeräten: 6vw
Fügen Sie nun Ihr Logo zum Vollbildmenü hinzu.
Schließlich möchten wir, dass das Hauptmenü oben auf dem Bildschirm bleibt, wenn der Benutzer durch die Website scrollt, also verwenden wir dafür die integrierten Sticky-Sticky-Einstellungen von Divi.
- Klebeposition: Oben kleben
Damit ist unser globales Header-Design komplett.
Erstellen Sie eine neue Seite mit einem vordefinierten Layout
Um die Kopfzeile und das Menü in voller Breite in Aktion zu sehen, erstellen wir eine neue Seite mit einem vordefinierten Layout aus der Divi-Bibliothek. Für dieses Beispiel verwenden wir die Flooring Home Page aus dem Paket Grundriss.
Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie dann die Option Divi Builder verwenden.
Wir verwenden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek, also wählen Sie Layout auswählen.
Suchen Sie das Layout „Bodenbelag-Startseite“ und wählen Sie es aus.
Wählen Sie „Layout auswählen“, um das Layout zu Ihrer Seite hinzuzufügen.
Jetzt ist das Design fertig!
Endergebnis
Zusammenfassung
Wie bereits erwähnt, bilden die Kopfzeile und das Navigationsmenü das Herzstück der Benutzererfahrung Ihrer Website. Sie haben jetzt gesehen, wie einfach es ist, mit dem Divi-Modul "Vollbildmenü" einen beeindruckenden Gesamtkopf zu entwerfen.
Glücklicherweise gibt Ihnen der Theme Builder von Divi die Kontrolle über jeden Aspekt des Menüs und der Kopfzeile Ihrer Website, und Sie können mit nur wenigen Klicks völlig benutzerdefinierte und einzigartige Designs erstellen.
Haben Sie die globalen Kopfzeilenoptionen von Divi verwendet, um Ihre Kopfzeile und Ihr Navigationsmenü anzupassen? Sag uns deine Meinung in den Kommentaren!
