Jak odtworzyć instruktaż wideo Click ET za pomocą Divi

Udostępnianie podglądów wideo w Twojej witrynie może zwiększyć interaktywność i pomóc odwiedzającym lepiej i szybciej zrozumieć Twoje produkty i/lub usługi. Teraz, w witrynie Elegant Themes, przyjęliśmy to podejście i stworzyliśmy prosty projekt instruktażu wideo, który umożliwia użytkownikom poruszanie się po niektórych z naszych najpopularniejszych funkcji. Odtworzyliśmy ten projekt w Divi, a dzisiaj pokażemy Ci, jak odtworzyć go od zera. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ instrukcji wideo Click ZA DARMO

Aby położyć swoje ręce na układzie przewodnika wideo z bezpłatnym kliknięciem, 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.

POBIERANIE

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!

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać!

Dodaj nową zwykłą sekcję

Zacznij od dodania nowej zwykłej sekcji do strony, nad którą pracujesz.

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zastosuj następujące ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Szerokość: 85vw (komputer stacjonarny), 90% (tablet i telefon)
• Maksymalna szerokość: 100%

Ustawienia kolumny 1

Otwórz następnie ustawienia kolumny 1.

Rozstaw

Przejdź do ustawień odstępów i dodaj górną wyściółkę na pulpicie.

• Górna wyściółka: 5vw (komputer stacjonarny), 0vw (tablet i telefon)

Klasa CSS

Przejdź do zakładki zaawansowane i dodaj klasę CSS. W dalszej części postu użyjemy tej klasy CSS do stworzenia efektu siatki na tablecie i telefonie komórkowym.

• Klasa CSS: element-responsywny-grid

Dodaj moduł Blurb do kolumny 1

Dodaj tytuł

Zacznijmy dodawać moduły! Dla każdego elementu, który można kliknąć, użyjemy modułu Blurb. Zaczniemy od pierwszego i użyjemy go ponownie dla pozostałych elementów klikanych. Dodaj nowy moduł Blurb do kolumny 1 i wprowadź wybrany przez siebie tytuł.

Wybierz ikonę

Następnie wybierz ikonę.

Domyślne ustawienia ikon

Przejdź do projektu i odpowiednio zmień ustawienia ikon:

• Kolor ikony: #e8e9ea
• Umieszczenie ikony: po lewej
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 2vw (komputer), 4,5vw (tablet), 7vw (telefon)

Ustawienia ikony kursora

Zmodyfikuj kolor ikony po najechaniu myszą.

• Kolor ikony: #b0c8ff

Ustawienia tekstu tytułu

Przejdź do ustawień tekstu tytułu i tam również wprowadź pewne zmiany.

• Czcionka tytułu: Lato
• Grubość czcionki tytułu: pogrubiona
• Styl czcionki tytułu: wielkie litery
• Rozmiar tekstu tytułu: 0,8vw (komputer), 1,7vw (tablet), 2,5vw (telefon)
• Wysokość wiersza tytułu: 2vw (komputer), 4,5vw (tablet), 7vw (telefon)

Domyślne odstępy

Zamierzamy ukształtować moduł Blurb, używając niestandardowych wartości wypełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 0,5vw (komputer stacjonarny), 1,5vw (tablet i telefon)
• Lewa wyściółka: 1.2vw (komputer stacjonarny i tablet), 5vw (telefon)
• Prawa wyściółka: 1.2vw (komputer stacjonarny i tablet), 5vw (telefon)

Odstępy najechania

Utwórz efekt podświetlenia, modyfikując wartości marginesów aktywowania.

• Lewy margines: -0,5vw
• Prawy margines: -0,5vw

Granica

Dodaj również zaokrąglone rogi.

Domyślny cień pudełka

Wraz z subtelnym pudełkowym cieniem.

• Pozycja pionowa cienia pudełka: 10px
• Siła rozmycia cieni w pudełku: 70px
• Kolor cienia: rgba(0,0,0,0.11)

Wskaż cień pola

Zmień kolor cienia pola po najechaniu myszą.

• Kolor cienia: rgba (103.151.255.0.22)

Identyfikator i klasa CSS

Na koniec przejdź do zakładki zaawansowanej modułu Blurb i dodaj identyfikator CSS oraz klasę.

• Identyfikator CSS: wideo-poradnik-element-1
• Klasa CSS: video-item-cursor

Trzykrotne klonowanie modułu Blurb

Po ukończeniu pierwszego modułu Blurb możesz go sklonować trzy razy.

Zmień zawartość

Zmień zawartość każdego duplikatu Modułu Blurb.

Zmień wszystkie zduplikowane identyfikatory CSS modułu Blurb

Wraz z identyfikatorami CSS.

• 1) Buduj wizualnie: wideo-instrukcja-element-1
• 2) Efekty: wideo-instrukcja-element-2
• 3) Dzielniki kształtów: wideo-instrukcja-element-3
• 4) Edycja zbiorcza: wideo-instrukcja-element-4

Ponowne użycie kolumny 1

Usuń kolumnę 3

Po wypełnieniu pierwszej kolumny możesz otworzyć ustawienia wiersza i usunąć trzecią kolumnę.

Klonuj kolumnę 1 i umieść na dole

Sklonuj pierwszą kolumnę (zawierającą moduły Blurb) i umieść zduplikowaną kolumnę na dole.

Zmień strukturę tylnej kolumny

Zmień z powrotem strukturę kolumn na wybraną na początku tego samouczka.

Zmień całą zawartość modułu Blurb w kolumnie 3

Zmień tytuł modułu Blurb każdego duplikatu w kolumnie 3.

Zmień wszystkie identyfikatory CSS modułu Blurb w kolumnie 3

Wraz z identyfikatorami CSS.

• 5) Biblioteka układów: wideo-instrukcja-element-5
• 6) Transformacje: wideo-instrukcja-punkt-6
• 7) Stany najechania: wideo-instrukcja-punkt-7
• 8) Znajdź i zamień: wideo-poradnik-element-8

Dodaj moduł tekstowy do kolumny 2

Pozostaw puste pole zawartości

Czas zacząć dodawać różne podglądy wideo! Można do tego podejść na dwa sposoby; za pomocą modułu wideo lub modułu tekstowego. Moduł wideo wymaga od odwiedzających naciśnięcia przycisku odtwarzania. Z drugiej strony, używając modułu tekstowego z tłem wideo, odtwarza wideo automatycznie, ale bez dźwięku. W tym samouczku użyjemy modułu tekstowego, ale zamiast tego możesz użyć modułu wideo. Upewnij się, że pole zawartości modułu tekstowego pozostaje puste.

Tło wideo

Przejdź do ustawień tła i prześlij wybrany przez siebie film.

• Wstrzymaj wideo, gdy nie jest widoczne: Tak

Rozmiary

Przejdź do zakładki projektu i dodaj „100%” do szerokości.

• Szerokość: 100%

Rozstaw

Następnie umożliwimy prześwitywanie tła wideo, dodając niestandardowe wartości górnego i dolnego wypełnienia dla różnych rozmiarów ekranu. Uwaga: dodawane wartości muszą być dostosowane do zestawu wymiarów Twojego filmu.

• Górna wyściółka: 15vw (komputer stacjonarny), 24vw (tablet), 26vw (telefon)
• Dolna wyściółka: 15vw (komputer stacjonarny), 24vw (tablet), 26vw (telefon)

Granica

Kontynuuj, dodając „10px” do każdego z rogów.

Cień Pudełka

Wraz z subtelnym pudełkowym cieniem.

• Siła rozmycia cieni w pudełku: 30px
• Siła rozprzestrzeniania się cieni w pudełku: -5px
• Kolor cienia: rgba(0,0,0,0.11)

Identyfikator CSS

Na koniec dodaj identyfikator CSS.

• Identyfikator CSS: przewodnik wideo-1

Klonuj moduł tekstowy 7 razy

Po ukończeniu modułu tekstowego możesz go sklonować siedem razy (po jednym na każdy moduł Blurb).

Zmień wszystkie zduplikowane tła wideo modułu tekstowego

Prześlij inne tło wideo dla każdego z duplikatów.

Zmień identyfikatory CSS wszystkich zduplikowanych modułów tekstowych i dodaj klasę CSS do wszystkich zduplikowanych modułów tekstowych

Zmień też identyfikatory CSS. Upewnij się, że łączysz każdy moduł tekstowy z odpowiednim modułem Blurb, używając tego samego numeru na końcu identyfikatora CSS. Ukrywamy również każdy moduł tekstowy, oprócz oryginalnego modułu tekstowego, za pomocą klasy CSS.

• Moduł tekstowy 1: instruktaż wideo-1
• Moduł tekstowy 2: instruktaż wideo-2
• Moduł tekstowy 3: instruktaż wideo-3
• Moduł tekstowy 4: instruktaż wideo-4
• Moduł tekstowy 5: instruktaż wideo-5
• Moduł tekstowy 6: instruktaż wideo-6
• Moduł tekstowy 7: instruktaż wideo-7
• Moduł tekstowy 8: instruktaż wideo-8
• Klasa CSS: wideo-nie-pierwsze

Dodaj moduł kodu nr 1 do kolumny 1

Po wypełnieniu drugiego wiersza nadszedł czas, aby rozpocząć dodawanie kodu. Aby funkcja kliknięcia działała, użyjemy kodu CSS i JQuery. Umieścimy kod w dwóch oddzielnych modułach kodu. Zacznij od dodania pierwszego modułu kodu do kolumny 1.

Wstaw kod CSS strony

Dodaj następujące wiersze kodu CSS:

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

Dodaj moduł kodu nr 2 do kolumny 3

Kontynuuj, dodając kolejny moduł kodu do trzeciej kolumny.

Wstaw funkcję kliknięcia kodu JQuery

Wprowadź następujące wiersze kodu JQuery:

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

Po wykonaniu tego kroku możesz zapisać swoją stronę i wyjść z programu Visual Builder!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak odtworzyć przewodnik wideo po kliknięciu Elegant Themes za pomocą Divi. Udostępniliśmy Ci również pobieranie JSON za darmo! Zachęcamy do wykorzystania tego projektu dla każdego rodzaju tworzonej strony internetowej. To świetny sposób na zaprezentowanie filmów i przyciągnięcie uwagi odwiedzających. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.