Divi-Plugin-Highlight: Einfache Slide-Ins

Easy Slide-Ins ist ein Drittanbieter-Plugin für Divi und Extra, mit dem Sie Slide-Ins (und Popups) mit dem Divi-Builder erstellen können. Die Slide-Ins können alles anzeigen, was mit dem Divi Builder erstellt werden kann. Lösen Sie die Slide-Ins mit einem Scroll-Prozentsatz, einer Exit-Absicht, einer Schaltfläche mit mehreren Positionen und einer CSS-Klasse aus. Es enthält lebenslange Updates und Demos.

In diesem Artikel werden wir uns Easy Slide-Ins ansehen und sehen, was es kann und wie einfach es zu bedienen ist. Wir werden uns auch einige der Demos ansehen, die im Plugin enthalten sind. Das Plugin ist auf der Website des Entwicklers verfügbar.

Installieren von Easy Slide-Ins

Entpacken Sie zuerst die Datei. Im Ordner finden Sie Demos, eine Datei mit einem Link zur Dokumentation und das Easy Slide-Ins-Plugin.

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es.

Dem Dashboard wird ein neues Menü namens Easy Slide-Ins hinzugefügt. Klicken Sie auf dieses Menü und geben Sie Ihren Lizenzschlüssel ein.

Durch die Aktivierung der Lizenz werden zwei Menüpunkte (Alle Elemente und Neu hinzufügen) hinzugefügt, in denen Sie Ihre Slide-Ins sehen und neue Slide-Ins erstellen können.

Erstellen eines neuen Slide-Ins

Wenn Sie auf klicken, um ein neues Slide-In hinzuzufügen, wird ein Editor geöffnet, in dem Sie den Divi Builder verwenden können, um das Slide-In zu erstellen.

Es enthält auch viele Einstellungen. Sie werden unter dem Divi Builder platziert. Wählen Sie die Position aus: links, rechts, oben links, oben rechts, unten links, unten rechts, obere Leiste, untere Leiste, linke Seitenleiste oder rechte Seitenleiste. Stellen Sie es auf Auto-Trigger beim Scrollen ein und wählen Sie den Scroll-Betrag. Sie können es auch so einstellen, dass es beim Beenden der Absicht geöffnet wird. Legen Sie die Hintergrundfarbe, den Boxschatten und die Einschubbreite fest.

Zeigen Sie den Titel an und geben Sie den anzuzeigenden Text ein. Wählen Sie die Hintergrund- und Textfarben des Titels sowie die Schriftfamilie, -größe und -stärke. Legen Sie die Eckenrundung, die Etikettenhöhe und die Etikettenbreite fest. Zeigen Sie das Schließsymbol an und wählen Sie die Hintergrund- und Symbolfarben sowie die Symbolgröße aus.

Die Bedienelemente sind intuitiv zu bedienen und zu verstehen. Es gibt genügend Anpassungen, um das Label so zu gestalten, dass es zu Ihrer Website passt, und um zu steuern, wie die Slide-Ins funktionieren.

Je nach den von Ihnen gewählten Optionen werden andere Funktionen hinzugefügt oder entfernt. Ich habe Box Shadow ausgewählt und es bietet jetzt Optionen für die horizontale und vertikale Position, Unschärfe- und Ausbreitungsstärke und Farbe.

Auf der Registerkarte Erweitert können Sie die Seiten auswählen, auf denen die Folie angezeigt werden kann. Sie können alle Seiten, einzelne Seiten und alle Beiträge auswählen. Sie können das Slide-In auf bestimmten Geräten ausblenden.

Auf der Registerkarte Benutzerdefinierte Felder können Sie benutzerdefinierte Felder wie bei jeder Seite oder jedem Beitrag hinzufügen.

Beispiele für einfache Slide-Ins

Dies ist die Kontaktseite aus dem Risikomanagement-Layout. Ich verwende dies, um das Slide-In zu erstellen, damit das Design zum Layout passt. Ich habe eingestellt, dass die Seitenleiste oder die Punktnavigation nicht angezeigt werden. Sie können eine Vorschau wie eine Standardseite anzeigen. Nachdem Sie die Folie entworfen haben, veröffentlichen Sie sie wie gewohnt.

Ich habe das Label in den Einstellungen aktiviert und den Hintergrund auf Schwarz und den Text auf Weiß gesetzt. Ich habe den Standardtext (Kontakt) beibehalten. Ich habe es so eingestellt, dass es in der oberen rechten Ecke angezeigt wird. Dies verwendet die Standardhöhe, die jedoch leicht geändert werden kann.

Wenn Sie auf das Etikett klicken, wird das Slide-In geöffnet, das über dem Bildschirm mit dem Kontaktformular aus dem Risikomanagement-Layoutpaket angezeigt wird. Durch erneutes Klicken auf die Schaltfläche Kontaktieren Sie uns wird das Slide-In geschlossen. Ich habe die Einschubbreite auf 500 Pixel, die Etikettenhöhe auf 150 und die Etikettenbreite auf 60 eingestellt.

Das Beispiel zeigt den Boxschatten. Ich habe die Position in die rechte Seitenleiste geändert, die die Schaltfläche zum Schließen anzeigt. Ich habe die Farben des Etiketts und der Schließen-Schaltfläche geändert und die Ecken des Etiketts abgerundeter gemacht. Ich habe auch die Slide-In-Breite auf 600 Pixel eingestellt.

Für dieses habe ich das Label in die obere Leiste verschoben. Ich habe Farben aus dem Layout verwendet und die Breite auf 122 Pixel und die Höhe auf 40 Pixel geändert. Wie Sie in diesem Bild sehen können, bleibt das Etikett beim Scrollen an Ort und Stelle.

Es wird im Vollbildmodus geöffnet und enthält die Schaltfläche zum Schließen.

Für dieses habe ich der linken Seitenleiste ein neues Slide-In hinzugefügt. Ich habe es so gestaltet, dass es der Site entspricht, und die Ecken des Etiketts kariert belassen. Ich verwende den oberen Rand des Etiketts von 50 %, wodurch der obere Rand des Etiketts in der Mitte meiner Bildschirmhöhe platziert wird.

Es öffnet sich von links. Ich habe ihm eine Pixelbreite von 1000 gegeben, damit es einen großen Teil meines Bildschirms abdeckt. Das Kontakt-Slide-In wird immer noch oben angezeigt, obwohl das Menü vom Newsletter-Slide-In abgedeckt wird.

Die Slide-Ins geben Ihnen eine Schaltflächen-Trigger-Klasse. Sie können dies mit Schaltflächen verwenden, um das Slide-In zu öffnen.

Kopieren Sie die Klasse und fügen Sie sie in das Feld CSS-Klasse der Schaltfläche ein.

Ein Klick auf die Schaltfläche öffnet nun das Slide-In. Es müssen nirgendwo Labels vorhanden sein, aber es wird aus der Richtung eingeschoben, in der Sie das Slide-In platziert haben. Dieser wurde links platziert, kommt also von links. Ich habe die Breite auf 1000 Pixel eingestellt.

Einfache Slide-Ins-Demos

Die Download-Datei enthält 12 Demos. Dies sind vorgefertigte Layouts (JSON-Dateien), die Sie in die Divi-Bibliothek hochladen können. Importieren Sie sie wie normale Layouts in die Divi-Bibliothek. Sie enthalten gestylte Module, aber Sie müssen die Designeinstellungen einrichten. Hier ist ein Blick auf einige von ihnen.

Dies ist eine Sammel-E-Mail mit Exit Intent. Es umfasst mehrere Textmodule, ein Kontaktformular und ein Bildmodul.

So sieht es auf dem Bildschirm aus. Ich habe hier alles auf Standard belassen, sodass die Schaltfläche immer noch den ursprünglichen Text, die Position und das Styling anzeigt.

Dies ist eine Sammlungs-E-Mail mit Scroll-Absicht. Es enthält ein Hintergrundbild, zwei Textmodule und ein E-Mail-Modul.

So sieht es auf der Seite mit den vorgefertigten Einstellungen aus. Dies zeigt, wie reaktionsschnell das Slide-In ist (was genau das ist, was wir erwarten würden, da es ein Divi-Layout zeigt). Wenn Sie mehr vom Bild zeigen möchten, machen Sie das Slide-In einfach breiter.

Dieses ist Leiten Sie Ihre Besucher. Es enthält ein Codemodul (für Google Maps), mehrere Klappentexte, Text und ein Kontaktformular.

So sieht es auf der Seite mit den Standardeinstellungen aus.

Dieses ist Promotion mit einem Etikett. Es enthält ein Textmodul, mehrere Preistabellen und eine Schaltfläche.

So sieht es auf dem Bildschirm aus. Ich habe es auf 800 Pixel eingestellt, damit es die volle Breite anzeigt, wenn die Folie eingezogen wird. Ich habe das Label entfernt und es so eingestellt, dass es angezeigt wird, wenn der Seitenlauf 60 % erreicht.

Hier ist das gleiche Layout, wenn es mit Extra angezeigt wird. Ich bin froh zu sehen, dass es sowohl mit Divi als auch mit Extra großartig funktioniert.

Easy Slide-Ins Preis und Dokumentation

Easy Slide-Ins ist auf der Website des Entwicklers verfügbar. Es gibt zwei Kaufoptionen:

• Einzelne Site – $27
• Unbegrenzte Websites – 97 $

Beide Lizenzen beinhalten die Demos und lebenslange Updates.

Die Dokumentation wird auf der Dokumentations- und Supportseite des Entwicklers bereitgestellt. Die Seite enthält eine exemplarische Vorgehensweise zu jedem der Punkte mit Bildern, um sie zu demonstrieren. Die Seite enthält auch einen Link zum E-Mail-Support.

Gedanken beenden

Easy Slide-Ins erleichtert das Erstellen von Slide-Ins und Popups für Divi und Extra. Ich fand es einfach zu bedienen. Die Dokumentation habe ich nie gebraucht, ist aber bei Bedarf da. Es ist eine interessante Möglichkeit, versteckte Seitenelemente einzufügen. Da im Slide-In alles verwendet werden kann, können Sie Kontaktformulare, Newsletter-Anmeldungen, Calls-to-Action, Videos, Shop-Module usw. anzeigen. Dies kann ein einzelnes Modul oder ein vollständiges Seitenlayout sein.

Mir gefällt, dass es mehrere Trigger-Optionen gibt. Exit Intent und Auto Trigger machen es zu einer guten Wahl zum Erstellen von E-Mail- und CTA-Popups. Das Öffnen durch Klicken auf das Label ist eine gute Möglichkeit, sie an mehreren Stellen auf Ihren Seiten hinzuzufügen. Ich mag es, dass Sie mehrere Slide-Ins auf einer einzigen Seite hinzufügen und bestimmen können, auf welchen Seiten sie angezeigt werden. Das Hinzufügen der CSS-Klasse zu Schaltflächen ist eine großartige Möglichkeit, Informationen anzuzeigen, wenn der Besucher sie sehen möchte.

Sie können das Slide-In vom Front-End aus erstellen, aber ich habe nicht gesehen, wie ich auf die Einstellungen zugreifen kann. Ohne die Einstellungen konnte ich die Labels nicht verschieben und ihre Position in Echtzeit sehen. Ich musste eine Seite laden, um sie zu sehen. Es war immer noch nicht schwer zu bedienen, aber es gab ein wenig Rätselraten. Dies ist so gering, dass ich mich nicht davon abhalten würde, es zu verwenden oder zu empfehlen.

Wenn Sie nach einer einfachen und intuitiven Möglichkeit suchen, Slide-Ins mit dem Divi Builder zu erstellen, ist Easy Slide-Ins einen Blick wert.

Wir wollen von dir hören. Haben Sie Easy Slide-Ins für Divi ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über ByEmo / shutterstock.com