Möchten Sie in Divi ein verschiebbares und reaktionsschnelles Seitenmenü erstellen?
Beim Erstellen eines Website, fragen Sie sich oft, welche Art von Header Sie erstellen sollen. Am häufigsten wird im Web die horizontale Menüleiste oben verwendet, aber es gibt auch andere Optionen, wie z. B. ein Schiebemenü.
Schiebemenüs helfen Ihnen meistens dabei, den Platz zu begrenzen, der von der globalen Kopfzeile eingenommen wird. So können Sie ein Slide-Out-Menü erscheinen lassen, wenn Sie Ihre Besucher Klicken Sie auf das Hamburger-Symbol in der oberen rechten Ecke.
Daher hilft Ihnen die Verwendung eines Slideout-Menüs, zusätzliche Interaktion zu Ihrem hinzuzufügen Website.
In diesem Tutorial zeigen wir Ihnen daher, wie Sie eines mit Divis Theme Builder erstellen.
Fangen wir an!
Übersicht
Bevor wir in dieses Tutorial eintauchen, schauen wir uns zuerst das Ergebnis an, das wir erhalten werden.
Gehen Sie zum Theme Builder und erstellen Sie einen globalen Header
Gehen Sie zum Theme-Builder
Um zu beginnen, gehen Sie im Divi-Menü in Ihrem WordPress-Dashboard zu Theme Builder und klicken Sie auf „Globalen Header hinzufügen“.
Erstellen Sie den globalen Header
Fahren Sie fort, indem Sie „Globale Kopfzeile erstellen“ auswählen.
Erstellen Sie einen Kopfzeilenstil
Abschnittseinstellungen
Hintergrundfarbe
Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und machen Sie die Hintergrundfarbe transparent.
- Hintergrund: rgba (255,255,255,0)
Abstand
Wechseln Sie zur Registerkarte Stil und entfernen Sie alle unteren und oberen Ränder.
- Innerer Randscheitel: 0px
- Unterer interner Rand: 0px
Post
Als Nächstes ändern wir die Position des Abschnitts, indem wir zur Registerkarte Erweitert gehen und die Positionseinstellungen ändern.
- Position: Fest
- Ort: Oben in der Mitte
Fügen Sie die erste Zeile hinzu
Struktur der Spalte
Nachdem Sie die Abschnittseinstellungen abgeschlossen haben, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:
Sizing
Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:
- Maximale Breite: 97%
- Maximale Breite: 100%
Abstand
Ändern Sie die Abstandseinstellungen.
- Maximale interne Marge: 1 %
- Unterer interner Rand: 0px
Hauptelement
Gehen Sie als Nächstes zur Registerkarte „Erweitert“ und fügen Sie dem Hauptelement der Zeile zwei Zeilen CSS-Code hinzu. Dies wird uns helfen, die vertikal auszurichten Inhalt der Spalte in unserer Zeile.
display: flex;
align-items: center;
Fügen Sie Spalte 1 ein Bildmodul hinzu
Logo herunterladen
Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie Ihr Logo hoch.
Fügen Sie in Spalte 3 einen Textbaustein hinzu
Fügen Sie dem Inhaltsbereich 3 Leerzeichen hinzu
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Hintergrundfarbe
Ändern Sie die Hintergrundfarbe des Moduls.
- Hintergrund: rgba (0,0,0,0.04)
Texteinstellungen
Wechseln Sie als Nächstes zur Registerkarte Stil und entfernen Sie die Textzeilenhöhe. Dies wird uns helfen, die volle Kontrolle über die von uns hinzugefügten Bereiche zu haben.
- Textzeilenhöhe: 0em
Sizing
Wir werden die Moduldimensionierungsparameter ändern.
- Maximale Breite: 120 Pixel
- Textausrichtung: rechts
Abstand
Und wir werden die Modulparameter vervollständigen, indem wir das Modul in ein Quadrat umwandeln. Dazu verwenden wir benutzerdefinierte Auffüllwerte in den Abstandseinstellungen.
- Innerer Randscheitel: 40px
- Unterer interner Rand: 60px
- Linker innerer Rand: 40px
- Innerer Rand rechts: 40px
Fügen Sie die zweite Zeile hinzu
Struktur der Spalte
Nächste Reihe! Wir werden diese Linie verwenden, um unser gesamtes Gleitmenü zu gestalten. Verwenden Sie die folgende Spaltenstruktur:
Hintergrundfarbe
Ohne Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe wie folgt:
- Hintergrund: #e7e0e2
Hintergrundbild
Wir verwenden auch ein gemustertes Hintergrundbild. Sie können ein Hintergrundmuster Ihrer Wahl verwenden.
- Hintergrundbildgröße: tatsächliche Größe
- Position des Hintergrundbilds: Mitte
- Hintergrundbild wiederholen: Wiederholen
Sizing
Wechseln Sie als Nächstes zur Registerkarte Stil und ändern Sie die Größeneinstellungen entsprechend:
- Benutzerdefinierte Bundstegbreite verwenden: Ja
- Spaltenabstand: 1
- Maximale Breite: 20 % (Desktop), 40 % (Tablet), 60 % (Telefon)
- Höhe: 100 vh
Abstand
Ändern Sie auch die Abstandseinstellungen auf verschiedenen Bildschirmgrößen.
- Gipfelinterne Marge: 10 vw (Desktop), 30 vw (Tablet), 40 vw (Telefon)
Grenze
Und vervollständigen Sie die Linienparameter, indem Sie einen linken Rand hinzufügen.
- Linke Randbreite: 10px
- Linke Randfarbe: #24394a
- Linker Rahmenstil: Doppelt
Fügen Sie der Spalte ein Textmodul hinzu
Inhalt hinzufügen
Es ist Zeit, den ersten Textmodul-Menüpunkt hinzuzufügen! Legen Sie die Kopie in die Box Inhalt.
Ajouter un lien
Fahren Sie fort, indem Sie dem Menüpunkt einen relevanten Link hinzufügen.
- Modul-Link-URL: #
Hintergrundfarbe
Ändern Sie dann die Hintergrundfarbe.
- Hintergrund: rgba (216,210,212,0.35)
Texteinstellungen
Wechseln Sie als nächstes auf die Registerkarte Style'3 und ändern Sie die Texteinstellungen wie folgt:
- Schriftart: Domine
- Weicher heller Text: Fetter Text
- Textfarbe Text: #000000
- Text Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Textausrichtung: Zentriert
Abstand
Vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Abstandswerte auf verschiedenen Bildschirmgrößen hinzufügen.
- Unterer Rand: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Maximale interne Marge: 1vw
- Unterer Innenrand: 1vw
Textbaustein klonen (1 Baustein pro Menüpunkt)
Wenn Sie das Textmodul für den ersten Menüpunkt fertig gestellt haben, können Sie es so oft wie nötig klonen. Stellen Sie nur sicher, dass Ihre Module die Höhe des Fensters nicht überschreiten.
Bearbeiten Sie den Inhalt und die Links des doppelten Textmoduls
Modifiziere den Inhalt und die Links jedes Duplicate Text-Moduls.
Schaltflächenmodul zur Spalte hinzufügen
Kopie hinzufügen
Das letzte Modul, das wir in dieser Reihe brauchen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.
Ajouter un lien
Fügen Sie auch einen Link hinzu.
- Button-Link-URL: #
Ausrichtung
Wechseln Sie zur Registerkarte Stil und ändern Sie die Schaltflächenausrichtung.
- Schaltflächenausrichtung: zentriert
Tasteneinstellungen
Fahren Sie fort, indem Sie das Button-Modul wie folgt anpassen:
- Benutzerdefinierte Stile für die Schaltfläche verwenden: Ja
- Schaltflächentextgröße: 0,7 vw (Desktop), 1,5 vw (Tablet), 2,5 vw (Telefon)
- Textfarbe der Schaltfläche: #000000
- Hintergrund-Button: rgba (0,0,0,0)
- Farbe des Schaltflächenrahmens: #24394a
- Randradius-Schaltfläche: 0 Pixel
- Buchstabenabstand der Schaltfläche: 4px
- Schriftart-Schaltfläche: Keine öffnen
- Schaltfläche „Weiches Licht“: Fettgedruckter Text
- Schaltfläche „Stil kopieren“: TT
Abstand
Und vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Abstandswerte auf verschiedenen Bildschirmgrößen hinzufügen.
- Obere Marge: 5vw
- Maximale interne Marge: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Innenrand Unten: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Interner Spielraum links: 1,8 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
- Rechter Innenrand: 1,8 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
Schiebefunktion 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 responsiven Sliding-Menü-Effekt zu erstellen! Öffnen Sie zunächst das Textmodul (das die Bereiche enthält) in der dritten Spalte Ihrer ersten Zeile und verwenden Sie eine benutzerdefinierte CSS-ID auf der Registerkarte „Erweitert“. Wir werden diese CSS-ID verwenden, um eine Klickfunktion in unserem Code zu erstellen.
- CSS-ID: slide-in-open
Fügen Sie der Zeile 2 eine CSS-Klasse hinzu
Öffnen Sie dann die zweite Zeile, gehen Sie zur Registerkarte Erweitert und fügen Sie eine benutzerdefinierte CSS-Klasse hinzu. Wenn Sie darauf klicken, verschiebt sich die Linie.
- CSS-Klasse: Slide-in-Menu-Container
Ändern Sie die Positionierung von Zeile 2
Auch diese Linie werden wir neu positionieren. Beachten Sie, wie der horizontale Versatz der Linienbreite auf verschiedenen Bildschirmgrößen in den Größeneinstellungen entspricht.
- Position: Absolut
- Ort: Oben rechts
- Horizontaler Versatz: -20 % (Desktop), -40 % (Tablet), -60 % (Telefon)
Ändern Sie die Deckkraft von Zeile 2
Und bringen Sie die Deckkraft in einem Standardzustand auf 0.
opacity: 0;
Fügen Sie das Code-Modul zur zweiten Spalte der ersten Zeile hinzu
CSS-Code einfügen
Um den Klickfunktionseffekt zu erstellen und die Notenzeilen unseres Hamburger-Symbols zu gestalten, benötigen wir etwas CSS-Code. Fügen Sie der zweiten Spalte Ihrer ersten Zeile ein Codemodul hinzu und Platzieren Sie die folgenden CSS-Codezeilen zwischen den Style-Tags, wie Sie auf dem 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: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
JQuery-Code einfügen
Wir müssen auch etwas JQuery für die Klickfunktion hinzufügen. Stell sicher, dass du Platzieren Sie Code zwischen script-Tags , wie Sie im Druckbildschirm unten sehen können:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
Speichern Sie Änderungen am Theme Builder und zeigen Sie das Ergebnis auf der Website an
Sobald Sie alle Elemente Ihres globalen Headers vervollständigt haben, müssen Sie nur noch alle Änderungen speichern und das Ergebnis auf Ihrer Website anzeigen!
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.
Zusammenfassung
Abschließend haben wir Ihnen in diesem Artikel gezeigt, wie Sie mit dem Theme Builder von Divi ein responsives Schiebemenü erstellen. Dafür haben wir die besten integrierten Elemente und Optionen von Divi mit einem benutzerdefinierten Klickfunktionscode kombiniert. Sie können sich also auf das Entwerfen des Slide-Out-Menüs konzentrieren und den Code den funktionalen Teil des globalen Headers erledigen lassen!
Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.
