Mega-Menüs sind ein beliebtes Gestaltungselement, mit dem Sie Ihre Website ein Ausbruch von Eleganz beim Anbieten Besucher eine zusätzliche Navigationsebene. Es gibt mehrere Möglichkeiten, Mega-Menüs zu Divi hinzuzufügen. Eine der einfachsten Methoden, die ich verwendet habe, istein Plug-in eines Drittanbieters namens Divi Mega Pro .

Mit Divi Mega Pro können Sie mit Divi Builder ganz einfach Mega-Menüs erstellen. Jedes Menü kann mit einer CSS-Klasse zu jedem Element hinzugefügt werden. Dies bedeutet, dass Sie jedem Link im Menü ein Divi-Layout hinzufügen können, aber Sie können noch weiter gehen und sie jedem Element eines Divi-Layouts hinzufügen, indem Sie einfach eine CSS-Klasse hinzufügen.

Es ist ideal zum Erstellen von Menüs und Popups mit Geschäftsmodulen, Bildern, Schiebereglern, Portfolios, Symbolen, Klappentext, Videos, Blogs usw. Es funktioniert auch mit Extra.

Erstelle ein Mega Pro Mega Menü

Das Divi Mega Pro-Menü wird dem Dashboard-Menü hinzugefügt. Hier können Sie Ihren Lizenzschlüssel eingeben, die von Ihnen erstellten Menüs anzeigen und ein neues Menü erstellen. Wenn Sie auf klicken, um ein neues Menü hinzuzufügen, wird ein Editor für den Menüposttyp angezeigt. Der Bildschirm ist einfach, aber hier ist viel los.

Herausgeber - Sie können das Mega-Menü oder einen Tooltip mit Divi Builder erstellen.

Mega Pro Hintergrund - Sie können den Hintergrund und die Schriftfarben auswählen.

Standorte anzeigen - Wählen Sie alle Seiten aus oder benennen Sie bestimmte Seiten und geben Sie dann Ausnahmen ein.

Mega Pro Animation - Wählen Sie eine Animation. Wählen Sie zwischen Versatz, Versatz, Perspektive, Überblendung oder Skalierung.

Mega Pro-Auslöser - Fügen Sie einen Trigger als CSS-Selektor hinzu. Sobald Sie es gespeichert haben, sehen Sie die CSS-Klasse, die Sie in das CSS-Klassenfeld eines Menüelements, Moduls, einer Zeile oder eines Abschnitts einfügen möchten. Dies ist, was angeklickt oder bewegt wird, um das Menü anzuzeigen. Alles kann als Auslöser und nicht nur als Menüpunkt verwendet werden. Dies bedeutet, dass Sie mit Divi Mega Pro auch Popups oder Tooltips erstellen können.

Mega Pro Anzeigeeinstellungen : Wählen Sie die Anzeigerichtung (nach oben oder unten), geben Sie den oberen und unteren Rand in Pixel ein, wählen Sie einen Prozentsatz der Breite und aktivieren Sie einen Pfeil. Wenn Sie den Pfeil aktivieren, werden weitere Anpassungen angezeigt, bei denen Sie den Pfeiltyp (Dreieck oder Rund) auswählen, die Farbe auswählen, die Breite und Höhe festlegen und eine Vorschau des Pfeils anzeigen können.

Anpassungen die Schaltfläche zum Schließen: Aktivieren Sie die Schaltfläche zum Schließen auf dem Desktop oder auf dem Handy und passen Sie die Schaltfläche zum Schließen an. Wenn Sie es aktivieren, werden Anpassungen für Textfarbe, Hintergrundfarbe, Schriftgröße, Rahmenradius, Füllung und Anzeige in der Vorschau angezeigt.

Zusätzliche Parameter Mega Pro - Wählen Sie die Art des Triggers (schwebend oder angeklickt), die Art der Ausgabe (schwebend oder angeklickt) und geben Sie die Ausgangsverzögerung ein.

Divi Mega Pro Modelle

Der Entwickler hat mehrere Modelle für Divi Mega Pro bereitgestellt. Wenn Sie das Plugin kaufen, sind diese Vorlagen in Ihrem Konto auf der Registerkarte Plugin-Layoutvorlagen verfügbar. Diese helfen Ihnen beim Entwerfen Ihrer Mega-Menüs. Ich werde einige in meinen Beispielen verwenden.

Divi Mega Pro Menü

Sobald Sie ein Mega-Menü erstellt haben, wird es in der Liste angezeigt. Hier können Sie die Menüs bearbeiten, schnell bearbeiten oder löschen. Sie können auch suchen, nach Datum filtern, nach Status anzeigen usw. Es bietet auch die einzigartige Mega Pro-Klasse, sodass Sie sie von hier aus kopieren können, anstatt jede zu öffnen, um die Klasse zu erhalten.

Stellen Sie beim Kopieren der Klasse sicher, dass keine zusätzlichen Leerzeichen eingefügt werden. Andernfalls funktionieren alle Mega-Menüs auf der Seite nicht mehr.

Ich bin sicher, es wäre nicht einfach hinzuzufügen, aber eine Kopier- und Bearbeitungsfunktion wäre praktisch. Sie können die Divi-Layouts zur Wiederverwendung in Ihrer Bibliothek speichern, die Umgebungseinstellungen sind jedoch nicht enthalten.

Hinzufügen eines Triggers

Im Feld Mega Pro Trigger sehen Sie eine einzelne Mega Pro-Klasse. Kopieren Sie es und fügen Sie es in das Feld CSS-Klasse des Elements ein, das Sie als Trigger verwenden möchten.

Um das Feld CSS-Klasse zu einem Menüelement hinzuzufügen, müssen Sie CSS-Klassen aktivieren. Wählen Sie im Menübildschirm die Option Bildschirmoptionen und aktivieren Sie CSS-Klassen.

Fügen Sie die CSS-Klasse in das Menüfeld ein. Jetzt zeigt dieser Menüpunkt das Mega-Menü beim Hover an und bringt Sie beim Klicken zur Seite.

Sie werden feststellen, dass Divi Mega Pro auch eine Option in den Menülinkoptionen ist. Sie eignen sich hervorragend zum Hinzufügen eines Menüelements zum Menü, das eigentlich nirgendwo hingeht. Fügen Sie die CSS-Klasse wie jeden anderen Menüpunkt hinzu.

Kontaktabschnitt im Mega-Menü

Das Menü öffnet sich im Hover. Ich kann jederzeit auf den Link Kontakt klicken, um die Kontaktseite zu öffnen, wenn ich möchte. Wenn ich nur wollte, dass das Mega-Menü angezeigt wird, kann ich einfach den Link Hauptmenü Kontakt verwenden und es umbenennen (wie im obigen Beispiel).

In diesem Fall habe ich die Farben mithilfe der Hintergrund- und Anzeigeeinstellungen geringfügig geändert, anstatt Divi Builder zu verwenden. Es fügt eine Leiste am unteren Rand des Menüs hinzu.

Einfacher Aufruf zum Handeln mit Menüspalten

Dies ist eines der Modelle, die mehrere Spalten hinzufügen. Ich passe den Hintergrund und die Schriftfarben an. Ich habe auch einen Pfeil hinzugefügt und die Breite auf 75% festgelegt.

Die Optionen für Hintergrundfarbe und Schriftart fügen etwas mehr hinzu, um sie hervorzuheben. Ich habe die Standardausrichtung beibehalten, wodurch das Menü rechts vom Bildschirm platziert wird. Sie können die Positionierung in den Einstellungen anpassen.

Laschen

Die Registerkartenvorlage enthält ein Codemodul mit jQuery, um den Hover-Effekt zu erstellen.

Ich habe den Registerkarten Inhalte hinzugefügt und sie an die Site angepasst. Jeder der Links auf der linken Seite zeigt im größten Teil des Menüs eine andere Registerkarte.

Info Bubbles Konfigurationen

In diesem Fall habe ich die CSS-Klasse zu einem Klappentext hinzugefügt, damit beim Schweben ein kleines Popup geöffnet wird. Das Popup ist nur ein Bild mit einem Schatten darunter.

Im Bild oben schwebt meine Maus über den Worten LIVE WEBSITE. Ich habe die Positionierung noch nicht angepasst, aber es ist einfach, sie an einer beliebigen Stelle anzuzeigen.

In diesem Fall habe ich ein Popup erstellt, um ein Bild mit Text anzuzeigen. Ich habe die Anzeigerichtung auf Niedrig eingestellt und einen Rand von -300 hinzugefügt, damit sie neben dem Bild angezeigt wird, zu dem ich hinzufügen möchte.

Das Popup wird jetzt links und oben im Bild angezeigt, wenn ich mit der Maus darüber fahre. Ich habe eine transparente Hintergrundfarbe, Randfarbe, Füllung und abgerundete Kontur hinzugefügt.

Lizenz und Dokumentation

Sie haben die Wahl zwischen vier Lizenzen:

• Einzelne Website - 15 USD pro Jahr
• Drei Standorte - 29 US-Dollar pro Jahr
• Unbegrenzte Anzahl von Websites - 59 USD pro Jahr
• Unbegrenzte Lebensdauer - einmalig 129 US-Dollar

Dokumentation wird durch eine Videodemonstration bereitgestellt und ein Artikel auf der Website erklärt die Funktionen und erklärt Schritt für Schritt, wie das Plugin verwendet wird.

[vc_row center_row=“yes“][vc_column width=“1/2″][vcex_button target=“blank“ layout=“expanded“ align=“center“ font_family=“Raleway“ font_weight=“700″ style=“flat“ custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI THEMA HERUNTERLADEN [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=“https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials“ target=“blank“ layout=“expanded“ align=“center“ font_family = „Raleway“ font_weight=“700″ style=“flat“ custom_background=“#c4226e“ custom_hover_background=“#8d184f“ custom_color=“#ffffff“ custom_hover_color=“#ffffff“ icon_right=“fa fa-download“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi Tutorials

• 5 Websites, die Divi Restaurant Thema verwenden
• Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
• So ändern Sie die Menüfarbe zwischen Divi-Seiten
• So personalisieren Sie die Gitter eines Blogs mit Divi
• Wie die Rolle Divi-Editor auf Wordpress verwenden
• So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
• So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
• Funktionen, die Sie wahrscheinlich nicht über Divi kennen
• Wie man Divi Builder auf WordPress benutzt
• Wie benutzt man das Divi Video-Scroll-Modul?
• Wie benutze ich das Divi Builder Flip Modul?
• So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
• Wie benutzt man das Divi-Textmodul?
• So erstellen Sie einen Schieberegler auf Divi
• So bearbeiten Sie eine Divi-Benutzerrolle
• Wie benutzt man das Divi Social Media Modul?
• So verwenden Sie das Shop-Modul zum Thema WordPress Divi
• So verwenden Sie das Divi-Sidebar-Modul
• Wie benutzt man das Divi Preistabellen Modul?
• Wie verwende ich das Titelmodul von Divi-Publikationen?
• So fügen Sie ein Video-Modul von Divi hinzu
• Wie man das Artikelnavigationsmodul benutzt
• Wie benutzt man das Divi-Suchmodul?
• So verwenden Sie das Divi-Wallet-Modul
• Wie man das Personenmodul im Divi Builder benutzt
• Wie man das Geldbörsenmodul mit Divi-Filter verwendet
• So verwenden Sie das Schiebermodul mit voller Breite
• Wie benutzt man das Divi Builder Image Modul?
• So verwenden Sie das vollständige Navigationsmodul von Divi Builder
• So verwenden Sie das Bildergalerie-Modul
• So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
• So verwenden Sie das Divi Full Width Portfolio-Modul
• So verwenden Sie das Divi-Header-Modul in voller Breite
• Wie benutze ich das Divi Counter Modul?
• So verwenden Sie den Artikel-Schieberegler in Divi Builder
• Wie benutze ich das Divi Email Optin Modul?