So ersetzen Sie die primäre Menüleiste durch das Vollbreiten-Menümodul von Divi

Die primäre Menüleiste macht die Navigation für Besucher nahtlos. Abgesehen von der standardmäßigen primären Menüleiste, die wir von WordPress gewohnt sind, sind Sie wahrscheinlich auch auf das Fullwidth Menu Module gestoßen, das Divi anbietet. Normalerweise wird es verwendet, um andere Menüs auf Ihrer Website anzuzeigen, die sich von dem Hauptmenü oben auf jeder Seite unterscheiden.

Sie können aber auch ganz einfach das Fullwidth Menu Module verwenden, um Ihre primäre Menüleiste zu ersetzen. Dies gibt Ihnen die Freiheit, das Menü an einer beliebigen Stelle auf der Seite zu platzieren, ohne sich mit einem doppelten Menü oben auf Ihrer Seite zu befassen. Sie können auch die integrierten Optionen von Divi verwenden, um das Menü nach Ihren Wünschen zu gestalten, d. h. Sie können beispielsweise mit den Rahmen- und Trennoptionen atemberaubende Ergebnisse erzielen.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divis Carpenter Layout Pack Ihre primäre Menüleiste durch das Fullwidth Menu Module ersetzen. Dies ist Teil unserer laufenden Divi-Designinitiative. Sie können wählen, ob diese Methode auf alle Seiten oder nur auf einige von ihnen angewendet werden soll. Lasst uns anfangen!

Vorschau

Bevor wir in das Use-Case-Tutorial eintauchen, werfen wir einen kurzen Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Feste Navigationsleiste deaktivieren

Gehe zu Divis Theme-Optionen

Als erstes müssen wir die feste Navigationsoption in den Themenoptionen von Divi deaktivieren. Wir tun dies, um den primären Menübereich oben auf unserer Seite loszuwerden. Gehen Sie dazu zu Ihrem WordPress-Dashboard > Divi > Theme-Optionen.

Feste Navigationsleiste deaktivieren

Öffnen Sie die Registerkarte Allgemein und deaktivieren Sie die Option Feste Navigationsleiste.

Primärmenü erstellen

Gehen Sie zu Menüs

Als nächstes erstellen wir unser Hauptmenü. Wir verwenden dieses primäre Menü sowohl für die standardmäßige primäre Menüleiste oben als auch für das Menümodul mit voller Breite. Um dein Menü hinzuzufügen, gehe zu deinem WordPress Dashboard > Darstellung > Menüs.

Neues Hauptmenü hinzufügen

Fügen Sie ein neues Menü hinzu, geben Sie Ihrem Menü einen Namen und machen Sie es zu Ihrem Hauptmenü.

Seiten hinzufügen & Menü speichern

Zu guter Letzt fügen Sie alle Ihre Seiten hinzu und speichern Ihr Menü.

Stil der primären Menüleiste im Theme Customizer

Gehe zum Theme-Anpasser

Je nachdem, ob Sie die standardmäßige primäre Menüleiste auf allen Seiten ausblenden möchten oder nicht, möchten Sie möglicherweise zuerst die standardmäßige primäre Menüleiste formatieren. Sie müssen dies nur tun, wenn Sie es auf einigen Seiten verwenden möchten. Wenn Sie die primäre Menüleiste überall entfernen möchten, können Sie diesen Schritt überspringen.

Einstellungen der primären Menüleiste

Um dem Layoutpaket zu entsprechen, haben wir die folgenden Änderungen vorgenommen:

• Schriftstil: Fett & Großbuchstaben
• Textfarbe: #FFFFFF
• Farbe des aktiven Links: #FFFFFF
• Hintergrundfarbe: #f25b3a
• Hintergrundfarbe des Dropdown-Menüs: #f25b3a

Primäre Menüleiste ausblenden

Eine Seite

Gehen Sie zur Seite der Wahl und aktivieren Sie Visual Builder

Um die primäre Menüleiste oben auf unseren Seiten auszublenden, müssen wir ein wenig CSS-Code verwenden. Beachten Sie, dass es wichtig ist, die Option Feste Navigationsleiste deaktiviert zu haben (einer der vorherigen Schritte). Andernfalls ist der Platz, der von der primären Menüleiste eingenommen wird, weiß und nicht vollständig verschwunden. Wenn Sie insbesondere die primäre Menüleiste auf einer Seite ausblenden möchten, gehen Sie zu dieser Seite und aktivieren Sie den Visual Builder.

Seiteneinstellungen öffnen

Öffnen Sie als nächstes die Seiteneinstellungen, indem Sie auf das folgende Symbol unten auf Ihrer Seite klicken:

CSS-Code hinzufügen

Wechseln Sie zur Registerkarte Erweitert und fügen Sie den folgenden CSS-Code in das Feld Benutzerdefiniertes CSS ein:

#main-header {
display: none;
}

Gesamte Website

Gehe zu Divis Theme-Optionen

Wenn Sie die primäre Menüleiste auf Ihrer gesamten Website loswerden möchten, können Sie dies ebenfalls tun. Sie müssen den Code nicht jeder Seite manuell hinzufügen. Stattdessen kannst du einfach zu deinem WordPress-Dashboard > Divi > Theme-Optionen gehen.

CSS-Code hinzufügen

Fahren Sie fort, indem Sie nach unten scrollen, bis Sie auf das Feld Benutzerdefiniertes CSS stoßen, und fügen Sie dort denselben CSS-Code hinzu:

#main-header {
display: none;
}

Primäre Menüleiste zur Seite hinzufügen

Landing Page mit Visual Builder öffnen

Nachdem wir nun die primäre Menüleiste ausgeblendet haben, können wir damit beginnen, das Fullwidth-Menümodul zu unserer Seite hinzuzufügen. Rufen Sie dazu beispielsweise Ihre Landingpage auf und aktivieren Sie den Visual Builder.

Abschnitt in voller Breite hinzufügen

Fahren Sie fort, indem Sie einen Abschnitt mit voller Breite direkt unter Ihrem Heldenabschnitt hinzufügen.

Obere Grenze

Sie können alle integrierten Optionen von Divi verwenden, um genau das gewünschte Design zu erstellen. Wir werden es ziemlich sauber halten. Das einzige, was wir unseren Abschnittsoptionen hinzufügen werden, ist ein oberer Rand:

• Breite des oberen Rands: 7px
• Farbe des oberen Rands: #f25b3a

Menümodul mit voller Breite hinzufügen

Als nächstes fügen Sie das Fullwidth Menu Module zu Ihrem Abschnitt hinzu.

Wählen Sie das Hauptmenü

Wählen Sie Ihr Hauptmenü als das Menü aus, das angezeigt werden soll.

Hintergrundfarbe

Fahren Sie fort, indem Sie Ihrem Modul eine schwarze Hintergrundfarbe geben.

Link-Einstellungen

Öffnen Sie dann die Links-Einstellungen und übernehmen Sie die folgenden Änderungen:

• Farbe des aktiven Links: #FFFFFF
• Textfarbe des Dropdown-Menüs: #FFFFFF
• Textfarbe des mobilen Menüs: #FFFFFF
• Textausrichtung: Links
• Textfarbe: Hell

Dropdown-Menüeinstellungen

Ändern Sie als nächstes die Dropdown-Menüeinstellungen:

• Hintergrundfarbe des Dropdown-Menüs: #000000
• Farbe der Dropdown-Menüzeile: #000000
• Hintergrundfarbe des mobilen Menüs: #000000

Menütexteinstellungen

Zuletzt werden wir die Texteinstellungen an das Layoutpaket anpassen:

• Schriftstärke des Menüs: Ultra Bold
• Menüschriftart: Großbuchstaben

Abschnitt in voller Breite global machen und auch auf anderen Seiten verwenden

Als globalen Abschnitt speichern

Wir sind fertig mit der Erstellung unseres neuen Hauptmenüs! Wenn Sie es auch auf anderen Seiten verwenden möchten, fügen Sie es Ihrer Divi-Bibliothek als globales Element hinzu.

Zu anderen Seiten ohne primäre Menüleiste hinzufügen

Sie können dieses Vollbreitenmenü jetzt ganz einfach anderen Seiten hinzufügen. Sie können seine Position wählen und mit den integrierten Designoptionen herumspielen, die damit einhergehen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

In diesem Blogbeitrag zu einem Anwendungsfall haben wir Ihnen gezeigt, wie Sie die primäre Menüleiste oben auf Ihren Seiten durch das Menümodul mit voller Breite ersetzen. Wenn Sie diese Methode anwenden, haben Sie die Freiheit, Ihr Menü an einer beliebigen Stelle auf Ihrer Seite zu platzieren. Darüber hinaus können Sie auch die integrierten Optionen von Divi verwenden, um es zu stylen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.