So erstellen Sie die Click-Video-Komplettlösung von ET mit Divi

Das Teilen von Videovorschauen auf Ihrer Website kann die Interaktivität erhöhen und Besuchern helfen, Ihre Produkte und/oder Dienstleistungen besser und schneller zu verstehen. Jetzt haben wir auf der Elegant Themes-Website diesen Ansatz für uns übernommen und ein einfaches Video-Walkthrough-Design mit Klick erstellt, das es Benutzern ermöglicht, durch einige unserer beliebtesten Funktionen zu navigieren. Wir haben dieses Design in Divi neu erstellt und zeigen Ihnen heute, wie Sie es von Grund auf neu erstellen können. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Klick-Video-Walkthrough-Layout KOSTENLOS herunter

Um das kostenlose Klick-Video-Walkthrough-Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung!

Neuen regulären Abschnitt hinzufügen

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzuzufügen.

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und wenden Sie die folgenden Größeneinstellungen an:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Breite: 85vw (Desktop), 90% (Tablet & Telefon)
• Maximale Breite: 100%

Spalte 1 Einstellungen

Öffnen Sie als nächstes die Spalte 1 Einstellungen.

Abstand

Gehen Sie zu den Abstandseinstellungen und fügen Sie einige obere Abstände auf dem Desktop hinzu.

• Obere Polsterung: 5vw (Desktop), 0vw (Tablet & Telefon)

CSS-Klasse

Wechseln Sie zur Registerkarte "Erweitert" und fügen Sie eine CSS-Klasse hinzu. Später in diesem Beitrag werden wir diese CSS-Klasse verwenden, um einen Rastereffekt auf Tablets und Mobilgeräten zu erstellen.

• CSS-Klasse: item-responsive-grid

Blurb-Modul zu Spalte 1 hinzufügen

Titel hinzufügen

Beginnen wir mit dem Hinzufügen von Modulen! Für jedes anklickbare Element verwenden wir ein Blurb-Modul. Wir beginnen mit dem ersten und verwenden es für die verbleibenden Klickelemente. Fügen Sie in Spalte 1 ein neues Blurb-Modul hinzu und geben Sie einen Titel Ihrer Wahl ein.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Standardsymboleinstellungen

Fahren Sie mit dem Design fort und ändern Sie die Symboleinstellungen entsprechend:

• Symbolfarbe: #e8e9ea
• Symbolplatzierung: Links
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 2vw (Desktop), 4.5vw (Tablet), 7vw (Telefon)

Hover-Symboleinstellungen

Ändern Sie die Symbolfarbe beim Bewegen des Mauszeigers.

• Symbolfarbe: #b0c8ff

Einstellungen für Titeltext

Gehen Sie zu den Einstellungen für den Titeltext und nehmen Sie auch dort einige Änderungen vor.

• Titelschriftart: Lato
• Schriftstärke des Titels: Fett
• Titelschriftart: Großbuchstaben
• Titeltextgröße: 0,8 vw (Desktop), 1,7 vw (Tablet), 2,5 vw (Telefon)
• Höhe der Titelzeile: 2 vw (Desktop), 4,5 vw (Tablet), 7 vw (Telefon)

Standardabstand

Wir werden das Blurb-Modul mit einigen benutzerdefinierten Padding-Werten für verschiedene Bildschirmgrößen formen.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 0.5vw (Desktop), 1.5vw (Tablet & Telefon)
• Linke Polsterung: 1,2 vw (Desktop & Tablet), 5 vw (Telefon)
• Rechte Polsterung: 1,2 vw (Desktop & Tablet), 5 vw (Telefon)

Hover-Abstand

Erstellen Sie einen Hervorhebungs-Hover-Effekt, indem Sie die Hover-Randwerte ändern.

• Linker Rand: -0.5vw
• Rechter Rand: -0.5vw

Grenze

Fügen Sie auch einige abgerundete Ecken hinzu.

Standard-Box-Schatten

Zusammen mit einem subtilen Kastenschatten.

• Vertikale Position des Kastenschattens: 10px
• Stärke der Box-Schattenunschärfe: 70px
• Schattenfarbe: rgba(0,0,0,0.11)

Hoverbox-Schatten

Ändern Sie die Farbe des Feldschattens beim Bewegen des Mauszeigers.

• Schattenfarbe: rgba(103,151,255,0.22)

CSS-ID und -Klasse

Gehen Sie zu guter Letzt zum erweiterten Tab des Blurb-Moduls und fügen Sie eine CSS-ID und eine Klasse hinzu.

• CSS-ID: video-walkthrough-item-1
• CSS-Klasse: video-item-cursor

Blurb-Modul dreimal klonen

Sobald Sie das erste Blurb-Modul abgeschlossen haben, können Sie es dreimal klonen.

Inhalt ändern

Ändern Sie den Inhalt jedes duplizierten Blurb-Moduls.

Alle doppelten CSS-IDs des Blurb-Moduls ändern

Zusammen mit den CSS-IDs.

• 1) Visuell erstellen: Video-Walkthrough-Item-1
• 2) Effekte: Video-Walkthrough-Item-2
• 3) Formteiler: Video-Walkthrough-Item-3
• 4) Massenbearbeitung: Video-Walkthrough-Item-4

Spalte 1 wiederverwenden

Spalte entfernen 3

Nachdem Sie die erste Spalte ausgefüllt haben, können Sie die Zeileneinstellungen öffnen und die dritte Spalte entfernen.

Spalte 1 klonen und unten platzieren

Klonen Sie die erste Spalte (die die Blurb-Module enthält) und platzieren Sie die duplizierte Spalte unten.

Spaltenstruktur zurück ändern

Ändern Sie die Spaltenstruktur wieder in diejenige, die zu Beginn dieses Tutorials ausgewählt wurde.

Alle Inhalte des Blurb-Moduls von Spalte 3 ändern

Ändern Sie den Blurb-Modultitel jedes Duplikats in Spalte 3.

Alle CSS-IDs des Blurb-Moduls für Spalte 3 ändern

Zusammen mit den CSS-IDs.

• 5) Layoutbibliothek: Video-Walkthrough-Item-5
• 6) Transformiert: Video-Walkthrough-Item-6
• 7) Hover-Zustände: Video-Walkthrough-Item-7
• 8) Suchen & Ersetzen: Video-Walkthrough-Item-8

Textmodul zu Spalte 2 hinzufügen

Inhaltsbox leer lassen

Zeit, die verschiedenen Videovorschauen hinzuzufügen! Es gibt zwei Möglichkeiten, sich ihm zu nähern; mit einem Videomodul oder einem Textmodul. Das Videomodul erfordert, dass Besucher auf Play drücken. Bei Verwendung eines Textmoduls mit Videohintergrund wird das Video hingegen automatisch, aber ohne Ton abgespielt. Für dieses Tutorial verwenden wir ein Textmodul, können aber stattdessen auch ein Videomodul verwenden. Stellen Sie sicher, dass das Textmodul-Inhaltsfeld leer bleibt.

Videohintergrund

Gehen Sie zu den Hintergrundeinstellungen und laden Sie ein Video Ihrer Wahl hoch.

• Video anhalten, wenn es nicht angezeigt wird: Ja

Größe

Wechseln Sie zum Design-Tab und fügen Sie '100%' zur Breite hinzu.

• Breite: 100%

Abstand

Als Nächstes lassen wir den Videohintergrund durchscheinen, indem wir einige benutzerdefinierte obere und untere Padding-Werte für verschiedene Bildschirmgrößen hinzufügen. Hinweis: Die von Ihnen hinzugefügten Werte müssen an den Dimensionssatz Ihres Videos angepasst werden.

• Obere Polsterung: 15vw (Desktop), 24vw (Tablet), 26vw (Telefon)
• Untere Polsterung: 15vw (Desktop), 24vw (Tablet), 26vw (Telefon)

Grenze

Fahren Sie fort, indem Sie '10px' zu jeder der Ecken hinzufügen.

Box Schatten

Zusammen mit einem subtilen Kastenschatten.

• Stärke der Box-Schattenunschärfe: 30px
• Stärke der Box-Schattenausbreitung: -5px
• Schattenfarbe: rgba(0,0,0,0.11)

CSS-ID

Fügen Sie zu guter Letzt eine CSS-ID hinzu.

• CSS-ID: video-walkthrough-1

Textmodul 7 Mal klonen

Nachdem Sie das Textmodul fertiggestellt haben, können Sie es sieben Mal klonen (einmal für jedes Blurb-Modul).

Alle doppelten Textmodul-Videohintergründe ändern

Laden Sie für jedes der Duplikate einen anderen Videohintergrund hoch.

Alle doppelten Textmodul-CSS-IDs ändern und CSS-Klasse zu allen doppelten Textmodulen hinzufügen

Ändern Sie auch die CSS-IDs. Stellen Sie sicher, dass Sie jedes Textmodul mit dem richtigen Blurb-Modul verbinden, indem Sie dieselbe Nummer am Ende der CSS-ID verwenden. Wir verstecken auch jedes Textmodul außer dem ursprünglichen Textmodul mithilfe einer CSS-Klasse.

• Textmodul 1: Video-Walkthrough-1
• Textmodul 2: Video-Walkthrough-2
• Textmodul 3: Video-Walkthrough-3
• Textmodul 4: Video-Walkthrough-4
• Textmodul 5: Video-Walkthrough-5
• Textmodul 6: Video-Walkthrough-6
• Textmodul 7: Video-Walkthrough-7
• Textmodul 8: Video-Walkthrough-8
• CSS-Klasse: video-not-first

Codemodul Nr. 1 zu Spalte 1 hinzufügen

Sobald Sie die zweite Zeile ausgefüllt haben, können Sie mit dem Hinzufügen des Codes beginnen. Damit die Klickfunktion funktioniert, verwenden wir CSS- und JQuery-Code. Wir platzieren den Code in zwei separaten Codemodulen. Beginnen Sie, indem Sie das erste Codemodul zu Spalte 1 hinzufügen.

CSS-Code der Seite einfügen

Fügen Sie die folgenden CSS-Codezeilen hinzu:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

Codemodul #2 zu Spalte 3 hinzufügen

Fahren Sie fort, indem Sie der dritten Spalte ein weiteres Codemodul hinzufügen.

JQuery-Code für Klickfunktion einfügen

Geben Sie die folgenden Zeilen des JQuery-Codes ein:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

Nachdem Sie diesen Schritt ausgeführt haben, können Sie Ihre Seite speichern und den Visual Builder beenden!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie die Klick-Video-Komplettlösung von Elegant Themes mit Divi nachbilden. Wir haben Ihnen auch den JSON-Download kostenlos zur Verfügung gestellt! Fühlen Sie sich frei, dieses Design für jede Art von Website zu verwenden, die Sie erstellen. Es ist eine großartige Möglichkeit, Videos zu präsentieren und die Aufmerksamkeit Ihrer Besucher auf sich zu ziehen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.