Jak kreatywnie łączyć tła wierszy i kolumn z nowymi opcjami Divi

Opublikowany: 2017-10-02

W tym samouczku Divi pokażemy, jak połączyć opcje tła wierszy i kolumn, aby uzyskać oszałamiające wyniki. Wybierając odpowiednie kombinacje i ustawienia, możesz uzyskać projekty, które poprawią ogólny wygląd i działanie Twojej witryny. Aby pokazać, o czym mówimy, zrobiliśmy przykład, który pomożemy Ci zbudować krok po kroku. Stworzyliśmy ten wynik, używając tylko wbudowanych opcji Divi, więc nie musisz dodawać żadnych dodatkowych CSS.

Wynik

Jeśli będziesz postępować zgodnie z tym samouczkiem krok po kroku, będziesz w stanie osiągnąć następujący wynik:

gradient

Chociaż użyliśmy trzech różnych rzędów, aby osiągnąć ten wynik, wygląda na to, że wszystkie są częścią większego obrazu. Zacznijmy!

Przełącz na Visual Builder

Utwórz nową stronę i włącz Divi Builder i przełącz się na Visual Builder.

gradient

Utwórz sekcję

Pierwszą rzeczą, którą musimy zrobić, to utworzyć nową sekcję standardową. Wszystkie wiersze, które będziemy tworzyć i łączyć ze sobą, będą częścią tej sekcji. Aby utworzyć efekt cienia prostokątnego w wierszach, dodamy następujące tło gradientowe sekcji:

Pierwszy kolor: rgba (61,65,86,0,59)
Drugi kolor: #f7f7f7
Typ gradientu: Promieniowy
Kierunek promieniowy: dół
Pozycja startowa: 31%
Pozycja końcowa: 76%

gradient

Dodaj wiersz jednokolumnowy

Następną rzeczą, którą musimy zrobić, to dodać do sekcji wiersz z jedną kolumną. Ten wiersz będzie reprezentował następującą część naszego wyniku końcowego:

gradient

Ustawienia wierszy i kolumn

Utwórz wiersz o pełnej szerokości

Śmiało i ustaw pełną szerokość wiersza w zakładce Projekt.

Ustawienia tła wiersza

Następnie możesz wrócić do zakładki Treść i dodać następujące tło gradientowe:

Pierwszy kolor: #3d4156
Drugi kolor: rgba (114,81,114,0,91)
Typ gradientu: liniowy
Kierunek gradientu: 180 stopni
Pozycja startowa: 0%
Pozycja końcowa: 65%

Prześlij obraz tła (w tym przypadku wzór) i wybierz „Pomnóż” jako mieszankę obrazu tła.

Ustawienia tła kolumny

Następnie przewiń w dół i przypisz następujące ustawienia gradientu tła do kolumny wiersza:

Pierwszy kolor: rgba (255,255,255,0.15)
Drugi kolor: rgba (214,44,104,0)
Typ gradientu kolumny: liniowy
Kierunek gradientu kolumny: 161 stopni
Pozycja początkowa kolumny: 43%
Pozycja końcowa kolumny: 43%

Rozstaw

Kontynuuj, dodając do wiersza następujące wypełnienie:

Góra: 20px
Po prawej: 30px
Po lewej: 30px

A także trochę dopełnienia Twojej kolumny:

Góra: 200px
Dół: 200px

Dodaj moduł tekstowy

Następną rzeczą, którą zrobimy, jest dodanie modułu tekstowego do wiersza i wprowadzenie następujących zmian w podkategorii Text tego modułu tekstowego:

Czcionka tekstu: wyświetlacz Playfair
Rozmiar czcionki tekstu: 77px (komputer), 64 (tablet), 51 (telefon)
Kolor tekstu: #f7f7f7
Wysokość linii tekstu: 1,7 (komputer stacjonarny), 1 em (tablet i telefon)

Dodaj moduł dzielnika

Kontynuuj, dodając moduł dzielnika poniżej właśnie utworzonego modułu tekstowego i włącz opcję „Pokaż dzielnik” w podkategorii Widoczność.

gradient

Przewiń tę samą kartę i użyj „rgba (114,57,114,0.91)” jako koloru tła.

gradient

Przejdź do karty Projekt i wybierz „#3d4156” jako kolor rozdzielacza.

gradient

Otwórz podkategorię Style i użyj 'Solid' jako stylu dzielnika i 'Góra' jako pozycji dzielnika.

gradient

Następnie przypisz następujące ustawienia do podkategorii Rozmiar:

Waga dzielnika: 11px
Wysokość: 23px
Szerokość: 0%
Wyrównanie modułu: do lewej

gradient

Na koniec dodaj lewe dopełnienie „48%” do opcji niestandardowego dopełnienia. gradient