Springe zum Hauptinhalt

Wie man ein Mega-Menü auf Divi erstellt

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]

Mithilfe von Mega-Menüs können Benutzer mehr Links gleichzeitig anzeigen, ohne scrollen, den Mauszeiger bewegen und sich an Ihren Menüinhalt erinnern zu müssen. Der beste Weg, um Mega-Menüs zu verstehen, besteht darin, dass es sich um Dropdown-Menüs innerhalb von Dropdown-Menüs handelt.

Anstelle Ihres normalen Dropdown-Menüs, in dem ein Untermenü angezeigt wird, wenn Sie mit der Maus über die übergeordneten Hauptlinks in Ihrer Navigationsleiste fahren, können Sie in einem Mega-Menü zusätzliche übergeordnete Links und Untermenüs im Dropdown-Menü anzeigen.

So fügen Sie Ihrer Navigationsleiste ein Megamenü hinzu

Melden Sie sich bei Ihrem WordPress-Dashboard an und navigieren Sie zu Auftritte> Menüs .

Wordpress-Menü divi.png

Erstellen Sie ein Menü mit vier übergeordneten Links, wobei jeder der übergeordneten Links über eigene Untermenü-Links verfügt. Im folgenden Beispiel füge ich drei Untermenüelemente unter jedem der vier übergeordneten Menülinks hinzu.

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]

Menü divi.png

Erstellen Sie einen zusätzlichen Link, der als Mega-Menü-Link dient. Für das folgende Beispiel nenne ich diesen Link "Main". Ziehen Sie dann die beiden übergeordneten Menü-Links (jeweils mit ihren Untermenü-Links) unter den Haupt-Link.

Um Ihr Megamenü zu erstellen, müssen Sie dem Hauptlink der obersten Ebene mit dem Namen "Main" eine spezielle CSS-Klasse hinzufügen. Sie können dies tun, indem Sie oben auf Ihrer Seite auf den Link Bildschirmoptionen klicken und sicherstellen, dass die Option CSS-Klasse aktiviert ist.

css Klassen divi.png

Schließlich müssen Sie dem soeben erstellten Link „Main“ eine CSS-Klasse hinzufügen. Klicken Sie auf den Pfeil rechts neben dem Menüpunkt "Haupt", um zusätzliche Konfigurationsoptionen umzuschalten. Suchen Sie das Textfeld mit dem Titel CSS-Klassen und geben Sie die Klasse "Mega-Menü" ein.

Mega Menü divi.png

Wenn Sie jetzt Ihre Seite neu laden, können Sie sehen, dass alle vorherigen Menüs im riesigen Menü unter diesem Link, dem Megamenü, platziert wurden.

Mega Menü Divi Beispiel.png

Das ist alles für dieses Tutorial. Ich hoffe, Sie können damit problemlos ein Mega-Menü auf Divi erstellen.

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
13 Aktien
Aktie6
tweet
Registrieren7