So erstellen Sie ein Slide-in-Menü in Divi

Veröffentlicht: 2022-05-12

Das Tolle an Folienmenüs ist, dass mehr Inhalte verfügbar sind, ohne zusätzlichen Platz auf dem Bildschirm zu beanspruchen, und sie passen in die meisten Layouts und sind oft in den mobilen Apps zu finden, sodass Sie sich bei der Verwendung vertraut fühlen.

Wir werden in diesem Tutorial zwei Möglichkeiten zeigen, wie Sie ein Slide-In-Menü auf Ihrer Divi-Website haben können. Die erste besteht darin, den Design-Anpasser für das Divi-Design zu verwenden, und die zweite besteht darin, eine globale Kopfzeile mit dem Divi-Designersteller zu erstellen.

So erstellen Sie ein Slide-in-Menü im Divi Via Theme Customizer

Zuerst müssen Sie sich als Administrator bei WordPress anmelden, um Zugriff auf den Website-Theme-Anpasser zu haben, und Sie müssen sicherstellen, dass kein aktiver globaler Header im Divi-Theme-Builder vorhanden ist. Fahren Sie dann mit Divi → Theme Customizer fort.

Sie werden zum Anpassen des Themas weitergeleitet, um Ihre Website anzupassen. Von hier aus können Sie den Titel und den Slogan Ihrer Website ändern, Widgets zu einer Seitenleiste oder Fußzeile hinzufügen, Menüs erstellen, Ihre Homepage-Einstellungen ändern und vieles mehr.

Fahren Sie fort, indem Sie auf den Kopfzeilen- und Navigationsblock → Kopfzeilenformat → Kopfzeilenstil klicken und dann die Option Einschieben auswählen.

Viola, so ist Ihr Slide-in-Menü einsatzbereit.

Wenn Sie jedoch weitere Anpassungen vornehmen möchten, wie z. B. das Ändern der Breite des Einblendmenüs, der Hintergrundfarbe, der Textgröße und mehr, können Sie zu den Einblend- und Vollbild-Kopfzeileneinstellungen im Kopfzeilen- und Navigationsblock wechseln, die nach der Auswahl von angezeigt werden Slide-In- oder Vollbild-Menüoption.

So erstellen Sie ein Slide-in-Menü in Divi Via Theme Builder

Dieses Mal zeigen wir Ihnen, wie Sie mit dem Divi Theme Builder ein Slide-In-Menü in Divi erstellen, indem Sie eine globale Kopfzeile erstellen. Wählen Sie im Divi- Menü auf dem WordPress-Dashboard die Option Theme Builder und fahren Sie dann fort, einen globalen Header zu erstellen.

Die Abschnittseinstellung

Sie werden zum Divi Builder-Editor weitergeleitet. Klicken Sie zunächst auf das Symbol für die Abschnittseinstellungen um die erste Abschnittseinstellung zu ändern. Fahren Sie fort, indem Sie die Hintergrundfarbe des Abschnitts in eine transparente Farbe ändern: rgba(255,255,255,0)

Gehen Sie weiter zur Registerkarte Design → Abstand , um die standardmäßige obere und untere Polsterung zu entfernen. Setzen Sie den Wert für beide auf 0.

Gehen Sie weiter zur Registerkarte Erweitert → Position , ändern Sie dann die Option Position in Fest und ändern Sie die Position in die obere Mitte.

Einstellung der ersten Reihe

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Öffnen Sie vor dem Hinzufügen von Modulen zuerst die Zeileneinstellungen und ändern Sie dann die Option Größe und Abstand auf der Registerkarte Design wie folgt:

Größe :

  • Breite : 97%
  • Maximale Breite : 100 %

Abstand :

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

Wechseln Sie dann zur Registerkarte Erweitert → Benutzerdefiniertes CSS → Hauptelement und fügen Sie dort die folgenden Snippets hinzu: 

 Anzeige: Flex;
Ausrichtungselemente: Mitte;

Sie können Ihr Site-Logo in der ersten Spalte dieser Zeile platzieren, indem Sie dort ein Bildmodul hinzufügen.

Erstellen Sie ein interaktives Hamburger-Symbol

Gehen Sie zur dritten Spalte oder Spalte 3 und fügen Sie ein Textmodul hinzu. Wir werden die Textregisterkarte anstelle der visuellen verwenden, um drei HTML-Spans mit benutzerdefinierten Klassen hinzuzufügen, um ein interaktives Hamburger-Symbol zu erstellen. 

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

Ändern Sie dann die Hintergrundfarbe mit diesem Wert: rgba(0,0,0,0.04)

Gehen Sie weiter zur Registerkarte Design → Text → Textzeilenhöhe, um die Textzeilenhöhe zu entfernen, indem Sie den Wert 0em 0em , um die volle Kontrolle über die von uns hinzugefügten Spannen zu haben.

Wechseln Sie zur Größeneinstellung und ändern Sie den Wert wie folgt:

  • Breite : 120px
  • Modulausrichtung : Rechts

Lassen Sie uns das Modul ausrichten, indem wir benutzerdefinierte Werte für die Auffüllung in den Abstandseinstellungen hinzufügen, den Wert wie folgt:

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

Fügen Sie dann eine benutzerdefinierte CSS-ID hinzu, um das Modul abzuschließen. Wir verwenden diese CSS-ID, um eine Klickfunktion in unserem Code zu erstellen. Wechseln Sie zur Registerkarte Erweitert → CSS-ID & Klassen und geben Sie dann den folgenden Text in das Feld CSS-ID ein:

  • CSS-ID : Slide-in-open

Einstellungen der zweiten Reihe

Fahren wir fort, indem wir eine neue Zeile erstellen, die zweite Zeile. Ohne noch ein Modul hinzuzufügen, klicken Sie auf das Zeileneinstellungssymbol, um dessen Einstellungen zu öffnen. Diese Zeile wird der Platz für unser gesamtes Slide-in-Menü sein.

Lassen Sie uns die Hintergrundfarbe nach Ihren Wünschen ändern, für unser Menü wählen wir diese Farbe: #e7e0e2

Fahren Sie fort, indem Sie zur Registerkarte Design → Dimensionierung wechseln und den Wert wie folgt ändern:

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

Wechseln Sie dann zu den Abstandseinstellungen und ändern Sie den Wert für verschiedene Geräte für Top Padding : 10vw (Desktop), 30vw (Tablet), 40vw (Telefon).

Fahren Sie fort, indem Sie eine benutzerdefinierte CSS-Klasse hinzufügen. Wir benötigen sie, damit die Zeile eingefügt werden kann. Wechseln Sie zur Registerkarte Erweitert → CSS-ID und Klassen und geben Sie dann den folgenden Text in das Feld CSS-Klassen ein:

  • CSS-Klasse : Slide-in-Menu-Container

Bringen Sie dann die Deckkraft der Zeile im Standardzustand auf 0, indem Sie opacity: 0; in Benutzerdefiniertes CSS → Hauptelement .

Um die Einstellung für die zweite Reihe abzuschließen, ändern Sie die Positionierung in der Positionseinstellung auf die folgenden Werte:

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

Hinzufügen des Menüs

Beginnen wir mit dem Hinzufügen des Menüs, indem wir ein Textmodul hinzufügen und das erste Menü eingeben, das Sie anzeigen möchten. Wir verwenden die Startseite für unser erstes Menü. Fügen Sie dann einen relevanten Link hinzu.

Fahren Sie fort, indem Sie die Hintergrundfarbe ändern in: rgba(216,210,212,0.35)

Gehen Sie weiter zur Registerkarte Design und ändern Sie die Texteinstellungen wie folgt:

  • Textschriftart : Arial
  • Schriftstärke des Textes : Fett
  • Textfarbe : #0c71c3
  • Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Textschatten : Lichteffekt
  • Textausrichtung : Zentrieren

Fahren Sie fort, indem Sie die Abstandswerte für verschiedene Geräte ändern. Die Werte sind wie folgt:

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

Das erste Menü ist fertig, jetzt müssen wir für den Rest des Menüs nur noch das erste Menü klonen, indem wir auf das doppelte Modulsymbol klicken und ändern Sie dann den Text und den Link wie wir wollen.

Hinzufügen der Slide-In-Funktion

Lassen Sie uns das Menü beenden, indem wir der zweiten Spalte der ersten Zeile ein Codemodul hinzufügen und dann den folgenden Code in das Modul kopieren. 

 <Stil>
#slide-in-open{
Cursor: Zeiger;
}
 
.Linie{
Bildschirmsperre;
Position: absolut;
Höhe: 4px;
Breite: 100 %;
Hintergrund: #24394A;
Randradius: 9px;
Deckkraft: 1;
-Webkit-Übergang: .1s einfaches Ein- und Aussteigen;
-moz-Übergang: .1s Ease-in-out;
-o-Übergang: .1s Ease-in-out;
Übergang: .1s Ease-in-out;
}
 
.Zeile 2 {
oben: 10px;
}
 
.line-3 {
oben: 20px;
}
 
#slide-in-open.open .line-1 {
oben: 10px;
-webkit-transform: rotieren (135 Grad);
-moz-transform: rotieren (135 Grad);
-o-transformieren: drehen (135 Grad);
transformieren: drehen (135 Grad);
}
 
#slide-in-open.open .line-2 {
Anzeige: keine;
}
 
#slide-in-open.open .line-3 {
oben: 10px;
-webkit-transform: rotieren (-135 Grad);
-moz-transform: rotieren (-135 Grad);
-o-transformieren: drehen (-135 Grad);
transformieren: drehen (-135 Grad);
}
 
.slide-in-menu {
rechts: 0 !wichtig;
Deckkraft: 1 !wichtig;
}
 
.slide-in-menu-Container {
-webkit-Übergang: alle 0.5s Ease !wichtig;
-moz-Übergang: alle 0,5s Ease !important;
-o-Übergang: alle 0,5s locker !wichtig;
-ms-Übergang: alle 0,5s Ease !wichtig;
Übergang: alle 0,5s leicht !wichtig;
}
</style>
<Skript>
jQuery(Funktion($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});
</script>

Der Code sollte sich um den Klickfunktionseffekt kümmern und die Hamburger-Icon-Spannweiten gestalten, dann das Menü einschieben lassen, wenn auf das Icon geklickt wird.

Sobald das Slide-In-Menü fertig ist, speichern wir das Projekt und wenden die Änderungen an, indem wir im Divi Theme Builder auf Alle Änderungen speichern klicken. Werfen wir einen Blick auf die Speisekarte in einem Beitrag auf unserer Website.