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'

Divi-Theme-Builder

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!

Divi-Theme-Builder

Übersicht

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Endergebnis.

Hamburger-Symbol im Divi-Menümodul

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.

...