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

Witamy w poście 4 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.

Mam nadzieję, że podobają się wam dotychczasowe układy siatki. Dzisiejszy układ jest numerem 4 w serii i jest jednym z moich ulubionych (i najszybszym w implementacji). Tworzenie za pomocą Divi jest nie tylko łatwe (i przyjemne), ale można je również dostosować do schematu kolorów witryny. Opcje gradientu tła są główną cechą tego projektu, które zostały użyte do stworzenia dwóch kolorów tonów oddzielonych ukośną linią. Odstępy są również celowe, aby filmy były łatwo odbierane. Prawdopodobnie ten projekt może wykraczać poza zakres tego, co normalnie nazwalibyśmy „siatką”, ale myślę, że dostrzeżesz potencjał.

Więc zaczynamy. Pokażę Ci, jak łatwo jest zbudować ten projekt siatki za pomocą modułu wideo i kilku niestandardowych elementów tła.

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

Koncepcja i inspiracja

Szukałem ładnego i przejrzystego układu, który organizowałby małe partie filmów do wykorzystania w takich rzeczach, jak samouczki lub kursy. To w połączeniu z moją impulsywną chęcią zabawy z gradientami tła, wyszedłem z tym. Mam nadzieję, że to lubisz.

Zacznijmy.

Wdrażanie projektu za pomocą Divi

Subskrybuj nasz kanał YouTube

Najpierw dodaj zwykłą sekcję o strukturze pełnej szerokości (1 kolumna).

Następnie dodaj do kolumny moduł tekstowy . Będzie to tytuł lub nagłówek sekcji strony.

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

Opcje treści
Treść: [wpisz tekst tytułu]

Opcje projektowe

Kolor tekstu: jasny
Czcionka tekstu: Arimo
Rozmiar czcionki tekstu: 56px
Odstępy między literami tekstu: 1px
Wysokość linii tekstu: 1em

Zapisz ustawienia

Nie zobaczysz jeszcze niczego, ponieważ masz biały tekst na białym tle, ale to jest w porządku. Przejdźmy dalej i dodajmy nasz gradient tła sekcji. Przejdź do sekcji Ustawienia i w sekcji Treść zaktualizuj następujące opcje:

Kolory gradientu tła: #121212, #ffffff
Typ gradientu: liniowy
Kierunek gradientu: 198 stopni
Pozycja startowa: 45%
Pozycja końcowa: 45%

Następnie zaktualizuj ustawienia wiersza dla właśnie dodanego wiersza w następujący sposób:

Opcje projektowe

Ustaw pełną szerokość tego wiersza: TAK
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 4
Wyrównaj wysokości kolumn: TAK
Niestandardowe wypełnienie: 1% góra, 5% prawo, 5% dół, 5% lewo

Zapisz ustawienia

Teraz dodaj kolejny wiersz o strukturze ⅔ ⅓ (2 kolumny) bezpośrednio pod właśnie utworzonym wierszem.

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 swojego filmu]
URL nakładki obrazu: [wprowadź adres URL obrazu nakładki]

Zapisz ustawienia

Następnie zduplikuj (lub skopiuj) właśnie utworzony moduł wideo dwukrotnie i przeciągnij (lub wklej) dwa zduplikowane filmy, aby ułożyły się w prawej kolumnie.

Zaktualizuj treść filmów, aby zawierała prawidłowe adresy URL i obrazy okładek.

Śmiało i dodaj moduł Blurb pod dwoma modułami wideo w prawej kolumnie. Może to służyć jako opis filmów w tej siatce.

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

Opcje treści

Tytuł: [wpisz tytuł]
Treść: [wprowadź treść lub opis]

Opcje projektowe

Kolor tekstu: jasny

Zapisz ustawienia

Teraz edytuj ustawienia wiersza dla wiersza zawierającego właśnie utworzone filmy w następujący sposób:

Opcje treści

Kolory gradientu tła: #4999c1, #121212
Typ gradientu: liniowy
Kierunek gradientu: 198 stopni
Pozycja startowa: 45%
Pozycja końcowa: 45%

Opcje projektowe

Ustaw pełną szerokość tego wiersza: TAK
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 4
Wyrównaj wysokości kolumn: TAK
Niestandardowe wypełnienie: 5% góra, 5% prawo, 5% dół, 5% lewo

Świetny! Ukończyłeś pierwszą sekcję. Prawie skończyliśmy. Sprawdź dotychczasowe postępy.

Aby utworzyć następną sekcję, zduplikuj całą właśnie utworzoną sekcję, klikając przycisk zduplikuj sekcję.

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

Opcje treści

Kolory gradientu tła: #ffffff, #121212 (kolory te są w odwrotnej kolejności niż w pierwszej sekcji)

Następnie zaktualizuj ustawienia modułu tekstowego w zduplikowanej sekcji o następujące elementy:

Opcje projektowe

Kolor tekstu tekstu: #333333

Zapisz ustawienia

Aby ukończyć tę sekcję, zaktualizuj ustawienia wierszy zawierające Twoje filmy o następujące elementy:

Opcje treści

Kolory gradientu tła: #121212, #4999c1 (w zasadzie zmieniasz kolejność kolorów, aby były w kolejności odwrotnej do pierwszej sekcji)

Zapisz ustawienia

Sprawdźmy teraz wynik po dodaniu drugiej sekcji…

Jeśli jeszcze tego nie zauważyłeś, możesz łatwo dodawać kolejne sekcje, ponieważ mamy już utworzone te dwie sekcje. Stwórzmy jeszcze jedną sekcję tylko na dokładkę. Ponieważ kolor tła naszej sekcji jest czarny na dole, chcemy rozpocząć następną sekcję z czarnym kolorem tła na górze. Oznacza to, że musimy zduplikować pierwszą sekcję u góry i przeciągnąć ją na dół strony pod drugą sekcją. Zapewnia to ciągłość projektu na całej stronie.

Oto jak to wygląda po dodaniu trzeciej sekcji:

Otóż ​​to! Wszystko skończone.

Czuły?

Ten układ faktycznie wygląda jeszcze lepiej na urządzeniach mobilnych bez żadnych modyfikacji. Sprawdź to!

Dalsze dostosowywanie

Po zbudowaniu tego układu siatki z wieloma sekcjami prawdopodobnie już zauważyłeś, jak łatwo byłoby zmienić kolory, aby dopasować je do motywu następnego projektu. Wystarczy zmienić kolory gradientu tła dla sekcji i wierszy.

Jeśli chcesz jeszcze bardziej ulepszyć projekt, sugeruję dodanie półprzezroczystości do kolorów gradientu, aby wyeksponować tło za nimi. Lub spróbuj całkowicie pozbyć się jednego z kolorów gradientu i zobacz, jak wygląda. Oto kilka przykładów tego, co może zrobić zmiana tylko jednego koloru gradientu…

Możesz także dodać moduł Video Slider do siatki w lewej kolumnie.

Zbliża się…

W następnej kolejności pojawi się nasz ostatni układ siatki wideo w serii. Ten daje możliwość utrzymywania porządku i czystości dzięki subtelnym elementom kadrowania lub użyciu kolorów w unikalny sposób, aby każdy film się wyróżniał.

Do tego czasu czekam na kontakt z Państwem w komentarzach.

Cieszyć się!