Jak utworzyć stronę listy odtwarzania za pomocą modułu suwaka wideo Divi

Strona listy odtwarzania to skuteczny sposób prezentowania podobnych treści w sposób łatwy dla użytkownika. Moduły Divi Video Slider to świetny sposób na zbudowanie strony listy odtwarzania z treściami wideo, takimi jak kursy i samouczki. W tym artykule zobaczymy, jak utworzyć stronę listy odtwarzania za pomocą modułu Divi's Video Slider przy użyciu wielu sekcji i kilku modułów pomocniczych.

Zacznijmy.

Podgląd strony listy odtwarzania

Najpierw spójrz na to, co zbudujemy.

Pulpit

Telefon

Utwórz stronę listy odtwarzania

Nasza strona będzie miała trzy sekcje po dwa rzędy każda. Każda sekcja będzie miała 5 modułów. Po utworzeniu pierwszej sekcji skopiujemy ją dwukrotnie i wprowadzimy zmiany, aby utworzyć drugą i trzecią sekcję.

Nasza pierwsza sekcja i wiersze będą używać domyślnego stylu. Używam kolejek stylizacji z bezpłatnego pakietu układu drukarni, który jest dostępny w Divi. Aby ułatwić śledzenie, zbuduję stronę za pomocą widoku szkieletowego i nada jej styl za pomocą widoku pulpitu.

Wiersz o pełnej szerokości

Najpierw utwórz nową stronę , włącz Visual Builder i dodaj wiersz o pełnej szerokości .

2/3 1/3 Wiersz

Pod tym wierszem dodaj wiersz 2/3, 1/3 .

Dodaj moduł tekstowy tytułu suwaka wideo

W wierszu o pełnej szerokości dodaj moduł Tekst .

Dodaj moduł suwaka wideo

Następnie dodaj moduł Video Slider do lewej kolumny wiersza 2/3, 1/3.

Dodaj suwak wideo Opis Moduł tekstowy tytułu

Następnie dodaj moduł Tekst pod modułem Video Slider. Zostanie to wykorzystane do wprowadzenia opisu.

Dodaj moduł tekstowy opisu suwaka wideo

Następnie dodaj moduł Tekst, który będzie zawierał opis. Znajduje się to w module Tytuł opisu.

Dodaj moduł Osoba

Na koniec dodaj moduł Person w prawej kolumnie wiersza 2/3, 1/3.

Stylizacja strony listy odtwarzania wideo

Twoja strona będzie teraz wyglądać jak moja. To jest widok szkieletowy. Teraz nadszedł czas na stylizację modułów. Przejdziemy do widoku pulpitu. Ze względu na sposób, w jaki zbudowałem stronę, moja nie wyświetli domyślnej zawartości.

Stylizowanie modułu tekstowego tytułowego suwaka wideo na stronie listy odtwarzania

Otwórz ustawienia dla pierwszego modułu Tekst.

Zmień poziom tekstu na Heading 2 i dodaj tytuł Pillar One: Divi Fundamentals (lub twój tytuł) do treści treści.

• Poziom tekstu: H2
• Treść ciała: Filar pierwszy: Podstawy Divi

Następnie przejdź do zakładki Projekt . Wybierz tekst nagłówka H2 i zmień czcionkę na Oswald. Ustaw styl na TT, wyrównanie na środek, a kolor na #000645.

• Poziom kursu: H2
• Czcionka: Oswald
• Styl: TT
• Wyrównanie: Środek
• Kolor: #000645

Następnie ustaw rozmiar czcionki na 46px dla komputerów stacjonarnych, 32px dla tabletów i 20px dla telefonu. Zmień odstępy między literami na 1px i wysokość linii na 1,4em. Zamknij ustawienia modułu.

• Rozmiar czcionki: komputer 46px, tablet 32px, telefon 20px
• Odstępy między literami: 1px
• Wysokość linii: 1.4em

Nadaj styl modułowi suwaka wideo na stronie listy odtwarzania

Następnie dodamy treść i styl modułu Video Slider . Najedź kursorem na moduł i kliknij ikonę koła zębatego, aby otworzyć jego ustawienia .

Kliknij Dodaj nowy film .

Dodaj swój film i zamknij podmoduł.

Kontynuuj ten proces, aż dodasz wszystkie swoje filmy z pierwszej sekcji. Używam ustawień domyślnych, ale możesz także użyć nawigacji punktowej zamiast ścieżki suwaka i włączyć nakładki, jeśli nie chcesz wyświetlać domyślnego polecanego obrazu dla filmów.

Stylizacja strony listy odtwarzania Suwak wideo Opis Moduł tekstu tytułu

Następnie otwórz ustawienia modułu Tekst bezpośrednio pod suwakiem wideo. Będzie to tytuł naszego opisu.

Zmień treść na Nagłówek 3 i wprowadź tekst O tej serii w polu Treść treści.

• Poziom tekstu: Nagłówek 3
• Treść: O tej serii

Następnie przejdź do zakładki Projekt . Wybierz Tekst nagłówka H3 i zmień czcionkę na Oswald, styl na TT, wyrównanie na lewo i kolor na #000645. Zamknij ustawienia modułu.

• Tekst nagłówka: H3
• Czcionka: Oswald
• Styl: TT
• Wyrównanie: w lewo
• Kolor: #000645

Stylizacja strony listy odtwarzania Suwak wideo Opis Moduł tekstowy

Następnie otwórz ustawienia dla następnego modułu Tekst . Będzie zawierał opis serii filmów.

Wprowadź opis serii w polu Treść treści.

• Treść: opis wideo

Następnie przejdź do karty Projekt i przewiń w dół do Wyrównanie tekstu. Ustaw wyrównanie do lewej. Pozostałe ustawienia zostawimy bez zmian. Zamknij ustawienia modułu.

• Wyrównanie: w lewo

Stylizacja modułu osoby na stronie listy odtwarzania

Na koniec otwórz ustawienia modułu Osoba .

Na karcie Ogólne w obszarze Tekst wprowadź imię i nazwisko osoby w polu Imię i wpisz Instruktor w polu Stanowisko. Wpisz dowolne linki do mediów społecznościowych. Zostawiam je puste na potrzeby tego samouczka.

• Imię i nazwisko: imię osoby
• Stanowisko: Instruktor

Przewiń w dół do obszaru zawartości i dodaj opis instruktora. W obszarze Obraz wybierz obraz z biblioteki multimediów.

• Opis zawartości
• Obraz: obraz osoby

Tekst tytułu

Przejdź do karty Projekt i przewiń do Tekst tytułu. Wybierz poziom kursu H4. Ustaw czcionkę na Oswald, wagę na pół pogrubioną, styl na TT, a kolor na #000645. Ustaw rozmiar na 20px, odstępy na 1px i wysokość linii na 1,5em.

• H4
• Oswald
• Pół pogrubienie
• TT
• #000645
• 20px
• Odstęp 1px
• Wysokość linii 1,5em

Tekst pozycji

Na koniec przewiń w dół do pozycji Tekst pozycji . Wybierz Oswalda jako czcionkę i ustaw wagę na pół pogrubioną. Ustaw Styl na TT, Kolor na #8f9ca4, Rozmiar na 15px, Odstęp między wierszami na 1px i Wysokość linii na 1,5em. Zamknij ustawienia modułu.

• Czcionka: Oswald
• Waga: Semi Bold
• Styl: TT
• Kolor: #8f9ca4
• Rozmiar: 15px
• Rozstaw: 1px
• Wysokość linii: 2em

Powiel sekcję strony listy odtwarzania

Teraz, gdy sekcja jest zaprojektowana i stylizowana tak, jak chcemy, najedź kursorem na jej ustawienia i zrób 2 duplikaty .

Nadaj styl drugiej części strony listy odtwarzania

W drugiej sekcji zmienimy kolor tła , aby wyróżniał się na tle innych. Zmienimy również zawartość modułów.

Ustawienia sekcji

Następnie otwórz ustawienia dla drugiej sekcji .

Przewiń w dół do opcji Tło i ustaw kolor na #f9f7f4. Zamknij ustawienia.

• Kolor tła: #f9f7f4

Moduł tekstowy tytułu drugiego suwaka wideo

Otwórz tytuł drugiej sekcji i zmień go, aby odzwierciedlał drugi zestaw filmów. Nazywam tę sekcję Filar drugi: Moduły Divi. Zamknij ustawienia.

• Treść: Filar drugi: moduły Divi

Drugi moduł suwaka wideo

Otwórz ustawienia modułu Video Slider z drugiej sekcji. Zastąp filmy filmami z drugiej sekcji. Zamknij ustawienia.

• Moduły podrzędne: wybierz filmy

Drugi suwak wideo Opis Tytuł Moduł tekstowy

Ten tytuł pozostanie bez zmian, więc nie będziemy musieli wprowadzać zmian.

Drugi suwak wideo Opis Moduł tekstowy

Następnie otwórz moduł Tekst z drugim opisem filmu i utwórz opis dla drugiego zestawu filmów.

• Treść ciała: opis wideo

Moduł drugiej osoby

Jeśli inny instruktor uczy drugiego zestawu filmów, otwórz drugi moduł Osoba i zastąp nazwę. także zmień lub dodaj adresy URL mediów społecznościowych, jeśli z nich korzystasz.

• Imię i nazwisko: imię i nazwisko instruktora

Następnie przewiń w dół do obszaru Treść i obraz i zastąp opis i obraz osoby.

• Treść ciała: opis osoby
• Obraz: obraz osoby

Wystylizuj trzecią sekcję

W trzeciej sekcji zmienimy zawartość modułów. Ta sekcja użyje ustawień domyślnych, więc możemy przejść do pierwszego tytułu.

Moduł tekstowy tytułu trzeciego suwaka wideo

Otwórz moduł Tekst tytułu i zmień tytuł, aby pasował do tego zestawu filmów. Zamknij ustawienia modułu.

• Treść treści: Filar trzeci: układy Divi

Moduł trzeciego suwaka wideo

Otwórz trzeci moduł Video Slider i zastąp filmy filmami z tego zestawu. Jeśli chcesz, zmień etykiety Amin i zamknij ustawienia modułu.

• Dodaj nowy film: zamień każdy film

Moduł tekstowy opisu trzeciego suwaka wideo

Otwórz moduł Tekst, aby zobaczyć opis wideo z trzeciej sekcji. Utwórz opis dla tego zestawu filmów. Zamknij ustawienia modułu Tekst.

• Treść ciała: opis wideo

Moduł trzeciej osoby

Na koniec otwórz moduł Person dla tej sekcji i zastąp nazwę, jeśli różni się od pierwszego zestawu filmów. Jeśli to ta sama osoba, co drugi zestaw, po prostu skopiuj ten moduł, wklej go do tej kolumny i usuń ten moduł. Zmień lub dodaj linki do sieci społecznościowych, jeśli ich używasz.

• Imię i nazwisko: imię i nazwisko instruktora

Przewiń w dół do obszaru Treść i obraz i zastąp je, aby pasowały do ​​informacji tej osoby. Zamknij moduł, zapisz swoją stronę i wyjdź z programu Visual Builder.

• Treść ciała: opis osoby
• Obraz: obraz osoby

Wyniki na stronie listy odtwarzania

Oto jak wygląda nasza strona listy odtwarzania na komputerze i telefonie.

Pulpit

Telefon

Końcowe myśli

Oto nasze spojrzenie na to, jak utworzyć stronę listy odtwarzania za pomocą modułu Divi's Video Slider. Jest to prosty proces, a tworzenie duplikatów po nadaniu stylu pierwszej sekcji znacznie ułatwia tworzenie drugiej i trzeciej sekcji. Musimy tylko zmienić treść i gotowe. Moduł Divi's Video Slider to doskonały wybór dla każdej strony listy odtwarzania z filmami.

Chcemy usłyszeć od Ciebie. Czy zbudowałeś stronę listy odtwarzania z modułem Divi's Video Slider? Opowiedz nam o swoim doświadczeniu w komentarzach.