Tworzenie sekcji „Nasz proces” z nowymi strukturami kolumn Divi

Nowe konstrukcje kolumn Divi niezaprzeczalnie dodały tonę więcej wbudowanych możliwości projektowych do Divi. Aby pokazać, jak wyjątkowy możesz uzyskać dzięki wszechstronnym strukturom kolumn Divi, pokażemy Ci, jak stworzyć unikalną sekcję „nasz proces”, korzystając tylko z wbudowanych opcji Divi. Ponadto dodamy również subtelny efekt najechania, który pojawia się po najechaniu na jeden z etapów procesu. Te sekcje doskonale nadają się do wyjaśnienia, w jaki sposób robisz to, co robisz swoim klientom lub potencjalnym klientom.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się wynikom, jakich możesz się spodziewać po tym samouczku.

Dodaj nową sekcję

Kolor tła

Dodaj standardową sekcję do nowej lub istniejącej strony i użyj dla niej następującego koloru tła:

• Kolor tła: #3a1dad

Rozstaw

Przejdź do ustawień odstępów i dodaj niestandardową górną i dolną wyściółkę.

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

Widoczność

Tworzymy alternatywę na mniejszych ekranach, ale zaczniemy od tworzenia wersji na komputery. Dlatego wyłączyliśmy tę sekcję na telefonie i tablecie w ustawieniach widoczności.

Dodaj wiersz nr 1

Struktura kolumny

Po zakończeniu modyfikowania ustawień sekcji kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Dodaj tło gradientowe do kolumny 1, 3 i 5

Aby stworzyć ładny efekt najechania, dodamy gradientowe tło do kolumn 1, 3 i 5. Są to kolumny, z których każda będzie zawierać etap procesu. Użyjemy dwóch pozostałych kolumn, aby połączyć ze sobą kroki. Każda z trzech wspomnianych przez nas kolumn będzie wymagała tego samego tła gradientowego:

• Kolor 1: #580cf2
• Kolor 2: rgba (41,196,169,0)
• Kolumna 1 Typ gradientu: Promieniowy
• Pozycja początkowa kolumny 1: 38%
• Pozycja końcowa kolumny 1: 38%

Rozmiary

Po zakończeniu dodawania tła gradientowego przejdź do ustawień rozmiaru i włącz opcję pełnej szerokości.

• Stwórz ten wiersz o pełnej szerokości: Tak

Rozstaw

Będziemy również potrzebować niestandardowych wartości dopełnienia dla całego wiersza i kolumny, które są przeznaczone do przechowywania kroków procesu.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Górna wyściółka kolumny 1: 20px
• Dolna wyściółka kolumny 1: 20px
• Kolumna 3 Górna wyściółka: 20px
• Dolna wyściółka kolumny 3: 20px
• Kolumna 5 Górna wyściółka: 20px
• Dolna wyściółka kolumny 5: 20px

Klonuj rząd nr 1 dwa razy

Przed dodaniem jakichkolwiek modułów sklonujemy wiersz dwukrotnie. Pomoże nam to zaoszczędzić czas w kolejnych krokach.

Modyfikuj pierwszy duplikat

Usuń tła gradientu kolumn

Otwórz drugi wiersz w swojej sekcji (pierwszy duplikat) i usuń wszystkie tła gradientu kolumn, które zostały do ​​niego zastosowane. Nie będziemy ich potrzebować, ponieważ w drugim rzędzie nie będzie żadnych etapów procesu, a jedynie tytuł i pionowe przegrody, które połączą te etapy.

Usuń odstępy między kolumnami

Podobnie usuń wszystkie niestandardowe dopełnienie kolumny, które zostało zastosowane do kolumny 1, 3 i 5.

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

Dodaj moduł Blurb do pierwszej kolumny rzędu #1

Dodaj zawartość

Czas zacząć dodawać moduły! Zaczniemy od modułu Blurb w kolumnie 1 pierwszego wiersza. Ten moduł Blurb będzie zawierał treść naszego pierwszego kroku, więc śmiało dodaj wybrany przez siebie tekst.

Wybierz ikonę

Używamy również następującej ikony, która wskaże, gdzie szukać następnego kroku:

Domyślny kolor tła

Następnie dodaj domyślny kolor tła do modułu Blurb. Ten kolor tła jest taki sam, jak ten, którego użyliśmy w sekcji. Ukrywa tło gradientu kolumny, które dodaliśmy w poprzedniej części tego samouczka.

• Kolor tła: #3a1dad

Wskaż kolor tła

Jednak chcemy, aby po najechaniu kursorem wyświetlało się tło gradientu kolumny. Dlatego zmieniamy kolor tła po najechaniu myszą na całkowicie przezroczysty.

• Kolor tła: rgba (255,255,255,0)

Domyślne ustawienia ikon

Kontynuuj, przechodząc do ustawień ikon i wprowadzając pewne zmiany.

• Kolor ikony: #9d8ad8
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 80px

Ustawienia ikony kursora

Zastosuj inny kolor ikony i rozmiar czcionki po najechaniu myszą.

• Kolor ikony: #ffffff
• Rozmiar czcionki ikony: 120px

Ustawienia tekstu

Następnie przejdź do ustawień tekstu i wprowadź zmiany.

• Orientacja tekstu: Środek
• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Należy również zmodyfikować ustawienia tekstu tytułu.

• Grubość czcionki tytułu: Ultra Bold
• Styl czcionki tytułu: wielkie litery

Przejścia

Aby stworzyć płynne przejście, zwiększymy czas trwania przejścia.

• Czas trwania przejścia: 500 ms

Moduł i miejsce klonowania w nierównych kolumnach (zarówno rząd #1, jak i #3)

Teraz, gdy stworzyliśmy pierwszy krok modułu Blurb, możemy go sklonować 5 razy i umieścić duplikaty w kolumnach zaznaczonych na poniższym zrzucie ekranu.

Zmień zawartość i ikonę każdego duplikatu

Oczywiście będziesz musiał zmienić zawartość każdego z duplikatów wraz z ikoną, aby upewnić się, że proces ma sens.

Dodaj przegrodę poziomą do drugiej kolumny rzędu nr 1

Widoczność

Drugim modułem, który musimy dodać, jest moduł dzielnika. Używamy tego modułu, aby połączyć ze sobą wszystkie kroki modułu Blurb. Śmiało i dodaj jeden do drugiej kolumny pierwszego rzędu.

• Pokaż dzielnik: tak

Kolor dzielnika

Następnie zmień kolor separatora.

• Kolor: #dddddd

Rozstaw

Aby wyrównać moduł rozdzielacza w pionie, użyjemy górnego marginesu. Zwiększymy również szerokość modułu, używając ujemnego lewego i prawego marginesu.

• Górny margines: 150px
• Lewy margines: -60px
• Po prawej: -60px

Klonuj dzielnik poziomy i umieść w równych kolumnach (zarówno rząd #1, jak i #3)

Sklonuj moduł rozdzielacza i umieść go w kolumnach zaznaczonych na poniższym zrzucie ekranu:

Dodaj podziałkę pionową do pierwszej kolumny rzędu nr 2

Widoczność

Potrzebujemy również pionowej przegrody. Aby go utworzyć, dodamy nowy moduł dzielnika do kolumny 1 drugiego rzędu, ale upewnimy się, że opcja „Pokaż dzielnik” jest wyłączona.

• Pokaż dzielnik: Nie

Kolor tła

Następnie dodaj kolor tła do modułu.

• Kolor tła: #dddddd

Rozmiary

Następnie zmień ustawienia rozmiaru. Gdy to zrobisz, zauważysz, że pionowa przegroda opada na swoje miejsce.

• Szerokość: 0,5%
• Wyrównanie modułu: Środek

Rozstaw

Aby zwiększyć wysokość dzielnika pionowego, użyjemy kilku niestandardowych wartości odstępów.

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

Klonuj pionowy rozdzielacz i umieść duplikat w kolumnie 5 rzędu nr 2

Sklonuj utworzony pionowy separator i umieść go w ostatniej kolumnie drugiego rzędu.

Dodaj moduł tekstu tytułu do kolumny 3 wiersza #2

Dodaj zawartość

Ostatnim modułem, którego będziemy potrzebować, jest tytułowy moduł tekstowy. Dodaj ten moduł do trzeciej kolumny drugiego rzędu z wybraną zawartością.

Ustawienia tekstu nagłówka

Przejdź do ustawień tekstu nagłówka i wprowadź zmiany w wyglądzie tytułu.

• Grubość czcionki nagłówka 2: Ultra Bold
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: rgba (255,255,255,0,09)
• Rozmiar tekstu nagłówka 2: 220px (komputer), 150px (tablet), 100px (telefon)
• Odstępy między nagłówkami 2 liter: -50px (komputer), -30px (tablet), -25px (telefon)

Rozstaw

Na koniec dodaj kilka niestandardowych wartości odstępów, aby umożliwić umieszczenie modułu tekstowego tytułu na swoim miejscu.

• Górny margines: 30px
• Lewy margines: -800px
• Prawy margines: -800px

Utwórz alternatywę dla tabletu i telefonu

Dodaj nową sekcję

Kolor tła

Jak wspomnieliśmy na początku tego postu, zamierzamy stworzyć alternatywę dla mniejszych rozmiarów ekranu. Śmiało i dodaj nową zwykłą sekcję, używając tego samego koloru tła, co poprzednia.

• Kolor tła: #3a1dad

Rozstaw

Dodaj niestandardowe górne i dolne wartości dopełnienia.

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

Widoczność

I ukryj sekcję na pulpicie w ustawieniach widoczności.

Dodaj wiersz nr 1

Struktura kolumny

Zamiast używać 6-kolumnowego wiersza, jak to zrobiliśmy w przypadku sekcji pulpitu, używamy tylko jednej kolumny.

Klonuj moduł tekstowy tytułu poprzedniej sekcji i umieść w wierszu nr 1

Sklonuj tytułowy moduł tekstowy sekcji pulpitu i umieść duplikat w nowym wierszu.

Usuń odstępy

Kontynuuj, usuwając ustawienia odstępów tego modułu.

Dodaj wiersz nr 2

Struktura kolumny

Następnie dodaj kolejny wiersz z jedną kolumną.

Moduł Clone Blurb z poprzedniej sekcji i miejsce w rzędzie nr 2

Sklonuj jeden z kroków modułu Blurb w sekcji pulpitu i umieść duplikat w nowym wierszu.

Zmień ikonę

Zmień ikonę na tę, która jest skierowana w dół.

Zmień rozmiar

Następnie zmień ustawienia rozmiaru.

• Szerokość: 39% (Tablet), 59% (Telefon)
• Wyrównanie modułu: Środek

Klonuj pionowy rozdzielacz poprzedniej sekcji i umieść w rzędzie nr 2

Używamy również pionowego dzielnika z poprzedniej sekcji. Śmiało, sklonuj go i umieść duplikat tuż pod Modułem Blurb.

Zmień odstępy

Zmień ustawienia odstępów tego modułu, aby zmniejszyć jego wysokość.

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

Klonuj oba moduły tyle razy, ile chcesz

Możesz klonować oba te moduły tyle razy, ile chcesz, aby pokazać wszystkie etapy procesu na mniejszych ekranach.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi.

Końcowe przemyślenia

W tym poście pokazaliśmy, jak kreatywnie wykorzystać struktury kolumn Divi, aby stworzyć oszałamiającą i unikalną sekcję procesu. Ponadto dodaliśmy subtelny efekt najechania na każdy z etapów procesu, który pojawia się po najechaniu na element. Zapraszam do zabawy z tym projektem, aby stworzyć własną unikalną alternatywę. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!