Przekształcanie kolumn w plany cenowe z Divi

Nowe opcje kolumn Divi wprowadziły mnóstwo nowych możliwości projektowych do naszych przepływów pracy. Pomagają łączyć wiele modułów bez konieczności dotykania pojedynczej linii kodu CSS. W tym poście zamierzamy przekształcić kolumny w plany cenowe, korzystając tylko z wbudowanych opcji Divi. Pobawimy się również opcjami transformacji najechania na kolumnę, aby uzyskać wspaniałe efekty najechania kursorem. Będziesz mógł również pobrać JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ planów cenowych kolumn ZA DARMO

Aby położyć ręce na układzie planów cenowych bezpłatnych kolumn, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Tło gradientowe

Dodaj nową zwykłą sekcję do strony, nad którą pracujesz, i otwórz ustawienia sekcji. Przejdź do ustawień tła i dodaj liniowe tło gradientowe:

• Kolor 1: #ededed
• Kolor 2: #ffffff
• Pozycja startowa: 30%
• Pozycja końcowa: 30%

Rozstaw

Dodaliśmy również górną i dolną wyściółkę do sekcji.

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

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy, przejdź do zakładki zaawansowane i odpowiednio zmień ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 80% (komputer stacjonarny i tablet), 90% (telefon)
• Maksymalna szerokość: 1400px (komputer), 90% (tablet), 100% (telefon)

Ustawienia kolumny 1

Musimy również zmodyfikować ustawienia kolumn, zaczynając od pierwszego. Otwórz ustawienia kolumny 1.

Tło gradientowe

Zastosuj następujące tło gradientowe do kolumny 1:

• Kolor 1: #f7f7f7
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dół
• Pozycja startowa: 31%
• Pozycja końcowa: 31%

Granica

Dodaj również promień obramowania „20px” do kolumny.

Cień Pudełka

Aby nadać stronie nieco głębi, dodamy również subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.11)

Domyślna skala transformacji

Jak widać na podglądzie tego posta, kolumny są nieco przeobrażone. Przejdź do ustawień transformacji i upewnij się, że opcja skali transformacji pozostaje „100%” w stanie domyślnym.

• Dół: 100%
• Prawo: 100%

Skala przekształcenia najechania

Zmodyfikuj wartości skali transformacji po najechaniu myszą.

• Dół: 120%
• Prawo: 120%

Domyślny tłumacz przekształcenia

Przesuwamy też lekko kolumnę w prawo na komputerze, używając ustawień tłumaczenia transformacji. Dodaj następujące dane wejściowe:

• Dół: 34px (komputer), 0px (tablet i telefon)
• Po prawej: 0px

Przekształć kursor myszy

Przywróć wartości translacji transformacji do normalnych po najechaniu myszą.

• Dół: 0px
• Po prawej: 0px

Domyślny obrót transformacji

Przejdź do ustawień obracania transformacji i dodaj następującą wartość po lewej stronie:

• Po lewej: 352deg (komputer stacjonarny), 0deg (tablet i telefon)

Po najechaniu na transformację Obrót

Przywróć wartość do „0deg” po najechaniu myszą.

• Lewo: 0 stopni

Przepełnienia

Później w tym poście dodamy przycisk na dole kolumny. Ten przycisk będzie nachodził na dolną granicę kolumny. Aby było to możliwe, musimy sprawić, by przepełnienia naszej kolumny były widoczne.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Domyślny indeks Z

Następnie zmień indeks z kolumny na różnych rozmiarach ekranu. Pomoże nam to utrzymać porządek w stosie.

• Indeks Z: 9 (komputer stacjonarny), 11 (tablet i telefon)

Unosić indeks Z

Po najechaniu myszą chcemy, aby kolumna pojawiła się nad innymi. Aby tak się stało, zwiększymy indeks z po najechaniu myszą.

• Indeks Z: 11

Przejścia

Tworzymy również płynne przejście, zwiększając czas trwania przejścia w ustawieniach przejść.

• Czas trwania przejścia: 500 ms

Ustawienia kolumny 2

Do drugiej kolumny! Śmiało i otwórz ustawienia kolumny.

Tło gradientowe

Zastosuj następujące ustawienia gradientu tła:

• Kolor 1: #fff200
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dół
• Pozycja startowa: 31%
• Pozycja końcowa: 31%

Granica

Następnie dodaj '20px' promienia obramowania.

Cień Pudełka

Wraz z subtelnym cieniem w pudełku.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0.14)

Domyślna skala transformacji

Druga kolumna to nasz polecany plan cenowy. Aby upewnić się, że nie pozostanie to niezauważone, zwiększymy rozmiar kolumny w ustawieniach skali transformacji.

• Dół: 112% (komputer stacjonarny), 100% (tablet i telefon)
• Po prawej: 112% (komputer stacjonarny), 100% (tablet i telefon)

Skala przekształcenia najechania

Zmodyfikuj wartości skali transformacji po najechaniu myszą.

• Dół: 120%
• Prawo: 120%

Przepełnienia

Następnie zmień przepełnienia poziome i pionowe.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Domyślny indeks Z

Następnie przejdź do ustawień widoczności i zwiększ indeks z kolumny.

• Indeks Z: 10

Unosić indeks Z

Zmodyfikuj indeks z po najechaniu myszą.

• Indeks Z: 12

Przejścia

I zwiększ czas trwania przejścia w ustawieniach przejść.

• Czas trwania przejścia: 500 ms

Kolumna 3 Ustawienia

Do trzeciej i ostatniej kolumny! Otwórz ustawienia kolumny.

Tło gradientowe

Przejdź do ustawień tła i dodaj następujące tło gradientowe:

• Kolor 1: #f7f7f7
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dół
• Pozycja startowa: 31%
• Pozycja końcowa: 31%

Granica

Następnie dodaj promień obramowania „20px”.

Cień Pudełka

Wraz z subtelnym pudełkowym cieniem.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.11)

Domyślna skala transformacji

Czas na przekształcenie kolumny! Upewnij się, że domyślne wartości skali transformacji pozostają „100%”.

• Dół: 100%
• Prawo: 100%

Skala przekształcenia najechania

Zmodyfikuj te wartości po najechaniu myszą.

• Dół: 120%
• Prawo: 120%

Domyślny tłumacz przekształcenia

Przesuwamy również kolumnę po lewej stronie na komputerze, stosując niektóre niestandardowe wartości tłumaczenia transformacji.

• Dół: -34px (komputer), 0px (tablet i telefon)
• Po prawej: 0px

Przekształć kursor myszy

Przywróć wartości do „0px” po najechaniu myszą.

• Dół: 0px
• Po prawej: 0px

Domyślny obrót transformacji

Kontynuuj, obracając kolumnę w stanie domyślnym.

• Po lewej: 8 stopni (komputer stacjonarny), 0 stopni (tablet i telefon)

Po najechaniu na transformację Obrót

Zmień lewą wartość obrotu transformacji z powrotem na „0px” po najechaniu myszą.

• Lewo: 0 stopni

Przepełnienia

Upewnij się, że przelewy są widoczne w następnej kolejności.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Domyślny indeks Z

Następnie przejdź do ustawień widoczności i upewnij się, że domyślny indeks z to 9.

• Indeks Z: 9

Unosić indeks Z

Zmodyfikuj indeks z po najechaniu myszą.

• Indeks Z: 11

Przejścia

I zwiększ czas trwania przejścia w ustawieniach przejść.

• Czas trwania przejścia: 500 ms

Dodaj moduł Blurb do kolumny 1

Dodaj tytuł

Czas zacząć dodawać moduły do ​​pierwszej kolumny! Dodaj nowy moduł Blurb i wstaw tytuł.

Wybierz ikonę

Następnie wybierz ikonę.

Ustawienia ikon

Przejdź do zakładki projekt i odpowiednio zmień ustawienia ikon:

• Kolor ikony: #000000
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 50px

Ustawienia tytułu

Następnie zmień ustawienia tekstu tytułu.

• Czcionka tytułu: Poppins
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 27px

Rozstaw

I dodaj też górny margines.

• Górny margines: 80px

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Przejdźmy do drugiego modułu, który jest modułem rozdzielającym. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Przejdź do zakładki projektu i zmień kolor przekładki na czarny.

• Kolor linii: #000000

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Waga dzielnika: 6px
• Szerokość: 14%
• Wyrównanie modułu: Środek
• Wysokość: 0px

Rozstaw

Na koniec dodaj trochę górnego marginesu.

• Górny margines: 50px

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Kontynuuj, dodając moduł tekstowy tuż pod modułem dzielnika i wstaw wybrane przez siebie treści.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Lekka
• Wyrównanie tekstu: do środka
• Kolor tekstu: #4f4f4f
• Wysokość linii tekstu: 2,3 em

Rozstaw

Dodaj również niestandardowe wartości marginesów i dopełnienia.

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

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Tuż pod poprzednim modułem tekstowym będziemy potrzebować kolejnego modułu tekstowego. Wprowadź wybraną treść.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Ciężka
• Wyrównanie tekstu: do środka
• Kolor tekstu: #000000
• Rozmiar tekstu: 47px
• Wysokość linii tekstu: 1em

Rozstaw

Dodaj również niestandardowy górny i dolny margines.

• Górny margines: 50px
• Margines dolny: 80px

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł przycisku. Wprowadź wybraną kopię.

Wyrównanie

Przejdź do zakładki projektu i zmień wyrównanie przycisku na środek.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Stylizuj również przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 17px
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #FFFFFF
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px
• Czcionka przycisku: Poppins
• Waga czcionki przycisku: pogrubiona

Rozstaw

Dodamy również kilka niestandardowych wartości marginesów i dopełnienia.

• Górny margines: 50px
• Margines dolny: -40px
• Górna wyściółka: 23px
• Dolna wyściółka: 23px
• Lewa wyściółka: 70px
• Prawe wypełnienie: 70px

Cień Pudełka

Uzupełnimy to, nadając modułowi przycisku subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0.3)

Sklonuj wszystkie moduły dwukrotnie i umieść duplikaty w pozostałych kolumnach

Po ukończeniu wszystkich modułów w kolumnie 1 możesz je sklonować dwukrotnie i umieścić duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień ikony i tytuły Blurb

Pamiętaj, aby zmienić ikony i tytuły notatek dla każdego duplikatu.

Zmień zawartość modułu tekstowego

Wraz z treścią modułu tekstowego.

Zmień przycisk #2

Na koniec otwórz przycisk w kolumnie 2 i zmień ustawienia przycisku. Po wykonaniu tego kroku gotowe!

• Kolor tekstu przycisku: #FFFFFF
• Kolor tła przycisku: #8300E9

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak przekształcić kolumny w plany cenowe, korzystając z nowych opcji kolumn Divi. Możesz dostosować plany cenowe bez konieczności dotykania jednej linii kodu CSS! Ten samouczek pokazuje tylko, jak nowe opcje kolumn pomagają łączyć różne moduły w piękny projekt. Jeśli masz jakieś pytania lub sugestie, zostaw je w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.