Jak tworzyć oszałamiające układy siatki za pomocą modułu wideo Divi (część 2)

Witamy w poście 2 z 5 w naszej miniserialu Jak tworzyć oszałamiające układy siatki za pomocą modułu wideo Divi . W tej serii pokażemy Ci, jak tworzyć niesamowite układy siatki od podstaw za pomocą Divi Visual Builder. A jeśli martwisz się, że jest to zbyt skomplikowane, pomyśl jeszcze raz! Wszystkie te układy można tworzyć i stylizować za pomocą programu Visual Builder bez dodatkowego kodu.

Dotarliśmy do drugiej części serii! I muszę powiedzieć, że tworzenie tych układów sprawia mi wielką przyjemność. Dzisiaj pokażę Ci, jak stworzyć układ siatki dla Twoich filmów, który będzie przypominał sekcję funkcji na stronie produktu lub landing page. Ten układ składa się z sekwencji 1/2 1/2 rzędów kolumn, z których każdy zawiera wideo i odpowiadający mu opis w każdej z dwóch kolumn. Następnie następna sekcja zmienia kolejność wideo i opisu od lewej do prawej, a następnie od prawej do lewej. Ponieważ każdy z wierszy rozciąga się na całą szerokość strony, a każda z kolumn ma tę samą wysokość w pionie, układ wygląda oszałamiająco na wszystkich rozmiarach ekranu.

Zamierzam użyć modułu wideo, aby dodać filmy, a moduł notatek, aby służył jako sekcja tytułu i opisu obok filmu. Podobnie jak wszystkie układy z tej serii, również ten jest zaskakująco łatwy do wdrożenia za pomocą Divi.

Oto jak będzie wyglądał wynik końcowy

Koncepcja i inspiracja

Ta koncepcja nie jest w żaden sposób nowa. Właściwie to zainspirowało mnie do stworzenia tego układu, ponieważ jest on zaznajomiony z użytkownikami. Wiele witryn korzysta z podobnego układu do prezentowania funkcji swoich produktów lub usług. Pozwala to na większe obszary treści, które moim zdaniem tworzą świetną negatywną przestrzeń dla tekstu i uderzających obrazów w filmie.

Byłoby to idealne rozwiązanie dla firmy, która wykorzystuje wideo do promowania funkcji produktu, ale ma również wiele innych zastosowań. Mam nadzieję, że wykorzystasz ten projekt do swojego następnego projektu.

Zacznijmy.

Wdrażanie projektu za pomocą Divi

Subskrybuj nasz kanał YouTube

Najpierw dodaj zwykłą sekcję o strukturze 1/2 1/2 (2 kolumny).

Następnie dodaj moduł wideo do lewej kolumny.

Zaktualizuj ustawienia wideo w następujący sposób:

Opcje treści

Wideo MP4/URL: [wprowadź adres URL wideo]
URL nakładki obrazu: [prześlij niestandardowy obraz do swojego filmu lub wygeneruj go automatycznie z filmu]

Opcje projektowe

Kolor ikony odtwarzania: rgba (255,255,255,0.87)

Zapisz ustawienia

Następnie dodaj moduł Blurb w prawej kolumnie bezpośrednio obok utworzonego właśnie modułu wideo.

Zaktualizuj ustawienia Blurb w następujący sposób:

Opcje treści:

Tytuł: [wpisz tytuł filmu]
Treść: [wprowadź opis filmu]
Link: [możesz wpisać adres URL linku do innej strony, jeśli chcesz]
Użyj ikony: TAK
Ikona: [wybierz ikonę]

Opcje projektowe:

Kolor ikony: #666666
Kolor tekstu: jasny
Orientacja tekstu: Środek
Czcionka nagłówka: Roboto
Rozmiar czcionki nagłówka: 52px
Odstępy między nagłówkami: 1px
Czcionka ciała: Otwórz Sans
Rozmiar czcionki ciała: 20px
Kolor tekstu: #dddddd
Niestandardowe wypełnienie na pulpicie: 5% u góry (może być konieczne dostosowanie tego w zależności od ilości tekstu w opisie)
Niestandardowe wypełnienie na tablecie i smartfonie: 20px na górze, 20px na dole

Zaawansowane opcje

Animacja obrazu/ikony: od prawej do lewej (ta animacja w połączeniu z ikoną strzałki przyciągnie dalszą uwagę do wideo po lewej stronie.

Zapisz ustawienia

Zanim przejdziemy dalej, dodaj swój obraz tła do swojej sekcji. Przejdź do ustawień sekcji (niebieski obszar) i zaktualizuj następujące elementy:

Opcje treści:

Obraz tła: [wprowadź obraz tła (moje to 2000 x 2200)]

Użyj efektu paralaksy: TAK
Metoda paralaksy: prawdziwa paralaksa

Opcje projektowe:

Niestandardowe dopełnienie: 0px góra, 0px dół

Zapisz ustawienia
Następnie edytuj ustawienia wiersza z następującymi aktualizacjami:

Opcje treści

Kolor tła kolumny 2: rgba (0,0,0,0,69)

Opcje projektowe

Ustaw pełną szerokość tego wiersza: TAK
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 1
Wyrównaj wysokości kolumn: TAK
Niestandardowe dopełnienie: 0px góra, 0px dół
Marginesy niestandardowe: 0px na górze, 0px na dole
Kolumna 1 Niestandardowe dopełnienie: 0px góra, 0px dół
Kolumna 2 Niestandardowe dopełnienie: 0px góra, 0px dół

Wszystko zaczyna się teraz układać. Masz swój obraz tła i utworzyłeś swój pierwszy wiersz. Teraz jesteś gotowy, aby zduplikować ten wiersz. Kliknij ikonę duplikatu na pasku menu wiersza w konstruktorze wizualnym.

W nowym wierszu, który właśnie zduplikowałeś, przeciągnij moduł wideo do prawej kolumny i przeciągnij moduł notki do lewej kolumny.

Teraz wystarczy zaktualizować zawartość modułu wideo, aby uwzględnić nowy adres URL filmu i nowy obraz okładki. W przypadku modułu Blurb musisz zaktualizować nagłówek i treść odpowiadającą Twojemu filmowi. Będziesz także musiał dostosować ikonę rozmycia do strzałki skierowanej w prawo (jeśli użyłeś tej samej ikony co ja) i przełączyć animację obrazu / ikony na „od lewej do prawej”.

Następnie musimy zaktualizować ustawienia zduplikowanych wierszy, aby ustawić tło pierwszej kolumny. Przejdź do ustawień wiersza i zaktualizuj następujące informacje na karcie Treść :

Kolor tła kolumny 1: rgba (0,0,0,0,69)
Kolor tła kolumny 2: brak

Robimy pewne postępy. Zobaczmy teraz, jak wyglądają nasze pierwsze dwa rzędy…

W kolejnych dwóch wierszach powtórz proces powielania i zaktualizuj zawartość. Pamiętaj tylko, że im więcej masz wierszy, tym dłużej obraz tła sekcji będzie musiał się rozciągać, aby dostosować się do długości treści.

W tym przykładzie dodałem jeszcze dwa wiersze, co daje w sumie cztery wiersze. Sprawdź efekt końcowy.

Tworzenie wersji light

Aby zmienić poprzedni projekt ciemnej siatki wideo na wersję jasną, wystarczy zaktualizować kilka opcji projektu.

W przypadku tych edycji nieco łatwiejsze może być użycie widoku szkieletowego.

Zaktualizuj ustawienia sekcji w następujący sposób:

Opcje treści

Obraz tła: [wprowadź jasny obraz tła]

Zaktualizuj ustawienia pierwszego rzędu w następujący sposób:

Opcje treści

Kolor tła kolumny 2: rgba (255,255,255,0.68)

Zaktualizuj ustawienia modułu Blurb w pierwszym wierszu w następujący sposób:

Opcje projektowe

Kolor ikony: #333333
Kolor tekstu: ciemny
Kolor tekstu nagłówka: #444444
Czcionka ciała: Roboto
Kolor tekstu ciała: #666666

Zaktualizuj ustawienia drugiego rzędu w następujący sposób:

Opcje treści

Kolor tła kolumny 1: rgba (255,255,255,0.45)

Użyj opcji kliknięcia prawym przyciskiem myszy, aby skopiować projekt modułu notatek w pierwszym rzędzie i wkleić go do modułu noty w drugim rzędzie.

Otóż ​​to! Sprawdź efekt końcowy.

Czuły?

Ten jest trochę trudny, jeśli chodzi o zachowanie na mniejszych ekranach. Ponieważ domyślna kolejność układania umieszcza lewą kolumnę nad prawą kolumną, wynik tego układu jest nieco mylący. Możesz dowiedzieć się, jak rozwiązać ten problem, w moim poprzednim poście na temat zmiany kolejności układania kolumn w Divi.

Zbliża się…

Następna siatka cię zaskoczy. Półprzezroczyste kolory i gradienty tła sprawiają, że projekt bardzo łatwo dopasować do własnej witryny. Sprawdź podgląd…

Mam nadzieję, że jak dotąd podoba Ci się seria. Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!