Jak utworzyć lepki suwak wideo za pomocą Divi

Sticky Video Sliders to skuteczny sposób na utrzymanie zwięzłej kolekcji filmów na pierwszym planie, podczas gdy użytkownicy przewijają zawartość strony. Byłoby to świetne w przypadku samouczków lub przepisów, które mogłyby jednocześnie korzystać z wideo i instrukcji pisemnych. W tym samouczku pokażemy, jak łatwo jest utworzyć lepki suwak wideo za pomocą Divi. W naszym przykładowym przypadku użycia dodamy przyklejony suwak wideo do strony z przepisami.

Zanurzmy się!

Subskrybuj nasz kanał YouTube

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

ŚCIĄGNIJ

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenoszenia wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Tworzenie lepkiego suwaka wideo za pomocą Divi

Utwórz nową stronę z gotowym układem

Zacznijmy od naszego samouczka, uruchamiając nową stronę z jednym z naszych gotowych układów.

Oto jak to zrobić:

1. Utwórz nową stronę i nadaj jej tytuł
2. Kliknij, aby użyć Divi Builder (z przodu)
3. Wybierz, aby użyć gotowego układu
4. Wyszukaj i wybierz układ strony z przepisami dietetycznymi.
5. Aby załadować układ na stronę, po prostu kliknij przycisk „Użyj tego układu”.

Po załadowaniu układu na stronę możesz dodać przyklejony suwak wideo do strony.

Modyfikowanie układu Sticky Video Slider

W tym przykładzie dodamy przyklejony suwak wideo do lewej kolumny w rzędzie dwóch kolumn. Umożliwi nam to przeglądanie filmów, podczas gdy użytkownik przewija, aby przygotować treść w prawej kolumnie. Ten rodzaj konfiguracji sprawdziłby się doskonale w przypadku przepisów i samouczków, które skorzystałyby z filmów i pisemnych instrukcji.

Aby zmodyfikować układ, najpierw znajdź drugi wiersz w drugiej sekcji strony, zawierający „Składniki” i „Instrukcje”. Następnie przenieś dwa moduły tekstowe z lewej kolumny na górę prawej kolumny, pozostawiając lewą kolumnę pustą.

Tworzenie modułu Sticky Video Slider

W pustej lewej kolumnie tego samego wiersza dodaj nowy moduł suwaka wideo.

Makieta wideo pokaże jeden z naszych filmów z YouTube, używając osadzania adresu URL. W ten sposób możesz dodać filmy hostowane przez osoby trzecie do suwaka wideo. Aby zmienić wideo, otwórz ustawienia elementu wideo.

Następnie wybierz akcję „Wstaw z adresu URL”. Wklej nowy adres URL w polu wprowadzania i kliknij przycisk "Wstaw do posta".

Aby dodać więcej filmów do suwaka, możesz kliknąć szarą ikonę plusa „Dodaj nowe wideo” lub po prostu zduplikować istniejący film. W tym przykładzie dwukrotnie zduplikujmy istniejący film, aby w suwaku były łącznie 3 filmy.

Na karcie Projekt zaktualizuj kolor nakładki miniatury, aby pasował do układu.

• Kolor nakładki miniatury: rgba (53,55,82,0,55)

Sprawianie, że suwak wideo jest „przyklejony”

Aby suwak był „przyklejony”, przejdź pod zakładkę Zaawansowane i zaktualizuj następujące elementy:

• Sticky Position: Stick to Top (komputer), nie Stick (tablet i telefon)
• Sticky Top Offset: 30px (komputer), 0px (tablet i telefon)
• Dolny limit lepkości: wiersz

Dzięki temu suwak wideo będzie przyklejał się do górnej części okna przeglądarki, gdy osiągnie górną część przeglądarki podczas przewijania strony. Wtedy przestanie się kleić, gdy osiągnie koniec rzędu.

Wynik

Problem z filmami/umieszczonymi filmami z YouTube przy użyciu nakładek graficznych w głównym filmie

Jeśli używasz adresu URL YouTube do osadzania wielu filmów w suwaku wideo, najlepiej nie używać wbudowanej opcji Divi „Pokaż nakładki obrazów na głównym filmie”. Spowoduje to automatyczne odtwarzanie dźwięku wideo od początku w stanie przyklejenia, co spowoduje zduplikowane odtwarzanie dźwięku w różnych odstępach czasu.

Nie dotyczy to samodzielnych filmów wideo w formacie mp4 lub webm. Możesz wyświetlać nakładki obrazów na głównym filmie w przypadku filmów hostowanych samodzielnie. Jeśli więc chcesz użyć obrazu nakładki Divi i ikony odtwarzania z modułem wideo Divi, powinieneś zamiast tego dodać pliki wideo / adresy URL MP4 i Webm.

To powiedziawszy, nadal możesz dodawać niestandardowe nakładki obrazów do swoich filmów z YouTube za pomocą suwaka wideo. Nadal będą wyświetlane w kontrolkach miniatur pod głównym filmem.

Wskazówka dla profesjonalistów: twórz miniatury dla każdego kroku w sekwencji filmów

Jeśli masz wiedzę, możesz łatwo utworzyć prostą miniaturę dla każdego filmu, aby uporządkować je według kroków lub liczb.

przykładowy obraz nakładki

Oto przykład tego, jak wyglądałoby to na suwaku.

Korzystanie z samodzielnie hostowanych filmów wideo w suwaku

Jeśli chcesz używać samodzielnie hostowanych filmów wideo w suwaku, otwórz ustawienia wideo.

Kliknij Dodaj wideo.

Wybierz plik ze swojej biblioteki lub dodaj do filmu adres URL hostingu innej firmy.

Zawsze dobrze jest dodać plik MP4 i plik Webm do każdego filmu. Łącznie te dwa zapewniają obsługę większości przeglądarek internetowych, w tym urządzeń mobilnych.

Nie zapomnij, że możesz dodać nakładkę graficzną, która posłuży jako ładna miniatura do Twojego filmu.

W opcji Nakładka możesz nawet wybrać wyświetlanie nakładek obrazów na głównym filmie.

Ostateczne rezultaty

Oto kolejne spojrzenie na nasze przyklejone suwaki wideo w akcji.

Końcowe przemyślenia

Tworzenie lepkiego modułu suwaka wideo jest dość proste, jeśli znasz wbudowane opcje przyklejania Divi. A wynik może mieć świetne zastosowania. Aby uzyskać więcej informacji, pomogłoby to również zrozumieć, jak działają filmy w Divi.

Sprawdź także, jak możesz utworzyć przyklejony film za pomocą przełącznika ukryj/pokaż.

Czekam na kontakt z Państwem w komentarzach.

Dzięki!