So erstellen Sie ein vertikales Navigationsmenü (oder eine Kopfzeile) für Ihre Divi-Website

Vertikale Navigationsmenüs können für bestimmte Websites nützlich sein, die mehr Menüpunkte im Vordergrund benötigen. Bei horizontalen Menüs kann es schwierig sein, alle benötigten Menülinks einzupassen, insbesondere bei kleineren Browserbreiten. In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Divi Theme Builder ein benutzerdefiniertes vertikales Navigationsmenü erstellen. Auf diese Weise haben Sie mehr Platz für die Präsentation Ihrer WordPress-Menüelemente. Und Sie haben die volle Leistung, um dem vertikalen Header zusätzliche Divi-Module hinzuzufügen und diese mit dem Divi-Builder zu entwerfen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um die Vorlage hochzuladen, navigieren Sie zum Divi Theme Builder im Backend Ihrer WordPress-Website.

Globale Standard-Website-Vorlage hochladen

Dann sehen Sie in der oberen rechten Ecke ein Symbol mit zwei Pfeilen. Klicken Sie auf das Symbol.

Navigieren Sie zum Import-Tab, laden Sie die JSON-Datei hoch, die Sie in diesem Beitrag herunterladen konnten, und klicken Sie auf 'Divi Theme Builder-Vorlagen importieren'.

Divi Theme Builder-Änderungen speichern

Nachdem Sie die Datei hochgeladen haben, werden Sie eine neue globale Kopf- und Fußzeile in Ihrer Standard-Website-Vorlage bemerken. Speichern Sie die Änderungen im Divi Theme Builder, sobald die Vorlage aktiviert werden soll.

Kommen wir zum Tutorial, ja?

Teil 1: Erstellen eines neuen globalen Headers

Für dieses Tutorial erstellen wir das vertikale Navigationsmenü in einem globalen Header mit dem Divi Theme Builder. Wir zeigen Ihnen jedoch, wie Sie das gleiche Menü am Ende des Beitrags zum Hauptteil einer Seitenvorlage hinzufügen, nur für den Fall, dass Sie es zusätzlich zum Hauptmenü Ihrer Website verwenden möchten.

Um zu beginnen, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder.

Klicken Sie dann auf den Bereich „Globalen Header hinzufügen“ des Standard-Website-Templates und wählen Sie „Globalen Header erstellen“ aus der Dropdown-Liste.

Wählen Sie dann die Option „Von Grund auf neu erstellen“.

Teil 2: Entwerfen des vertikalen Schnittlayouts

Öffnen Sie im Global Header Layout Editor die bereits vorhandenen Einstellungen des regulären Abschnitts und aktualisieren Sie Folgendes.

• Breite (Desktop): 300px
• Breite (Tablet und Telefon): 100%

• Höhe (Desktop): 100vh
• Höhe (Tablet und Telefon): automatisch

• Polsterung (Desktop): 4vh oben, 0px unten
• Polsterung (Tablet und Telefon): 0px oben, 0px unten

Setzen Sie das Design fort, indem Sie wie folgt einen Box-Shadow hinzufügen:

• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 20px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(0,0,0,0.3)

Um sicherzustellen, dass das vertikale Navigationsmenü beim Scrollen des Benutzers auf der linken Seite sichtbar bleibt, aktualisieren Sie die Position auf fest und aktualisieren Sie den z-Index wie folgt:

• Position: Behoben
• Z-Index: 9999

Um sicherzustellen, dass wir die Untermenünavigation sehen können, die sich außerhalb des Abschnitts erstreckt, fügen Sie dem Hauptelement das folgende benutzerdefinierte CSS hinzu:

overflow: visible !important;

Jetzt befindet sich Ihr Abschnitt in einem vertikalen Layout auf der linken Seite der Vorlage.

Teil 3: Entwerfen des vertikalen Menüs

Wenn der Abschnitt eingerichtet ist, sind wir bereit, das vertikale Menü zu entwerfen. Dazu verwenden wir ein Menümodul mit benutzerdefiniertem CSS, um die Navigation vertikal anzuzeigen.

Wir werden auch die Längeneinheit vh verwenden, damit das Menü mit unterschiedlichen Browserhöhen gut skaliert.

Hinzufügen der Zeile

Fügen Sie dem Abschnitt zunächst eine einspaltige Zeile hinzu.

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

Größe und Polsterung

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 80%
• Polsterung (Desktop): 3Vh oben, 3Vh unten
• Polsterung (Tablet und Telefon): 0px oben, 0px unten

Grenze

• Randbreite: 1px
• Rahmenfarbe: #eeeeee

Hinzufügen des Menümoduls

Fügen Sie in der einspaltigen Zeile ein neues Menümodul hinzu.

Wählen Sie ein Menü aus, das unter dem Inhaltsumschalter angezeigt werden soll.

Fügen Sie dann Ihr Site-Logo als dynamischen Inhalt unter dem Logo-Schalter hinzu.

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Stil: Zentriert
• Menüschrift: Nunito Sans
• Menütextfarbe: #535b7c
• Menütextgröße: 18px (Desktop), 14px (Tablet und Telefon)
• Menüzeilenhöhe: 2em
• Farbe der Dropdown-Menüzeile: #535b7c
• Farbe des aktiven Links im Dropdown-Menü: #535b7c

• Farbe des Einkaufswagensymbols: #535b7c
• Farbe des Suchsymbols: #535b7c
• Hamburger Menüsymbol Farbe: #535b7c

• Polsterung (Desktop): 2vh oben, 2vh unten
• Polsterung (Desktop): 10px oben, 10px unten

Teil 4: Hinzufügen des benutzerdefinierten CSS für das Menü

Das Menü benötigt benutzerdefiniertes CSS, um die vertikale Navigation zu erhalten, die wir erreichen möchten. Um zu beginnen, gehen Sie zur Registerkarte "Erweitert" und fügen Sie dem Menü-Link und dem Menü-Logo das folgende benutzerdefinierte CSS hinzu.

Menü-Link-CSS (Desktop):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Menü-Link-CSS (Tablet):

width: auto;
border:none;

Menü-Logo-CSS:

margin-bottom: 20px;

Als nächstes fügen Sie dem Menümodul eine benutzerdefinierte CSS-Klasse wie folgt hinzu:

CSS-Klasse: et-vert-menu

Die wird verwendet, um dieses spezielle Menü in unserem externen benutzerdefinierten CSS anzusprechen, das wir mithilfe eines Codemoduls hinzufügen.

Hinzufügen von benutzerdefiniertem CSS mit Codemodul

Fügen Sie unter dem Menümodul ein neues Codemodul hinzu.

Fügen Sie dann den folgenden Code in das Codefeld ein (stellen Sie ihn zwischen den Style-Tags ein):

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

Teil 5: Gestaltung des Buttons und Social Media Follow Icons

Nachdem das Menü nun vollständig ist, können wir eine Schaltfläche hinzufügen und einige Social Media-Links folgen, um die vertikale Kopfzeile zu vervollständigen.

Hinzufügen der Zeile

Fügen Sie unter der aktuellen Zeile eine neue einspaltige Zeile hinzu.

Hinzufügen der Schaltfläche

Fügen Sie dann der Zeile ein neues Tastenmodul hinzu.

Aktualisieren Sie die Schaltflächeneinstellungen wie folgt:

• Tastenausrichtung: Mitte
• Schaltflächentextgröße: 18px (Desktop), 14px (Tablet und Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #535b7c
• Breite des Tastenrahmens: 0px

Gehen Sie dann zur Registerkarte "Erweitert" und fügen Sie das folgende benutzerdefinierte CSS in das Hauptelement ein:

Hauptelement CSS (Desktop)

display:block;
width: 100%;

Hauptelement CSS (Tablet)

display:inherit;

Hinzufügen der Social Media Follow-Symbole

Fügen Sie unter der Schaltfläche ein Social Media Follow-Modul hinzu.

Fügen Sie die gewünschten sozialen Netzwerke unter der Registerkarte "Inhalt" hinzu.

Aktualisieren Sie auf der Registerkarte Entwurf Folgendes:

• Modulausrichtung: Mitte
• Symbolfarbe: #535b7c

Öffnen Sie dann die Einstellungen jedes der Netzwerke und löschen Sie die Hintergrundfarbe.

Fügen Sie dann wie folgt einen kleinen oberen Rand hinzu:

• Rand: 3vh oben

Zeileneinstellungen aktualisieren

Nachdem die Social Media Follow-Symbole vollständig sind, öffnen Sie die Zeileneinstellungen und passen Sie Folgendes an:

• Dachrinnenbreite: 1
• Polsterung (Desktop): 3vh oben, 0px unten
• Polsterung (Tablet und Telefon): 10px oben

Layout und Vorlage speichern

Speichern Sie anschließend das Layout und die Vorlage.

Endergebnis

Hier ist das Endergebnis auf einer Live-Seite.

So fügen Sie das vertikale Navigationsmenü zum Hauptbereich einer Seitenvorlage hinzu

Wenn Sie das vertikale Navigationsmenü zu einem Seitenlayout hinzufügen möchten (anstelle Ihres globalen Headers), müssen Sie zuerst das Abschnittslayout in der Divi-Bibliothek speichern.

Öffnen Sie dazu den Global Header Layout Editor und speichern Sie den vertikalen Abschnitt (der das Menü enthält) in Ihrer Divi-Bibliothek.

Beenden Sie dann den Layout-Editor und erstellen Sie eine neue Vorlage und weisen Sie sie den gewünschten Seiten zu. Der Klick, um einen benutzerdefinierten Textkörper für die Seitenvorlage zu erstellen.

Wählen Sie aus, um es von Grund auf neu zu erstellen.

Fügen Sie dem Layout einen neuen Abschnitt mit voller Breite hinzu.

Fügen Sie dann dem Abschnitt ein Modul für Postinhalt mit voller Breite hinzu.

Löschen Sie den standardmäßigen regulären Abschnitt oben auf der Seite und öffnen Sie dann die Einstellungen für den Abschnitt mit voller Breite und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

Hauptelement CSS (Desktop)

width: calc(100% - 300px);
margin-left:300px !important;

Hauptelement CSS (Tablet)

width: 100%;

Klicken Sie unter dem regulären Abschnitt, um einen neuen Abschnitt hinzuzufügen, und wählen Sie auf der Registerkarte Aus Bibliothek hinzufügen den vertikalen Menüabschnitt aus, den Sie zuvor in der Bibliothek gespeichert haben.

Da der Abschnitt nicht auf Mobilgeräten angezeigt werden soll, öffnen Sie die Abschnittseinstellungen und deaktivieren Sie die Sichtbarkeit des Abschnitts auf Tablet und Telefon.

Öffnen Sie dann das Codemodul innerhalb des Abschnittslayouts und ersetzen Sie diesen Codeschnipsel…

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Mit diesem…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Dadurch werden die Hauptkopf- und Fußzeilen verschoben, damit sie in das feste vertikale Menü links von der Seitenvorlage passen. So sieht es auf einer Live-Seite aus, die die Standardkopf- und -fußzeile von Divi verwendet.

Abschließende Gedanken

Das hier vorgestellte vertikale Navigationsmenü hat eine feste Position erhalten. Wenn Sie jedoch mehr Platz für zusätzliche Menüpunkte oder Inhalte benötigen, können Sie die Position des Abschnitts auf absolut ändern. Sie können den vertikalen Überlauf auch zum Scrollen ändern, um dem Benutzer die Möglichkeit zu geben, durch die Menüelemente zu scrollen (beachten Sie jedoch, dass Sie mit dieser Überlaufeinstellung keine Untermenüs sehen/verwenden können).

Die Einrichtung des vertikalen Abschnitts öffnet die Tür zum Erstellen einiger benutzerdefinierter Seitenleisten. Ich hoffe, das ist nützlich für zukünftige Projekte.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!