Möchten Sie dem Menümodul von ein Hamburger-Symbol hinzufügen? Divi ?
Wenn Sie Ihren Header einbauen Divi, dazu gibt es mehrere Möglichkeiten.
Wir zeigen Ihnen, wie Sie dem Menümodul von ein Hamburger-Symbol hinzufügen Divi. Auf kleineren Bildschirmen erscheint dieses Hamburger-Symbol bereits standardmäßig. In diesem Tutorial stellen wir jedoch sicher, dass auch auf dem Desktop ein Hamburger-Symbol angezeigt wird.
Dies verleiht Ihrem Header ein minimales Aussehen und fügt gleichzeitig Interaktion hinzu.
Gehen wir.
Übersicht
Bevor wir in dieses Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis.
Laden Sie DIVI jetzt herunter!!!
Erstellen Sie mit dem Divi Builder eine neue globale Kopfzeilenvorlage
Gehen Sie zu Divi Theme Builder
Gehen Sie im WordPress-Dashboard zu 'Divi > Themenersteller' dann klick 'Globale Kopfzeile hinzufügen'
Fügen Sie einen neuen globalen Header hinzu
Ein Dropdown-Menü wird angezeigt. Um mit dem Erstellen von Grund auf neu zu beginnen, fahren Sie fort, indem Sie auswählen „Globale Kopfzeile erstellen“.
Entwerfen des globalen Header-Designs
Abschnittseinstellungen
Hintergrundfarbe
Sobald Sie sich im Vorlagen-Editor befinden, ist es an der Zeit, mit der Gestaltung der Kopfzeile zu beginnen. Sie werden feststellen, dass bereits ein Abschnitt vorhanden ist. Öffnen Sie die Abschnittseinstellungen und fügen Sie eine Hintergrundfarbe hinzu.
- Hintergrundfarbe: #f6f9fb
Abstand
Wechseln Sie zur Registerkarte Design des Abschnitts und ändern Sie die folgenden Parameter.
- Polsterung (oben und unten): 0px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Sizing
Öffnen Sie die Leitungseinstellungen, gehen Sie zur Registerkarte Design und ändern Sie die maximale Breite in den Größeneinstellungen.
- Maximale Breite: 1 Pixel
Abstand
Ändern Sie dann die obere und untere Polsterung in den Abstandseinstellungen.
- Polsterung (oben und unten): 5px
Fügen Sie der Spalte ein Menümodul hinzu
Wählen Sie das hinzuzufügende Menü aus
Fügen Sie als Nächstes ein Menümodul zur Zeilenspalte hinzu und wählen Sie ein dynamisches Menü Ihrer Wahl aus.
Logo herunterladen
Herunterladen Logo.
Hintergrundfarbe entfernen
Entfernen Sie als Nächstes die standardmäßige weiße Hintergrundfarbe aus dem Modul.
Menütexteinstellungen
Wechseln Sie zur Registerkarte Design des Moduls und passen Sie die Textparameter des Menüs entsprechend an:
- Schriftmenü: Poppins
- Schriftstärke des Menüs: Semi Bold
- Textfarbe: #003e51
- Menütextgröße: 16px
- Textausrichtung: Rechts
Dropdown-Menüeinstellungen
Ändern Sie dann die Einstellungen im Dropdown-Menü.
- Zeilenfarbe des Dropdown-Menüs: #7159c8
Symboleinstellungen
Ändern Sie auch die Symboleinstellungen.
- Farbe des Einkaufswagen-Symbols: #670fff
- Farbe des Suchsymbols: #670fff
- Farbe des Hamburger-Menüsymbols: #670fff
Sizing
Gehen Sie dann zu den Größeneinstellungen und weisen Sie eine maximale Breite von zu Logo.
- Logo Maximale Breite: 280 Pixel
Abstand
Entfernen Sie auch den standardmäßigen unteren Rand aus dem Modul.
- Rand (unten): 0px
Abschnitt klebrig machen
Nachdem unser Menü nun vorhanden ist, machen wir den Abschnitt auch klebrig. Öffnen Sie die Abschnittseinstellungen, gehen Sie zur Registerkarte Fortgeschrittener und nehmen Sie die folgenden Einstellungen vor:
- Sticky-Position: Oben bleiben
- Versatz von umgebenden klebrigen Elementen: JA
- Übergangsstandard und Sticky-Stile: JA
Hintergrundfarbe im klebrigen Zustand
Ändern Sie dann die Hintergrundfarbe des Abschnitts in den klebrigen Zustand.
- Hintergrundfarbe: #ffffff
Sticky-State-Box-Schatten
Wenden Sie auch einen Kastenschatten auf den Abschnitt an.
- Schattenfarbe (Desktop): rgba(0,0,0,0)
- Schattenfarbe (klebrig): rgba(0,0,0,0.04)
Dem Menümodul wurde ein Hamburger-Symbol hinzugefügt
CSS-ID zum Menümodul hinzufügen
Öffnen Sie zuerst die Einstellungen des Menümoduls und gehen Sie zur Registerkarte Fortgeschrittener und weisen Sie eine CSS-ID zu.
- CSS-ID: divi-menu
Fügen Sie ein Code-Modul unter dem Menü-Modul hinzu
Fügen Sie als Nächstes ein Code-Modul unter dem Menü-Modul hinzu.
Fügen Sie Skript- und Stil-Tags hinzu
Wir werden CSS- und JQuery-Code verwenden. Zur Vorbereitung fügen wir Stil- und Skript-Tags hinzu.
CSS-Code hinzufügen
Wir werden die folgenden CSS-Codezeilen zwischen den Style-Tags einfügen:
.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;
}
Fügen Sie JQuery hinzu
Fügen Sie Zeilen zum Öffnen von JQuery-Code hinzu
Als nächstes haben wir den JQuery-Code. Fügen Sie die folgenden JQuery-Codezeilen zwischen den script-Tags hinzu:
jQuery(function($){
$(document).ready(function(){
});
});
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');
Umschaltsymbol im Menümodul platzieren
Platzieren Sie als Nächstes die Umschaltsymbolvariable mit der folgenden Codezeile im Menümodul:
toggleIcon.insertAfter(desktopMenu);
Fügen Sie eine Klickfunktion hinzu
Wir fügen auch eine Klickfunktion hinzu.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Änderungen am Divi Theme Builder speichern
Jetzt, da alles vorhanden ist, müssen Sie nur noch alle Divi Theme Builder-Änderungen speichern und das Ergebnis anzeigen!
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Endergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit Ihrem globalen Header in Divi Theme Builder kreativ werden können.
Insbesondere haben wir Ihnen gezeigt, wie Sie ein Hamburger-Menüsymbol auch auf dem Desktop hinzufügen können. Standardmäßig wird auf Tablets und Mobilgeräten ein Hamburger-Symbol angezeigt.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie weitere Elemente benötigen, um Ihre Website-Erstellungsprojekte abzuschließen. Oder sehen Sie sich auch unseren Ratgeber an WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...