Jak kreatywnie korzystać z cieni do wierszy w Divi

Jedna z ostatnich aktualizacji Divi była długo oczekiwana; integracja cieni skrzynkowych w sekcje, rzędy i moduły. W tym poście skupimy się na tym, jak cienie pól wierszy mogą poprawić ogólny wygląd i działanie Twojej witryny.

Aby zilustrować, jakie cienie głębi mogą wnieść do Twojej witryny, stworzyliśmy przykład, który pokaże Ci, jak odtworzyć krok po kroku.

Wynik

Pulpit

Układ, który pokażemy, jak odtworzyć, wygląda tak na komputerze:

mobilny

I tak na komórce:

Jak kreatywnie korzystać z cieni do wierszy w Divi

Subskrybuj nasz kanał YouTube

Format nagłówka

Pierwszą rzeczą, którą musisz zrobić, to wybrać odpowiedni format nagłówka. Przejdź do pulpitu nawigacyjnego WordPress > Dostosuj > Nagłówek i nawigacja > Format nagłówka > i wybierz „Wyśrodkowany” jako Styl nagłówka .

Główny pasek menu

Wróć do Nagłówek i nawigacja > Główny pasek menu > I dokonaj następujących zmian:

• Ukryj obraz logo: Włącz
• Wysokość menu: 211
• Maksymalna wysokość logo: 30
• Rozmiar tekstu: 16
• Odstępy między literami: 2
• Czcionka: Lato Light
• Styl czcionki: wielkie litery
• Kolor tekstu: #FFFFFF
• Kolor aktywnego łącza: #FFFFFF
• Kolor tła: rgba (255,255,255,0)
• Kolor tła menu rozwijanego: rgba (255,255,255,0)

Pierwsza sekcja

Po wprowadzeniu zmian w konfiguratorze motywów nadszedł czas na rozpoczęcie pracy z układem. Utwórz nową stronę, włącz Divi Builder i przełącz się na Visual Builder. Następnie dodaj do strony pierwszą standardową sekcję.

Tło gradientowe sekcji

Ta sekcja będzie wymagała następującego tła gradientowego:

• Pierwszy kolor: #ea2e7d
• Drugi kolor: #edd900
• Typ gradientu: liniowy
• Kierunek gradientu: 110 stopni
• Pozycja startowa: 0%
• Pozycja końcowa: 100%

Rozstaw

Przejdź do zakładki Projekt. W podkategorii Odstępy użyj „100px” dla górnego wypełnienia i „200px” dla dolnego wypełnienia.

Wiersz jednokolumnowy

Wiersz Gradientowe Tło

Kontynuuj, dodając jednokolumnowy wiersz do sekcji i użyj następującego tła gradientowego:

• Pierwszy kolor: rgba (255,255,255,0)
• Drugi kolor: #ea2e7d
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 56%
• Pozycja końcowa: 100%

Tło gradientowe kolumny

Przewiń w dół i użyj następującego tła gradientowego dla kolumny tego wiersza:

• Pierwszy kolor: rgba (237,217,0,0.77)
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu kolumny: liniowy
• Kierunek gradientu kolumny: 180 stopni
• Pozycja początkowa kolumny: 0
• Pozycja końcowa kolumny: 100

Rozmiary

Przejdź do karty Projekt i wprowadź następujące zmiany w podkategorii Rozmiar:

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 27%

Rozstaw

Następnie użyj „20px” dla górnego, prawego, dolnego i lewego niestandardowego wypełnienia wiersza.

Moduł tekstowy

Gdy skończysz z ustawieniami wiersza, dodaj moduł tekstowy i użyj następujących ustawień dla podkategorii Tekst:

• Czcionka tekstu: Arvo
• Rozmiar czcionki tekstu: 98px
• Kolor tekstu: #FFFFFF
• Odstępy między literami tekstu: 32px
• Wysokość linii tekstu: 1.4em
• Orientacja tekstu: Środek

Sekcja druga

Dodaj kolejną sekcję tuż pod pierwszą sekcją. Ta sekcja będzie zawierać wszystkie pozostałe wiersze obecne w układzie.

Tło gradientowe sekcji

Po pierwsze, użyj następującego tła gradientowego dla tej sekcji:

• Pierwszy kolor: rgba (255,255,255,0)
• Drugi kolor: #592851
• Typ gradientu: liniowy
• Kierunek gradientu: 180 stopni
• Pozycja startowa: 80%
• Pozycja końcowa: 80%

Rozstaw

Następnie przejdź do zakładki Projekt i dodaj „100px” do dolnego wypełnienia.

Pierwszy dwukolumnowy rząd

Kolor tła wiersza

Dodaj pierwszy dwukolumnowy wiersz do tej nowej sekcji i użyj „#dddddd” jako koloru tła.

Kolumna 1 Tło gradientowe

Pierwsza kolumna będzie wymagała następującego tła gradientowego:

• Pierwszy kolor: #6ac922
• Drugi kolor: #b6c1b2
• Kolumna 1 Typ gradientu: Liniowy
• Kolumna 1 Kierunek gradientu: 136deg
• Pozycja początkowa kolumny 1: 23%
• Pozycja końcowa kolumny 1: 100%

Kolor tła kolumny 2

Przewiń w dół i użyj „#dddddd” jako koloru tła kolumny 2.

Rozmiary

Przejdź do karty Projekt i użyj następujących ustawień dla podkategorii Rozmiar:

• Użyj niestandardowej szerokości: Włącz
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Podkategoria odstępów będzie wymagała następującego dopełnienia i marginesu:

• Wypełnienie górne, prawe, dolne i lewe: 0px
• Górny margines: -150px
• Kolumna 1 Górna wyściółka: 235px (komputer), 0px (tablet i telefon)
• Dolna wyściółka kolumny 1: 235px (komputer), 0px (tablet i telefon)
• Górna wyściółka kolumny 2: 150px
• Dolna wyściółka kolumny 2: 150px

Cień Pudełka

Otwórz podkategorię Box Shadow i użyj następujących ustawień:

• Pozycja pozioma cienia pudełka: -3px
• Pozycja pionowa cienia pudełka: -18px
• Siła rozmycia cieni w pudełku: 77px
• Siła rozprzestrzeniania się cieni w pudełku: 23px
• Kolor cienia: rgba(0,0,0,0.3)

Pierwszy moduł tekstowy

Następnie dodaj pierwszy moduł tekstowy do drugiej kolumny i użyj następujących ustawień dla podkategorii Tekst:

• Czcionka tekstu: Arvo
• Rozmiar czcionki tekstu: 34px
• Kolor tekstu: #7a7a7a
• Orientacja tekstu: Środek

Drugi moduł tekstowy

Dodaj kolejny moduł tekstowy, ale zamiast tego użyj następujących ustawień:

• Czcionka tekstu: Lato Light
• Orientacja tekstu: Środek

Otwórz podkategorię Sizing, użyj szerokości '75%' i wybierz centralne ustawienie modułu.

Na koniec dodaj górny margines „50px”.

Drugi dwukolumnowy rząd

Kolor tła wiersza

Dodaj kolejny dwukolumnowy wiersz do sekcji i wybierz „#b99bc1” jako kolor tła.

Kolor tła kolumny 1

Przewiń w dół i wybierz „#dddddd” jako kolor tła kolumny 1.

Rozmiary

Przejdź do karty Projekt i wprowadź następujące ustawienia w podkategorii Rozmiar:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Następnie użyj następującego dopełnienia:

• Wypełnienie górne, prawe, dolne i lewe: 0px
• Kolumna 1 Górna wyściółka: 150px (komputer), 0px (tablet i telefon)
• Dolna wyściółka kolumny 1: 50px (komputer), 0px (tablet i telefon)
• Górna wyściółka kolumny 2: 150px
• Dolna wyściółka kolumny 2: 150px

Cień Pudełka

Otwórz podkategorię Box Shadow i użyj następujących ustawień:

• Pozycja pozioma cienia pudełka: -4px
• Pozycja pionowa cienia pudełka: 24px
• Siła rozmycia cieni w pudełku: 77px
• Siła rozprzestrzeniania się cieni w pudełku: 23px
• Kolor cienia: rgba(0,0,0,0.3)
• Pozycja cienia pudełka: cień zewnętrzny

Moduł pierwszego obrazu w pierwszej kolumnie

Kontynuuj, dodając moduł obrazu do pierwszej kolumny. Po przesłaniu obrazu wprowadź następujące ustawienia dla podkategorii Odstępy:

• Pokaż przestrzeń pod obrazem: Tak
• Górny margines: -500px (komputer), 0px (tablet i telefon)
• Prawy margines: -50px (komputer), 0px (tablet i telefon)
• Lewy margines: 200px (komputer), 0px (tablet i telefon)

Otwórz podkategorię Cień pudełka i użyj następującego cienia pudełka:

• Pozycja pozioma cienia pudełka: 2px
• Pozycja pionowa cienia pudełka: 2px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 30px
• Kolor cienia: rgba (255,255,255,0.68)
• Pozycja cienia pudełka: cień zewnętrzny

Druga kolumna obrazu w pierwszej kolumnie

Dodaj kolejny moduł obrazu do tej samej kolumny i użyj następującego marginesu:

• Górny margines: -50px (komputer), 0px (tablet i telefon)
• Prawy margines: 100px (komputer), 0px (tablet i telefon)
• Margines dolny: 30px
• Lewy margines: 100px (komputer), 0px (tablet i telefon)

Następnie przewiń w dół i skorzystaj z następującego cienia pudełka:

• Pozycja pozioma cienia pudełka: 2px
• Pozycja pionowa cienia pudełka: 2px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 30px
• Kolor cienia: rgba (255,255,255,0.68)
• Pozycja cienia pudełka: cień zewnętrzny

Klonuj moduły tekstowe i umieszczaj je w drugiej kolumnie

Na koniec sklonuj dwa moduły tekstowe z poprzedniego wiersza i umieść je w drugiej kolumnie tego wiersza. Jest tylko jedna rzecz, którą musisz zmienić; kolor tekstu. Otwórz ustawienia każdego modułu tekstowego i zmień kolor tekstu na „#FFFFFF”.

Wynik

Pulpit

Wszystkie kroki w tym poście doprowadzą do następującego wyniku na komputerze:

mobilny

Oraz następujący wynik na urządzeniu mobilnym:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak kreatywnie wykorzystać cienie w rzędach. Stworzyliśmy kolorowy przykład, w którym wyraźnie widać, jak cienie głębi nadają układowi. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa Dmitrija Guzhanina / shutterstock.com