In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Divi-Menümodul in voller Breite eine Dropdown-Menüschaltfläche erstellen. Dazu erstellen wir zunächst ein Menü in WordPress. Wir werden dann das Menu-Modul von Divi in voller Breite verwenden, um dieses Menü mit benutzerdefinierten Stilen mithilfe des Divi-Builders und ein wenig benutzerdefiniertem CSS anzuzeigen. Das Ergebnis ist eine praktische und elegante Dropdown-Menüschaltfläche.
Lassen Sie uns beginnen.
Übersicht
Hier finden Sie eine Übersicht über die Dropdown-Menüschaltfläche, die wir in dieses Lernprogramm integrieren.
Was Sie brauchen, um loszulegen
Wenn Sie dies noch nicht getan haben, installieren und aktivieren Sie zunächst die Divi-Thema installiert (oder das Divi Builder-Plug-in, wenn Sie das nicht verwenden Divi-Thema). Wir werden den Divi-Builder zu Beginn verwenden, um die Schaltfläche für das Dropdown-Menü zu entwerfen.
Das ist es !
Erstellen Sie ein Menü in WordPress
Bevor wir mit dem Erstellen des Dropdown-Menüs mit Divi Builder beginnen, müssen wir zunächst ein WordPress-Menü erstellen, das wir für das Menümodul in voller Breite verwenden möchten. Gehen Sie dazu zum WordPress-Dashboard und gehen Sie zu Darstellung> Menüs. Erstellen Sie dann ein neues Menü, indem Sie auf den Link "Neues Menü erstellen" klicken, einen Menünamen eingeben und auf die Schaltfläche "Menü erstellen" klicken.
Im Moment können Sie benutzerdefinierte Links mit "#" als URL-Platzhalter zusammen mit dem Linktext erstellen.
Strukturieren Sie die Menüelemente so, dass das Menüelement der obersten Ebene den Link "Weitere Informationen" mit drei Untermenüelementen enthält.
Speichern Sie danach das Menü.
So erstellen Sie eine Dropdown-Menüschaltfläche mit dem Divi-Menümodul in voller Breite
Sobald das Menü erstellt wurde, können wir mit Divi die Dropdown-Menüschaltfläche entwerfen. Um das Projekt zu starten, erstellen Sie eine neue Seite in WordPress und bearbeiten Sie die Seite im Front-End (Visual Builder) mit Divi Builder.
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Erstellen Sie gefälschte Inhalte
Fügen Sie zunächst dem Standardstandardabschnitt eine einspaltige Zeile hinzu.
Fügen Sie ein Textmodul hinzu
Fügen Sie dann der Zeile einen Textbaustein mit folgendem Inhalt hinzu:
Divi-Menü Ihr Inhalt geht hier. Bearbeiten oder entfernen Sie diesen Text inline oder in den Inhaltseinstellungen des Moduls. Sie können auch jeden Aspekt dieses Inhalts in den Modul-Designeinstellungen formatieren und in den erweiterten Einstellungen des Moduls sogar benutzerdefiniertes CSS auf diesen Text anwenden.
Aktualisieren Sie dann die Entwurfsparameter wie folgt:
Polsterung
Aktualisieren Sie dann die Abschnittseinstellung mit den folgenden Elementen:
- Polsterung: 0px nach unten
Zeilenabstand und Rahmen
Öffnen Sie nach der Aktualisierung der Abschnittsfüllung die Linieneinstellungen und weisen Sie ihr eine Füllung und einen leichten Rand zu.
- Polsterung: 10vw oben, 10vw unten, 5vw links, 5vw rechts
- Breite des Rahmens: 1px
Erstellen der Dropdown-Menüschaltfläche
Um die Dropdown-Menüschaltfläche zu erstellen, verwenden wir ein Menümodul in voller Breite. Auf diese Weise können wir das zuvor erstellte Menü hinzufügen.
Hinzufügen des Menüs in voller Breite
Fügen Sie unter dem aktuellen Standardabschnitt einen neuen Abschnitt mit voller Breite hinzu, um das Menümodul mit voller Breite zu erstellen.
Fügen Sie dann der Zeile ein Menümodul voller Breite hinzu.
Verwenden Sie im Popup-Fenster mit den Menüeinstellungen in voller Breite (unter Inhalt) das Dropdown-Menü, um das Menü auszuwählen, das Sie anzeigen möchten. Dies sollte das gleiche Menü sein, das wir zuvor mit dem Namen "Dropdown-Schaltflächenmenü" erstellt haben.
Entfernen Sie dann die weiße Standardhintergrundfarbe für das Menü.
Speichern Sie die Einstellungen, nachdem Sie das Menü mit dem Menümodul mit voller Breite hinzugefügt haben. Wir werden gleich auf dieses Modul zurückkommen, um das Design fertigzustellen. Im Moment fügen wir dem Abschnitt mit voller Breite einen Hintergrund hinzu.
Aktualisieren Sie das Design des Abschnitts mit voller Breite
Öffnen Sie die Einstellungen für den Abschnitt voller Breite und aktualisieren Sie Folgendes:
- Linker Hintergrundverlauf: # 0047d6
- Rechter Hintergrundverlauf Farbe: # 45b2ff
- Maximale Breite: 240px
- Abschnittsausrichtung: Mitte
Ich habe die maximale Abschnittsbreite auf 240px festgelegt, da dies der Breite der Standard-Dropdown-Menübreite in Divi entspricht. Es ist auch eine gute Größe für eine Schaltfläche auf Desktop und Handy.
- Abgerundete Ecken: 5px
Fügen Sie auf der Registerkarte Erweitert die folgenden CSS-Klassen, Überläufe und Z-Indizes hinzu.
- CSS Klasse: Dropdown-Button
- Horizontaler Überlauf: sichtbar
- Vertikaler Überlauf: sichtbar
- Z-Index: 14
Die CSS-Klasse wird benötigt, damit wir unser externes CSS später auf diesen Abschnitt ausrichten können. Der Überlauf muss sichtbar sein, damit wir das Dropdown-Menü sehen können. Der Z-Index hilft Ihnen dabei, das Dropdown-Menü über allen anderen Inhalten auf der Seite zu halten.
Entwerfen Sie das Menü Fulwidth
Wir sind jetzt bereit, das Fulwidth-Menümodul zu entwerfen. Öffnen Sie die Einstellungen des Menümoduls für die volle Breite und aktualisieren Sie Folgendes:
- Erstellen Sie Menüverknüpfungen in voller Breite: JA
- Dropdown-Textfarbe: #ffffff
- Farbe des mobilen Menütextes: #ffffff
- Textausrichtung: Mitte
- Hintergrundfarbe des Dropdown-Menüs: # 45b2ff
- Farbe der Dropdown-Menüzeile: #ffffff
- Menühintergrundfarbe: #45b2ff
- Schriftmenü: Codieren ohne Halbkondensation
- Font Menu Weight: Semi Bold
- Menütextfarbe: #ffffff
- Menütextgröße: 16px
- Menüabstand: 2px
- Animation des Dropdown-Menüs: Erweitern
Positionieren Sie die Dropdown-Schaltfläche
Damit die Schaltfläche den unteren Rand überlappt, müssen Sie einen negativen oberen Rand hinzufügen, der genau der halben Höhe der Schaltfläche entspricht.
- Margin: -40.5px hoch
Wie Sie sehen können, nimmt der Hover-Bereich noch nicht den gesamten Schaltflächenbereich ein und das Dropdown-Menü befindet sich weiterhin rechts. Um dieses Problem zu lösen, können wir benutzerdefiniertes CSS hinzufügen.
Hinzufügen von benutzerdefiniertem CSS
Stellen Sie vor dem Hinzufügen des benutzerdefinierten CSS sicher, dass die CSS-ID im Abschnitt voller Breite (nicht im Modul) "Dropdown" hinzugefügt wird.
Ohne die CSS-ID funktioniert das folgende CSS nicht.
Öffnen Sie zum Hinzufügen des benutzerdefinierten CSS die Seiteneinstellungen und fügen Sie den folgenden Code in das benutzerdefinierte CSS-Eingabefeld ein.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! wichtig; } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; Zeilenhöhe: 81px; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; Zeilenhöhe: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! wichtig; } .dropdown-button .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: erstes Kind: nach {rechts: 20px; }}
Hier ist das Endergebnis
Abschließende Gedanken
Das Erstellen einer Dropdown-Menüschaltfläche mit dem Divi-Menümodul in voller Breite umfasst einige wichtige Schritte. Zuerst erstellen wir das Menü in WordPress, das wir in das Modul integrieren möchten. Dann verwenden wir den Divi Builder für das Menümodul in voller Breite und gestalten es nach unseren Wünschen. Anschließend fügen wir benutzerdefiniertes CSS hinzu, um das Design sowohl auf dem Desktop als auch auf dem Handy zu verbessern. Das Ergebnis ist ein schönes (und nützliches) Dropdown-Menü, das für Desktop-Hover und mobiles Klicken bereitgestellt wird. Ich hoffe, Sie finden dies eine nützliche Ergänzung zu Ihrem Design-Toolkit.
