Divi Tutorial: Hinzufügen eines Videomoduls zu Divi

Das Hinzufügen von Videos zu Ihrer Seite in Divi ist einfach, wenn Sie das Videomodul verwenden. Mit diesem Modul können Sie Videos aus beliebigen Quellen einbetten, aber auch das Miniaturbild und die Wiedergabetaste anpassen.

So fügen Sie Ihrer Seite ein Videomodul hinzu

Bevor Sie Ihrer Seite ein Videomodul hinzufügen können, müssen Sie zuerst zu Divi Builder wechseln. Einmal die Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Nachdem Sie Visual Builder eingegeben haben, können Sie auf das graue Pluszeichen klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Suchen Sie den Video-Mod in der Liste der Mods und klicken Sie darauf, um ihn Ihrer Seite hinzuzufügen. Die Mod-Liste ist durchsuchbar, dh Sie können auch das Wort "Video" eingeben und dann auf die Eingabetaste klicken, um den Video-Mod automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .

Anwendungsfallbeispiel: Hinzufügen eines Videos zu Ihrer Zielseite

Das Hinzufügen eines Videos zu Ihrer Landingpage ist eine großartige Möglichkeit fördern Ihre Produkte und steigern Sie die Conversions. In diesem Beispiel zeige ich Ihnen, wie Sie mit dem Videomodul ein Video zu Ihrer Landingpage hinzufügen können. Ich habe dort, wo das Video hingehört, einen roten Kreis eingefügt.

Mit Visual Builder füge ich einen neuen Abschnitt mit einer Zeile voller Breite (1 Spalte) hinzu. In den Zeileneinstellungen wähle ich auf der Registerkarte Design die Option "Benutzerdefinierte Breite verwenden". Für die angezeigte Option Benutzerdefinierte Breite gebe ich eine benutzerdefinierte Breite von 767px ein. Dadurch wird sichergestellt, dass das Videomodul, das ich in dieser Zeile hinzufügen werde, diese Breite nicht überschreitet und bei größeren Bildschirmen zu groß wird.

Dann füge ich das Videomodul der Zeile hinzu. Auf der Registerkarte "Inhalt" der Einstellung "Videomodul" gebe ich die Video-URL des Videos ein, das ich auf meiner Zielseite einbetten möchte. Ich verwende für dieses Beispiel die URL eines YouTube-Videos.

Dann füge ich eine Bildüberlagerungs-URL für mein Video hinzu, indem ich auf die Schaltfläche "Video generieren" klicke. Dadurch wird automatisch ein Frame aus dem Video gezogen, um als Überlagerung mit einem neuen benutzerdefinierten Videosymbol zu dienen.

Auf der Registerkarte "Design" ändere ich die Farbe des Wiedergabesymbols entsprechend meiner Zielseite.

Jetzt habe ich ein Video für meine Zielseite, das sauber aussieht und zu meinem Design passt.

Nachdem Sie den Video-Mod in Aktion gesehen haben, tauchen Sie in den folgenden Abschnitten in alle Einstellungen ein. Wir haben einen detaillierten Überblick über die einzelnen Registerkarten der Moduleinstellungen sowie eine Erläuterung der jeweiligen Funktionen bereitgestellt.

Inhaltsoptionen

URL des Videos

Mit dem Divi Video-Modul können Sie Videos mit zwei verschiedenen Methoden hinzufügen. Sie können Ihre eigene Videodatei von Ihrem Computer herunterladen, indem Sie auf die Schaltfläche „Video herunterladen“ klicken und die gewünschte Datei auswählen, oder Sie können eine beliebige Video-URL von einer Videoquelle eines Drittanbieters wie Youtube eingeben oder Vimeo. Kopieren Sie einfach die URL aus Ihrem Browser und fügen Sie sie in das Video-URL-Feld ein. Divi kümmert sich um den Rest!

Bildüberlagerungs-URL

Wenn Sie ein benutzerdefiniertes Miniaturbild für Videos festlegen möchten, das mit einer benutzerdefinierten Wiedergabetaste auf der Standardvideooberfläche platziert wird, um ein schärferes und stilisierteres Erscheinungsbild zu erzielen, können Sie dies über das Feld Bildüberlagerung auswählen. Mit diesem Steuerelement können Sie entweder Ihr eigenes personalisiertes Bild hochladen oder Divi automatisch eines aus der URL Ihres Videos generieren lassen. Die meisten Videoanbieter wie Youtube und Vimeo unterstützen diese Option. Klicken Sie einfach auf die Schaltfläche "Video generieren" und lassen Sie Divi den Rest erledigen!

Administratorkennzeichnung

Standardmäßig wird Ihr Videomodul im Generator mit der Bezeichnung "Video" angezeigt. Mit dem Admin-Tag können Sie dieses Tag zur einfachen Identifizierung ändern.

Design-Optionen

Symbolfarbe ändern

Wenn Sie eine Bildüberlagerung für Ihren Video-Pod festlegen, enthält das angezeigte Video ein Wiedergabesymbol im Video. Sie können die Farbe dieses Symbols hier so festlegen, dass sie mit den Farben auf Ihrer Seite übereinstimmt.

Optionen Avancées

CSS-ID und Klassen

Dies kann verwendet werden, um Ihrem Modul eine CSS-ID oder eine Klasse hinzuzufügen. Diese können dann in Ihrem Stylesheet oder im Feld Benutzerdefiniertes CSS für Themenoptionen verwendet werden, um einen benutzerdefinierten Stil auf das Modul anzuwenden. CSS-IDs können auch mit Ankerlinks versehen werden, um auf bestimmte Bereiche Ihrer Seite zu verlinken.

Benutzerdefiniertes CSS

Hier können Sie Ihrem Videomodul benutzerdefiniertes CSS hinzufügen.

Sichtbarkeit

Wenn Sie Ihr Videomodul auf einigen Geräten ausblenden möchten, können Sie die Geräte auswählen, auf denen Sie das Videomodul deaktivieren möchten.

[vc_row center_row=“yes“][vc_column width=“1/2″][vcex_button target=“blank“ layout=“expanded“ align=“center“ font_family=“Raleway“ font_weight=“700″ style=“flat“ custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI THEMA HERUNTERLADEN [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=“https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials“ target=“blank“ layout=“expanded“ align=“center“ font_family = „Raleway“ font_weight=“700″ style=“flat“ custom_background=“#c4226e“ custom_hover_background=“#8d184f“ custom_color=“#ffffff“ custom_hover_color=“#ffffff“ icon_right=“fa fa-download“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Divi Tutorial: Hinzufügen eines Videomoduls zu Divi

So fügen Sie Ihrer Seite ein Videomodul hinzu

Anwendungsfallbeispiel: Hinzufügen eines Videos zu Ihrer Zielseite