Springe zum Hauptinhalt

Überprüfung des WordPress-Plugins: Divi Mega Pro

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.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]

Megamenüs sind ein beliebtes Gestaltungselement, das Ihrer Website einen Hauch von Eleganz verleiht und den Besuchern eine zusätzliche Navigationsebene bietet. Es gibt verschiedene Möglichkeiten, Divi Mega-Menüs hinzuzufügen. Eine der einfachsten Methoden, die ich verwendet habe, ist die vonein Plug-in eines Drittanbieters namens Divi Mega Pro .

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

Es eignet sich hervorragend zum Erstellen von Menüs und Popups mit Geschäftsmodulen, Bildern, Schiebereglern, Portfolios, Symbolen, Präsentationstexten, Videos, Blogs und vielem mehr. Es funktioniert auch mit Extra.

Erstelle ein Mega Pro Mega Menü

erstelle mit divi mega.png ein megamenü divi

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 die Art der Menüveröffentlichung angezeigt. Der Bildschirm ist einfach, aber hier passiert eine Menge.

Design eines Mega Pro.png Menüs

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

ändere den Hintergrund der mega menu.png

Mega Pro Hintergrund - Sie können den Hintergrund und die Farben der Schriftart auswählen.

Wählen Sie den Speicherort des menu.png

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

Wählen Sie die Animation des menu.png

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

wähle trigger css.png

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. Dies wird angeklickt oder geflogen, um das Menü anzuzeigen. Alles kann als Auslöser und nicht nur als Menüpunkt verwendet werden. Dies bedeutet, dass Sie Divi Mega Pro auch zum Erstellen von Popups oder QuickInfos verwenden können.

Konfigurationsmenüstil divi.png

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, in denen Sie den Pfeiltyp (Dreieck oder Rund) auswählen, die Farbe auswählen, Breite und Höhe festlegen und eine Vorschau des Pfeils anzeigen können.

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Anpassung der divi.png-Schaltflächen

Anpassungen Die Schließen-Schaltfläche: Aktivieren Sie die Schließen-Schaltfläche auf dem Desktop oder auf dem Mobiltelefon und passen Sie die Schließen-Schaltfläche an. Wenn Sie diese Option aktivieren, werden die Textfarbe, die Hintergrundfarbe, die Schriftgröße, der Rahmenradius, die Füll- und Anzeigeanpassungen in der Vorschau angezeigt.

zusätzliche Konfiguration divi mega pro.png

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

Divi Mega Pro Modelle

verschiedene vorlagen verfügbar divi mega pro.png

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 Layout-Vorlagen der Plugins verfügbar. Diese sind großartig, um Ihnen beim Entwerfen Ihrer Megamenüs zu helfen. Ich werde einige davon in meinen Beispielen verwenden.

Divi Mega Pro Menü

divi mega pro.png menü

Sobald Sie ein Mega-Menü erstellt haben, wird es in der Liste angezeigt. Hier können Sie 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 kopieren können, anstatt sie einzeln 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 Divi-Layouts zur Wiederverwendung in Ihrer Bibliothek speichern, dies schließt jedoch die umgebenden Einstellungen nicht ein.

Trigger hinzufügen

Wählen Sie den Selektor divi.png

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

Klassen css.jpg

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

Fügen Sie ein Klasse-Css-Menü divi.png hinzu

Fügen Sie die CSS-Klasse in das Menüfeld ein. Jetzt zeigt dieser Menüpunkt das Mega-Menü an, indem Sie den Mauszeiger bewegen und zur Seite mit den einzelnen Mausklicks gelangen.

divi mega menu design pro.png

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]

Sie werden feststellen, dass Divi Mega Pro auch eine Option in den Menü-Link-Optionen ist. Sie eignen sich hervorragend, um dem Menü einen Menüeintrag hinzuzufügen, der eigentlich nirgendwo hinführt. Fügen Sie die CSS-Klasse wie jedes andere Menüelement hinzu.

Kontaktabschnitt im Mega-Menü

Kontaktbereich Mega-Menü pro.png

Das Menü wird mit der Maus geöffnet. Ich kann jederzeit auf den Link Kontakt klicken, um die Kontaktseite zu öffnen. Wenn nur das Mega-Menü angezeigt werden soll, kann ich einfach den Link Kontakt-Hauptmenü verwenden und umbenennen (wie im obigen Beispiel).

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

Einfacher Handlungsaufruf mit Menüspalten

design contact section divi mega pro.png

Dies ist eine der Vorlagen, die mehrere Spalten hinzufügen. Ich ändere den Hintergrund und die Schriftfarben. Ich habe auch einen Pfeil hinzugefügt und die Breite von 75% festgelegt.

ändere die Hintergrundfarbe divi mega pro.png

Die Optionen für die Hintergrundfarbe und die Schriftart erhöhen die Hervorhebung. Ich habe die Standardausrichtung verlassen, die das Menü auf der rechten Seite des Bildschirms platziert. Sie können die Positionierung in den Einstellungen anpassen.

Laschen

Menügestaltung mit Registerkarten Mega-Menü divi.png

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

Demo-Menü mit Tab divi mega pro.png

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

Info Bubbles Konfigurationen

Demo-Infobulles divi.png

In diesem Fall habe ich die CSS-Klasse zu einem Präsentationstext hinzugefügt, sodass ein kleines Popup-Fenster geöffnet wird. Das Popup ist nur ein Bild mit einem Schatten darunter.

Im obigen Bild schwebt meine Maus über den Worten LIVE WEBSITE. Ich habe die Positionierung noch nicht angepasst, aber es ist einfach, sie so anzuzeigen, wie Sie es möchten.

Design Info Stier divi mega pro.png

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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 es neben dem Bild angezeigt wird, das ich hinzufügen möchte.

Ergebnis-Info-Blase divi.png

Das Popup-Fenster wird jetzt links und oben im Bild angezeigt, wenn ich darüber fliege. Ich habe eine transparente Hintergrundfarbe, eine Rahmenfarbe, eine Füllung und eine abgerundete Kontur hinzugefügt.

Lizenz und Dokumentation

Lizenz und Demonstration.png

Sie haben die Wahl zwischen vier Lizenzen:

  • Single Site - 15 $ pro Jahr
  • Drei Standorte - 29 USD pro Jahr
  • Unbegrenzte Websites - 59 $ pro Jahr
  • Unbegrenzte Lebensdauer - 129 $ einmalig

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.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 2
  1. Hallo:
    Wo kann ich sehen, wie ein Popup-Fenster erstellt wird?
    Ich habe keine Möglichkeit, es zu bekommen. Ich könnte nur ein Mega-Menü erstellen, aber die Popups, die ich verlinkt habe, lassen sich nicht öffnen.
    Ich habe einige Emails mit Divi Life getroffen, aber sie haben nichts geklärt.
    Vielen Dank.

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
4 Aktien
Aktie4
tweet
Registrieren