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 600.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 hilfreich sein. Zusätzlich zum Hauptmenü benötigen einige Bereiche einer Site möglicherweise ein Dropdown-Menü mit Unterelementen. Wir sehen, dass sie für Elemente wie Blogpostkategorien, Listen und Formulareinträge verwendet werden. Sie können aber auch als Handlungsaufforderung verwendet werden.

In diesem Tutorial zeigen wir Ihnen, wie Sie eine Dropdown-Menüschaltfläche mit dem Divi-Menümodul in voller Breite erstellen. Dazu erstellen wir zunächst ein Menü in WordPress. Wir werden dann das Divi-Modul für Menüs in voller Breite verwenden, um dieses Menü mit benutzerdefinierten Stilen unter Verwendung des Divi-Konstruktors und einiger benutzerdefinierter 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 das installierte Divi-Design (oder das Divi Builder-Plug-in, wenn Sie das Divi-Design nicht verwenden). Wir werden zu Beginn den Divi-Konstruktor verwenden, um die Dropdown-Menüschaltfläche zu entwerfen.

Das war's

Erstellen Sie ein Menü in WordPress

Bevor wir das Dropdown-Menü mit Divi Builder erstellen, müssen wir zuerst 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 klicken, um ein neues Menü zu erstellen, einen Menünamen eingeben und auf die Schaltfläche "Menü erstellen" klicken.

Im Moment können Sie benutzerdefinierte Links mit "#" als Platzhalter für die URL 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 ist, können wir mit Divi mit dem Entwerfen der Dropdown-Menüschaltfläche beginnen. Um das Projekt zu starten, erstellen Sie eine neue Seite in WordPress und bearbeiten Sie die Seite im Frontend mit Divi Builder (visueller Konstruktor).

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 Standard-Standardabschnitt eine Zeile einer Spalte hinzu.

Fügen Sie ein Textmodul hinzu

Fügen Sie dann der Zeile einen Textbaustein mit folgendem Inhalt hinzu:

<h1> Divi Deroulant-Menü </ h1> <p> Ihr Inhalt wird hier abgelegt. Bearbeiten oder entfernen Sie diesen Text im Modul Inhaltseinstellungen. Sie können jeden Aspekt dieses Inhalts auch in den erweiterten Einstellungen des Moduls gestalten. </ P>

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.

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 dem Inhalt) das Dropdown-Menü, um das Menü auszuwählen, das Sie anzeigen möchten. Dies sollte dasselbe Menü sein, das wir zuvor mit dem Namen "Dropdown-Menü" erstellt haben.

Entfernen Sie dann die weiße Standardhintergrundfarbe für das Menü.

Speichern Sie die Einstellungen, nachdem Sie das Menü mit dem Vollbreiten-Menümodul hinzugefügt haben. Wir werden in Kürze auf dieses Modul zurückkommen, um das Design zu beenden. 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 Breite des Abschnitts auf 240 px festgelegt, da dies die Breite der Standard-Dropdown-Menübreite in Divi ist. Es ist auch eine gute Größe für eine Schaltfläche auf dem Desktop und auf dem Handy.

  • Abgerundete Ecken: 5px

Fügen Sie auf der Registerkarte Erweitert die folgende CSS-Klasse, den folgenden Überlauf und den folgenden Z-Index hinzu.

  • CSS Klasse: Dropdown-Button
  • Horizontaler Überlauf: sichtbar
  • Vertikaler Überlauf: sichtbar
  • Z-Index: 14

Die CSS-Klasse ist erforderlich, damit wir später unser externes CSS in diesem Abschnitt verwenden können. Der Überlauf muss sichtbar sein, damit das Dropdown-Menü angezeigt wird. Der Z-Index hilft Ihnen dabei, die Dropdown-Liste über allen anderen Inhalten auf der Seite zu halten.

Entwerfen Sie das Menü Fulwidth

Jetzt können wir das Menümodul Fulwidth entwerfen. Öffnen Sie die Einstellungen für das Menümodul voller 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.

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

Wie Sie sehen, belegt der Hover-Bereich noch nicht den gesamten Tastenbereich und das Pulldown-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 unten stehende 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 .and_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; } .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 .and_mobile_menu li: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opazität: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important; } .dropdown-button .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 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. Als nächstes verwenden wir den Divi-Konstruktor für und den Menü-Modulstil für die gesamte Breite für unseren Geschmack. Anschließend fügen wir benutzerdefiniertes CSS hinzu, um das Design sowohl auf dem Desktop als auch auf dem Mobilgerät zu optimieren. Das Ergebnis ist ein schönes (und nützliches) Dropdown-Menü, das für den Desktop und für das Mobiltelefon verfügbar ist. Ich hoffe, Sie werden feststellen, dass dies eine nützliche Ergänzung Ihrer Design-Toolbox ist.

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