Springe zum Hauptinhalt

So erstellen Sie ein kontextbezogenes Demo-Video zu Divi

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]

Eine der exklusiven Zielseiten, die viele ihren Abonnenten während des Cyber ​​Monday-Zeitraums zur Verfügung stellen, ist die hervorragende Zielseite der Softwareversionen. Dieses Layout bietet großartige Illustrationen und die einzigartige Verwendung von Abschnitts-Separatoren, die die Besucher in Erstaunen versetzen.

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 Zielseite von Cyber ​​Monday vertraut machen, die Sie erhalten, wenn Sie ein neues Elegant Themes-Mitglied werden, Ihr bestehendes Konto aktualisieren oder ein lebenslanges Mitglied sind. bei uns. Wenn Sie schon 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 Schaltfläche unten verwenden, um zu kaufen oder ein Upgrade durchzuführen, bevor sie den Rest unseres Tutorials ausführen können.

Schon ein lebenslanges Mitglied? 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.

Wenn Sie dieses Tutorial verwenden, zeigen wir Ihnen, wie Sie eine Videodemo erstellen, indem Sie auf eine Schaltfläche klicken. Das Video, das beim Klicken angezeigt wird, sieht auf Desktop-Bildschirmen gut aus und ist klein. Dies ist ein hervorragender Ansatz, wenn Sie kein Video direkt auf Ihrer Seite einfügen möchten, sondern lieber mit Besuchern interagieren möchten.

Übersicht

Sehen wir uns vor dem Einstieg in das Tutorial 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 in Ihrem WordPress-Website> Plugins> Add new> Suche nach 'Video PopUp'. Sobald Sie dieses Plugin gefunden haben, installieren Sie es. Wenn Sie fertig sind, müssen Sie das Plugin aktivieren.

video popup.jpg

Plugin Einstellungen

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

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]

Konfigurationsvideo popup.jpg

Fügen Sie eine neue Seite über die Startseite der Softwareversion hinzu

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

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

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 gepostete Zielseite herunter.

Hochgeladenes Layout divi.jpg

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

Wie Sie sehen, enthält die Seite bereits 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 Blurb-Modul hinzu.

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

Fügen Sie dem Inhaltsbereich ein Bild hinzu

Wenn Sie den Textbaustein hinzugefügt haben, fahren Sie fort und fügen Sie das Bild der Wiedergabeschaltfläche in den Inhaltsbereich Ihres Textbausteins ein, indem Sie auf "OK" 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

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]

wähle ein Bild aus divi.jpg

Fügen Sie dem Inhaltsbereich eine Kopie hinzu

Fügen Sie eine Kopie direkt unter dem Bild hinzu.

duplizieren Sie das Modul blurb.jpg

Texteinstellungen

Damit das Modul zur Präsentation passt, aktivieren wir die Ausrichtung des zentralen Textes in den Textparametern des Moduls.

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 in den Texteditor

Um das Klick-Popup-Fenster zu erstellen, müssen wir 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

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]

Fügen Sie einen Link zu allen Inhalten hinzu

Verknüpfen Sie Ihren Inhaltsbereich mit dem Popup-Fenster, indem Sie dem Bild und der Kopie einen Link hinzufügen. Stellen Sie sicher, dass Sie die URL des Links durch Ihre 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 ein Textmodul erstellt haben, das genau wie das Blurb-Modul aussieht, können wir das vorherige Blurb-Modul entfernen und fertig! Sie können diese Methode auf jede Art von Layout anwenden, das Sie verwenden. Für die Zielseite der Softwareversion ist sie jedoch von großem Wert.

Löschen Sie das nicht verwendete Klappentextmodul divi.jpg

Abschließende Gedanken

Wie Sie sehen können, ist das Hinzufügen eines Popup-Fensters auf Divi mithilfe des Video-Popup-Plugins ganz einfach. Auf diese Weise können Sie Videos in Ihrem Blog präsentieren, ohne sie automatisch in den Inhalt integrieren zu müssen.

Dieser Artikel enthält Kommentare 0

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
5 Aktien
Aktie4
tweet
Registrieren1