Divi-Plugin-Highlight: Divi MadMenu

Divi Madmenu ist ein Drittanbieter-Plugin für Divi, das dem Divi Theme Builder neue Menüfunktionen hinzufügt. Fügen Sie Schaltflächen, einen Woocommerce-Warenkorb und eine Suchoption hinzu und passen Sie die Platzierung jedes Elements an. Entwerfen Sie unabhängige Menüs für Desktops, Tablets und Telefone und legen Sie die Haltepunkte fest. Legen Sie die Kopfzeile als fest fest und fügen Sie Animationen hinzu. Jedes Element ist anpassbar. In diesem Artikel werfen wir einen Blick auf Divi Madmenu und sehen, was es kann.

Divi Madmenu mit dem Divi Theme Builder

Divi Madmenu wurde speziell für die Zusammenarbeit mit dem Divi Theme Builder entwickelt. Nachdem Sie das Plugin installiert haben, gehen Sie zum Divi Theme Builder, klicken Sie auf Globalen Header hinzufügen und wählen Sie Globalen Header erstellen, um Ihren benutzerdefinierten Header zu erstellen.

Sie sehen ein neues Modul namens MadMenu, das dem Divi Builder hinzugefügt wurde. Dies ist das einzige Modul, das Sie verwenden müssen, aber Sie können andere verwenden, wenn Sie noch mehr Funktionen hinzufügen möchten.

Inhalt

Das Modul zeigt ein Menü an und bietet viele Optionen zum Anpassen. Mit Elements können Sie Funktionen wie das Menü für Desktop und Mobilgeräte, Logo, Suche, Warenkorb und zwei Schaltflächen aktivieren. Sie können unterschiedlich angeordnet und unabhängig voneinander gestylt werden.

Mit dem Desktop-Menü können Sie das anzuzeigende Menü auswählen, den Haltepunkt festlegen, um zu bestimmen, wann es zu einem mobilen Menü wechselt, und die Animation und Dauer des Untermenüs festlegen.

Mobile-Menü lässt Sie ein anderes Menü für Mobilgeräte auswählen und fügt Optionen hinzu, um die Untermenüs auszublenden, die übergeordneten Links anklickbar zu machen und den Akkordeon-Modus auszuwählen. Es enthält dieselben Animationsoptionen wie das Desktop-Menü.

Mobile Menu Toggle umfasst Symbol- und Beschriftungsoptionen, einschließlich des Umschaltformats, geschlossener und geöffneter Beschriftungen und der Beschriftungsposition.

Wenn Logo aktiviert ist, sehen Sie eine Option, um das Logo auszuwählen, eine Link-URL anzugeben und zu entscheiden, ob es im selben Fenster geöffnet wird.

Wenn die Suche aktiviert ist, können Sie ein Symbol oder ein Bild auswählen.

Für Warenkorb können Sie das Symbol, den Inhalt oder das Symbol und den Inhalt anzeigen, ein Bild auswählen oder das Logo anzeigen, Sichtbarkeitsoptionen auswählen, ein Live-Update usw.

Button 1 und Button 2 werden unabhängig voneinander eingestellt, haben aber die gleichen Optionen. Fügen Sie Text und ein Symbol hinzu, wählen Sie die Symbolplatzierung, Sichtbarkeit, den Link und wählen Sie, wie es geöffnet wird. Im obigen Beispiel habe ich beiden Schaltflächen Text hinzugefügt und der ersten Schaltfläche ein Symbol hinzugefügt.

Entwurf

Die Registerkarte Design fügt Optionen für Text, Menüelemente, Desktop- und Mobile-Menüs, Desktop- und Mobile-Untermenüs, Logo, Suche, Warenkorb, Schaltflächen und vieles mehr hinzu. Hier ist ein Blick auf einige von ihnen.

Layout Allgemein lässt Sie die Ausrichtung auswählen. Stellen Sie es auf rechts, links, Mitte, Abstand um, Abstand dazwischen und Abstand gleichmäßig ein. Wählen Sie die Dropdown-Richtung und legen Sie die Menüreihenfolge für Desktop und Mobilgerät fest. In diesem Beispiel habe ich die Ausrichtung auf rechts gesetzt und das Dropdown direkt der Untermenüs auf nach oben gesetzt.

Mit Layout-Elementen können Sie die Ausrichtung, Breite usw. von Menü, Logo, Suche, Warenkorb, Schaltfläche 1 und Schaltfläche 2 steuern.

Jedes der Elemente verfügt über eine Textdesign-Option, die Einstellungen für das normale und feste Menü enthält. Passen Sie die Farbe des aktiven Links, die Farbe des regulären Links, die Schriftart, die Schriftstärke, die Größe, den Abstand usw. an. Das obige Beispiel ist Text: Desktop-Menü. Ich habe die Farben, Schriftgrößen und Abstände geändert.

Text

Dies ist Text: Desktop-Untermenü . Ich habe die Farben und Schriftgrößen geändert und den Text in Großbuchstaben geschrieben.

Dies ist Text: Mobile Menü umschalten . Es bietet Textanpassungen für den Öffnungs- und Schließtext. Ich habe die Schriftfarbe geändert und die Größe und den Buchstabenabstand erhöht.

Dies ist Text: Mobiles Menü . Ich habe die Schriftfarben geändert und den Text groß geschrieben.

Text: Mobile Submenu steuert die Schriftarten für das Dropdown-Menü. Ich habe die Farben geändert, Großbuchstaben mit einem größeren Anfangsbuchstaben für jedes Wort ausgewählt, die Schriftgröße erhöht und den Text zentriert.

Text: Schaltfläche 1 und Text: Schaltfläche 2 haben die gleichen Optionen und steuern ihre Schaltflächen unabhängig voneinander. Ich habe die Schriftgröße für beide Buttons erhöht und Button 1 größer gemacht. Ich habe auch ihre Farben geändert. Für Button 2 habe ich eine andere Schriftart gewählt.

Text: Warenkorb steuert die Schriftart für den Inhaltstext des Warenkorbs. Ich habe die Schriftfarbe geändert, die Schriftgröße erhöht, die Schrift kursiv gesetzt, die Schrift wellenförmig unterstrichen und die Unterstreichungsfarbe geändert.

Speisekarte

Desktop-Menüelemente gibt Ihnen die Kontrolle über Hintergründe, Ränder, Abstände, Ecken, Rahmen, Rahmenschatten usw. Ich habe die Hintergrundfarbe geändert, Ränder und Abstände hinzugefügt, um Platz zwischen den Menüelementen zu schaffen, Ecken, Ränder und a . hinzugefügt Box Schatten.

Desktop-Untermenüelemente gibt Ihnen die gleiche Kontrolle wie die Menüelemente . Ich habe die Hintergrundfarbe geändert, am oberen Rand jedes Elements einen Rahmen hinzugefügt und einen Kastenschatten hinzugefügt.

Mir gefällt, dass jedes der Elemente individuell gestylt werden kann. Ich habe dem Hauptmenü, den Menüelementen und der Suche Boxschatten hinzugefügt und ihre Ecken abgerundet. Ich habe auch die Farben der Schriftarten und Hintergründe geändert.

Hier ist eine, die ich für meine Test-Site erstellt habe. Ich habe das Logo mit einem Boxschatten, Hauptmenü, Suche, Warenkorb und beiden Schaltflächen hinzugefügt. Die Schaltflächen sind mit weißem Hintergrund und schwarzen Rändern gestaltet. Ich habe auch einen unteren Rand mit Farben aus dem Layout hinzugefügt.

Wir können eine bessere Vorstellung davon bekommen, was mit Menüs gemacht werden kann, indem wir uns die Demos ansehen.

Divi Madmenu Demos

Das Plugin enthält 10 Madmenu-Demos, die Sie in die Divi-Bibliothek hochladen können. Einige der Demos haben Bilder in ihren Ordnern. Sie müssen sie in die Medienbibliothek hochladen.

Um eine Demo mit dem Theme Builder zu verwenden, klicken Sie auf , um einen globalen Header zu erstellen. Klicken Sie auf , um einen Abschnitt einzufügen, und wählen Sie Aus Bibliothek hinzufügen . Jetzt können Sie eine der Demos auswählen, die Sie verwenden möchten.

Verwenden Sie die Demos als Ausgangspunkt, um Designs zu erstellen, oder fügen Sie einfach Ihr Logo und Ihre Menüs hinzu. Sie nutzen die Hintergrundfarben, Logooptionen, Suchoptionen und CTA-Schaltflächen gut. Schauen wir uns einige der Demos mit meiner Testseite an. Sie umfassen verschiedene Designs für Desktop-, Tablet- und Telefon-Header.

Demo 1

Demo 1 verwendet den Site-Titel, das Menü und die Schaltfläche 1. Das Menü verwendet die zentrierte Ausrichtung. Das Untermenü enthält Styling mit einem Boxschatten und Rahmen zum Trennen der Links. Ich schwebe über dem zweiten Link.

Mobile erhöht die Schriftgröße und verwendet das gleiche Styling für das Hauptmenü und das Untermenü. Es verwendet auch Text mit einem Symbol für die Schaltfläche zum Öffnen und Schließen und ersetzt den Titel der Site durch das Logo.

Demo 2

Demo 2 fügt ein Logo, eine Suche mit einem eingekreisten Symbol mit einem Rand an einer Seite, ein zentriertes Menü, einen Einkaufswagen und Schaltflächen hinzu. Auf beiden Schaltflächen werden Social-Media-Logos angezeigt. Die Untermenüpunkte sind stilunabhängig vom Hintergrund.

Das mobile Menü zentriert alle Symbole, ersetzt den Menütext durch ein geöffnetes Symbol und fügt das Hellblau für das Menü hinzu.

Demo 3

Demo 3 verwendet interessante Schaltflächen. Schaltfläche 1 enthält Text zum Anmelden oder Registrieren und hat einen Hover-Effekt, der den Hintergrund beim Hover entfernt. Schaltfläche 2 verwendet ein Bild eines liniengezeichneten Herzens.

Bei Mobilgeräten enthält die Schaltfläche zum Öffnen/Schließen das Symbol und den Text unter dem Symbol. Symbole für die Schaltflächen sind gleichmäßig über die Kopfzeile verteilt, wobei Leerzeichen verwendet werden. Der Titel der Site wird durch das Logo ersetzt, das nach rechts verschoben wird.

Demo 5

Demo 5 verwendet Leerzeichen für das Layout und zeigt die Schaltflächen als CTAs an. Beide Schaltflächen verwenden unterschiedliche farbige Hintergründe, um sich abzuheben.

Das mobile Menü platziert die Schaltflächen ganz rechts und links und sie fügen Symbole hinzu. Das Logo und die Schaltfläche zum Öffnen/Schließen mit Text und Symbol sind in der Mitte platziert.

Demo 7

Demo 7 platziert die Schaltflächen auf beiden Seiten der Kopfzeile mit dem Menü in der Mitte. Das Logo wird über dem Namen der Site platziert. Das Menü enthält das Öffnen- und Schließen-Symbol mit Text. Die Elemente im Dropdown-Menü sind voneinander getrennt, sodass Teile des Hintergrunds durchscheinen können.

Die mobile Version behält die Schaltflächen an ihrem Platz und ersetzt den Text durch Symbole. Der Titel der Site wird ebenfalls entfernt.

Demo 8

Demo 8 enthält fettes Gelb mit einem Dropdown-Menü und einem Titel auf der linken Seite und das Menü mit Schaltflächen auf der rechten Seite. Jede der Schaltflächen enthält Grafiken.

Das mobile Menü platziert die Schaltflächen links und das Logo und das Menüsymbol rechts.

Demo 10

Demo 10 verwendet einen Farbverlauf für den Hintergrund und platziert einen dunkleren Hintergrund hinter jedem der Symbole. Die Schaltflächen enthalten Text und Symbole. Jeder der Links im Dropdown-Menü ist voneinander getrennt und der aktive Link ist dunkler. Das Logo wird links platziert.

Das mobile Menü entfernt alle Symbole mit Ausnahme des Suchsymbols. Das Menü wird durch die Symbole zum Öffnen/Schließen ersetzt und das Logo wird in der Mitte platziert. Das Dropdown-Menü sieht gleich aus.

Divi Madmenu kaufen

Divi Madmenu kann im Divi Marketplace für 39 US-Dollar pro Jahr für unbegrenzte Nutzung und ein Jahr Updates und Support erworben werden.

Gedanken beenden

Divi Madmenu für den Divi Theme Builder bietet viele Funktionen und Anpassungen, die es einfach machen, fast jede Art von Kopfzeile zu entwerfen, die Sie benötigen. Die vielen Anpassungen im Design-Tab können zunächst verwirrend sein, aber sie sind einfach zu bedienen und es dauert nicht lange, bis man den Dreh raus hat, was was steuert. Die Verwendung der beiden Schaltflächen zusammen mit dem Hinzufügen von Bildern und Symbolen zu den Such- und Warenkorb-Schaltflächen eröffnet viele Gestaltungsmöglichkeiten. Wenn Sie daran interessiert sind, interessante Menüs mit einem einzigen Modul zu erstellen, ist Divi Madmenu einen Blick wert.

Wir wollen von dir hören. Haben Sie Divi Madmenu ausprobiert? Lassen Sie uns in den Kommentaren unten wissen, was Sie davon halten.

Ausgewähltes Bild über venimo / shutterstock.com