Jak korzystać z nowych struktur kolumn Divi do tworzenia oszałamiających przejść między sekcjami

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy, jak wykorzystać nowe struktury kolumn Divi do tworzenia oszałamiających przejść między sekcjami. Połączymy różne struktury kolumn z niektórymi wbudowanymi opcjami Divi, aby przenieść projekt naszej strony na wyższy poziom.

Weźmy się za to!

Zapowiedź

Zacznijmy od przyjrzenia się trzem różnym przykładom, które stworzymy od podstaw, używając tylko wbudowanych opcji Divi. Te przykłady wyglądają równie dobrze na mniejszych ekranach.

Użyj strony docelowej pakietu układu makijażu Divi

Zamierzamy użyć strony docelowej pakietu Divi's Makeup Artist Layout Pack. Jeśli chcesz sprawdzić pakiet układów, przejdź do następującego wpisu na blogu. Chociaż demonstrujemy ten samouczek przy użyciu określonego pakietu układów, możesz łatwo użyć technik również w innych układach.

Przejście sekcji #1

Dodaj nową sekcję

Znajdź

Otwórz stronę docelową pakietu Makeup Artist Layout Pack za pomocą programu Divi's Visual Builder. Następnie dodaj nową zwykłą sekcję tuż pod sekcją bohatera:

Rozstaw

Następnie usuń wszystkie domyślne odstępy sekcji:

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji o następującej strukturze kolumn:

Rozmiary

Zwiększ również szerokość rzędu:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 0

Rozstaw

Następnie usuń domyślne górne i dolne wyściółki:

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Filtr

Aby wiersz był bardziej żywy, zwiększ nasycenie w ustawieniach filtra:

• Nasycenie: 200%

Dodaj moduł rozdzielacza nr 1 do kolumny 1

Ukryj rozdzielacz

Aby utworzyć pierwszy kwadrat w naszym projekcie, dodamy moduł dzielnika do kolumny 1. Wyłącz opcję „Pokaż dzielnik”.

Tło gradientowe

Następnie dodaj gradientowe tło do modułu dzielnika:

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: rgba (176 182 219 0,34)

Rozstaw

Aby utworzyć kwadrat, zmień wartości odstępów:

• Górny margines: -120px
• Górna wyściółka: 120px
• Dolna wyściółka: 120px

Moduł dzielnika klonów i miejsce w kolumnie 2

Gdy skończysz modyfikować moduł rozdzielacza, sklonuj go i umieść w drugiej kolumnie.

Zmień tło gradientowe

W tym duplikacie należy wprowadzić pewne zmiany, zaczynając od tła gradientowego:

• Kolor 1: rgba(228,237,234,0,58)
• Kolor 2: rgba (255,255,255,0)

Zmień odstępy

Zmień również ustawienia odstępów. Zwiększy to odległość między tym modułem rozdzielającym a modułem w pierwszej kolumnie.

• Górny margines: 142px
• Górna wyściółka: 120px
• Dolna wyściółka: 120px

Moduł dzielnika klonów #1 dwa razy i umieść w kolumnie 3 i 5

Dwukrotnie sklonuj fioletowy moduł rozdzielający i umieść duplikaty w kolumnach 3 i 5.

Moduł rozdzielacza klonów #2 i umieść go w kolumnie 4

Sklonuj również zielony moduł rozdzielający i umieść go w kolumnie 4.

Ukryj moduł dzielnika w kolumnie 3, 4 i 5 na tablecie i telefonie

Otwórz moduł rozdzielający w kolumnie 3

Oczywiście chcemy, aby przejścia sekcji wyglądały równie dobrze na mniejszych ekranach. Dlatego zamierzamy ukryć niektóre z używanych przez nas modułów. Zacznij od otwarcia ustawień modułu rozdzielacza w kolumnie 3.

Ukryj na tablecie i telefonie

Przejdź do zakładki Zaawansowane i wyłącz moduł na telefonie i tablecie.

Kopiuj style widoczności

Musimy również ukryć przegrody w kolumnach 4 i 5. Aby przyspieszyć proces, skopiuj ustawienia widoczności dzielnika w kolumnie 3:

Wklej style widoczności

I wklej je do modułów rozdzielających w kolumnach 4 i 5.

Przejście sekcji #2

Dodaj nową sekcję

Znajdź

Aby utworzyć drugie przejście sekcji, dodaj tutaj nową sekcję:

Górny rozdzielacz

Otwórz ustawienia sekcji i dodaj następującą górną przegrodę:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #ffffff
• Wysokość dzielnika: 236px
• Przerzucanie dzielnika: Pionowy
• Układ rozdzielający: nad zawartością sekcji

Dolny rozdzielacz

Podobnie dodaj również dolną przegrodę:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #ffffff
• Wysokość dzielnika: 236px
• Układ rozdzielający: na górze treści sekcji

Rozstaw

Następnie zmień ustawienia odstępów:

• Górny margines: 100px
• Margines dolny: 100px
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Czas dodać wiersz do nowej sekcji! Wybierz następującą strukturę kolumn:

Rozmiary

Bez dodawania żadnych modułów otwórz ustawienia wierszy i zmień szerokość:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki:

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł rozdzielacza nr 1 do kolumny 1

Kolor tła

Następnie dodaj moduł rozdzielający do pierwszej kolumny. Otwórz jego ustawienia i dodaj kolor tła:

• Kolor tła: rgba (176 182 219 0,34)

Kolor dzielnika

Zmień również kolor separatora:

• Kolor dzielnika: #ffffff

Styl dzielnika

Następnie przejdź do ustawień stylów i użyj następującego stylu dzielnika:

• Styl dzielnika: podwójny

Waga rozdzielacza

Waga przegrody powinna wynosić:

• Waga dzielnika: 18px

Rozstaw

Na koniec zwiększ rozmiar modułu rozdzielacza za pomocą niestandardowego dopełnienia:

• Górna wyściółka: 50px
• Dolna wyściółka: 50px

Moduł dzielnika klonów i miejsce w kolumnie 2

Gdy skończysz z modułem rozdzielającym w pierwszej kolumnie, sklonuj go i umieść duplikat w drugiej kolumnie.

Zmień kolor tła

Zmień odpowiednio kolor tła tego duplikatu:

• Kolor tła: #e4edea

Moduł rozdzielacza klonów #1 i umieść go w kolumnie 3 i 5

Kontynuuj, dwukrotnie sklonując fioletowy moduł rozdzielający i umieszczając duplikaty w kolumnach 3 i 5.

Moduł rozdzielacza klonów #2 i umieść go w kolumnie 4

Sklonuj również zielony moduł rozdzielający i umieść duplikat w kolumnie 4.

Ukryj moduł dzielnika w kolumnie 3, 4 i 5 na tablecie i telefonie

Ukryj na tablecie i telefonie

Zrobimy to samo, co zrobiliśmy dla pierwszego przykładu przejścia sekcji. Otwórz ustawienia modułu dzielnika w kolumnie 3 i ukryj go na telefonie i tablecie.

Kopiuj style widoczności

Skopiuj te style widoczności.

Wklej style widoczności

I wklej je do modułów rozdzielających w kolumnach 4 i 5.

Przejście sekcji nr 3

Dodaj nową sekcję

Znajdź

Aby dodać ostatnie przejście sekcji do swojej strony, dodaj nową sekcję tutaj:

Górny rozdzielacz

Otwórz ustawienia sekcji i dodaj górną przegrodę:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #ffffff
• Wysokość dzielnika: 150px
• Układ rozdzielający: nad zawartością sekcji

Dolny rozdzielacz

Dodaj dolny następny:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #ffffff
• Wysokość dzielnika: 150px
• Przerzucanie dzielnika: Pionowy
• Układ rozdzielający: nad zawartością sekcji

Rozstaw

Następnie przejdź do ustawień odstępów i wprowadź zmiany:

• Górny margines: 100px
• Margines dolny: 100px
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Wiersz, którego będziemy potrzebować w tej sekcji, ma następującą strukturę kolumn:

Rozmiary

Bez dodawania żadnych modułów otwórz ustawienia wiersza i zwiększ szerokość wiersza:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki:

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł rozdzielacza nr 1 do kolumny 1

Ukryj rozdzielacz

Kontynuuj, dodając moduł rozdzielający do pierwszej kolumny. Wyłącz opcję „Pokaż dzielnik”.

Kolor tła

Zamiast tego dodaj kolor tła do separatora:

• Kolor tła: rgba (176 182 219 0,34)

Rozstaw

Zwiększ rozmiar modułu za pomocą górnego i dolnego wyściółki:

• Górna wyściółka: 100px
• Dolna wyściółka: 100px

Moduł dzielnika klonów i miejsce w kolumnie 2

Zmień kolor tła

Sklonuj moduł rozdzielający w pierwszej kolumnie i umieść duplikat w drugiej. Otwórz jego ustawienia i zmień kolor tła:

• Kolor tła: rgba (228,237,234,0,58)

Moduł rozdzielacza klonów #1 i umieść go w kolumnie 3 i 5

Dwukrotnie sklonuj fioletowy moduł rozdzielający i umieść go w kolumnie 3 i 5.

Moduł rozdzielacza klonów #2 i umieść go w kolumnie 4

Sklonuj również zielony moduł rozdzielający i umieść duplikat w kolumnie 4.

Ukryj moduł dzielnika w kolumnie 3, 4 i 5 na tablecie i telefonie

Ukryj na tablecie i telefonie

Ukryj moduł rozdzielacza w kolumnie 3 na tablecie i telefonie.

Kopiuj style widoczności

Skopiuj te style widoczności.

Wklej style widoczności

I wklej je w module dzielnika w kolumnie 4 i 5 i gotowe!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się trzem różnym przykładom, które stworzyliśmy.

Końcowe przemyślenia

W tym poście na blogu dotyczącym przypadków użycia pokazaliśmy, jak używać nowych struktur kolumn Divi do tworzenia oszałamiających przejść między sekcjami. Ten samouczek jest częścią naszej ciągłej inicjatywy projektowej Divi, w której każdego tygodnia staramy się umieszczać coś w twoim przyborniku projektowym. Jeśli masz jakieś pytania, koniecznie zostaw komentarz w sekcji komentarzy poniżej!