So fügen Sie ein Hamburger-Symbol zum Menümodul von Divi auf dem Desktop hinzu

Veröffentlicht: 2021-04-28

Wenn Sie Ihren Header in Divi erstellen, gibt es einige Möglichkeiten, dies zu tun. Tatsächlich können Sie sich hier einen Überblick über Header-Typen und Tutorials verschaffen. Im heutigen Tutorial fügen wir Ihrer Liste nun eine weitere Option hinzu. Wir zeigen Ihnen, wie Sie dem Menümodul von DIvi ein Hamburger-Symbol hinzufügen. Dieses Hamburger-Symbol wird standardmäßig bereits auf kleineren Bildschirmgrößen angezeigt, aber in diesem Tutorial stellen wir sicher, dass auch auf dem Desktop ein Hamburger-Symbol angezeigt wird. Wenn Sie auf das Hamburger-Symbol klicken, werden alle Menüpunkte in horizontaler Reihenfolge neben dem Symbol angezeigt. Dies verleiht Ihrem Header ein minimales Erscheinungsbild und fügt gleichzeitig Interaktion hinzu. Sie können die JSON-Vorlagendatei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Hamburger-Symbol umschalten

Laden Sie die globale Header-Vorlage KOSTENLOS herunter

Um die kostenlose globale Header-Vorlage in die Hände zu bekommen, müssen Sie sie 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.

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!

1. Neue globale Header-Vorlage erstellen

Gehe zum Divi Theme Builder

Gehen Sie zunächst zum Divi Theme Builder im Backend Ihrer WordPress-Website. Klicken Sie dort auf „Globalen Header hinzufügen“.

Hamburger-Symbol umschalten

Neuen globalen Header hinzufügen

Ein Dropdown-Menü wird angezeigt. Um mit dem Erstellen von Grund auf zu beginnen, fahren Sie fort, indem Sie „Build Global Header“ auswählen.

Hamburger-Symbol umschalten

2. Erstellen Sie ein globales Header-Design

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, ist es an der Zeit, mit dem Erstellen des Header-Designs zu beginnen. Sie werden feststellen, dass dort bereits ein Abschnitt vorhanden ist. Öffnen Sie die Einstellungen des Abschnitts und fügen Sie eine Hintergrundfarbe hinzu.

Hintergrundfarbe: #f6f9fb

Hamburger-Symbol umschalten

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

Obere Polsterung: 0px
Untere Polsterung: 0px

Hamburger-Symbol umschalten

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hamburger-Symbol umschalten

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Design und ändern Sie die maximale Breite in den Größeneinstellungen.

Maximale Breite: 1280px

Hamburger-Symbol umschalten

Abstand

Ändern Sie als nächstes die obere und untere Auffüllung in den Abstandseinstellungen.

Obere Polsterung: 5px
Untere Polsterung: 5px

Hamburger-Symbol umschalten

Menümodul zur Spalte hinzufügen

Menü auswählen

Fügen Sie als Nächstes ein Menümodul zur Spalte der Zeile hinzu und wählen Sie ein dynamisches Menü Ihrer Wahl aus.

Hamburger-Symbol umschalten

Logo hochladen

Laden Sie ein Logo hoch.

Hamburger-Symbol umschalten

Hintergrundfarbe entfernen

Entfernen Sie dann die standardmäßige weiße Hintergrundfarbe des Moduls.

Hamburger-Symbol umschalten

Menütexteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Menütexteinstellungen entsprechend:

Menüschriftart: Poppins
Schriftstärke im Menü: Halbfett
Menütextfarbe: #003e51
Menütextgröße: 16px
Textausrichtung: Rechts

Hamburger-Symbol umschalten

Dropdown-Menüeinstellungen

Ändern Sie als Nächstes die Dropdown-Menüeinstellungen.

Farbe der Dropdown-Menüzeile: #7159c8

Hamburger-Symbol umschalten

Symboleinstellungen

Ändern Sie auch die Symboleinstellungen.

Farbe des Einkaufswagensymbols: #670fff
Farbe des Suchsymbols: #670fff
Hamburger Menüsymbol Farbe: #670fff

Hamburger-Symbol umschalten

Größe

Gehen Sie dann zu den Größeneinstellungen und weisen Sie eine maximale Logobreite zu.

Max. Breite des Logos: 50px

Hamburger-Symbol umschalten

Abstand

Entfernen Sie auch den standardmäßigen unteren Rand des Moduls.

Unterer Rand: 0px

Hamburger-Symbol umschalten

Abschnitt klebrig wenden

Jetzt, da unser Menü an Ort und Stelle ist, werden wir auch den Abschnitt klebrig machen. Öffnen Sie die Abschnittseinstellungen, gehen Sie zur Registerkarte Erweitert und wenden Sie die folgenden Sticky-Einstellungen an:

Klebrige Position: Bleiben Sie oben
Versatz von umgebenden klebrigen Elementen: Ja
Übergangsstandard- und Sticky-Stile: Ja

Hamburger-Symbol umschalten

Klebrige Hintergrundfarbe

Ändern Sie als Nächstes die Hintergrundfarbe des Abschnitts in einem klebrigen Zustand.

Hintergrundfarbe: #ffffff

Hamburger-Symbol umschalten

Sticky Box Schatten

Wenden Sie auch einen Kastenschatten auf den Abschnitt an.

Standardschattenfarbe: rgba(0,0,0,0)
Klebrige Schattenfarbe: rgba(0,0,0,0.04)

Hamburger-Symbol umschalten

3. Hamburger Icon Toggle zum Menümodul hinzufügen

CSS-ID zum Menümodul hinzufügen

Im nächsten Teil des Tutorials konzentrieren wir uns auf die Erstellung des Desktop-Hamburger-Symbols zum Umschalten. Öffnen Sie zunächst die Einstellungen des Menümoduls, gehen Sie auf die Registerkarte Erweitert und weisen Sie eine CSS-ID zu.

CSS-ID: divi-menu

Hamburger-Symbol umschalten

Codemodul unterhalb des Menümoduls hinzufügen

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

Hamburger-Symbol umschalten

Skript- und Stil-Tags hinzufügen

Wir werden CSS- und JQuery-Code verwenden. Zur Vorbereitung fügen wir einige Style- und Script-Tags hinzu.

Hamburger-Symbol umschalten

CSS-Code hinzufügen

Wir fügen die folgenden CSS-Codezeilen zwischen die style-Tags ein:

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}

#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
  
transform: translateY(50%);  
}
  
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
  
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Hamburger-Symbol umschalten

JQuery hinzufügen

JQuery-Eröffnungscodezeilen hinzufügen

Als nächstes haben wir den JQuery-Code. Fügen Sie die folgenden Zeilen des JQuery-Codes zwischen den script-Tags hinzu:

jQuery(function($){
$(document).ready(function(){

});
});

Hamburger-Symbol umschalten

Variablen erstellen

Erstellen Sie als nächstes einige Variablen.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Hamburger-Symbol umschalten

Umschaltsymbol im Menümodul platzieren

Platzieren Sie dann die Toggle-Icon-Variable mit der folgenden Codezeile im Menümodul:

toggleIcon.insertAfter(desktopMenu);

Hamburger-Symbol umschalten

Klickfunktion hinzufügen

Wir fügen auch eine Klickfunktion hinzu.

toggleIcon.click(function(){
	desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

Hamburger-Symbol umschalten

4. Speichern Sie die Änderungen am Divi Theme Builder

Jetzt, da alles an seinem Platz ist, müssen Sie nur noch alle Änderungen im Divi Theme Builder speichern und das Ergebnis anzeigen!

Hamburger-Symbol umschalten

Vorschau

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

Hamburger-Symbol umschalten

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Ihrem Divi-Header im Divi Theme Builder kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie auch auf dem Desktop ein Hamburger-Menüsymbol umschalten können. Standardmäßig ist ein Hamburger-Symbol Teil des Tablet- und Mobil-Erlebnisses, aber wir erweitern dies auch auf den Desktop. Wenn Sie auf das Umschaltsymbol klicken, werden die Menüelemente in einer horizontalen Reihenfolge angezeigt, wodurch dies ein minimales Erscheinungsbild erhält. Sie konnten die JSON-Vorlagendatei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.