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

Veröffentlicht: 2019-09-29

Eine Dropdown-Menüschaltfläche kann beim Entwerfen einer Website wirklich nützlich sein. Abgesehen vom Hauptmenü gibt es Bereiche auf einer Site, die möglicherweise ein Dropdown-Menü mit Unterelementen erfordern. Wir sehen, dass sie für Dinge wie Blog-Post-Kategorien, Listen und Formulareingaben verwendet werden. Aber sie können sogar für einen Haupt-Call-to-Action 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. Dann verwenden wir das Menümodul in voller Breite von Divi, um dieses Menü mit benutzerdefinierten Stilen anzuzeigen, indem wir den Divi-Builder und ein wenig benutzerdefiniertes CSS verwenden. Das Ergebnis ist eine praktische und elegante Dropdown-Menüschaltfläche.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die Dropdown-Menüschaltfläche, die wir in diesem Tutorial erstellen werden.

Desktop (Menü fällt beim Hover aus)

divi Dropdown-Menü-Schaltfläche

Tablet und Telefon (Menü öffnet sich beim Klicken)

divi Dropdown-Menü-Schaltfläche

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder. Das benutzerdefinierte CSS wurde einem Codemodul in einem separaten Abschnitt am unteren Rand des Layouts hinzugefügt.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, installieren und aktivieren Sie das installierte Divi-Theme (oder das Divi-Builder-Plugin, wenn Sie das Divi-Theme nicht verwenden, falls Sie es noch nicht getan haben). Wir werden den Divi-Builder im Frontend verwenden, um die Dropdown-Menüschaltfläche zu entwerfen.

Das ist es!

Erstellen eines Menüs in WordPress

Bevor wir mit dem Aufbau des Dropdown-Menüs mit dem 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 navigieren 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.

divi Dropdown-Menü-Schaltfläche

Im Moment können Sie einige benutzerdefinierte Links mit „#“ als URL-Platzhalter zusammen mit dem Linktext erstellen.

Strukturieren Sie die Menüpunkte so, dass der oberste Menüpunkt den Linktext „Mehr erfahren“ mit drei Untermenüpunkten darunter trägt.

divi Dropdown-Menü-Schaltfläche

Stellen Sie danach sicher, dass Sie das Menü speichern.

So erstellen Sie eine Dropdown-Menüschaltfläche mit Divis Fullwidth-Menümodul

Sobald das Menü erstellt ist, können wir mit Divi beginnen, die Dropdown-Menüschaltfläche zu entwerfen. Um loszulegen, erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend (visueller Builder) zu bearbeiten.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen des Mock-Inhalts

Fügen Sie zunächst eine einspaltige Zeile zum standardmäßigen regulären Abschnitt hinzu.

Textmodul hinzufügen

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

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Aktualisieren Sie danach die Designeinstellungen wie folgt:

Abschnittspolsterung

Aktualisieren Sie als Nächstes die Abschnittseinstellung wie folgt:

Polsterung: 0px unten

divi Dropdown-Menü-Schaltfläche

Zeilenabstand und Rahmen

Nachdem der Abschnittsabstand aktualisiert wurde, öffnen Sie die Zeileneinstellungen und geben Sie der Zeile etwas Abstand und einen leichten Rand.

Polsterung: 10vw oben, 10vw unten, 5vw links, 5vw rechts
Randbreite: 1px

divi Dropdown-Menü-Schaltfläche

Erstellen der Dropdown-Menüschaltfläche

Um die Dropdown-Menüschaltfläche zu erstellen, verwenden wir ein Menümodul in voller Breite. Dadurch können wir das zuvor erstellte Menü hinzufügen.

Hinzufügen des Vollbreitenmenüs

Um das Menümodul mit voller Breite zu erstellen, fügen Sie einen neuen Abschnitt mit voller Breite unter dem aktuellen regulären Abschnitt hinzu.

divi Dropdown-Menü-Schaltfläche

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

divi Dropdown-Menü-Schaltfläche

Verwenden Sie im Popup für die Menüeinstellungen in voller Breite (unter Inhalt) das Dropdown-Menü, um das Menü auszuwählen, das angezeigt werden soll. Dies sollte das gleiche Menü sein, das wir zuvor mit dem Namen "Dropdown-Schaltflächenmenü" erstellt haben.

Nehmen Sie dann die standardmäßige weiße Hintergrundfarbe für das Menü heraus.

divi Dropdown-Menü-Schaltfläche

Sobald Sie das Menü mit dem Menümodul in voller Breite hinzugefügt haben, speichern Sie die Einstellungen. Wir werden in Kürze auf dieses Modul zurückkommen, um das Design abzuschließen. Aber vorerst fügen wir dem Abschnitt mit voller Breite einen Hintergrund hinzu.

Schnittdesign in voller Breite aktualisieren

Öffnen Sie die Abschnittseinstellungen mit voller Breite und aktualisieren Sie Folgendes:

Hintergrundfarbe links: #0047d6
Hintergrund mit Farbverlauf rechts: #45b2ff

divi Dropdown-Menü-Schaltfläche

Maximale Breite: 240px
Abschnittsausrichtung: Mitte

Ich stelle die maximale Breite des Abschnitts auf 240px ein, da dies der Breite der Standardbreite des Dropdown-Menüs in Divi entspricht. Es hat auch eine schöne Größe für eine Schaltfläche auf dem Desktop und auf dem Handy.

divi Dropdown-Menü-Schaltfläche

Abgerundete Ecken: 5px

divi Dropdown-Menü-Schaltfläche

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

CSS-Klasse: Dropdown-Schaltfläche
Horizontaler Überlauf: sichtbar
Vertikaler Überlauf: sichtbar
Z-Index: 14

Die CSS-Klasse ist notwendig, damit wir unser externes CSS erst später auf diesen Abschnitt ausrichten können. Der Überlauf muss auf sichtbar gesetzt werden, damit wir das Dropdown-Menü sehen können. Und der Z-Index hilft dabei, das Dropdown-Menü über allen anderen Inhalten auf der Seite zu halten.

divi Dropdown-Menü-Schaltfläche

Entwerfen Sie das Fullwidth-Menü

Jetzt sind wir bereit, das volle Menümodul zu entwerfen. Öffnen Sie die Einstellungen des Menümoduls in voller Breite und aktualisieren Sie Folgendes:

Menülinks in voller Breite erstellen: JA
Textfarbe des Dropdown-Menüs: #ffffff
Textfarbe des mobilen Menüs: #ffffff
Textausrichtung: Mitte
Hintergrundfarbe des Dropdown-Menüs: #45b2ff
Farbe der Dropdown-Menüzeile: #ffffff
Hintergrundfarbe des mobilen Menüs: #45b2ff

divi Dropdown-Menü-Schaltfläche

Menüschrift: Encode Sans Semi Condensed
Schriftstärke im Menü: Halbfett
Menütextfarbe: #ffffff
Menütextgröße: 16px
Menübuchstabenabstand: 2px
Dropdown-Menü-Animation: Erweitern

divi Dropdown-Menü-Schaltfläche

Positionierung der Dropdown-Schaltfläche

Damit die Schaltfläche den unteren Rand überlappt, müssen wir einen negativen oberen Rand hinzufügen, der genau die Hälfte der Schaltflächenhöhe beträgt.

Rand: -40.5px oben

divi Dropdown-Menü-Schaltfläche

Fast dort

Hier das bisherige Ergebnis…

divi Dropdown-Menü-Schaltfläche

Wie Sie sehen, nimmt der Hover-Bereich noch nicht den gesamten Schaltflächenbereich ein und das Dropdown-Menü befindet sich noch rechts. Um dies zu beheben, können wir benutzerdefiniertes CSS hinzufügen.

Hinzufügen von benutzerdefiniertem CSS

Stellen Sie vor dem Hinzufügen des benutzerdefinierten CSS sicher, dass Sie die CSS-ID „Dropdown-Schaltfläche“ zum Abschnitt mit voller Breite hinzugefügt haben (nicht zum Modul).

Ohne die CSS-ID funktioniert das folgende CSS nicht.

Um das benutzerdefinierte CSS hinzuzufügen, öffnen Sie die Seiteneinstellungen und fügen Sie den folgenden Code in den Eingabebereich für benutzerdefiniertes CSS ein.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 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 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children &gt; a:first-child:after {  
  right: 20px;
}

divi Dropdown-Menü-Schaltfläche

Hier ist das Endergebnis

divi Dropdown-Menü-Schaltfläche

Anpassen des Menüs auf dem Handy

Im Moment greift das Menü auf die mobile Version mit dem anklickbaren Hamburger-Symbol zurück, das das mobile Menü öffnet und schließt. So sieht es aus.

divi Dropdown-Menü-Schaltfläche

Um das Menü so zu korrigieren, dass es der Desktop-Version entspricht, müssen wir benutzerdefiniertes CSS hinzufügen. Öffnen Sie die Seiteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS direkt unter dem aktuell hinzugefügten CSS hinzu.

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

Das obige CSS bewirkt, dass der anklickbare Bereich die volle Breite und Höhe des Abschnitts/der Schaltfläche umfasst. Es ersetzt auch das Hamburger-Symbol durch etwas Text und ein Pfeilsymbol, das der Desktop-Version entspricht. Dies geschieht mit den Pseudoelementen :before und :after. Auf diese Weise können wir die Standardfunktionalität des mobilen Menüs beibehalten.

Im Moment lautet der Textinhalt für die mobile Dropdown-Schaltfläche „Mehr erfahren“. Aber wir können dies ändern, indem wir die folgende CSS-Zeile unter dem Pseudo-Element :before für die mobile Menüleiste aktualisieren:

content: "Learn More";

Wenn Sie beispielsweise "Menü" anzeigen möchten, ändern Sie die CSS-Zeile wie folgt:

content: "Menu";

divi Dropdown-Menü-Schaltfläche

Endergebnis

Hier ist das Endergebnis.

Desktop (Menü fällt beim Hover aus)

divi Dropdown-Menü-Schaltfläche

Tablet und Telefon (Menü öffnet sich beim Klicken)

divi Dropdown-Menü-Schaltfläche

Zusätzliche Unterpunkte

Und Sie können sogar Untermenüpunkte hinzufügen! Aktualisieren Sie einfach das Menü auf der Menü-Editor-Seite und Sie sind fertig.

divi Dropdown-Menü-Schaltfläche

Abschließende Gedanken

Das Erstellen einer Dropdown-Menüschaltfläche mit dem Menümodul in voller Breite von Divi umfasst einige wichtige Schritte. Zuerst erstellen wir in WordPress das Menü, das wir in das Modul ziehen wollen. Dann verwenden wir den Divi-Builder, um das Menümodul in voller Breite nach unseren Wünschen zu gestalten. Dann fügen wir benutzerdefiniertes CSS hinzu, um das Design sowohl auf dem Desktop als auch auf dem Handy aufzupolieren. Das Ergebnis ist ein schönes (und nützliches) Dropdown-Menü, das beim Hover für den Desktop und beim Klicken für das Handy bereitgestellt wird. Hoffentlich wird dies eine nützliche Ergänzung zu Ihrer Design-Toolbox sein.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!