Eine der exklusiven Landing Pages, die viele ihren Abonnenten während der Cyber ​​​​Monday-Zeit zur Verfügung stellen, ist die großartige Landing Page für Software-Releases. Dieses Layout bietet großartige Illustrationen und eine einzigartige Verwendung von Abschnittstrennern, die die Leser begeistern werden. Besucher.

Cyber ​​Montag.jpg

So erhalten Sie die exklusive Zielseite für die Softwareversion von Cyber ​​Monday

Bevor Sie mit dieser Verwendung beginnen, sollten Sie sich mit der exklusiven Cyber ​​Monday-Landingpage vertraut machen, die Sie erhalten, wenn Sie ein neues Mitglied für elegante Themen werden, Ihr bestehendes Konto aktualisieren oder bereits ein lebenslanges Mitglied sind. mit uns. Wenn Sie bereits ein lebenslanges Mitglied sind, können Sie sich in unseren Mitgliederbereich einloggen und alle unsere exklusiven Seiten hier herunterladen. Alle anderen Benutzer müssen die unten stehende Schaltfläche zum Kaufen oder Aktualisieren verwenden, bevor sie den Rest unseres Tutorials abschließen können.

Schon ein Lebensmitglied? Sie können das Paket jetzt herunterladen, ohne am Cyber ​​Monday-Angebot teilnehmen zu müssen!

So erstellen Sie ein kontextbezogenes Demo-Video zu Divi

Nachdem Sie die neue Zielseite für die Softwareversion aus unserem Mitgliederbereich heruntergeladen haben, können Sie die folgenden Informationen lesen.

Im Anwendungsfall dieses Tutorials zeigen wir Ihnen, wie Sie mit einem Klick auf eine Schaltfläche eine Videodemo erstellen. Das Video, das beim Klicken erscheint, sieht auf dem Desktop und auf kleinen Bildschirmen großartig aus. Dies ist ein großartiger Ansatz, wenn Sie ein Video nicht direkt auf Ihrer Seite einfügen möchten, sondern lieber eine Interaktion mit erstellen möchten Besucher.

Übersicht

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Endergebnis in verschiedenen Bildschirmgrößen an.

Büro

Endergebnis divi video popup.gif

Mobil

Ergebnis Mobile Video Popup divi.gif

Lassen Sie uns beginnen!

Verwenden Sie das kostenlose Video-PopUp-Plugin

Installieren und aktivieren Sie das Plugin

Als Erstes müssen Sie das herunterladen Plugin kostenlos Video PopUp . Sie finden dieses Plugin unter Ihrem Webseite WordPress > Plugins > Neu hinzufügen > Suche nach 'Video PopUp'. Sobald Sie dieses Plugin gefunden haben, installieren Sie es. Wenn Sie fertig sind, aktivieren Sie das Plugin.

video popup.jpg

Plugin Einstellungen

Gehen Sie weiter zu den allgemeinen Einstellungen dieses Plugins und aktivieren Sie die beiden Optionen oben.

Konfigurationsvideo popup.jpg

Fügen Sie mithilfe der Zielseite der Softwareversion eine neue Seite hinzu

Fügen Sie eine neue Seite hinzu und aktivieren Sie die Verwendung von Visual Builder

Es ist Zeit, die Dinge in die Praxis umzusetzen! Fügen Sie eine neue Seite hinzu, geben Sie Ihrer Seite einen Titel und aktivieren Sie sofort Visual Builder.

erstelle eine neue Seite divi.jpg

Laden Sie ein Softwareversionslayout aus gespeicherten Layouts herunter

Gehen Sie zu "Ihre gespeicherten Layouts" und laden Sie die von Ihnen hochgeladene Zielseite herunter.

Hochgeladenes Layout divi.jpg

Fügen Sie unter dem Blurb-Modul der Wiedergabetaste ein Textmodul hinzu

Wie Sie sehen können, verfügt die Seite bereits über eine Wiedergabetaste, mit der wir das gewünschte Ergebnis erzielen können. Damit dies funktioniert, müssen wir das Design im Blurb-Modul mithilfe eines Textmoduls neu erstellen. Fügen Sie ein neues Textmodul direkt unter dem Klappentext-Modul hinzu.

fügen Sie Text über dem Modul blurb.jpg hinzu

Fügen Sie dem Inhaltsbereich ein Bild hinzu

Nachdem Sie das Textmodul hinzugefügt haben, fügen Sie das Bild der Wiedergabetaste zum Inhaltsbereich Ihres Textmoduls hinzu, indem Sie auf "Klicken" klicken. Fügen Sie ein Medium hinzu Und wählen Sie die Wiedergabetaste in Ihrer Medienbibliothek.

Fügen Sie ein Medium hinzu, um divi.jpg zu löschen

wähle ein Bild aus divi.jpg

Fügen Sie dem Inhaltsbereich eine Kopie hinzu

Fahren Sie fort, indem Sie eine Kopie direkt unter dem Bild hinzufügen.

duplizieren Sie das Modul blurb.jpg

Texteinstellungen

Damit das Modul dem Layout entspricht, aktivieren wir die zentrale Textausrichtung in den Modultexteinstellungen.

Aktivieren Sie die zentrale Ausrichtung.jpg

Standardeinstellungen für den Linktext

Und wir werden auch die Parameter des Linktextes entsprechend ändern:

  • Link-Schriftart: Kabine
  • Link-Schriftgewicht: Fett
  • Link Textfarbe: rgba (162,176,193,0.7)
  • Linktextgröße: 17px
  • Höhe der Verbindungslinie: 1.6em

Designmenü-Link divi.jpg

Bewegen Sie den Mauszeiger über die Texteinstellungen

Ändern Sie die Farbe des Hover-Texts.

  • Linktextfarbe: # a2b0c1

Ändern Sie die Farbe des divi.jpg-Links

Abstand

Fügen Sie schließlich auch einen negativen oberen Rand zum Textmodul hinzu.

  • Top Marign: -20vw

setze einen oberen Rand divi.jpg

Fügen Sie dem Inhalt des Textbausteins eine Kontextlesung hinzu

Wechseln Sie zum Texteditor

Um das Popup beim Klicken zu erstellen, müssen Sie dem Inhalt des Textmoduls einen benutzerdefinierten Link hinzufügen. Kehren Sie zum Inhaltsbereich des Textmoduls zurück und wählen Sie den Texteditor-Modus.

Bearbeiten Sie den Textbaustein im Texteditormodus divi.jpg

Fügen Sie einen Link zu allen Inhalten hinzu

Verknüpfen Sie Ihren Content-Spot mit dem Popup, indem Sie einen Link zum Bild und zur Kopie hinzufügen. Stellen Sie sicher, dass Sie die Link-URL durch Ihre eigene ersetzen.

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a>

füge einen Link ein Bild mit einem Video divi.jpg hinzu

Entfernen Sie das Blurb-Modul von der Wiedergabetaste

Nachdem wir einen Text-Mod erstellt haben, der genauso aussieht wie der Blurb-Mod, können wir den zuvor existierenden Blurb-Mod entfernen und fertig! Sie können diese Methode auf jede Art von Layout anwenden, die Sie verwenden, aber es ist wirklich ein großer Mehrwert für die Zielseite der Softwareversion.

Löschen Sie das nicht verwendete Klappentextmodul divi.jpg

Abschließende Gedanken

Wie Sie sehen, ist das Hinzufügen eines Popups auf Divi mit dem Video-Popup-Plugin ganz einfach. Auf diese Weise können Sie Videos präsentieren Ihr Blog ohne es automatisch in den Inhalt integrieren zu müssen.