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 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]

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 einer beliebigen Quelle einbinden, 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 zu Divi Builder wechseln. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. 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 aufgerufen haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Videomodul Divi.png

Suchen Sie das Videomodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "Video" eingeben und dann auf die Eingabetaste klicken, um das Videomodul zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Hinzufügen eines Videos zu Ihrer Zielseite

Das Hinzufügen eines Videos zu Ihrer Zielseite ist eine hervorragende Möglichkeit, für Ihre Produkte zu werben und die Conversions zu steigern. In diesem Beispiel zeige ich Ihnen, wie Sie mit dem Videomodul ein Video zu Ihrer Zielseite hinzufügen können. Ich habe einen roten Kreis eingefügt, wo das Video hingehen 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 Linieneinstellungen wähle ich auf der Registerkarte Entwurf die Option "Benutzerdefinierte Breite verwenden". Für die angezeigte Option Benutzerdefinierte Breite gebe ich eine benutzerdefinierte Breite von 767px ein. Dies bedeutet, dass das Videomodul, das ich in dieser Zeile hinzufügen werde, diese Breite nicht überschreitet und auf größeren Bildschirmen zu groß wird.

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Verwenden Sie eine benutzerdefinierte Breite divi.png

Dann füge ich das Videomodul zur 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

Anschließend füge ich eine Bild-Overlay-URL für mein Video hinzu, indem ich auf die Schaltfläche "Video generieren" klicke. Dadurch wird automatisch ein Bild des Videos als Overlay mit einem neuen benutzerdefinierten Videosymbol abgerufen.

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

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

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]

Nachdem Sie das Videomodul in Aktion gesehen haben, gehen Sie in den folgenden Abschnitten auf alle Einstellungen ein. Wir haben einen detaillierten Überblick darüber gegeben, was Sie auf den einzelnen Registerkarten der Modulparameter finden, und eine Erläuterung zu den jeweiligen Funktionen.

Inhaltsoptionen

Parametermodul divi.png

URL des Videos

Mit dem Divi Video-Modul können Sie Videos auf zwei verschiedene Arten 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 Ihres Browsers und fügen Sie sie in das URL-Feld des Videos ein. Den Rest erledigt Divi!

Bildüberlagerungs-URL

Wenn Sie eine Miniaturansicht eines benutzerdefinierten Videos festlegen möchten, das auf der Standardvideoschnittstelle mit einer benutzerdefinierten Wiedergabetaste platziert wird, um ein übersichtlicheres und stilisierteres Erscheinungsbild zu erhalten, können Sie dies über das Feld Bildüberlagerung tun. In diesem Feld können Sie entweder Ihr eigenes benutzerdefiniertes Bild hochladen oder Divi automatisch eines aus Ihrer Video-URL generieren lassen. Die meisten Videoanbieter wie Youtube und Vimeo unterstützen diese Option. Klicken Sie einfach auf "Video generieren" und lassen Sie Divi den Rest erledigen!

Administratorkennzeichnung

Standardmäßig wird Ihr Videomodul mit einem "Video" -Tag im Builder angezeigt. Auf der Registerkarte "Admin" können Sie dieses Tag zur einfachen Identifizierung ändern.

Design-Optionen

ändere die Farbe des Icons

Abschnitt Design divi.png Design

Wenn Sie eine Bildüberlagerung für Ihr Videomodul 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 Ihrer Seite übereinstimmt.

Optionen Avancées

video module advanced section.png

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]

CSS-ID und Klassen

Hiermit können Sie Ihrem Modul eine CSS-ID oder -Klasse hinzufügen. Diese können dann in Ihrem Stylesheet oder im Feld Benutzerdefinierte CSS-Designoptionen verwendet werden, um dem Modul einen benutzerdefinierten Stil zuzuweisen. CSS-IDs können auch mit Ankerlinks verknüpft werden, um auf bestimmte Bereiche Ihrer Seite zu verweisen.

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