So erstellen Sie ein responsives Slide-In-Menü mit Divis Theme Builder

Veröffentlicht: 2020-04-15

Wenn Sie eine Website für einen eigenen Kunden einrichten, werden Sie sich überlegen, welche Art von Header Sie erstellen möchten. Die im Web am häufigsten verwendete ist die horizontale Menüleiste oben, aber es gibt auch andere Optionen, wie z. B. ein Slide-In-Menü. Slide-In-Menüs helfen Ihnen, den Platz zu begrenzen, der von der globalen Kopfzeile eingenommen wird. Anstatt alle Ihre Menüpunkte sofort anzuzeigen, können Sie ein Slide-In-Menü erscheinen lassen, wenn Ihre Besucher auf das Hamburger-Symbol in der oberen rechten Ecke klicken. Mithilfe eines Einschubmenüs können Sie Ihrer Website zusätzliche Interaktionen hinzufügen.

Im heutigen Divi-Use-Case-Tutorial zeigen wir Ihnen, wie Sie mit Divis Theme Builder, den integrierten Divi-Elementen und etwas zusätzlichem Code einen erstellen. Das Design dieses Einschubmenüs passt perfekt zum Yoga Instructor Layout Pack, Sie können es jedoch beliebig an jede von Ihnen erstellte Website anpassen. Sie können die JSON-Datei 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.

Desktop

Einschubmenü

Handy, Mobiltelefon

Einschubmenü

Laden Sie die globale Header-Vorlage für das responsive Slide-In-Menü KOSTENLOS herunter

Um die kostenlose globale Header-Vorlage für das Slide-In-Menü 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

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. Gehen Sie zu Divi Theme Builder und beginnen Sie mit dem Erstellen des globalen Headers

Gehe zum Divi Theme Builder

Gehen Sie zunächst zum Divi Theme Builder im Backend Ihrer WordPress-Website und klicken Sie auf 'Global Header hinzufügen'.

Einschubmenü

Beginnen Sie mit dem Erstellen eines globalen Headers

Fahren Sie fort, indem Sie „Globalen Header erstellen“ auswählen.

Einschubmenü

2. Kopfzeilendesign erstellen

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und machen Sie die Hintergrundfarbe transparent.

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

Einschubmenü

Abstand

Wechseln Sie zur Registerkarte Design und entfernen Sie alle standardmäßigen oberen und unteren Polster.

  • Obere Polsterung: 0px
  • Untere Polsterung: 0px

Einschubmenü

Position

Dann drehen wir den Abschnitt fest, indem wir zur Registerkarte "Erweitert" gehen und die Positionseinstellungen ändern.

  • Position: Behoben
  • Ort: Top Center

Einschubmenü

Zeile 1 hinzufügen

Spaltenstruktur

Nachdem Sie die Abschnittseinstellungen abgeschlossen haben, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Einschubmenü

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

  • Breite: 97%
  • Maximale Breite: 100%

Einschubmenü

Abstand

Ändern Sie als nächstes die Abstandseinstellungen.

  • Obere Polsterung: 1%
  • Untere Polsterung: 0px

Einschubmenü

Hauptelement

Gehen Sie dann zur Registerkarte "Erweitert" und fügen Sie dem Hauptelement der Zeile zwei Zeilen CSS-Code hinzu. Dies hilft uns dabei, den Spalteninhalt in unserer Zeile vertikal auszurichten. 

display: flex;
align-items: center;

Einschubmenü

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

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

Einschubmenü

Textmodul zu Spalte 3 hinzufügen

3 Bereiche zum Inhaltsfeld hinzufügen

Fahren Sie dann mit der dritten Spalte fort und fügen Sie ein Textmodul hinzu. Wir verwenden die Textregisterkarte des Textmoduls, um drei HTML-Spans hinzuzufügen, denen benutzerdefinierte Klassen zugewiesen sind. Später im Tutorial verwenden wir diese Spannen, um unser interaktives Hamburger-Symbol zu erstellen. 

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

Einschubmenü

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe des Moduls.

  • Hintergrundfarbe: rgba(0,0,0,0.04)

Einschubmenü

Texteinstellungen

Wechseln Sie dann zur Registerkarte Design und entfernen Sie die Textzeilenhöhe. Dies wird uns helfen, die volle Kontrolle über die hinzugefügten Spannen zu haben.

  • Textzeilenhöhe: 0em

Einschubmenü

Größe

Als Nächstes ändern wir die Größeneinstellungen des Moduls.

  • Breite: 120px
  • Modulausrichtung: Rechts

Einschubmenü

Abstand

Und wir vervollständigen die Moduleinstellungen, indem wir das Modul mit benutzerdefinierten Abstandswerten in den Abstandseinstellungen in ein Quadrat verwandeln.

  • Obere Polsterung: 40px
  • Untere Polsterung: 60px
  • Linke Polsterung: 40px
  • Rechte Polsterung: 40px

Einschubmenü

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe! Wir verwenden diese Zeile, um unser gesamtes Slide-In-Menü zu gestalten. Verwenden Sie die folgende Spaltenstruktur:

Einschubmenü

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne Module hinzuzufügen, und ändern Sie die Hintergrundfarbe wie folgt:

  • Hintergrundfarbe: #e7e0e2

Einschubmenü

Hintergrundbild

Wir verwenden auch ein Hintergrundbild mit Muster. Sie finden das von uns verwendete Bild in dem Download-Ordner, den Sie zu Beginn dieses Tutorials herunterladen konnten, aber Sie können auch jedes andere Hintergrundmuster Ihrer Wahl verwenden.

  • Hintergrundbildgröße: Tatsächliche Größe
  • Position des Hintergrundbilds: Mitte
  • Hintergrundbild wiederholen: Wiederholen

Einschubmenü

Größe

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Größeneinstellungen entsprechend:

  • Benutzerdefinierte Dachrinnenbreite verwenden: Ja
  • Dachrinnenbreite: 1
  • Breite: 20 % (Desktop), 40 % (Tablet), 60 % (Telefon)
  • Höhe: 100vh

Einschubmenü

Abstand

Ändern Sie auch die Abstandseinstellungen für verschiedene Bildschirmgrößen.

  • Obere Polsterung: 10vw (Desktop), 30vw (Tablet), 40vw (Telefon)

Einschubmenü

Grenze

Und vervollständigen Sie die Zeileneinstellungen, indem Sie einen linken Rand hinzufügen.

  • Breite des linken Rands: 10px
  • Farbe des linken Rands: #24394a
  • Linker Randstil: Doppelt

Einschubmenü

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Zeit, den ersten Menüpunkt Textmodul hinzuzufügen! Fügen Sie die Kopie zum Inhaltsfeld hinzu.

Einschubmenü

Link hinzufügen

Fahren Sie fort, indem Sie dem Menüpunkt einen entsprechenden Link hinzufügen.

  • Modul-Link-URL: #

Einschubmenü

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe.

  • Hintergrundfarbe: rgba(216,210,212,0.35)

Einschubmenü

Texteinstellungen

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

  • Textschriftart: Domine
  • Schriftstärke des Textes: Fett
  • Textfarbe: #000000
  • Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Textausrichtung: Mitte

Einschubmenü

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

  • Unterer Rand: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Obere Polsterung: 1vw
  • Untere Polsterung: 1vw

Einschubmenü

Textmodul klonen (1 Modul pro Menüpunkt)

Nachdem Sie den ersten Menüpunkt Textmodul abgeschlossen haben, können Sie ihn beliebig oft klonen. Stellen Sie nur sicher, dass Ihre Module die Viewport-Höhe nicht überschreiten.

Einschubmenü

Inhalt & Links von doppelten Textbausteinen ändern

Ändern Sie den Inhalt und die Links jedes doppelten Textmoduls.

Einschubmenü

Einschubmenü

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in dieser Zeile benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Einschubmenü

Link hinzufügen

Fügen Sie auch einen Link hinzu.

  • Schaltflächen-Link-URL: #

Einschubmenü

Ausrichtung

Wechseln Sie zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

  • Tastenausrichtung: Mitte

Einschubmenü

Tasteneinstellungen

Fahren Sie fort, indem Sie das Tastenmodul wie folgt gestalten:

  • Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
  • Tastentextgröße: 0.7vw (Desktop), 1.5vw (Tablet), 2.5vw (Telefon)
  • Schaltflächentextfarbe: #000000
  • Hintergrundfarbe der Schaltfläche: rgba(0,0,0,0)
  • Farbe der Knopfleiste: #24394a
  • Schaltflächenrandradius: 0px
  • Tastenabstand: 4px

Einschubmenü

  • Schaltflächenschrift: Open Sans
  • Schriftstärke der Schaltfläche: Fett
  • Schaltflächenschriftart: Großbuchstaben

Einschubmenü

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

  • Oberer Rand: 5vw
  • Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Linke Polsterung: 1,8 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
  • Rechte Polsterung: 1,8 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)

Einschubmenü

3. Slide-In-Funktionalität hinzufügen

CSS-ID zum Menüsymbol-Textmodul hinzufügen

Jetzt, da wir alle Elemente an Ort und Stelle haben, ist es an der Zeit, den reaktionsschnellen Einschubmenüeffekt zu erstellen! Öffnen Sie zunächst das Textmodul (das die Spans enthält) in der dritten Spalte Ihrer ersten Zeile und verwenden Sie eine benutzerdefinierte CSS-ID im erweiterten Tab. Wir verwenden diese CSS-ID, um eine Klickfunktion in unserem Code zu erstellen.

  • CSS-ID: Slide-in-Open

Einschubmenü

CSS-Klasse zu Zeile 2 hinzufügen

Öffnen Sie dann die zweite Zeile, gehen Sie zur Registerkarte Erweitert und fügen Sie eine benutzerdefinierte CSS-Klasse hinzu. Beim Klicken lassen wir die Zeile einschieben.

  • CSS-Klasse: slide-in-menu-container

Einschubmenü

Position von Zeile 2 ändern

Wir werden auch diese Zeile neu positionieren. Beachten Sie, wie der horizontale Versatz in den Größeneinstellungen mit der Breite der Zeile über verschiedene Bildschirmgrößen hinweg übereinstimmt.

  • Position: Absolut
  • Ort: Oben rechts
  • Horizontaler Versatz: -20 % (Desktop), -40 % (Tablet), -60 % (Telefon)

Einschubmenü

Deckkraft von Zeile 2 ändern

Und bringen Sie die Deckkraft in einem Standardzustand auf 0. 

opacity: 0;

Einschubmenü

Codemodul zur zweiten Spalte der ersten Zeile hinzufügen

CSS-Code einfügen

Um den Klickfunktionseffekt zu erzeugen und die Spannweiten unseres Hamburger-Symbols zu gestalten, benötigen wir etwas CSS-Code. Fügen Sie der zweiten Spalte Ihrer ersten Zeile ein Code-Modul hinzu und platzieren Sie die folgenden Zeilen CSS-Code zwischen den Style-Tags, wie Sie im Druckbildschirm unten sehen können: 

#slide-in-open{
cursor: pointer;
}

.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
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;
}

.line-2 {
top: 10px;
}

.line-3 {
top: 20px;
}

#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
display: none;
}

#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}

.slide-in-menu-container {
-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;
}

Einschubmenü

JQuery-Code einfügen

Wir müssen auch etwas JQuery für die Klickfunktion hinzufügen. Stellen Sie sicher, dass Sie den Code zwischen den Skript-Tags platzieren, wie Sie im folgenden Druckbildschirm sehen können: 

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

Einschubmenü

4. Theme Builder-Änderungen speichern und Ergebnis auf der Website anzeigen

Sobald Sie alle Elemente in Ihrem globalen Header ausgefüllt haben, müssen Sie nur noch alle Änderungen speichern und das Ergebnis auf Ihrer Website anzeigen!

Einschubmenü

Einschubmenü

Vorschau

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

Desktop

Einschubmenü

Handy, Mobiltelefon

Einschubmenü

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divi's Theme Builder ein ansprechendes Slide-In-Menü für Ihr nächstes Divi-Projekt erstellen. Wir haben die besten integrierten Elemente und Optionen von Divi mit einigen benutzerdefinierten Klickfunktionscodes kombiniert. So können Sie sich auf die Gestaltung des Slide-In-Menüs konzentrieren und den funktionalen Teil des globalen Headers vom Code übernehmen lassen! Sie konnten die JSON-Datei auch kostenlos herunterladen. Wenn Sie Fragen oder Anregungen 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.