Divi-Produkt-Highlight: Divi Mega-Menü

Divi Mega Menu ist ein Plugin für den Divi Builder, mit dem Sie Mega-Menüs für Ihre Website erstellen können. Mit diesem Tool können Sie komplexe Megamenüs mit Menüelementen, dynamischen Registerkarten und allen anderen gewünschten Divi-Modulen erstellen. Divi Mega Menu nutzt die Leistungsfähigkeit des Divi Builder und gibt Ihnen die vollständige Kontrolle über das Design jedes Elements in Ihrem Menü. In diesem Plugin-Highlight werfen wir einen genaueren Blick auf das Divi Mega Menu-Plugin, um Ihnen bei der Entscheidung zu helfen, ob es die richtige Lösung für Ihre Bedürfnisse ist.

Lass uns anfangen!

Divi Mega-Menü installieren

Divi Mega Menu wird als .ZIP-Plugin-Datei geliefert. Um das Plugin zu installieren, öffnen Sie die Plugin-Seite in Ihrem WordPress-Dashboard und klicken Sie auf „Neu hinzufügen“. Klicken Sie auf Datei auswählen, wählen Sie die Plugin-Datei von Ihrem Computer aus und klicken Sie dann auf Jetzt installieren.

Sobald das Plugin installiert ist, klicken Sie auf „Aktivieren“.

Bevor Sie mit dem Divi Mega Menu-Plugin arbeiten, müssen Sie einige zusätzliche Schritte ausführen, um sicherzustellen, dass das Plugin auf Ihrer Website ordnungsgemäß funktioniert. Zunächst empfiehlt der Plugin-Autor, während der Entwicklung alle anderen Plugins, insbesondere Caching-Plugins, auf Ihrer Website zu deaktivieren. Darüber hinaus sollten Sie alle benutzerdefinierten CSS-Codes entfernen, die möglicherweise mit dem Mega-Menü in Konflikt geraten.

Navigieren Sie als Nächstes zu Divi > Theme-Optionen > Builder > Erweitert und deaktivieren Sie die Option „Statische CSS-Dateigenerierung“.

Gehen Sie zur Registerkarte „Allgemein“ und wählen Sie dann den Abschnitt „Leistung“ aus. Deaktivieren Sie die Optionen für dynamisches JQuery, CSS und Javascript.

Leeren Sie abschließend Ihre Permalink-Struktur, indem Sie zu Einstellungen > Permalinks navigieren und die Einstellungen zweimal speichern.

Nachdem die gesamte Einrichtung erledigt ist, werfen wir einen Blick auf das Mega Menu-Plugin.

Divi Mega-Menü

Divi Mega Menu fügt dem Divi Builder zwei neue Module hinzu, das Mega Drop-Down-Modul und das Mega Tabs-Modul. Außerdem werden dem WordPress-Dashboard zwei neue Seiten hinzugefügt: „Mega-Menü-Einstellungen“, auf denen Sie die Plugin-Optionen ändern können, und „Mega-Menü“, auf der Sie alle Ihre Mega-Menüs hinzufügen und bearbeiten können. Darüber hinaus gibt es drei Layout-Pakete, die Sie von der Plugin-Website herunterladen können, um Ihr Design voranzutreiben.

Divi Mega Menu Builder

Fügen Sie ein neues Mega-Menü hinzu

Auf der Seite „Mega-Menü“, die sich im Abschnitt „Divi Engine“ befindet, können Sie Ihre Mega-Menüs erstellen und ändern. Klicken Sie auf „Neu hinzufügen“, um zu beginnen.

Legen Sie einen Titel für Ihr Mega-Menü fest, geben Sie eine benutzerdefinierte Kennung ein und klicken Sie auf „Divi Builder verwenden“.

Jetzt können Sie mit dem Divi Builder ein einzigartiges Layout für das Mega-Menü erstellen. Mit allen verfügbaren Funktionen des Divi Builders können Sie komplexe Designs erstellen, die sowohl die Divi Mega Menu-Module als auch die Standard-Divi Builder-Module umfassen.

Mega-Menüoptionen

Unterhalb des Divi Builder gibt es drei Abschnitte mit Optionen zum Gestalten und Ändern des Mega-Menüs.

Mega-Menüstil

In den allgemeinen Stiloptionen können Sie die Position auf Standard oder Tooltip festlegen, die Tooltip-Richtung ändern und auswählen, ob das Menü beim Bewegen oder Klicken aktiviert wird. Sie können die Verzögerungszeit für das Öffnen und Schließen des Hovers festlegen, das Schließen beim Scrollen aktivieren sowie die Eingangsanimation und -dauer festlegen.

Sie können das Menü auch so einstellen, dass es in voller Breite angezeigt wird, oder eine benutzerdefinierte Breite festlegen. Mit der Option „Relative Menüposition“ können Sie das Menü-Dropdown relativ zum Menüelement festlegen und die Menüposition von links, oben, oben beim Scrollen und oben auf Mobilgeräten anpassen. Schließlich können Sie das Menü auf Mobilgeräten deaktivieren.

Mega-Menü-Dreieck-Stil

In den Einstellungen für den Mega-Menü-Dreiecksstil können Sie ein Dreieck oder eine Unterstreichung über dem Mega-Menü aktivieren und die Position, Farbe, Höhe und Positionierung festlegen.

Mega-Menü-Schließsymbol-Stil

Hier können Sie das Schließsymbol aktivieren oder deaktivieren, das angezeigte Symbol auswählen, die Symbolfarbe festlegen und Größen- und Positionierungsoptionen ändern.

Mega-Dropdown-Modul

Schauen wir uns das Mega Drop-Down-Modul genauer an. Mit diesem Modul können Sie Ihrem Mega-Menü ein vertikales Menümodul hinzufügen. Auf der Registerkarte „Inhalt“ können Sie das Menü auswählen, das Sie anzeigen möchten, die maximale Menübreite festlegen und die Richtung auswählen, aus der das Menü angezeigt wird. Sie können auch die übergeordneten und hinteren Menüsymbole festlegen, einen Modullink festlegen und den Hintergrund ändern.

Auf der Registerkarte „Design“ können Sie die Symbolfarben und -größen ändern, die Hintergrundfarbe, die Rahmenfarbe und den Abstand für die übergeordneten Menü- und Untermenüelemente festlegen, den Text des übergeordneten Menüs und der Untermenüelemente anpassen und die Größe anpassen. Abstand, Rahmen, Box-Schatten und andere Standard-Designoptionen.

Die Registerkarte „Erweitert“ bietet alle typischen Optionen, die Sie in einem Divi-Modul erwarten würden.

Entwerfen eines Mega-Menüs mit dem Mega-Dropdown-Modul

Lassen Sie uns nun einen Mega-Menüabschnitt mit dem Mega-Drop-Down-Modul entwerfen. Dieses Design enthält Inhalte aus dem City-Layoutpaket von Divi und wird unter dem Menüpunkt „Dienste“ angezeigt, um einige Stadtdienste vorzustellen.

Abschnitts- und Zeileneinrichtung

Öffnen Sie zunächst die Abschnittseinstellungen und ändern Sie die folgenden Optionen:

• Hintergrund: #000000
• Breite: 100 %
• Maximale Breite: 100 %
• Polsterung oben: 0px
• Polsterung unten: 0px

Als nächstes fügen Sie eine Zeile mit fünf Spalten hinzu. Öffnen Sie die Zeileneinstellungen, navigieren Sie zur Registerkarte „Entwurf“ und ändern Sie dann die Abstandseinstellungen wie folgt:

• Säulenhöhen ausgleichen: Ja
• Breite: 100 %
• Maximale Breite: 100 %

Ändern Sie die Polsterung:

• Polsterung oben: 0px
• Polsterung unten: 0px
• Polsterung links: 30 Pixel

Wechseln Sie abschließend zur Registerkarte „Erweitert“ und fügen Sie dem Hauptelement das folgende benutzerdefinierte CSS hinzu:

align-items:center;

Menütitel und Teiler

Fügen Sie der ersten Spalte einen Textbaustein hinzu und fügen Sie in H3 den Text „City Services“ ein. Dies wird der Überschriftentext für das Menü sein.

Passen Sie das Styling wie folgt an:

• H3-Schriftart: Roboto Condensed
• H3-Schriftstärke: Fett
• H3-Textfarbe: #FFFFFF
• H3-Textgröße: 27px
• Rand unten: 0px

Fügen Sie unterhalb des Kopfzeilentexts ein Trennmodul hinzu und ändern Sie die Stile:

• Linienfarbe: #b1040e
• Teilergewicht: 3px
• Breite: 40 %
• Modulausrichtung: Links
• Rand unten: 0px

Mega-Dropdown-Modul

Fügen Sie das Mega-Dropdown-Modul zur ersten Spalte unterhalb der Trennlinie hinzu. Wählen Sie auf der Registerkarte „Inhalt“ das Menü aus, das Sie anzeigen möchten. Stellen Sie außerdem den Modulhintergrund auf transparent ein.

Gehen Sie zur Registerkarte „Design“ und öffnen Sie den Abschnitt mit den übergeordneten Menüelementen. Ändern Sie die Abstands- und Randeinstellungen.

• Übergeordneter Menüabstand oben: 6 Pixel
• Abstand des übergeordneten Menüs unten: 6 Pixel
• Abstand des übergeordneten Menüs links: 0 Pixel
• Rahmenfarbe des übergeordneten Menüs: Transparent

Als nächstes ändern Sie die Textoptionen des übergeordneten Menüelements.

• Schriftart des übergeordneten Menüelements: Poppins
• Textfarbe des übergeordneten Menüelements: #FFFFFF
• Textgröße des übergeordneten Menüelements: 18 Pixel

Fügen Sie abschließend in den Abstandseinstellungen etwas Bodenpolsterung hinzu.

• Polsterung unten: 30px

Klappentext-Module

Fügen Sie dem Layout sechs Klappentextmodule hinzu, zwei in jeder der mittleren Spalten. Fügen Sie jedem Klappentext einen Titel und ein Bild hinzu und passen Sie den Stil auf der Registerkarte „Design“ an.

Ändern Sie im Abschnitt „Bild und Symbol“ Folgendes:

• Bild-/Symbolhintergrundfarbe: #FFFFFF
• Bild-/Symbolplatzierung: Oben
• Bild-/Symbolbreite: 60 Pixel
• Bild-/Symbolausrichtung: Mitte
• Abgerundete Ecken des Bildes/Symbols: 100 Pixel
• Bild-/Symbolauffüllung: 8px 8px 8px 8px

Ändern Sie als Nächstes die Optionen für den Titeltext.

• Titelschriftart: Poppins
• Schriftstärke des Titels: Fett
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #FFFFFF
• Titeltextgröße: 20 Pixel

Stellen Sie abschließend den unteren Rand auf 30 Pixel ein.

Bildmodul

Fügen Sie in der letzten Spalte ein Bildmodul hinzu und legen Sie das Bild fest.

Ändern Sie auf der Registerkarte „Design“ die folgenden Einstellungen:

• Platz unter dem Bild anzeigen: Nein

Ändern Sie die Stileinstellungen des Mega-Menüs

Jetzt ist unser Layout fertig. Scrollen Sie nach unten zu den Mega-Menüstil-Optionen und ändern Sie die folgenden Optionen:

• Volle Breite: Ja
• Animation des Eingangsmenüs: Nach unten schieben
• Von oben anpassen: 30 Pixel

Endergebnis

Hier ist das Endergebnis des Mega-Menüs mit dem Mega-Drop-Down-Modul.

Mega Tabs-Modul

Schauen wir uns nun das Mega Tabs-Modul genauer an. Mit diesem Modul können Sie Ihrer Seite Inhalte mit Registerkarten hinzufügen, entweder in einem Dropdown-Megamenü oder an anderer Stelle in Ihrem Design. Das Mega Tabs-Modul kann nicht im Visual Builder angezeigt werden, Sie können jedoch die Wireframe-Ansicht verwenden, um den Abschnitt zu erstellen und eine Vorschau des Designs auf der Live-Site anzuzeigen.

Im Inhaltsbereich der Moduleinstellungen können Sie jede Ihrer Registerkarten hinzufügen. Jede Registerkarte verfügt über eine eigene Einstellungsseite, auf der Sie den Stil für diese Registerkarte ändern können. Alternativ können Sie die Stile aller Registerkarten gemeinsam in den allgemeinen Moduleinstellungen ändern. Im Abschnitt „Tab-Extras“ können Sie Links und Bilder zu jedem Ihrer Tabs hinzufügen.

Auf der Registerkarte „Design“ können Sie die Stile des Textkörpers und des Tabulatortexts sowie die Optionen für Größe, Abstand, Rahmen, Rahmenschatten, Filter, Transformation und Animation ändern.

Die Registerkarte „Erweitert“ enthält auch die typischen Elemente, um das Design weiter anzupassen.

Entwerfen eines Mega-Menüs mit dem Mega Tabs-Modul

In diesem Beispiel entwerfen wir ein Dropdown-Mega-Tab-Menü, das zu dem von uns verwendeten City-Layoutpaket passt. Fügen Sie der Mega-Menüseite eine Zeile mit einer einzelnen Spalte hinzu und fügen Sie dann das Mega-Tabs-Modul hinzu.

Inhaltseinstellungen

Fügen Sie in den Mega Tabs-Einstellungen vier neue Tabs hinzu. Fügen Sie jeder Registerkarte einen Titel hinzu und fügen Sie dann ein linksbündiges Bild und etwas Text zum Hauptteil hinzu.

Öffnen Sie in den allgemeinen Moduleinstellungen den Abschnitt „Tab-Extras“ und fügen Sie die Tab-Bilder für jeden Tab hinzu. Ordnen Sie die Bilder neu an, sodass die Reihenfolge mit der Tab-Reihenfolge oben übereinstimmt.

Als nächstes stellen Sie den Modulhintergrund auf Schwarz ein.

Designeinstellungen

Öffnen Sie die Einstellungen für den Textkörper und ändern Sie Folgendes:

• Körperschrift: Poppins
• Farbe des Textkörpers: #FFFFFF
• Körpertextgröße: 16px

Ändern Sie in den Tab-Textoptionen die folgenden Optionen:

• Hintergrundfarbe der aktiven Registerkarte: #FFFFFF
• Hintergrundfarbe der inaktiven Registerkarte: #000000
• Textfarbe der aktiven Registerkarte: #000000
• Tab-Textfarbe: #FFFFFF
• Tab-Schriftart: Poppins
• Tab-Schriftstärke: Fett
• Tab-Textgröße: 20 Pixel

Ändern Sie die Stileinstellungen des Mega-Menüs

Nachdem das Layout fertig ist, scrollen Sie nach unten zu den Optionen für den Mega-Menüstil und ändern Sie Folgendes:

• Animation des Eingangsmenüs: Nach unten schieben
• Von oben anpassen: 30 Pixel

Endergebnis

Hier ist das fertige Design des Mega Tabs-Menüs.

Divi Mega-Menüeinstellungen

Auf der Einstellungsseite des Mega-Menüs können Sie einige Optionen im Zusammenhang mit dem Plugin steuern. Hier können Sie den von Ihnen verwendeten Navigationstyp auswählen, die Kopfzeile so einstellen, dass sie fixiert wird, das Durchklicken des übergeordneten Menüelements stoppen, eine Hintergrundüberlagerung aktivieren und die Einstellungen zum Entfernen des Plugins ändern.

Auf der Registerkarte „Mobile Einstellungen“ können Sie das Plugin auf Mobilgeräten aktivieren oder deaktivieren, den Haltepunkt für das mobile Menü angeben, ein festes mobiles Menü aktivieren, das Durchklicken eines übergeordneten Menüelements stoppen und eine mobile Menü-ID angeben.

Hinzufügen des Divi Mega-Menüs

Es gibt viele Möglichkeiten, Ihrer Website ein Mega-Menülayout hinzuzufügen. Sie können es so einstellen, dass es in einem Menü angezeigt wird, oder Sie können es einem Modul in Ihrem Layout zuweisen, beispielsweise einer Schaltfläche oder einem Symbol, wo es beim Bewegen oder Klicken angezeigt werden kann. Darüber hinaus können Sie das Mega-Drop-Down-Modul und das Mega-Tabs-Modul wie jedes andere Modul zu jedem Layout hinzufügen, das Sie mit Divi erstellen. Sie sind also nicht auf die Erstellung von Dropdown-Menüs beschränkt, sondern können sie nach Belieben in Ihr Layout einfügen wie.

Bevor Sie das Mega-Menü zu Ihrer Website hinzufügen, stellen Sie sicher, dass für das Mega-Menü eine benutzerdefinierte Kennung festgelegt ist. Fahren Sie fort und kopieren Sie die benutzerdefinierte Kennung, da Sie diese benötigen, um das Mega-Menü zur Site hinzuzufügen. Stellen Sie außerdem sicher, dass das Mega-Menü auf „Veröffentlicht“ eingestellt ist, damit es im Frontend Ihrer Website angezeigt wird.

Hinzufügen eines Mega-Menüs zu einem Menüpunkt

Um Ihrem Menü ein Mega-Menülayout hinzuzufügen, navigieren Sie unter „Darstellung“ zur Seite „Menüs“. Erweitern Sie das Element, das Sie als übergeordnetes Element für das Mega-Menü festlegen möchten, und fügen Sie dann die benutzerdefinierte Kennung ein, die Sie in das Feld „CSS-Klassen“ kopiert haben. Hier füge ich das Mega-Dropdown-Layout zum Menüpunkt „Dienste“ und das Mega-Tabs-Layout zum Menüpunkt „Info“ hinzu.

Wenn das Feld „CSS-Klassen“ nicht angezeigt wird, klicken Sie oben auf der Seite auf „Bildschirmoptionen“ und aktivieren Sie „CSS-Klassen“.

So sieht das Mega-Dropdown-Layout im Menü aus.

Und hier ist das Mega-Tab-Layout.

Hinzufügen eines Mega-Menüs zu einem Modul

Um einem Modul ein Mega-Menü hinzuzufügen, fügen Sie einfach die benutzerdefinierte Kennung in das Feld „CSS-Klasse“ auf der Registerkarte „Erweitert“ des Moduls ein. Das Mega-Menü-Layout wird je nach den von Ihnen festgelegten Einstellungen beim Hover oder beim Klicken angezeigt. Hier füge ich das Mega-Tabs-Layout zur Schaltfläche „Besuch planen“ hinzu.

Im Frontend erscheint beim Hover das Mega-Menü.

Verwenden von Divi Mega-Menümodulen in einem Layout

Um das Mega Drop-Down- oder Mega Tabs-Modul direkt zu einem beliebigen Layout hinzuzufügen, fügen Sie einfach ein neues Modul zur Seite hinzu und wählen Sie das gewünschte Modul aus.

So sieht es vorne aus.

Divi MegaMenu-Beispiele

Divi MegaMenu bietet Zugriff auf drei Layout-Beispiele mit mehreren interessanten Mega-Menü-Designs, die Sie als Starthilfe für Ihr Design verwenden können. Werfen wir einen Blick auf die Mega-Menülayouts, die im Business-Layoutpaket enthalten sind.

Das 4-Spalten-Layout umfasst zwei Spalten mit einem Bild, Text und einer Schaltfläche, eine leere Spalte und ein großes Menü auf der rechten Seite.

Das Produktlayout ist ein einfaches, farbenfrohes Menülayout, das verschiedene Produkte hervorhebt.

Dies ist das vertikale Tabs-Layout, das das Mega Tabs-Modul nutzt.

Das Mega-Dropdown-Layout umfasst vier Spalten mit Dropdown-Menümodulen mit Untermenüelementen.

Das Listenlayout umfasst vier Spalten mit Titeln, Trennlinien und Klappentextmodulen, die ein Symbol enthalten.

Das Blog-Menülayout zeigt den neuesten Beitrag und einen Beitragsschieberegler an.

Das Medienlayout besteht aus zwei Galeriemodulen, einem Bild, zwei Videoschiebereglern und zwei Videomodulen.

Schließlich enthält das Kontaktmenü-Layout einige Klappentexte mit Kontaktinformationen, ein Kontaktformular und ein Kartenmodul.

Kaufen Sie das Divi Mega-Menü

Divi Mega Menu ist im Divi Marketplace erhältlich. Die unbegrenzte Website-Nutzung und ein Jahr Support und Updates kosten 46 US-Dollar. Im Preis ist außerdem eine 30-tägige Geld-zurück-Garantie enthalten.

Abschließende Gedanken

Divi Mega Menu erweitert den Divi Builder um einige großartige Funktionen, sodass Sie kreative und einzigartige Mega-Menü-Layouts mit der gesamten Palette an Designoptionen erstellen können, die in Divi verfügbar sind. Einer seiner Vorteile ist die Möglichkeit, native Divi-Module in die Mega-Menü-Layouts zu integrieren, was zu Dropdown-Menüs führt, die mehr als nur Menüelemente bieten. Mit Divi Mega Menu können Sie außerdem ganz einfach Mega-Menüs zur Kopfzeile, zu einem Modul oder direkt zu einem Layout hinzufügen, was Ihnen viel Flexibilität bei der Gestaltung und Platzierung bietet. Wenn Sie nach einem Plugin suchen, mit dem Sie ganz einfach Mega-Menüs mit komplexen Funktionen und Layouts erstellen können, ist Divi Mega Menu möglicherweise eine gute Option für Sie.

Wir würden uns freuen, von Ihnen zu hören! Haben Sie Divi Mega Menu ausprobiert? Teilen Sie uns Ihre Meinung in den Kommentaren mit!