So erstellen Sie mit Divi einen Sticky Video Slider
Veröffentlicht: 2022-03-07Sticky Video Sliders sind eine effektive Möglichkeit, eine übersichtliche Sammlung von Videos im Vordergrund zu halten, während Benutzer durch den Inhalt einer Seite scrollen. Dies würde sich hervorragend für Tutorials oder Rezepte eignen, die gleichzeitig von Video- und schriftlichen Anweisungen profitieren würden. In diesem Tutorial zeigen wir Ihnen, wie einfach es ist, mit Divi einen Sticky-Video-Slider zu erstellen. Und für unseren beispielhaften Anwendungsfall fügen wir einer Rezeptseite einen klebrigen Video-Slider hinzu.
Tauchen wir ein!
Abonnieren Sie unseren Youtube-Kanal
Vorgeschmack
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.
Laden Sie das Layout KOSTENLOS herunter
Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugriff auf den Download zu erhalten, müssen Sie sich mit dem unten stehenden Formular in unsere Divi Daily-E-Mail-Liste eintragen. 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 unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf „Herunterladen“. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Kostenlos herunterladen
Melden Sie sich für den Divi-Newsletter an und wir senden Ihnen per E-Mail eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer erstaunlicher und kostenloser Divi-Ressourcen, Tipps und Tricks. Folgen Sie uns und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.
Sie haben sich erfolgreich angemeldet. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi-Layoutpakete zu erhalten!
Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.
Klicken Sie auf die Schaltfläche Importieren.
Wählen Sie im Portabilitäts-Popup die Registerkarte „Importieren“ und wählen Sie die Download-Datei von Ihrem Computer aus.
Klicken Sie dann auf die Importschaltfläche.
Anschließend ist das Abschnittslayout in Divi Builder verfügbar.
Kommen wir zum Tutorial, sollen wir?
Erstellen eines Sticky Video Slider mit Divi
Erstellen Sie eine neue Seite mit einem vorgefertigten Layout
Beginnen wir mit unserem Tutorial, indem wir eine neue Seite mit einem unserer vorgefertigten Layouts zum Laufen bringen.
So geht's:
- Erstellen Sie eine neue Seite und geben Sie ihr einen Titel
- Klicken Sie hier, um den Divi Builder (am Frontend) zu verwenden
- Wählen Sie diese Option, um ein vorgefertigtes Layout zu verwenden
- Suchen Sie nach dem Rezeptseitenlayout für Ernährungsberater und wählen Sie es aus.
- Um das Layout auf die Seite zu laden, klicken Sie einfach auf die Schaltfläche „Dieses Layout verwenden“.
Sobald das Layout auf die Seite geladen wurde, können Sie den Sticky-Video-Slider zur Seite hinzufügen.
Ändern des Layouts für den Sticky Video Slider
In diesem Beispiel fügen wir der linken Spalte einer zweispaltigen Zeile einen Sticky-Video-Schieberegler hinzu. Dadurch können wir die Videos im Blick behalten, während der Benutzer scrollt, um den Inhalt in der rechten Spalte vorzubereiten. Diese Art der Einrichtung eignet sich hervorragend für Rezepte und Tutorials, die von Video- und schriftlichen Anweisungen profitieren würden.
Um das Layout zu ändern, suchen Sie zuerst die zweite Zeile im zweiten Abschnitt der Seite, die die „Zutaten“ und „Anweisungen“ enthält. Verschieben Sie dann die beiden Textbausteine von der linken Spalte nach oben in die rechte Spalte und lassen Sie die linke Spalte leer.
Erstellen des Sticky Video Slider-Moduls
Fügen Sie in der leeren linken Spalte derselben Zeile ein neues Video-Slider-Modul hinzu.
Das Scheinvideo zeigt eines unserer YouTube-Videos mit einer URL-Einbettung. So können Sie von Drittanbietern gehostete Videos zu Ihrem Video-Slider hinzufügen. Um das Video zu ändern, öffnen Sie die Einstellungen des Videoelements.
Wählen Sie dann die Aktion „Aus URL einfügen“ aus. Fügen Sie die neue URL in das Eingabefeld ein und klicken Sie auf die Schaltfläche „In Beitrag einfügen“.
Um dem Schieberegler weitere Videos hinzuzufügen, können Sie auf das graue Plus-Symbol „Neues Video hinzufügen“ klicken oder einfach das vorhandene Video duplizieren. Lassen Sie uns für dieses Beispiel das vorhandene Video zweimal duplizieren, um insgesamt 3 Videos im Schieberegler zu erstellen.
Aktualisieren Sie auf der Registerkarte „Design“ die Überlagerungsfarbe der Miniaturansicht, damit sie mit dem Layout übereinstimmt.
- Miniaturbild-Überlagerungsfarbe: rgba(53,55,82,0,55)
Den Video-Slider „klebrig“ machen
Um den Schieberegler „klebrig“ zu machen, gehen Sie auf die Registerkarte „Erweitert“ und aktualisieren Sie Folgendes:
- Sticky-Position: Oben kleben (Desktop), Nicht kleben (Tablet und Telefon)
- Sticky Top Offset: 30px (Desktop), 0px (Tablet und Telefon)
- Untere Sticky-Grenze: Zeile
Dadurch wird sichergestellt, dass der Video-Schieberegler am oberen Rand des Browserfensters bleibt, wenn er beim Herunterscrollen der Seite den oberen Rand des Browsers erreicht. Dann hört es auf, klebrig zu sein, wenn es das untere Ende der Reihe erreicht.
Ergebnis
Problem mit YouTube-Videos/Einbettungen unter Verwendung der Bildüberlagerungen im Hauptvideo
Wenn Sie eine YouTube-URL verwenden, um mehrere Videos in den Video-Slider einzubetten, ist es am besten, die integrierte Option von Divi zum „Anzeigen von Bildüberlagerungen im Hauptvideo“ nicht zu verwenden. Dadurch wird das Video-Audio von Anfang an im Sticky-Zustand automatisch abgespielt, wodurch doppeltes Audio in unterschiedlichen Intervallen abgespielt wird.
Dies gilt nicht für selbst gehostete Videos im mp4- oder webm-Dateiformat. Sie können Bildüberlagerungen auf dem Hauptvideo für selbst gehostete Videos anzeigen. Wenn Sie also das Overlay-Bild und das Wiedergabesymbol von Divi mit dem Divi-Videomodul verwenden möchten, sollten Sie stattdessen MP4- und Webm-Videodateien/URLs hinzufügen.
Sie können Ihren Youtube-Videos im Video-Slider jedoch weiterhin benutzerdefinierte Bildüberlagerungen hinzufügen. Sie werden weiterhin in den Thumbnail-Steuerelementen unter dem Hauptvideo angezeigt.
Profi-Tipp: Erstellen Sie Miniaturbilder für jeden Schritt in einer Videosequenz
Wenn Sie über das entsprechende Know-how verfügen, können Sie für jedes Video ganz einfach ein einfaches Miniaturbild erstellen, um es nach Schritten oder Zahlen zu organisieren.
Beispiel Overlay-Bild
Hier ist ein Beispiel dafür, wie das auf dem Schieberegler aussehen würde.
Verwenden von selbst gehosteten Videos im Slider
Wenn Sie selbst gehostete Videos im Slider verwenden möchten, öffnen Sie die Einstellungen des Videos.
Klicken Sie auf Video hinzufügen.
Wählen Sie die Datei aus Ihrer Bibliothek aus oder fügen Sie dem Video eine Hosting-URL eines Drittanbieters hinzu.
Es ist immer eine gute Idee, jedem Video eine MP4- und eine Webm-Datei hinzuzufügen. Zusammen bieten diese beiden Unterstützung für die meisten Webbrowser, einschließlich Mobilgeräte.
Vergessen Sie nicht, dass Sie eine Bildüberlagerung hinzufügen können, die als hübsches Thumbnail für Ihr Video dient.
Unter der Overlay-Option können Sie sogar festlegen, dass Bild-Overlays im Hauptvideo angezeigt werden.
Endgültige Ergebnisse
Hier ist ein weiterer Blick auf unsere klebrigen Video-Slider in Aktion.
Abschließende Gedanken
Das Erstellen eines Sticky-Video-Slider-Moduls ist ziemlich einfach, wenn Sie mit den integrierten Sticky-Optionen von Divi vertraut sind. Und das Ergebnis kann einige großartige Anwendungen haben. Für mehr wäre es hilfreich zu verstehen, wie Videos auch in Divi funktionieren.
Sehen Sie sich auch an, wie Sie ein Sticky-Video mit einem Ein-/Ausblenden-Schalter erstellen können.
Ich freue mich darauf, von dir in den Kommentaren zu hören.
Beifall!