Divi-Plugin-Highlight: Divi Mobile

Divi Mobile ist ein Drittanbieter-Plugin für Divi, mit dem Sie ganz einfach benutzerdefinierte mobile Menüs für Divi-Websites erstellen können. Alle Einstellungen befinden sich im Theme-Anpasser, sodass Sie eine Live-Vorschau Ihrer mobilen Menüdesigns sehen können. Es ist ein einfach zu bedienendes Plugin und kann fast jede Art von Menü erstellen, die Sie benötigen. In diesem Divi-Plugin-Highlight gehen wir Schritt für Schritt durch die Funktionen von Divi Mobile, um Ihnen bei der Entscheidung zu helfen, ob Sie es in Ihrer Divi-Toolbox benötigen.

Standard-Divi Mobile-Menü

Zum Vergleich hier das Standard-Mobilmenü von Divi. Das Menü ändert sich automatisch, um ein Hamburger-Menü anzuzeigen. Wenn Sie auf das Menü klicken, wird ein Dropdown-Menü mit allen Links angezeigt. Dies ist nicht separat vom Standardmenü einstellbar.

Theme-Anpasser

Dem Theme-Anpasser wird ein neues Menü namens Divi Mobile hinzugefügt. Es ist dunkelblau mit grünem Text, damit es auffällt. Alle Einstellungen werden in diesem Menü vorgenommen. Ich verwende das Financial Advisor Layout Pack.

In einer mobilen Ansicht, wie der Tablet-Ansicht im obigen Beispiel, wird das Menü automatisch auf die Standardeinstellungen von Divi Mobile eingestellt. Es enthält ein Hamburger-Menü in Weiß in einem dunkelblauen Kreis. Ich schwebe über dem Divi Mobile-Menü, das jetzt die Farben vertauscht hat.

Ein Klick auf das Hamburger-Menü öffnet das Menü, das von der Seite eingeschoben wird und die gesamte Seite des Bildschirms bedeckt. Ich habe das Menü im Theme-Anpasser geöffnet, um die Registerkarten anzuzeigen. Andere Elemente werden basierend auf der von Ihnen ausgewählten Auswahl angezeigt. Schauen wir uns die wichtigsten Anpassungen an.

Menüstil und Einstellungen

Menüstil und Einstellungen bietet mehrere Optionen zum Auswählen der Menüs. Zu den Layoutoptionen gehören das Menü, das von der Außenseite des Bildschirms angezeigt wird (die Standardansicht), das Erweitern aus einer Form und die Navigation nach unten. Der Menüstil „Außenbildschirm“ fügt dem Menü offene Animationen und vollständig geöffnete Stile hinzu. Jedes der drei Layouts enthält verschiedene Optionen.

Das obige Beispiel zeigt dasselbe Menü wie das vorherige Beispiel, aber ich habe Vollbild für den Menüstil ausgewählt. Ein Vorschaumodus legt fest, welcher Modus standardmäßig angezeigt wird. Ich mag das, weil es den Hintergrund hell macht.

Das Erweitern von einer Form aus deckt den gesamten Bildschirm ab, beginnend in der oberen rechten Ecke. Es kann sich auch von oben als Dehnung nach unten ausdehnen. Dies fügt dem Hintergrund Symbole hinzu und platziert die Links außerhalb des Hintergrunds, wie ich es im obigen Beispiel habe. Sie können die Farben und Symbole in anderen Einstellungen in einem anderen Menü namens Circle Stretch Settings anpassen.

Die untere Navigation zeigt Symbole am unteren Rand des Bildschirms an. Dies wird in einem anderen Menü namens Bottom Navigation Settings angepasst.

Durch Anpassen des Breakpoints können Sie das mobile Menü auf dem Desktop anzeigen lassen.

Benutzerdefinierte Kopfzeile

Benutzerdefinierter Header gibt Ihnen die vollständige Kontrolle über den Header. Der erste Abschnitt ist die Kopfzeilendarstellung. Fügen Sie ein neues Logo hinzu, passen Sie seine Größe an, passen Sie Hintergrundfarbe, Schattenlänge, Unschärferadius, Schattenfarbe usw. an. In diesem Beispiel habe ich ein neues Logo hinzugefügt und die Hintergrundfarbe geändert.

Der nächste Abschnitt ist die Kopfzeilendarstellung beim Scrollen. Stellen Sie das Menü auf fest, passen Sie die Höhe, die Logogröße, die Position des Burger-Symbols und die Hintergrundfarbe an. Ich habe jede dieser Einstellungen geändert.

Mit Kopfzeilenelementen können Sie der Kopfzeile Elemente hinzufügen und deren Position, Größe und Farbe anpassen. Ich habe das Logo nach rechts verschoben und etwas niedriger als normal eingestellt (Sie können es so niedrig einstellen, wie Sie die Kopfzeile oder den Inhalt überlappen möchten). Ich habe auch den WooCommerce-Warenkorb hinzugefügt, das Suchsymbol aktiviert, links platziert, in Rot geändert und ihre Größe erhöht.

Wählen Sie Burger-Menü

Wählen Sie Burger-Menü bietet Ihnen viele Optionen über das Hamburger-Menü-Symbol. Stellen Sie nach rechts oder links ein, wählen Sie aus drei Symbolen (drei Linien, zwei Linien oder drei Punkte) und wählen Sie Animationsstile und die Animationsrichtung aus. Ich habe es links platziert und zwei Zeilen ausgewählt.

Mit Burger-Menü Allgemein können Sie die Menühöhe anpassen, den Abstand des Hamburger-Symbols vom Rand und der Oberseite festlegen und die Schwebedeckkraft anpassen. Ich habe jede dieser Anpassungen in diesem Beispiel geändert.

Mit den Einstellungen für das Burger-Menüsymbol können Sie die Größe und Farbe der Linien oder Punkte auf dem Hamburger-Symbol sowohl für die geschlossene als auch für die offene Position anpassen. Sie haben auch die Kontrolle über die Zeilenhöhe, den Randradius und den Zeilenabstand. Dies ist die geschlossene Position. Ich habe die Farbe der Linien auf Rot gesetzt.

Ich habe die Farbe des offenen Symbols auf Gold gesetzt.

Für dieses habe ich das Menüsymbol rechts platziert und drei Zeilen ausgewählt. Ich habe die Farben, die Linienhöhe, den Randradius und die Position der drei Linien angepasst.

Sie können auch Text hinzufügen. Es gibt Ihnen die volle Kontrolle über den Text, einschließlich der horizontalen und vertikalen Position, der Schriftgröße, der Farbe und des Stils. Dieses Beispiel enthält die Option mit drei Punkten.

Burger Menu Background und Burger Menu Background Shadow bieten ähnliche Einstellungen wie Divi-Buttons. Dazu gehören Farbe, Breite, Höhe, Randradius, horizontale und vertikale Länge des Schattens, Unschärferadius und Unschärfefarbe. Ich habe die meisten Einstellungen in diesem Beispiel angepasst und das Symbol zu einem Quadrat anstelle eines Kreises gemacht.

Injizieren von Layouts

Mit Layouts injizieren können Sie Layouts aus Ihrer Divi-Bibliothek auswählen, um sie an verschiedenen Stellen in Ihrer Kopfzeile einzufügen. Platzieren Sie Layouts über dem Menü, unter dem Menü oder über der benutzerdefinierten Kopfzeile für Mobilgeräte.

In diesem Beispiel habe ich Abschnitte aus dem Layoutpaket hinzugefügt, das ich verwende, um ein Kontaktformular über dem Menü und Kontaktinformationen unter dem Menü zu platzieren. Ich habe das Menü als Vollbild angezeigt, damit es besser zu sehen ist.

Menüdarstellung

Mit der Menüdarstellung können Sie die Hintergrundfarbe, Linkplatzierung, Schriftgröße, Familie, Farbe, Hover-Farbe, die Seite des Bildschirms, auf der sie angezeigt wird, und die Breite des Menübereichs ändern. Ich habe das Menü nach links verschoben, den Hintergrund geändert, die Schriftgröße erhöht, die Position vom oberen Rand der Links geändert und die Links zentriert.

Für dieses habe ich den Menübereich eingeengt, die Links erhöht, die Links rechtsbündig ausgerichtet und die Hover-Farbe der Schriftart angepasst.

In diesem habe ich das Menü wieder nach rechts verschoben, es breiter gemacht, den Text linksbündig ausgerichtet, die Farbe geändert und ein Kontaktformular unterhalb des Menüs eingefügt.

Darstellung des Untermenüs

Es gibt verschiedene Stile für die Anzeige von Untermenüs. Dies ist der verschachtelte Stil zum Zusammenklappen. Ich habe die Einstellungen auf Standard belassen. Sie können auch das Erscheinungsbild anpassen, den Rahmen entfernen und das Symbol ändern.

Dies ist Overlap Slide In. Sie können die Schriftgröße, Farbe, Höhe, Hover-Farbe, Inhaltsbereich usw. anpassen. Ich habe die meisten dieser Einstellungen für dieses Beispiel angepasst.

Dies ist der Untermenüstil Side By Side. Es platziert ein Pfeilsymbol, das auf die Untermenüelemente zeigt. Sie können die Höhe, Position, Farbe usw. sowohl für das Öffnen- als auch für das Schließen-Symbol anpassen. Ich habe die Einstellungen für das Öffnen-Symbol angepasst.

Aufhören zu stapeln

Eines der Probleme beim Injizieren von Layouts besteht darin, dass die Module gestapelt werden. Divi Mobile enthält ein Divi-Modul, das Sie dem Layout hinzufügen können, damit es nicht gestapelt wird. Das obige Beispiel ist ein Layout mit Elementen, die gestapelt werden.

Fügen Sie einfach das Modul der Zeile hinzu. Nichts anderes wird benötigt.

Die Spalten stapeln sich nicht mehr. Abhängig von Ihrem Layout müssen Sie möglicherweise die Breite Ihres Menüs anpassen, damit alles Ihren Wünschen entspricht. Es funktioniert auch mit den anderen Menülayouts und Designs. Dies ist eine großartige Möglichkeit, ein Mega-Menü zu erstellen.

Wo kaufen

Divi Mobile ist auf der Website des Entwicklers verfügbar. Es stehen mehrere Lizenzen zur Auswahl:

Jährlich

• 1 Standort £12
• 2 – 5 Seiten £36
• Unbegrenzt £64

Lebenszeit

• 1 Seite £40
• Unbegrenzt £196

Es beinhaltet 1 Jahr Support. Sie erhalten Updates, solange die Lizenz auf Ihrer Website aktiviert ist.

Gedanken beenden

Das ist unser Blick auf das Divi Mobile-Plugin. Es ist ein ausgezeichnetes Plugin zum Entwerfen von mobilen Menüs. Ich habe nur an der Oberfläche gekratzt, was man damit machen kann. Es ist einfach zu bedienen und bietet viele Anpassungen zur Auswahl. Ich mag es, dass es den Theme-Anpasser verwendet, um die Änderungen live zu sehen.

Es gab ein paar Mal, dass ich die Seite speichern und neu laden musste, um die Änderungen zu sehen, aber das könnte mein Server gewesen sein. Ich würde gerne eine Standard-Reset-Taste sehen, damit Sie leicht zu den Standardeinstellungen zurückkehren können, wie Sie es mit Standard-Divi-Steuerelementen können. Dies ist jedoch möglicherweise nicht erforderlich.

Ich war beeindruckt, was ich mit Divi Mobile machen konnte. Wenn Sie an einem Divi-Plugin zum Erstellen benutzerdefinierter mobiler Menüs interessiert sind, ist Divi Mobile einen Blick wert.

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

Ausgewähltes Bild über venimo / shutterstock.com