Jak kreatywnie korzystać z modułu przełączania Divi do prezentacji planów cenowych

Jeśli chodzi o prezentację planów cenowych na swojej stronie internetowej, możesz wykonać wiele zmian i stworzyć absolutnie oszałamiające i atrakcyjne strony lub sekcje z cenami. Budując stronę internetową za pomocą Divi, najprawdopodobniej wybierzesz moduł Tabele cen. Ten moduł pozwala szybko dodawać tabele cenowe i stylizować je w dowolny sposób. Ale jeśli chcesz dodać więcej interakcji do tej konkretnej sekcji strony, możesz również użyć modułu Przełącz, aby wyświetlić plany cenowe po kliknięciu. To świetny sposób na podkreślenie konkretnego planu cenowego poprzez utrzymanie jego stanu otwartego i zamknięcie pozostałych dwóch.

W tym samouczku pokażemy Ci krok po kroku, jak stworzyć wspaniały projekt tabeli cen przełączników za pomocą modułu przełączania Divi. Gdy uzyskasz odpowiednie podejście, będziesz mógł tworzyć wszelkiego rodzaju przełączane plany cenowe za jednym kliknięciem dla dowolnego rodzaju witryny, którą tworzysz.

Weźmy się za to!

Zapowiedź

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

Zacznijmy tworzyć!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Rozstaw

Utwórz nową stronę lub otwórz istniejącą za pomocą programu Divi's Visual Builder. Dodaj nową sekcję do strony, otwórz ustawienia sekcji i dodaj niestandardowe górne i dolne wyściółki, aby utworzyć trochę miejsca na górze i na dole sekcji.

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

Dodaj wiersz nr 1

Struktura kolumny

Po zakończeniu modyfikowania ustawień odstępów między sekcjami możesz dodać nowy wiersz, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy

Dodaj zawartość

Nie ma potrzeby wprowadzania zmian w wierszu, więc od razu dodaj moduł tekstowy. Wprowadź wybraną treść H2 w polu treści modułu.

Ustawienia tekstu nagłówka

Kontynuuj, przechodząc do karty projektu i zmieniając ustawienia tekstu nagłówka.

• Czcionka nagłówka 2: Dydaktyka gotycka
• Grubość czcionki nagłówka 2: Regularna
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 40px
• Nagłówek 2 Odstępy między literami: -1px

Dodaj moduł dzielnika

Widoczność

Dodaj moduł dzielnika tuż pod modułem tekstowym, który dodałeś i zmodyfikowałeś w poprzednich krokach. Upewnij się, że opcja „Pokaż dzielnik” modułu dzielnika jest włączona.

• Pokaż dzielnik: tak

Kolor

Kontynuuj, przechodząc do zakładki projektu i zmień kolor dzielnika.

• Kolor: #000000

Rozmiary

Zmień również szerokość modułu w ustawieniach rozmiaru.

• Szerokość: 39%
• Wyrównanie modułu: Środek

Rozstaw

Dodaj również niestandardowy dolny margines.

• Margines dolny: 50px

Dodaj wiersz nr 2

Struktura kolumny

Zakończyliśmy modyfikowanie pierwszego wiersza i jego modułów. Czas dodać nowy wiersz przy użyciu następującej struktury kolumn:

Kolumna 1 Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj tło gradientowe do kolumny 1.

• Kolor 1: #00fff2
• Kolor 2: rgba (255,255,255,0)
• Kolumna 1 Typ gradientu: Promieniowy
• Kolumna 1 Kierunek promieniowy: Dolny prawy
• Pozycja początkowa kolumny 1: 30%
• Pozycja końcowa kolumny 1: 30%

Kolumna 2 Tło gradientowe

Zrób to samo dla drugiej kolumny.

• Kolor 1: #fce96f
• Kolor 2: rgba (255,255,255,0)
• Kolumna 2 Typ gradientu: Promieniowy
• Kolumna 2 Kierunek promieniowy: Górny prawy
• Pozycja początkowa kolumny 2: 40%
• Kolumna 2 Pozycja końcowa: 40%

Kolumna 3 Tło gradientowe

Podobnie dodaj tło gradientowe do trzeciej kolumny, korzystając z następujących ustawień:

• Kolor 1: #a659ff
• Kolor 2: rgba (255,255,255,0)
• Kolumna 3 Typ gradientu: Promieniowy
• Kolumna 3 Kierunek promieniowy: Dół
• Kolumna 3 Pozycja początkowa: 30%
• Kolumna 2 Pozycja końcowa: 30%

Rozmiary

Po zakończeniu dodawania gradientowego tła przejdź do karty projektu i zmień ustawienia rozmiaru.

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

Dodaj moduł przełączania do kolumny 1

Dodaj zawartość

Czas zacząć tworzyć różne plany cenowe! Dodaj nowy moduł przełączania do pierwszej kolumny i wprowadź tytuł. Aby nadać styl różnym elementom w polu treści, użyliśmy dodatkowych znaczników HTML. Śmiało skopiuj następujące wiersze i dodaj je do karty Tekst w polu treści:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

Stan

Możesz wybrać, czy chcesz, aby stan modułu przełączania był otwarty czy zamknięty. Aby móc zobaczyć wszystkie zmiany wprowadzone w dalszej części samouczka, zalecam pozostawienie stanu „otwarty”, dopóki nie skończysz modyfikować wszystkich różnych ustawień projektu.

Kolor tła

Kontynuuj, przechodząc do ustawień tła modułu Przełącz i dodaj biały kolor tła.

• Kolor tła: #ffffff

Ustawienia ikon

Zmień kolor ikony na karcie projektu obok.

• Kolor ikony: #000000

Przełącz ustawienia

I zmodyfikuj również opcję Open Toggle Background Color w ustawieniach przełączania.

• Otwórz przełącznik koloru tła: rgba (255,255,255,0)

Ustawienia tekstu tytułu

Następnie wprowadź zmiany w ustawieniach tekstu tytułu.

• Czcionka tytułu: Didact Gothic
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 3.5vw (komputer), 60px (tablet), 40px (telefon)

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Czcionka ciała: Didact Gothic
• Wyrównanie tekstu podstawowego: do lewej
• Kolor tekstu ciała: #000000
• Rozmiar tekstu ciała: 18px
• Wysokość linii ciała: 1,5 em

Clone Toggle Module dwa razy i umieść w pozostałych dwóch kolumnach

Po zakończeniu modyfikowania modułu przełączania w kolumnie 1 możesz sklonować go dwukrotnie i umieścić duplikaty w dwóch pozostałych kolumnach.

Zmień kopię

Upewnij się, że zmieniłeś wszystkie kopie duplikatów i gotowe!

Zapowiedź

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

Końcowe przemyślenia

W tym samouczku pokazaliśmy Ci kreatywne podejście do korzystania z modułu Divi's Toggle do prezentowania planów cenowych w Twojej witrynie. To świetny sposób na interakcję z odwiedzającymi i ulepszenie stylu projektowania. Ułatwia to wyróżnienie konkretnego planu cenowego w Twojej sekcji, utrzymując ten jeden otwarty, a pozostałe dwie opcje zamknięte. Możesz użyć tego podejścia do każdego rodzaju witryny, którą tworzysz. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!