Springe zum Hauptinhalt

So erstellen Sie eine Dropdown-Menüschaltfläche mit dem Divi-Menümodul in voller Breite

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Eine Dropdown-Menüschaltfläche kann beim Entwerfen einer Website sehr nützlich sein. Zusätzlich zum Hauptmenü kann für einige Bereiche einer Site ein Dropdown-Menü erforderlich sein, das aus Unterelementen besteht. Wir sehen, dass sie für Dinge wie Blogpost-Kategorien, Listen und Formulareinträge verwendet werden. Sie können aber auch für einen Aufruf zum Handeln verwendet werden.

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.

Dropdown-Menü Übersicht

Was Sie brauchen, um loszulegen

Installieren und aktivieren Sie zunächst das installierte Divi-Design (oder das Divi Builder-Plug-In, wenn Sie das Divi-Design nicht verwenden), falls Sie dies noch nicht getan haben. Wir werden zu Beginn den Divi Builder verwenden, um die Dropdown-Menüschaltfläche 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.

Erstellen Sie ein Menü in WordPress

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.

Wordpress-Menüorganisation

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 ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Divi-Abschnitt mit niedrigem Rand

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

Konfiguration des Divi-Modulabschnitts

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.

Erstellen Sie einen Divi Builder-Abschnitt in voller Breite

Fügen Sie dann der Zeile ein Menümodul voller Breite hinzu.

Vollbild-Divi-Menü

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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ü.

Hintergrundfarbkonfiguration des VollbildmenüsSpeichern 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

Divi Hintergrundabschnitt

  • 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.

Divi Abschnitt Einstellungen

  • Abgerundete Ecken: 5px

Konfiguration der Divi-Rahmeneinstellungen

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.

Einstellungsbereich Parameter diviEntwerfen 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

Parametereinstellungen im Stil des Vollbild-Menümoduls

  • 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

Schriftart Vollbild-Menümodul divi

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • Margin: -40.5px hoch

Einstellungen für Menübereiche in voller Breite divi

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.

Teilklassenanpassungsmodul diviOhne 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; }}

CSS Divi-Seite anpassen

Hier ist das Endergebnis

Divi Dropdown-Menü Animation

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.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren