Springe zum Hauptinhalt

Divi Tutorial: Hinzufügen eines Videomoduls zu Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.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]

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 zunächst in Divi Builder springen. Sobald das 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.

Divi Builder

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.

Videomodul Divi.png

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 , Konzeption et fortgeschritten .

Anwendungsfallbeispiel: Hinzufügen eines Videos zu Ihrer Zielseite

Das Hinzufügen eines Videos zu Ihrer Zielseite ist eine hervorragende Möglichkeit, Ihre Produkte zu bewerben und die Conversions zu steigern. In diesem Beispiel zeige ich Ihnen, wie Sie mit dem Video-Mod Videos zu Ihrer Zielseite hinzufügen können. Ich habe einen roten Kreis eingefügt, wohin das Video gehen soll.

Erstellen eines Videos auf divi exemple.jpg

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.

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]

Verwenden Sie eine benutzerdefinierte Breite divi.png

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.

füge ein Video auf divi.png hinzu

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.

füge ein Overlay divi video.jpg hinzu

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

Bearbeiten Sie das Player-Symbol Divi Video.jpg

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]

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

endgültiges Design mit dem Inhalt video.jpg

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

Parametermodul divi.png

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

Abschnitt Design divi.png Design

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

video module advanced section.png

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]

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.

Andere Divi Tutorials

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
16 Aktien
Aktie8
tweet3
Registrieren5