Jak tworzyć piękne przejścia sekcji za pomocą nowych funkcji projektowych Divi?

W tym samouczku Divi pokażemy, jak tworzyć piękne przejścia sekcji, korzystając tylko z wbudowanych opcji Divi.

Sekcje są podstawą wszystkich treści, które udostępniasz w swojej witrynie. Każda sekcja jest rozdziałem, a przechodzenie z jednej sekcji do drugiej jest częścią procesu opowiadania historii. Uczynienie tego przejścia tak płynnym, jak to tylko możliwe, podkreśli komunikat, który próbujesz wyrazić. Aby Ci w tym pomóc, pokażemy Ci, jak stworzyć piękne przejścia między sekcjami do następnego projektu strony internetowej.

zapowiedź

Zanim zagłębimy się w poszczególne przejścia poszczególnych sekcji, przyjrzyjmy się, czego możesz się spodziewać:

Jak tworzyć piękne przejścia sekcji za pomocą nowych funkcji projektowych Divi?

Subskrybuj nasz kanał YouTube

Odtwórz sekcje

Zaczniemy od odtworzenia dwóch sekcji, których będziemy używać we wszystkich przykładach. W tych dwóch sekcjach użyliśmy niezbędnego dopełnienia, aby jak najlepiej wykorzystać przejścia. Jeśli jednak używasz sekcji o innej wysokości, może się zdarzyć, że będziesz musiał nieznacznie dostosować tła gradientowe, które są używane, aby idealnie pasowały do ​​sekcji.

Utwórz pierwszą sekcję

Zacznij od utworzenia pierwszej sekcji standardowej i wybrania wiersza o pełnej szerokości.

Ustawienia sekcji

Będziemy potrzebować górnego i dolnego wypełnienia „300px”, które możesz dodać w podkategorii Odstępy na karcie Projekt.

Pierwszy moduł tekstowy

Następnie dodamy moduł tekstowy do naszego wiersza o pełnej szerokości. Wpisz tekst, który chcesz wyświetlić, i przejdź do karty Projekt. Na karcie Projekt użyj następujących ustawień dla podkategorii Tekst:

• Czcionka tekstu: Comforta
• Rozmiar czcionki tekstu: 50
• Wysokość linii tekstu: 1,7 em
• Orientacja tekstu: Środek

Drugi moduł tekstowy

Zrób to samo dla drugiego modułu tekstowego, ale zamiast tego użyj następujących ustawień:

• Czcionka tekstu: Comforta
• Rozmiar czcionki tekstu: 16
• Wysokość linii tekstu: 1,7 em
• Orientacja tekstu: Środek

Moduł przycisku

Na koniec dodamy również moduł przycisku. Zacznij od wybrania wyrównania środka na karcie Projekt.

Następnie otwórz podkategorię Przycisk, włącz opcję „Użyj niestandardowych stylów dla przycisku” i wybierz „20” jako Rozmiar tekstu przycisku.

Będąc nadal w podkategorii Przycisk, użyj dla przycisku następującego tła gradientowego:

• Pierwszy kolor: #2b87da
• Drugi kolor: #29c4a9
• Typ gradientu: liniowy
• Kierunek gradientu: 162 stopni
• Pozycja startowa: 0%
• Pozycja końcowa: 100%

Utwórz drugą sekcję

Dodaj kolejną sekcję standardową, ale zamiast tego wybierz wiersz z trzema kolumnami.

Ustawienia sekcji

Druga sekcja będzie również wykorzystywać dopełnienie „300px” na górze i na dole.

Moduł Blurb

Następnie dodamy moduł Blurb do pierwszej kolumny wiersza. Po wybraniu tekstu, który chcesz wyświetlić, przewiń w dół kartę Treść, włącz opcję „Użyj ikony” i wybierz ikonę.

Gdy to zrobisz, przejdź do karty Projekt i użyj następujących ustawień dla podkategorii Ikona:

• Kolor ikony: #515151
• Umieszczenie obrazu/ikony: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 55px

Następnie upewnij się, że następujące ustawienia dotyczą podkategorii Tekst nagłówka:

• Czcionka nagłówka: Comfortaa
• Wyrównanie tekstu nagłówka: do środka
• Rozmiar czcionki nagłówka: 18

I na koniec, są to ustawienia podkategorii Body Text:

• Czcionka ciała: Comfortaa
• Wyrównanie tekstu podstawowego: do środka
• Rozmiar czcionki ciała: 14
• Wysokość linii ciała: 1,7 em

Moduł Clone Blurb

Po utworzeniu modułu Blurb sklonuj go dwukrotnie i umieść w pozostałych dwóch kolumnach rzędu.

1. Cała droga po przekątnej

Teraz, gdy stworzyliśmy sekcje, czas zacząć dodawać przejścia sekcji. Pierwszy przykład, który pokażemy, jak stworzyć składa się z prostych ukośnych linii.

Gradientowe ustawienia tła pierwszej sekcji

Otwórz ustawienia pierwszej sekcji i dodaj następujące tło gradientowe:

• Pierwszy kolor: #dddddd
• Drugi kolor: #f7f7f7
• Typ gradientu: liniowy
• Kierunek gradientu: 183deg
• Pozycja startowa: 85%
• Pozycja końcowa: 70,05%

Gradientowe ustawienia tła drugiej sekcji

Druga sekcja będzie wymagała następujących ustawień tła gradientowego:

• Pierwszy kolor: #f7f7f7
• Drugi kolor: #dddddd
• Typ gradientu: liniowy
• Kierunek gradientu: 183deg
• Pozycja startowa: 85%
• Pozycja końcowa: 69,05%

Usuń górną wyściółkę drugiej sekcji

Ostatnią rzeczą, którą musisz zrobić w tym przykładzie, jest usunięcie górnej wyściółki drugiej sekcji.

2. Spotkajmy się w połowie drogi

Następny przykład, który chcielibyśmy udostępnić, jest bardzo elegancki, w którym zastosowano dwa przeciwległe tła gradientowe. Dzięki temu efektowi sekcje wydają się następować po sobie.

Gradientowe ustawienia tła pierwszej sekcji

W pierwszej sekcji będziemy potrzebować następujących ustawień tła gradientowego:

• Pierwszy kolor: rgba (255,255,255,0)
• Drugi kolor: rgba (224,43,32,0,07)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny lewy
• Pozycja startowa: 60%
• Pozycja końcowa: 50%

Gradientowe ustawienia tła drugiej sekcji

Druga sekcja będzie miała następujące tło gradientowe:

• Pierwszy kolor: rgba (255,255,255,0)
• Drugi kolor: rgba (224,43,32,0.33)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dolny prawy
• Pozycja startowa: 58%
• Pozycja końcowa: 50%

3. Fuzja

Następny przykład trochę różni się od pozostałych. Potrzebna będzie dodatkowa sekcja między obiema sekcjami, aby osiągnąć wynik, który można zauważyć na poniższym obrazku.

Gradientowe ustawienia tła pierwszej sekcji

W pierwszej sekcji będziesz potrzebować następującego tła gradientowego:

• Pierwszy kolor: rgba (12 113 195 0,19)
• Drugi kolor: rgba (255,255,255,0.39)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dolny lewy
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Gradientowe ustawienia tła drugiej sekcji

W drugiej sekcji użyjemy następujących ustawień tła gradientowego:

• Pierwszy kolor: rgba (224,43,32,0.17)
• Drugi kolor: rgba (255,255,255,0.39)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny prawy
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Dodaj nową sekcję standardową pomiędzy

Po dodaniu tła gradientowego do obu sekcji nadszedł czas, aby dodać sekcję pomiędzy nimi.

Dodaj gradientowy kolor tła do nowej sekcji

Ta nowa sekcja będzie również potrzebowała tła gradientowego, korzystając z następujących ustawień:

• Pierwszy kolor: rgba (12 113 195 0,19)
• Drugi kolor: rgba (224,43,32,0.17)
• Typ gradientu: liniowy
• Kierunek gradientu: 92deg
• Pozycja startowa: 43%
• Pozycja końcowa: 62%

4. Odwrotność

Następnie mamy również przejście sekcji, które nie jest tak efektowne jak inne, ale nadal dodaje subtelnego akcentu do twoich sekcji.

Gradientowe ustawienia tła pierwszej sekcji

Tło gradientowe dla pierwszej sekcji jest następujące:

• Pierwszy kolor: #f2f2f2
• Drugi kolor: rgba (104.153.193.0.58)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dolny prawy
• Pozycja startowa: 7,9%
• Pozycja końcowa: 7,9%

Gradientowe ustawienia tła drugiej sekcji

Drugie tło gradientowe będzie wymagało następujących ustawień tła gradientowego:

• Pierwszy kolor: rgba (104.153.193.0.58)
• Drugi kolor: #f2f2f2
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny prawy
• Pozycja startowa: 8%
• Pozycja końcowa: 8%

5. Wskaźniki

Piąty przykład wygląda nieco czyściej i minimalistycznie niż pozostałe. Możesz postrzegać przejście na dwa sposoby, widząc albo wskaźniki, albo kółka (lub oba).

Gradientowe ustawienia tła pierwszej sekcji

W pierwszej sekcji użyj następującego tła gradientowego:

• Pierwszy kolor: #f4f4f4
• Drugi kolor: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 88%
• Pozycja końcowa: 88,05%

Gradientowe ustawienia tła drugiej sekcji

Na koniec zastosuj następujące ustawienia gradientu tła do drugiej sekcji:

• Pierwszy kolor: rgba (43,135,218,0)
• Drugi kolor: rgba (12 113 195, 0,43)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dół
• Pozycja startowa: 87%
• Pozycja końcowa: 87%

6. Układanka

Ostatni przykład zdecydowanie sprawia, że ​​sekcje wydają się należeć do siebie.

Gradientowe ustawienia tła pierwszej sekcji

Otwórz ustawienia pierwszej sekcji i użyj następującego tła gradientowego:

• Pierwszy kolor: rgba (160,181,193,0,46)
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 56,3%
• Pozycja końcowa: 43%

Gradientowe ustawienia tła drugiej sekcji

Następnie użyj następujących ustawień gradientu tła dla drugiej sekcji:

• Pierwszy kolor: rgba(242,242,242,0)
• Drugi kolor: rgba (160,181,193,0,46)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 56%
• Pozycja końcowa: 40%

Zmień wypełnienie pierwszej sekcji

Aby obie sekcje lepiej pasowały, zmienimy górne i dolne wypełnienie pierwszej sekcji na „150px”.

Usuń górną wyściółkę drugiej sekcji

Na koniec usuniemy również górną wyściółkę drugiej sekcji.

Końcowe przemyślenia

Przejścia sekcji pomagają połączyć różne sekcje i ich przeznaczenie. W tym poście udostępniliśmy 6 przykładów, które możesz odtworzyć, używając niczego poza wbudowanymi opcjami Divi. Jeśli masz jakieś pytania lub sugestie; możesz zostawić 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 NikVector / shutterstock.com