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 901.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]

Mega-Menüs sind ein beliebtes Designelement, das Ihrer Website einen eleganten Schub verleihen und den Besuchern eine zusätzliche Navigationsebene bieten kann. 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 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ü

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 den Menüposttyp angezeigt. Der Bildschirm ist einfach, aber hier ist viel los.

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 Schriftfarben auswählen.

Wählen Sie den Speicherort des menu.png

Standorte anzeigen - Wählen Sie alle Seiten aus 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. 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 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.

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, 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.

Anpassung der divi.png-Schaltflächen

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]

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 Konfiguration divi mega pro.png

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

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 Plugin-Layoutvorlagen verfügbar. Diese helfen Ihnen beim Entwerfen Ihrer Mega-Menüs. Ich werde einige 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 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

Wählen Sie den Selektor divi.png

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.

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 die Option Bildschirmoptionen und aktivieren Sie CSS-Klassen.

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

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]

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.

divi mega menu design pro.png

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ü

Kontaktbereich Mega-Menü pro.png

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

design contact section divi mega pro.png

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.

ändere die Hintergrundfarbe divi mega pro.png

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

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

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

Demo-Menü mit Tab divi mega pro.png

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

Demo-Infobulles divi.png

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.

Design Info Stier divi mega pro.png

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

Ergebnis-Info-Blase divi.png

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

Lizenz und Demonstration.png

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.

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 konnte nur ein Mega-Menü erstellen, aber die von mir verknüpften Popups werden nicht geöffnet.
    Ich bin auf ein paar E-Mails mit Divi Life gestoßen, aber sie haben mir nichts klargestellt.
    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