Jak stylizować piękną tabelę cen w Divi

Tabele cenowe są często głównym wezwaniem do działania na stronie. Dlatego ważne jest, aby odpowiednio je wystylizować. Dzięki Divi możesz wykonywać wiele tur i tworzyć tabele cenowe dokładnie tak, jak je sobie wyobrażasz. Aby dać ci trochę do myślenia, stworzyliśmy oszałamiającą tabelę cenową, której możesz użyć dla każdego rodzaju witryny, nad którą pracujesz. Poprowadzimy Cię przez tworzenie wyniku od A do Z, korzystając wyłącznie z wbudowanych opcji Divi.

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 obrazy ZA DARMO

Aby położyć ręce na obrazach używanych w tym samouczku, najpierw musisz je 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!

Jak stylizować piękną tabelę cen w Divi

Subskrybuj nasz kanał YouTube

Zacznijmy tworzyć!

Dodaj nową sekcję

Tło gradientowe

Utwórz nową stronę i dodaj zwykłą sekcję, używając następującego tła gradientowego:

• Kolor 1: #ffffff
• Kolor 2: #353272
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Rozstaw

Następnie przejdź do ustawień odstępów sekcji i zmodyfikuj niestandardowe wartości marginesów i dopełnienia.

• Margines dolny: 50px (komputer), 20px (tablet i telefon)
• Lewy margines: 50px (komputer), 20px (tablet i telefon)
• Prawy margines: 50px (komputer), 20px (tablet i telefon)
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Po zakończeniu modyfikowania ustawień sekcji możesz dodać nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w zakładce projektu.

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

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 94px
• Dolna wyściółka: 177px
• Lewe wypełnienie: 150px (komputer stacjonarny), 30px (tablet i telefon)
• Prawe dopełnienie: 150px (komputer), 30px (tablet i telefon)
• Dopełnienie kolumny 1, 2 i 3 po lewej stronie: 10px
• Kolumny 1, 2 i 3 prawe dopełnienie: 10px

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dostosowujemy tabelę cen, którą chcemy utworzyć, używając różnych modułów. Pierwszym modułem, którego będziemy potrzebować, jest moduł tekstowy. Dodaj nazwę pierwszego typu członkostwa w polu treści.

Kolor tła

Po dodaniu treści przejdź do ustawień tła i dodaj biały kolor tła.

• Kolor tła: #ffffff

Zdjęcie w tle

Przełącz się na zakładkę obrazu tła i prześlij plik „ divi-beautiful-pricing-table-background-pattern-1.png ”, który znajdziesz w folderze pobierania udostępnionym na początku tego posta.

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: górny środek
• Powtarzanie obrazu tła: bez powtórzeń

Ustawienia tekstu

Następnie zmodyfikuj ustawienia tekstu.

• Grubość czcionki tekstu: Ultra Bold
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 80px
• Odstępy między literami tekstu: -3px
• Wysokość linii tekstu: 1em

Rozstaw

I dodaj kilka niestandardowych wartości marginesów i dopełnienia.

• Górny margines: 5vw (komputer stacjonarny), 0vw (tablet i telefon)
• Górna wyściółka: 20px
• Dolna wyściółka: 200px

Granica

Kontynuuj, dodając „20px” w lewym i prawym górnym rogu.

Cień Pudełka

Na domiar złego nadaj modułowi tekstowemu subtelny cień w kształcie pudełka.

• Pozycja pionowa cienia pudełka: -20px
• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba(0,0,0,0.15)

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Drugim modułem, którego będziemy potrzebować w kolumnie 1, jest moduł przycisku. Dodaj wybraną kopię.

Wyrównanie przycisków

Następnie przejdź do ustawień wyrównania i zmień wyrównanie na środek.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Będziemy kontynuować, wprowadzając pewne zmiany w wyglądzie przycisku w ustawieniach przycisku.

• Użyj niestandardowych stylów dla przycisku: Tak
• Kolor tekstu przycisku: #ffffff
• Kolor 1: #6932ff
• Kolor 2: #30acf4
• Kierunek gradientu: 100 stopni

• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: -2px
• Grubość czcionki: Ultra Bold

Rozstaw

Następnie dodaj trochę dopełnienia do przycisku, aby wyglądał ładnie, i zastosuj ujemny górny margines, aby utworzyć nakładanie się z poprzednim modułem w kolumnie.

• Górny margines: -54px
• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Lewa wyściółka: 30px
• Prawe wypełnienie: 30px

Cień Pudełka

Na koniec dodaj subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -14px
• Kolor cienia: rgba(0,0,0,0.3)

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Następny moduł, którego będziemy potrzebować, to kolejny moduł tekstowy z ceną typu członkostwa.

Kolor tła

Po dodaniu ceny przejdź do ustawień tła i zastosuj biały kolor tła.

• Kolor tła: #ffffff

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Grubość czcionki tekstu: Ultra Bold
• Kolor tekstu: rgba (0,0,0,0,05)
• Rozmiar tekstu: 120px
• Wysokość linii tekstu: 1em

Rozstaw

I zastosuj niestandardowe wartości dopełnienia w ustawieniach odstępów.

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

Granica

Następnie przejdź do ustawień obramowania i dodaj „30px” w lewym i prawym dolnym rogu.

Cień Pudełka

Na koniec nadaj modułowi cień pudełkowy.

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 2px
• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: 0px
• Kolor cienia: rgba(0,0,0,0.21)

Dodaj moduł tekstowy nr 3 do kolumny 1

Dodaj zawartość

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest kolejny moduł tekstowy. Dodaj cenę typu członkostwa w polu treści.

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Grubość czcionki tekstu: Ultra Bold
• Kolor tekstu: #000000
• Rozmiar tekstu: 50px
• Wysokość linii tekstu: 1em

Rozstaw

I stwórz zakładkę między tym modułem a poprzednim, bawiąc się niestandardowymi wartościami odstępów.

• Górny margines: -180px
• Margines dolny: 180px (tablet i telefon)
• Lewa wyściółka: 100px

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

Po zakończeniu modyfikowania modułów w kolumnie 1 możesz sklonować każdy z modułów dwukrotnie i umieścić duplikaty w dwóch pozostałych kolumnach.

Zmień zawartość modułów w kolumnie

Zmień zawartość duplikatów zgodnie z dwoma innymi typami członkostwa, które udostępniasz w swojej witrynie.

Zmień tabelę cen w kolumnie 2

Zmień obraz tła modułu tekstowego nr 1

Podkreślamy również środkową tabelę cen. Otwórz pierwszy moduł tekstowy w kolumnie 2 i zmień obraz tła na plik ' divi-beautiful-pricing-table-background-pattern-2.png ', który znajdziesz w folderze pobierania.

Usuń górny margines modułu tekstowego #1

Aby podkreślić ten typ członkostwa, usuniemy górny margines pierwszego modułu tekstowego w ustawieniach odstępów.

Zmień tło gradientowe przycisku

Dopasujemy również nowy obraz tła, używając innego tła gradientowego dla modułu przycisku.

• Kolor 1: #fb32ff
• Kolor 2: #ff304f
• Kierunek gradientu: 100 stopni

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 zaprojektować piękną tabelę cenową do następnego projektu Divi. Poprowadziliśmy Cię krok po kroku przez samouczek i osiągnęliśmy oszałamiający wynik, korzystając tylko z wbudowanych opcji Divi! Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej.