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

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

Witamy w trzeciej części serii! Mam wrażenie, że ten trochę Cię zaskoczy. Dzisiaj pokażę, jak używać półprzezroczystych kolorów i gradientów tła do tworzenia wielu wariacji kolorów obramowania. Na koniec pokażę, jak za pomocą kilku kliknięć można całkowicie zmienić kolorystykę. Ten układ składa się z kombinacji dwóch wierszy struktury kolumn 1/4 1/2 1/4 i wiersza struktury kolumn 1/4 1/4 1/4 1/4.

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

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

Koncepcja i inspiracja

W rzeczywistości oryginalny pomysł na układ pochodzi z popularnej witryny giphy.com ze sposobu, w jaki prezentuje większy polecany gif w środkowej kolumnie, otoczony mniejszymi gifami. Pomyślałem, że ten pomysł dobrze sprawdzi się w przypadku układu siatki wideo, ponieważ pozwoliłoby to na umieszczenie większego filmu z innymi otaczającymi go filmami. Jednak nie przejmowałem się stylem murowania otaczających obrazów giphy, więc w tym poście wybrałem podejście równych kolumn, aby wszystko było bardziej symetryczne.

Oprócz układu, chciałem nieco bardziej zbadać możliwości półprzezroczystego tła Divi, aby stworzyć coś wyjątkowego.

Zacznijmy.

Wdrażanie projektu za pomocą Divi

Najpierw dodaj zwykłą sekcję o strukturze 1/4 1/2 1/4 (2-kolumnowej).

Następnie dodaj moduł wideo do pierwszej 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]

Zapisz ustawienia

Następnie dodaj moduł rozdzielający bezpośrednio pod modułem wideo.

W ustawieniach dzielnika, pod , ustaw wysokość przegrody na 20.

Teraz, ponieważ zamierzamy dodać wiele filmów, łatwiej mi powielić właśnie utworzony moduł wideo i przeciągnąć go we właściwe miejsca. Potem mogę wrócić i zmienić adres URL filmu oraz zdjęcia okładek później.

Najpierw zduplikujmy właśnie utworzony moduł wideo i przeciągnijmy go pod moduł dzielnika w pierwszej kolumnie.

Następnie możesz kontynuować powielanie elementów pierwszej kolumny (wideo, rozdzielacz i wideo) i przeciąganie ich do skrajnej prawej kolumny. Następnie możesz zduplikować jeden z modułów wideo i przeciągnąć go do środkowej kolumny. Po zaktualizowaniu całej zawartości wideo powinieneś mieć coś, co wygląda tak…

Zanim przejdziemy dalej, dodaj kolor tła do sekcji i kolumn wierszy. Przejdź do ustawień sekcji (niebieski obszar) i zaktualizuj następujące elementy:

Opcje treści

Kolor tła: #333333

Opcje projektowe:

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

Zapisz ustawienia

Teraz edytuj swoje ustawienia wiersza z następującymi aktualizacjami:

Opcje treści:

Kolory gradientu tła: rgba (255,255,255,0,58) i #b684e8
Kierunek gradientu: 360 stopni
Kolor tła kolumny 1: rgba (0,0,0,0,69)
Kolor tła kolumny 2: rgba (255,255,255,0.45)
Kolor tła kolumny 1: rgba (0,0,0,0.85)

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: 20px u góry, 20px w prawo, 20px w dół, 20px w lewo
Kolumna 2 Niestandardowe dopełnienie: 20px u góry, 20px w prawo, 20px w dół, 20px w lewo
Kolumna 3 Niestandardowe dopełnienie: 20px u góry, 20px w prawo, 20px w dół, 20px w lewo

Zapisz ustawienia

Teraz nadszedł czas na dodanie drugiego rzędu. Śmiało i dodaj kolejny wiersz struktury 1/4 1/2 1/4 (3-kolumnowy) pod pierwszym.

Aby mieć przewagę nad konfiguracją opcji ustawień wiersza, użyj funkcji kliknięcia prawym przyciskiem myszy, aby skopiować styl pierwszego wiersza i wkleić go do drugiego wiersza.

Teraz, w przypadku ustawień wiersza, wszystko, co musisz zaktualizować, to opcje zawartości w następujący sposób:

Gradient tła: brak (usuń ten, który został skopiowany)
Kolor tła kolumny 1: rgba (0,0,0,0,69)
Kolor tła kolumny 2: rgba(0,0,0,0,0) – to samo, co brak lub przezroczysty
Kolumna 3 Kolor tła: rgba (0,0,0,0.35)

Teraz, gdy ustawienia wiersza są kompletne, skopiuj i przeciągnij (lub skopiuj i wklej) moduł wideo do pierwszego (z lewej), a także do trzeciego wiersza (z prawej). Następnie zaktualizuj zawartość wideo.

W środkowej kolumnie dodaj moduł notki i zaktualizuj ustawienia w następujący sposób:

Opcje treści

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

Opcje projektowe

Kolor tekstu: jasny
Orientacja tekstu: Środek
Czcionka nagłówka: PT Sans
Rozmiar czcionki nagłówka: 52px
Odstępy między nagłówkami: 1px
Czcionka ciała: PT Sans
Rozmiar czcionki ciała: 20px

Teraz w końcu nadszedł czas na ostatni rząd. Oczywiście w razie potrzeby możesz dodać więcej.

Śmiało i dodaj 1/4 1/4 1/4 1/4 (4-kolumnowy) wiersz struktury pod poprzednim wierszem.

Tak jak poprzednio, skopiuj projekt z poprzedniego wiersza i wklej do bieżącego wiersza, aby mieć trochę przewagi nad projektem.

Następnie zaktualizuj ustawienia wiersza w następujący sposób:

Opcje treści

Kolor tła kolumny 1: rgba (0,0,0,0.34)
Kolor tła kolumny 2: rgba (0,0,0,0,69)
Kolor tła kolumny 3: rgba (0,0,0,0.34)
Kolumna 4 Kolor tła: rgba (0,0,0,0,69)

Opcje projektowe

Kolumna 4 Niestandardowe wypełnienie: 20px 20px 20px 20px

Zapisz ustawienia

Następnie zduplikuj lub skopiuj moduły wideo do każdej z czterech kolumn. Po zaktualizowaniu wszystkich treści wideo gotowe!

Sprawdź swój nowy układ siatki…

Tworzenie wersji light

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

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

Opcje treści:

Kolor tła: rgba (0,0,0,0.12)

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

Zasadniczo wróć do każdego z trzech ustawień wierszy i wszędzie tam, gdzie zobaczysz używany kolor tła, po prostu kliknij opcję białej palety kolorów. To zmieni wszystkie ciemne, półprzezroczyste ciemne tła w półprzezroczyste jasne tła.

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

Opcje projektowe

Kolor tekstu: ciemny

To wystarczy! Sprawdź wersję lekką.

Łatwo zmieniaj projekt dzięki opcjom tła sekcji

Ponieważ siatka jest zbudowana z półprzezroczystego tła, możesz łatwo zmienić kolor tła sekcji, gradient lub obraz, aby nadać swojej witrynie świeży wygląd, który idealnie pasuje do Twojej witryny.

Spójrz na różnicę, jaką może spowodować dodanie obrazu tła do ustawień sekcji.

Innym sposobem dopasowania witryny jest dopasowanie kolorów gradientu tła, który dodaliśmy w pierwszym wierszu.

Zbliża się…

Następny post z tej serii będzie zupełnie inny. W tym wszystkim chodzi o utrzymanie porządku i prostoty. I kilka sztuczek z gradientem tła.

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

Cieszyć się!