So erstellen Sie mit Divi & Anime.js ein Staffel-animiertes Hamburger-Menü

Veröffentlicht: 2021-02-17

In der Vergangenheit haben wir verschiedene Arten von Kopfzeilen geteilt, die Sie mit Divi und dem Divi Theme Builder erstellen können. Tatsächlich finden Sie alle diese Tutorials in diesem Navigationsbeitrag. In diesem Beitrag werden Sie feststellen, dass wir Ihnen gezeigt haben, wie Sie eine Kopfzeile im Vollbildmodus erstellen, aber um Ihnen zu helfen, Ihr Kopfzeilendesign noch weiter zu entwickeln, zeigen wir Ihnen auch, wie Sie ein benutzerdefiniertes animiertes Hamburger-Menü erstellen. Es gibt ein paar bemerkenswerte Dinge über das Hamburger-Menü, das wir erstellen werden:

Sobald Besucher auf das Hamburger-Symbol klicken, wird ein Vollbild-Header eingeblendet, und jeder Menüpunkt wird nacheinander angezeigt, was ihm ein benutzerdefiniertes animiertes Erscheinungsbild verleiht
Die benutzerdefinierten Animationen werden jedes Mal ausgelöst, wenn das Menü geöffnet wird
Sie können auch Dropdown-Elemente zu den Hauptmenüpunkten hinzufügen, diese öffnen sich beim Klicken und schließen automatisch, sobald jemand das Menü schließt oder auf ein Navigationselement klickt

Mit anderen Worten, dies ist definitiv ein Header-Tutorial, das Ihnen hilft, Ihrer Website ein erweitertes Erscheinungsbild zu verleihen. Sie können die Elemente auch nach Belieben gestalten und die JSON-Vorlagendatei 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.

Desktop

Hamburger-Menü

Handy, Mobiltelefon

Hamburger-Menü

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 Header-Vorlage erstellen

Gehen Sie zu Divi Theme Builder und fügen Sie eine neue globale Header-Vorlage hinzu

Beginnen Sie mit dem Divi Theme Builder. Fügen Sie dort einen neuen globalen Header hinzu.

Hamburger-Menü

Beginnen Sie von Grund auf mit dem Bauen

Und beginnen Sie mit dem Erstellen des Header-Designs von Grund auf.

Hamburger-Menü

2. Logo & Hamburger-Symbol erstellen

Abschnittseinstellungen

Hintergrundfarbe

Sobald wir uns im Vorlageneditor befinden, beginnen wir mit der Erstellung des Logos und des Hamburger-Symbols. Sie werden feststellen, dass dort bereits ein Abschnitt vorhanden ist. Öffnen Sie die Abschnittseinstellungen und wenden Sie eine transparente Hintergrundfarbe an.

Hintergrundfarbe: rgba(255,255,255,0)

Hamburger-Menü

Abstand

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

Obere Polsterung: 0px
Untere Polsterung: 0px

Hamburger-Menü

Position

Gehen Sie dann zum Fortgeschrittenen und drehen Sie den Abschnitt fest.

Position: Behoben
Ort: Oben links
Z-Index: 13

Hamburger-Menü

Neue Zeile hinzufügen

Spaltenstruktur

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

Hamburger-Menü

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zum Design-Tab und ändern Sie die Größeneinstellungen entsprechend:

Benutzerdefinierte Dachrinnenbreite verwenden: Ja
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: Ja
Breite: 95%
Maximale Breite: 100%

Hamburger-Menü

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

Obere Polsterung: 0px
Untere Polsterung: 0px

Hamburger-Menü

Hauptelement-CSS

Und um sicherzustellen, dass sowohl das Logo als auch das Hamburger-Symbol auf kleineren Bildschirmgrößen nebeneinander angezeigt werden, fügen wir eine Zeile CSS-Code in das Hauptelement der Zeile ein.

display: flex;

Hamburger-Menü

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie ein Logo Ihrer Wahl hoch.

Hamburger-Menü

Größe

Wechseln Sie zur Registerkarte Design und ändern Sie als nächstes die Größeneinstellungen.

Maximale Breite:
- Desktop: 80px
- Tablet & Telefon: 50px

Hamburger-Menü

Position

Positionieren Sie dann das gesamte Modul neu.

Position: Absolut
Ort: Oben links
Vertikaler Versatz: 20px

Hamburger-Menü

Textmodul zu Spalte 3 hinzufügen

HTML-Struktur im Inhaltsfeld

In der dritten Spalte fügen wir ein Textmodul hinzu. Wir verwenden dieses Textmodul, um unser Hamburger-Symbol zu erstellen. Wechseln Sie zunächst zum Text-Tab im Inhaltsfeld und fügen Sie die folgenden HTML-Tags ein:

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Hamburger-Menü

Größe

Ändern Sie als nächstes die Größeneinstellungen des Moduls.

Breite: 80px
Höhe: 80px

Hamburger-Menü

Abstand

Wenden Sie dann benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen an.

Obere Polsterung:
- Desktop: 10px
- Tablet & Telefon: 17px
Untere Polsterung:
- Desktop: 10px
- Tablet & Telefon: 17px
Linke Polsterung:
- Desktop: 15px
- Tablet & Telefon: 30px
Rechte Polsterung:
- Desktop: 15px
- Tablet & Telefon: 10px

Hamburger-Menü

Position

Positionieren Sie auch dieses Modul neu.

Position: Absolut
Ort: obere linke Ecke

Hamburger-Menü

3. Hamburger-Menü erstellen

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Nachdem wir nun das Logo und das Hamburger-Symbol installiert haben, können wir zum nächsten Teil übergehen, der dem Aufbau des Hamburger-Menüs und all seiner Elemente gewidmet ist. Beginnen Sie mit dem Hinzufügen eines neuen Abschnitts, öffnen Sie die Abschnittseinstellungen und wenden Sie einen Verlaufshintergrund an.

Farbe 1: #000000
Farbe 2: #111111
Verlaufstyp: Linear
Verlaufsrichtung: 90deg
Startposition: 50%
Endposition: 50%

Hamburger-Menü

Größe

Wenden Sie als Nächstes eine Mindesthöhe und eine Höchsthöhe auf die Größeneinstellungen an.

Mindesthöhe: 100vh
Maximale Höhe: 100vh

Hamburger-Menü

Abstand

Entfernen Sie dann alle standardmäßigen oberen und unteren Abschnittspolster.

Obere Polsterung: 0px
Untere Polsterung: 0px

Hamburger-Menü

Überläufe

Ändern Sie auch die Überläufe.

Horizontaler Überlauf: Versteckt
Vertikaler Überlauf: Auto

Hamburger-Menü

Position

Um sicherzustellen, dass das Menü jederzeit geöffnet werden kann, werden wir den Abschnitt im erweiterten Tab neu positionieren.

Position: Behoben
Standort Oben Mitte

Hamburger-Menü

Neue Zeile hinzufügen

Spaltenstruktur

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

Hamburger-Menü

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen wie folgt:

Benutzerdefinierte Dachrinnenbreite verwenden: Ja
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: Ja
Breite: 100%
Maximale Breite: 100%

Hamburger-Menü

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

Obere Polsterung: 0px
Untere Polsterung: 0px

Hamburger-Menü

Überläufe

Gehen Sie dann zur Registerkarte Erweitert und ändern Sie die Überläufe.

Horizontaler Überlauf: Versteckt
Vertikaler Überlauf: Auto

Hamburger-Menü

Position

Positionieren Sie die Reihe ebenfalls neu.

Position: Absolut
Standort Oben Mitte

Hamburger-Menü

Spalte 1 Einstellungen

Abstand

Als Nächstes öffnen wir die Einstellungen von Spalte 1 unserer Zeile und wenden einige benutzerdefinierte responsive Padding-Werte an.

Obere Polsterung:
- Desktop: 24vh
- Tablet & Telefon: 10vh
Untere Polsterung:
- Desktop: 24vh
- Tablet & Telefon: 5vh
Linke Polsterung: 13%
Rechte Polsterung: 13%

Hamburger-Menü

Grenze

Wir werden auch einige Rahmeneinstellungen anwenden:

Breite des rechten Rands:
- Desktop: 2px
- Tablet & Telefon: 0px\
Farbe des rechten Rands: #191919
Breite des unteren Rands:
- Desktop: 0px
- Tablet & Telefon: 2px
Farbe des rechten Rands: #191919

Hamburger-Menü

Spalte 2 Einstellungen

Abstand

Dann gehen wir zu Spalte 2 über und wenden dort auch einige benutzerdefinierte Padding-Werte an.

Obere Polsterung:
- Desktop: 24vh
- Tablet & Telefon: 5vh
Untere Polsterung:
- Desktop: 24vh
- Tablet & Telefon: 5vh
Linke Polsterung: 13%
Rechte Polsterung: 13%

Hamburger-Menü

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul in Spalte 1. Fügen Sie H3-Inhalte Ihrer Wahl hinzu.

Hamburger-Menü

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H3-Texteinstellungen wie folgt:

Überschrift 3 Schriftart: Montserrat
Überschrift 3 Schriftstärke: Ultra Bold
Überschrift 3 Schriftstil: Großbuchstaben
Überschrift 3 Textfarbe: #ffffff
Überschrift 3 Textgröße
- Desktop: 1vw
- Tablet: 2.5vw
- Telefon: 3.5vw
Überschrift 3 Buchstabenabstand: 5px

Hamburger-Menü

Abstand

Fügen Sie als nächstes einen unteren Rand hinzu.

Unterer Rand: 5vh

Hamburger-Menü

Textmodul klonen und Duplikat in Spalte 2 platzieren

Sobald Sie dieses erste Modul abgeschlossen haben, können Sie es einmal klonen und das Duplikat in Spalte 2 platzieren.

Hamburger-Menü

Inhalt ändern

Stellen Sie sicher, dass Sie den Inhalt in diesem doppelten Modul ändern.

Hamburger-Menü

Textmodul #2 zu Spalte 2 hinzufügen

HTML-Struktur im Inhaltsfeld

Zur Präsentation unserer Menüpunkte, einschließlich der Untermenüpunkte, verwenden wir die Textregisterkarte eines neuen Textmoduls. Fahren Sie fort und fügen Sie in Spalte 1 ein neues Textmodul hinzu und fügen Sie den folgenden HTML-Code ein:

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
	<li><a href="#">Web design</a></li>
	<li><a href="#">Branding</a></li>
</ul>

Hamburger-Menü

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

Textschriftart: Montserrat
Schriftstärke des Textes: Dünn
Textfarbe: #ffffff
Textgröße:
- Desktop: 2.7vw
- Tablet: 4vw
- Telefon: 6vw
Text Buchstabenabstand: 0.1em
Textzeilenhöhe: 1em

Hamburger-Menü

Linktext-Einstellungen

Ändern Sie auch die Linktextfarbe.

Lin-Textfarbe: #ffffff

Hamburger-Menü

Texteinstellungen für ungeordnete Liste

Ändern Sie dann die Texteinstellungen für die ungeordnete Liste.

Schriftart der ungeordneten Liste: Montserrat
Schriftstärke der ungeordneten Liste: Fett
Schriftstil für ungeordnete Liste: Großbuchstaben
Ungeordnete Textgröße:
- Desktop: 1vw
- Tablet: 2.5vw
- Telefon: 3.5vw
Zeilenhöhe der ungeordneten Liste: 1.5em
Ungeordneter Listenstiltyp: Keine
Position des ungeordneten Listenstils: Innen

Hamburger-Menü

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie einige benutzerdefinierte obere und untere Polsterungen hinzufügen.

Obere Polsterung: 5%
Untere Polsterung: 5%

Hamburger-Menü

Textmodul klonen, um Variationen ohne Untermenü zu erstellen

Sobald Sie das erste Modul abgeschlossen haben, können Sie es einmal klonen. Wir verwenden diese Duplizierung, um eine Variation des Menüpunkts ohne Untermenüpunkte zu erstellen.

Hamburger-Menü

Untermenü auslassen & Symbol umschalten

Um dieses doppelte Modul in einen regulären Menüpunkt ohne Untermenüpunkte zu verwandeln, verwenden Sie stattdessen diese HTML-Struktur:

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

Hamburger-Menü

Wiederverwenden beider Arten von Menüpunkten

Sobald Sie beide Variationen der Menüelemente eingerichtet haben, können Sie beide entsprechend wiederverwenden, indem Sie sie klonen und den Inhalt ändern.

Hamburger-Menü

Textmodul #2 zu Spalte 2 hinzufügen

H4- und Absatzinhalt zum Inhaltsfeld hinzufügen

In Spalte 2 fügen wir ein weiteres Textmodul mit H4- und Absatzinhalten unserer Wahl hinzu.

Hamburger-Menü

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

Textschriftart: Alata
Textfarbe: #cecece
Textgröße:
- Desktop: 0.8vw
- Tablet: 2.4vw
- Telefon: 3.4vw
Text Buchstabenabstand: 1px
Textzeilenhöhe: 1.5em
Textfarbe: Hell

Hamburger-Menü

H4-Texteinstellungen

Nehmen Sie auch einige Änderungen an den H4-Texteinstellungen vor.

Überschrift 4 Textgröße:
- Desktop: 1vw
- Tablet: 3vw
- Telefon: 4vw

Hamburger-Menü

Größe

Ändern Sie dann die Breite des Moduls in den Größeneinstellungen.

Breite: 48%

Hamburger-Menü

Hauptelement-CSS

Fügen Sie dem Hauptelement des Moduls eine Zeile CSS-Code hinzu. Diese Zeile CSS-Code hilft uns, zwei Textmodule nebeneinander zu platzieren.

display: inline-block;

Hamburger-Menü

Textmodul #2 klonen

Kopie ändern

Sobald Sie das Textmodul fertiggestellt haben, können Sie es einmal klonen und den Inhalt entsprechend ändern.

Hamburger-Menü

Fügen Sie das Social Media Follow-Modul zu Spalte 2 hinzu

Fügen Sie soziale Netzwerke Ihrer Wahl hinzu

Das letzte Modul, das wir in diesem Design benötigen, ist ein Social Media Follow Module in Spalte 2. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.

Hamburger-Menü

Entfernen Sie die Hintergrundfarbe jedes sozialen Netzwerks einzeln

Entfernen Sie die Hintergrundfarbe jedes sozialen Netzwerks einzeln.

Hamburger-Menü

Abstand

Gehen Sie dann zurück zu den allgemeinen Moduleinstellungen und wenden Sie einen oberen Rand an.

Obere Marge: 5vh

Hamburger-Menü

4. Funktionalität hinzufügen

CSS-Klasse zum Hamburger Icon-Textmodul hinzufügen

Nachdem die Grundlage für unser Hamburger-Menü-Design gelegt wurde, können wir uns nun darauf konzentrieren, Funktionen hinzuzufügen! Als erstes müssen Sie das Textmodul mit dem Hamburger-Symbol öffnen und die folgende CSS-Klasse hinzufügen:

CSS-Klasse: fullwidth-open

Hamburger-Menü

CSS-Klasse zu Abschnitt 2 hinzufügen

Öffnen Sie dann den Hamburger-Menüabschnitt, Abschnitt #2, und fügen Sie die folgende CSS-Klasse hinzu:

CSS-Klasse: fullwidth-menu

Hamburger-Menü

CSS-Klasse zu jedem Modul im Fullwidth-Menü hinzufügen

Um den benutzerdefinierten Staffelungs-Animationseffekt zu erstellen, müssen wir die folgende CSS-Klasse auf jedes Modul in Abschnitt 2 anwenden.

CSS-Klasse: stagger-effect

Hamburger-Menü

Zusätzliche CSS-Klasse zu Menüelementen hinzufügen

Fügen Sie auch zu jedem der Menüpunkte in Spalte 1 eine zusätzliche CSS-Klasse namens „main-menu-item“ hinzu.

CSS-Klasse: stagger-effect main-menu-item

Hamburger-Menü

Codemodul zu Abschnitt 1 hinzufügen

Um die Funktionalität anzuwenden, verwenden wir benutzerdefinierten CSS- und JQuery-Code. Wir platzieren diesen Code in einem neuen Codemodul in der zweiten Spalte unserer Zeile in Abschnitt #1.

Hamburger-Menü

CSS-Code einfügen

Fügen Sie dem Code-Modul den folgenden CSS-Code zwischen den Style-Tags hinzu, wie Sie im Druckbildschirm unten sehen können.

/* enable class below once you're done editing the menu */

/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/

.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.fullwidth-open.open .line{
background: white; 
}

.line-1 {
top: 15px;    
}
  
.line-2 {
top: 25px;
width: 80%;
}
 
.line-3 {
top: 35px;
width: 50%;
}
 
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
.fullwidth-open.open .line-2 {
display: none;
}
 
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
 
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
  
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
  
.toggle-sub-menu {
cursor: pointer;
}

Hamburger-Menü

Anime.js-Bibliothek einfügen

Fahren Sie fort, indem Sie die Anime-JavaScript-Bibliothek mithilfe von Skript-Tags hinzufügen, wie Sie im Druckbildschirm unten sehen können . Wir werden diese großartige Bibliothek verwenden, um im nächsten Schritt des Tutorials den Staffelungseffekt zu erstellen.

src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

Hamburger-Menü

JQuery-Code einfügen

Die Klick-Funktionalitäten in unserem Hamburger-Menü werden durch den folgenden JQuery-Code unterstützt. Stellen Sie sicher, dass Sie diesen Code zwischen Skript-Tags platzieren, wie Sie im Druckbildschirm unten sehen können.

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

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu & animate items  
hamburgerIcon.click(function(){
	$(this).toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');
	if (menuSection.hasClass("fullwidth-menu-open")) {
		anime({
  		targets: '.stagger-effect',
  		translateY: [150, 0],
  		opacity: [0, 1],
  		loop: false,
  		delay: anime.stagger(100, {easing: 'easeOutQuad'})
		});

	} else { 
		subMenu.slideUp();  
		toggleIcon.text($(this).text() == '+' ? '-' : '+');  
	}
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
	hamburgerIcon.toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
	toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
	var subMenu = $(this).parent().find("ul");
	subMenu.slideToggle(); 
	$(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});

Hamburger-Menü

Aktivieren Sie die CSS-Klasse, sobald Sie Ihr Fullscreen-Header-Design abgeschlossen haben

Zu guter Letzt aktivieren wir eine CSS-Klasse im Code-Modul, die Sie im ersten Abschnitt finden. Öffnen Sie das Code-Modul und entfernen Sie das „/* */“ am Anfang und am Ende der Klasse. Durch Aktivieren dieser Klasse (in Kombination mit bereits aktiviertem JQuery-Code) wird sichergestellt, dass der Abschnitt mit den Menüelementen nicht sofort geladen wird, wenn jemand eine Ihrer Seiten besucht. Sobald Sie diese Klasse aktivieren, verschwindet der zweite Abschnitt auf Ihrer Seite aus dem Visual Builder, Sie können jedoch weiterhin im Wireframe-Modus darauf zugreifen oder die CSS-Klasse deaktivieren, wenn Sie weitere Änderungen vornehmen möchten.

Hamburger-Menü

5. Speichern Sie die Änderungen am Header und Theme Builder

Das ist es! Sie müssen nur noch die Vorlage und den Divi Theme Builder speichern und das Ergebnis auf Ihrer Website anzeigen!

Hamburger-Menü

Vorschau

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

Desktop

Hamburger-Menü

Handy, Mobiltelefon

Hamburger-Menü

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Ihrem Divi-Header kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie ein benutzerdefiniertes animiertes Hamburger-Menü erstellen. Sobald ein Besucher auf das Hamburger-Symbol klickt, geht ein Vollbild-Menü über und zeigt die Menüpunkte nacheinander an, was zu einer schönen Benutzererfahrung führt. Sie konnten die JSON-Vorlagendatei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

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.