Divi-Plugin-Highlight – Divi-Overlays

Divi Overlays ist ein Plugin für Divi von DiviLife, einer Drittanbieter-Divi-Entwicklungsfirma des Community-Mitglieds Tim Strifler. Es ermöglicht Ihnen, mit dem Divi Builder ganz einfach Popups zu erstellen. Es ist nicht nur ein Modal. Sie können Vollbild-Overlays erstellen und mit dem Divi Builder jede gewünschte Art von Inhalt in das Overlay einfügen und es dann mit allem auf der Seite auslösen, einschließlich Schaltflächen, Links, Bildern usw. Sie können die Hintergrundfarben, die Schriftart anpassen Farben und wählen Sie die Eröffnungsanimation aus.

Overlays können Formulare, Preistabellen, Einkaufswagen, Videos, Bilder, Download-Links, Karten und vieles mehr enthalten. Sie können es sogar so einstellen, dass beim Laden der Seite ein Overlay geöffnet wird. Sie ermöglichen es Ihnen, zusätzliche Inhalte anzuzeigen, ohne auf das Laden der Seite warten zu müssen.

Die Möglichkeit, den Divi Builder zu verwenden, bedeutet natürlich, dass Sie Zugriff auf alle Module und Einstellungen haben, mit denen Sie Ihr Overlay erstellen können. Dies bedeutet, dass Sie Zugriff auf fast 40 Module haben und Shortcodes von anderen Plugins verwenden können. Mit dem Zugriff auf diese Modulanzahl sind Ihnen nur Ihre Vorstellungskraft Grenzen gesetzt.

Download: Divi-Overlays-Download

In dieser Übersicht schaue ich mir die Version 1.1 an, die einige neue Funktionen enthält, die von Kunden gewünscht wurden. Am Ende werde ich einige der Funktionen behandeln, die Sie in Version 2.0 erwarten können. Für die Beispiele verwende ich das Mehrzweck-Drahtmodell-Kit vol. 1. Lass uns eingraben…

Installation

Laden, installieren und aktivieren Sie das Plugin wie jedes andere Premium-Plugin. Nach der Aktivierung müssen Sie Ihren Lizenzschlüssel eingeben. Gehen Sie zu Einstellungen und wählen Sie Divi Overlays-Aktivierung im Dashboard aus.

Geben Sie den API-Schlüssel und die E-Mail-Adresse (von Ihrem Konto bei DiviLife) ein und wählen Sie Änderungen speichern . Jetzt können Sie mit der Erstellung von Overlays beginnen.

Neues Divi-Overlay hinzufügen

Die Overlays werden getrennt von Ihren Inhalten erstellt und dann mit einfachen Codes aus Ihren Inhalten geöffnet.

Um ein Overlay zu erstellen, gehen Sie zu Divi Overlays und wählen Sie im Dashboard Neu hinzufügen aus. Von hier aus können Sie den Divi Builder verwenden. Dies funktioniert genauso wie jede normale Seite oder jeder normale Post mit dem Divi Builder, einschließlich spezieller Divi-Plugins und -Module, und Sie können sogar A/B-Tests mit Divi Leads durchführen. Sie arbeiten sogar in einem globalen Modul. Sie können Ihre Overlays auch importieren und exportieren.

Wählen Sie die Überlagerungsanimation und die Einstellungen aus dem Dropdown-Feld in der oberen rechten Ecke aus. Unter dem Divi Builder befindet sich eine Auswahl für die Hintergrund- und Schriftfarben.

Auf der rechten Seite werden einige Einstellungen hinzugefügt. Eine Box namens Divi Overlay Animation enthält eine Dropdown-Box, in der Sie aus 11 Animationen auswählen können. Dies bestimmt, wie die Überlagerung auf dem Bildschirm angezeigt wird.

Es wurde ein Kontrollkästchen hinzugefügt, um zu verhindern, dass die Hauptseite scrollt, wenn ein Overlay auf dem Bildschirm angezeigt wird. Dadurch bleibt der Benutzer an derselben Stelle auf dem Bildschirm, sodass er beim Schließen des Overlays weiß, wo er sich befindet. Dies ist besonders hilfreich, wenn sie auf eine von vielen Schaltflächen geklickt haben, um das Overlay zu öffnen. Auf diese Weise wissen sie, auf welche Schaltfläche sie geklickt haben und verlieren ihren Platz auf dem Bildschirm nicht.

Ich habe ein Videomodul hinzugefügt und Genie für die Überlagerungsanimation ausgewählt und ausgewählt, um das Scrollen der Hauptseite zu verhindern.

Nachdem ich das Overlay erstellt habe, kann ich es auf einer Seite verwenden. Gehen Sie dazu im Dashboard zu Divi-Overlays und wählen Sie Divi-Overlays aus , um die Liste der verfügbaren Overlays anzuzeigen. Um das Overlay zu verwenden, kopieren Sie den Code, den Sie verwenden möchten, und fügen Sie ihn an der richtigen Stelle ein. Schauen wir uns im Detail an, wie das geht.

Links werden mit der CSS-ID erstellt. Kopieren Sie die CSS-ID und fügen Sie ein öffnendes <a id= und schließendes </a>-Tag wie im Beispiel gezeigt hinzu.

In diesem Beispiel verwende ich eine Landingpage. Ich möchte dem Text, dem App-Store-Logo, dem Telefonbild einen Auslöser hinzufügen, eine Schaltfläche erstellen und einen Link im Menü platzieren.

Textlink

Kopieren Sie den Inhalts-Shortcode und fügen Sie ihn in ein Code- oder Textmodul (jedes Modul, das Shortcodes akzeptiert) auf Ihrer Seite ein. Ich habe es in ein Codemodul eingefügt. Sie können in diesem Modul beliebig viele Divi Overlay-Shortcodes platzieren. Es spielt keine Rolle, wo Sie das Modul platzieren. Ich empfehle Ihnen, zu testen, um sicherzustellen, dass das Modul Ihr Layout nicht beeinflusst.

Ich möchte den Text WATCH A DEMO als Link zum Öffnen des Videos verwenden. Kopieren Sie dazu die CSS-ID aus der Liste der Overlays im Dashboard-Bildschirm.

Fügen Sie den Code in Ihr Textmodul ein und formatieren Sie Ihren Text wie folgt:

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

In diesem Fall ist der Text bereits in etwas HTML eingebettet, aber das ist in Ordnung. Lassen Sie den Code einfach an der richtigen Stelle im HTML-Code platzieren.

Der Text ist jetzt blau, um anzuzeigen, dass es sich um einen Link handelt.

Wenn ich auf den Text klicke, wird mir das Video angezeigt, zu dem ich einen Link in das Overlay eingefügt habe. Das Overlay wird mit der von mir ausgewählten Animation geöffnet.

Bildlink

Es gibt zwei Möglichkeiten, die CSS-ID zu einem Bild hinzuzufügen. Welche Methode Sie verwenden sollten, hängt davon ab, wie das Bild in Ihren Inhalten platziert wird. Hier zwei Beispiele:

Textmodul

Ich wollte das App-Store-Bild anklickbar machen, aber anstatt Sie zum App-Store zu führen, wollte ich, dass es einige Optionen und Informationen bietet. Dies erfordert ein neues Overlay, das auch einen neuen Shortcode innerhalb des Codemoduls erfordert.

Wenn ich jetzt auf das App-Logo klicke, erhalte ich ein Overlay mit Links zu zwei verschiedenen App-Stores. Für eine bessere UX/UI würde ich die Grafik für die Schaltfläche ändern, aber dies zeigt das Potenzial, mehrere Optionen bereitzustellen und gleichzeitig den Inhalt sauber zu halten. Für dieses Beispiel habe ich den Overlay-Hintergrund auf Weiß mit einer Deckkraft von 90 und die Schriftfarbe auf Dunkelgrau gesetzt.

Bildmodul

Im obigen Beispiel habe ich den Code zum HTML hinzugefügt, weil das Bild innerhalb des Textmoduls platziert wurde. Eine andere Möglichkeit besteht darin, das Bild in einem Bildmodul zu platzieren und die CSS-ID auf der Registerkarte Benutzerdefiniertes CSS zu verwenden .

In diesem Layout befindet sich das Mobiltelefon in einem Bildmodul. Ich füge die CSS-ID hinzu, damit das Video-Overlay geöffnet wird.

Verwenden Sie in der Link-URL #open-overlay (oder einen ähnlichen Text mit dem #-Symbol). Jetzt kann ich auf das Bild klicken und ein Overlay öffnen.

Schaltflächenlink

Das Hinzufügen des Overlay-Links zu einer Schaltfläche entspricht dem Hinzufügen zu einem Bild. Denken Sie daran, den Shortcode zum Codemodul hinzuzufügen.

Fügen Sie den #-Text zur URL der Schaltfläche hinzu. Ich habe #open-overlay wie zuvor verwendet, weil es beschreibend ist (und ich habe es Tim Strifler gestohlen, aber sag ihm das nicht).

Fügen Sie den CSS-ID-Code zum Tab " Benutzerdefiniertes CSS" hinzu .

Und das ist es! Der neue Button öffnet nun das Kontaktformular.

Menü-Link

Um einen Menülink zu erstellen, kopieren Sie die Menü-ID und gehen Sie zu Darstellung , Menüs , wählen Sie das Menü aus, zu dem Sie den Link hinzufügen möchten, und laden Sie es. (Weitere Informationen finden Sie in diesem Artikel So erstellen Sie benutzerdefinierte Menüstrukturen in WordPress.)

Wählen Sie Bildschirmoptionen in der oberen rechten Ecke und aktivieren Sie das Kontrollkästchen mit der Bezeichnung Link Relationship (XFN) .

Wählen Sie Benutzerdefinierter Link aus . Fügen Sie das #-Symbol als Link hinzu, fügen Sie den Text hinzu, der angezeigt werden soll, und wählen Sie Zum Menü hinzufügen . Fügen Sie die Menü-ID in das Feld Verknüpfungsbeziehung ein und speichern Sie das Menü. Stellen Sie sicher, dass Sie das Menü unter Menüeinstellungen einem Anzeigeort zuweisen, falls Sie dies noch nicht getan haben. In diesem Beispiel habe ich es auf Primary Menu gesetzt .

Der Menüpunkt erscheint nun innerhalb der Menüstruktur. Ein Klick darauf öffnet das Overlay. Dies hat den Vorteil, dass ein CTA (Call to Action) innerhalb der Navigationsstruktur und Site-weit bereitgestellt wird.

Widget

Das Plugin enthält auch einen neuen Widget-Bereich. Der Unterschied bei der Verwendung des Widgets und jeder der anderen Methoden besteht darin, wo Sie den Shortcode platzieren. Anstatt den Shortcode immer wieder in Modulen zu platzieren, können Sie ihn einmal platzieren, wodurch er global wird. Sie können es dann von jedem Element auf jeder Seite, aus der Seitenleiste, dem Hauptmenü oder dem Fußzeilenmenü auslösen.

Dies ist die Seite, die ich aus dem Mehrzweck-Drahtmodell-Kit vol. 1. Ich möchte die Schaltfläche anklickbar machen, damit das Video in einem Overlay geöffnet wird. Ich habe meine Shortcodes zum Widget-Bereich hinzugefügt (indem ich sie in ein Text-Widget platziert habe) und die CSS-ID zum Bild auf der Seite hinzugefügt.

Die Shortcodes im Widget funktionieren, ohne dass das Widget überhaupt sichtbar ist. Ich musste keine Seitenleiste auf der Seite oder irgendwelche Widgets in der Fußzeile platzieren. Es funktioniert einfach, weil dieser neue Widget-Bereich hinter den Kulissen geladen wird. Wenn Sie andere Widgets in diesem Widget-Bereich ablegen, werden sie in der oberen linken Ecke der Seite angezeigt. Shortcodes werden standardmäßig nicht als Text angezeigt, sodass das Widget unsichtbar bleiben kann.

Schließen des Overlays

Overlays können entweder mit dem X in der Ecke, durch Klicken auf den Hintergrund des Overlays oder durch Drücken der Escape-Taste geschlossen werden.

Eine andere Möglichkeit besteht darin, einem Link innerhalb des Overlays eine enge Klasse hinzuzufügen. Mit dieser Methode können Sie eine Schaltfläche oder einen Text zum Schließen erstellen. Auf diese Weise können Sie Ihrem CTA einen Abbrechen-Button hinzufügen oder den Schließen-Button sichtbarer machen.

Die Abschlussklasse sieht so aus:

class = "close-divi-overlay">Nein danke

Kommt in 2.0

Hier sind einige Funktionen, auf die Sie sich freuen können:

Eine Zeitverzögerungsfunktion ermöglicht das Öffnen des Overlays basierend auf einer festgelegten Zeit nach dem Laden der Seite, sodass der Leser Ihren Inhalt für eine bestimmte Zeit sehen kann, bevor das Overlay automatisch geöffnet wird.

Eine Pixelfunktion öffnet das Overlay basierend auf der Anzahl der gescrollten Pixel oder dem Prozentsatz der gescrollten Seite.

Eine andere Option öffnet das Overlay, wenn der Leser die Zurück-Schaltfläche auswählt oder den Cursor über der Adressleiste platziert.

Dokumentation

Die Dokumentation wird auf der DiviLife-Website bereitgestellt. Es enthält eine Übersicht und Beispiele für die verschiedenen Verwendungsmöglichkeiten des Plugins. Die Dokumentation umfasst Text, Video und Beispielcode.

Preisgestaltung

Divi Overlays ist ein Premium-Plugin. Es kostet 15 USD für die Nutzung auf einer einzigen Site, 29 USD für drei Sites, 59 USD für unbegrenzte Sites und 129 USD für die lebenslange unbegrenzte Lizenz. Jede der Lizenzen enthält alle Kernfunktionen und die Dokumentation. Die ersten drei beinhalten ein Jahr Updates und Support, während der letzte lebenslange Updates und Support beinhaltet.

Abschließende Gedanken

Divi Overlays ist eine großartige Möglichkeit, Overlays mit dem Divi Builder zu erstellen. Mit dem Divi Builder können Sie mithilfe der Divi-Module oder Shortcodes von anderen Plugins praktisch jede Art von Inhalt zum Overlay hinzufügen. Es ist schwer, sich ein Overlay vorzustellen, das Divi Overlays nicht erstellen kann. Es erfordert ein paar Schritte, um bei Bedarf Code hinzuzufügen, aber es ist einfach und die Dokumentation führt Sie durch. Die Auszahlung überwiegt bei weitem die wenigen Minuten, die man braucht, um es zu erlernen.

Wir wollen von dir hören! Haben Sie Divi-Overlays ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über brickclay / shutterstock.com