Pobierz DARMOWY projekt przełączania cen miesięcznych/rocznych dla Divi

Kiedy zdecydujesz się zaprezentować plany cenowe w swojej witrynie, możesz do tego podejść na kilka sposobów. Jednym z najpopularniejszych podejść jest tworzenie miesięcznego/rocznego przełącznika cen, który pozwala użytkownikom łatwo poruszać się po różnych planach cenowych w zależności od sposobu, w jaki zdecydują się na rozliczenie. W dzisiejszym samouczku pokażemy, jak sprawić, by przełącznik cen działał z Divi. Odtworzymy wspaniały przykład od podstaw, a plik JSON będzie można pobrać 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 projekt przełączania miesięcznych/rocznych cen ZA DARMO

Aby położyć swoje ręce na darmowym miesięcznym/rocznym projekcie przełącznika cen, 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ć!

Dodaj sekcję #1

Kolor tła

Zacznij od dodania pierwszej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i dodaj kolor tła.

• Kolor tła: #ffad72

Dolny rozdzielacz

Przejdź do zakładki projektu i wstaw dolną przegrodę.

• Styl dzielnika: Znajdź na liście
• Wysokość dzielnika: 10vw

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 5vw
• Dolna wyściółka: 10vw

Identyfikator CSS

I dodaj identyfikator CSS do sekcji.

• Identyfikator CSS: sekcja przełączania

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 30vw (komputer), 45vw (tablet), 50vw (telefon)
• Maksymalna szerokość: 100%

Rozstaw

Następnie pozbądź się domyślnego dopełnienia górnego i dolnego.

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

Granica

I zmodyfikuj również ustawienia granic.

• Zaokrąglone rogi: 50vw (wszystkie rogi)
• Szerokość obramowania: 1px
• Kolor obramowania: #e8e8e8

Wyświetlacz

Aby upewnić się, że obie kolumny pojawiają się obok siebie na mniejszych ekranach, dodamy jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Jedynym modułem, którego potrzebujemy w kolumnie 1, jest moduł tekstowy. Wprowadź wybraną treść.

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Montserrat
• Rozmiar tekstu: 1vw (komputer), 1,5vw (tablet), 2vw (telefon)
• Wyrównanie tekstu: do środka
• Kolor tekstu: jasny

Rozstaw

Zmodyfikuj również górne i dolne wartości dopełnienia na różnych rozmiarach ekranu.

• Górna wyściółka: 2vw (komputer), 3vw (tablet), 4vw (telefon)
• Dolna wyściółka: 2vw (komputer stacjonarny), 3vw (tablet), 4vw (telefon)

Identyfikator i klasa CSS

I przypisz identyfikator CSS i klasę do modułu tekstowego.

• Identyfikator CSS: cennik-plan-pozycja-1
• Klasa CSS: wycena-elementu-kursor

Klonuj moduł tekstowy i umieść duplikat w kolumnie 2

Po ukończeniu modułu tekstowego w kolumnie 1 możesz go sklonować raz i umieścić duplikat w kolumnie 2.

Zmień zawartość

Upewnij się, że zmieniłeś treść.

Zmień identyfikator CSS

I użyj innego identyfikatora CSS.

• Identyfikator CSS: cennik-plan-pozycja-2

Dodaj sekcję #2

Kolor tła

Przejdźmy do drugiej sekcji. Dodaj następujący kolor tła:

• Kolor tła: #6b63dd

Rozstaw

Następnie przejdź do ustawień odstępów między sekcjami i dodaj kilka niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 7vw
• Dolna wyściółka: 15vw
• Lewa wyściółka: 21vw (komputer stacjonarny), 10vw (tablet i telefon)
• Prawa wyściółka: 21vw (komputer stacjonarny), 10vw (tablet i telefon)

Identyfikator CSS

Dodaj również identyfikator CSS do sekcji.

• Identyfikator CSS: cena-1

Dodaj wiersz nr 1

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 wiersza i zmodyfikuj ustawienia rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

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

Granica

Następnie przejdź do ustawień odstępów i zastosuj następujące ustawienia obramowania:

• Szerokość prawego obramowania: 1px
• Szerokość lewej krawędzi: 1px
• Szerokość górnej krawędzi: 0px
• Szerokość dolnej krawędzi: 0px
• Kolor obramowania: rgba (255,255,255,0)

Wyświetlacz

Upewnij się, że kolumny są wyświetlane obok siebie na mniejszych ekranach, dodając jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Ustawienia kolumny 2

Rozstaw

Po zakończeniu ogólnych ustawień wiersza otwórz ustawienia kolumny 2 i dodaj niestandardowe górne i dolne dopełnienie.

• Górna wyściółka: 1vw
• Dolna wyściółka: 4vw

Granica

Użyj obramowania również w kolumnie 2.

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #ffffff

Kolumna 3 Ustawienia

Rozstaw

Przejdź do ustawień trzeciej kolumny i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 1vw
• Dolna wyściółka: 4vw

Dodaj dzielnik do kolumny 1

Widoczność

Czas zacząć dodawać moduły! Pierwszym modułem i jedynym, którego potrzebujemy w kolumnie 1, jest moduł dzielnika. Upewnij się, że wyłączyłeś opcję „Pokaż dzielnik”. Potrzebujemy tego modułu tylko po to, aby reszta projektu pozostała nienaruszona.

• Pokaż dzielnik: Nie

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość H3

Przejdź do kolumny 2 i dodaj moduł tekstowy z wybraną zawartością H3.

Ustawienia tekstu H3

Zmień ustawienia tekstu H3 w następujący sposób:

• Czcionka nagłówka 3: Montserrat
• Nagłówek 3 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3: 2vw (komputer), 3vw (tablet), 3.5vw (telefon)
• Nagłówek 3 Odstępy między literami: -1px

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy tuż pod poprzednim i wstaw wybrane przez siebie treści.

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ultra Light
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 2vw (komputer), 3vw (tablet), 3,5vw (telefon)
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: do środka

Rozstaw

Dodaj też niestandardowy górny margines.

• Górny margines: 0,5vw

Sklonuj oba moduły i umieść duplikaty w kolumnie 3

Po ukończeniu modułów w kolumnie 2 możesz sklonować oba i umieścić duplikaty w kolumnie 3.

Zmień zawartość

Upewnij się, że zmieniłeś zawartość każdego duplikatu.

Dodaj wiersz nr 2

Struktura kolumny

Do drugiego rzędu w sekcji 2! Wybierz następującą strukturę kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń domyślną górną i dolną wyściółkę.

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

Granica

I zastosuj obramowanie.

• Szerokość górnej krawędzi: 0px
• Szerokość prawego obramowania: 1px
• Szerokość dolnego obramowania: 1px
• Szerokość lewej krawędzi: 1px
• Kolor obramowania: #8882dd

Wyświetlacz

Upewnij się, że kolumny są wyświetlane obok siebie na mniejszych ekranach, dodając jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Ustawienia kolumny 1

Rozstaw

Kontynuuj, otwierając ustawienia kolumny 1 i stosując niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 3vw (komputer stacjonarny), 5vw (tablet i telefon)
• Dolna wyściółka: 3vw (komputer stacjonarny), 5vw (tablet i telefon)

Granica

Dodaj również prawą ramkę do kolumny.

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #8882dd

Ustawienia kolumny 2

Rozstaw

Przejdź do drugiej kolumny i zmień ustawienia odstępów.

• Górna wyściółka: 3vw (komputer stacjonarny), 5vw (tablet i telefon)
• Dolna wyściółka: 3vw (komputer stacjonarny), 5vw (tablet i telefon)

Granica

Następnie dodaj prawą ramkę.

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #ffffff

Kolumna 3 Ustawienia

Rozstaw

Następnie otwórz ustawienia kolumny 3 i dodaj niestandardowe wartości górnego i dolnego wypełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 3vw (komputer stacjonarny), 5vw (tablet i telefon)
• Dolna wyściółka: 3vw (komputer stacjonarny), 5vw (tablet i telefon)

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Po zakończeniu ustawień wierszy i kolumn nadszedł czas, aby rozpocząć dodawanie modułów. Dodaj moduł tekstowy do kolumny 1 i wstaw wybraną zawartość.

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 1vw (komputer), 1,5vw (tablet), 2vw (telefon)
• Wyrównanie tekstu: do środka

Dodaj moduł tekstowy do kolumny 2

Dodaj symbol do pola zawartości

W drugiej kolumnie będziemy potrzebować kolejnego modułu tekstowego. Dodaj symbol „✓” do pola treści.

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu w następujący sposób:

• Kolor tekstu: #ffad72
• Rozmiar tekstu: 2vw (komputer), 3vw (tablet), 4vw (telefon)
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: do środka

Klonuj moduł tekstowy i umieść duplikat w kolumnie 3

Po ukończeniu modułu tekstowego w kolumnie 2 możesz go sklonować i umieścić duplikat w kolumnie 3.

Alternatywny kolor symbolu i tekstu

W zależności od funkcji, którą prezentujesz, możesz zmienić symbol na „✗”. Użyj również innego koloru tekstu.

• Kolor tekstu: #ffffff

Klonuj rząd tyle razy, ile chciałeś

Po ukończeniu całego wiersza możesz go sklonować dowolną liczbę razy, w zależności od tego, ile funkcji chcesz pokazać.

Dodaj wiersz nr 3

Struktura kolumny

Ostatni wiersz, który dodamy do drugiej sekcji, zawiera następującą strukturę kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń domyślną górną i dolną wyściółkę.

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

Granica

Dodaj też obramowanie.

• Szerokość górnej krawędzi: 0px
• Szerokość dolnej krawędzi: 0px
• Szerokość prawego obramowania: 1px
• Szerokość lewej krawędzi: 1px
• Kolor obramowania: rgba (255,255,255,0)

Wyświetlacz

I upewnij się, że kolumny pojawiają się obok siebie na mniejszych ekranach, dodając jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Ustawienia kolumny 2 i 3

Rozstaw

Kontynuuj, dodając górny margines w obu kolumnach 2 i 3.

• Górna wyściółka: 4vw

Kolumna 2 Obramowanie

Dodaj prawą ramkę również do kolumny 2.

• Szerokość prawego obramowania: 1px
• Prawy kolor obramowania: #eaeaea

Moduł dzielnika klonów i miejsce w kolumnie 1 nowego rzędu

Sklonuj moduł rozdzielający, który znajdziesz w pierwszym wierszu sekcji i umieść duplikat w pierwszej kolumnie nowego wiersza.

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Kontynuuj, dodając moduł przycisku do kolumny 2 i wstaw wybraną kopię.

Wyrównanie

Zmodyfikuj wyrównanie przycisku na karcie projektu.

• Wyrównanie przycisków: środek

Ustawienia przycisków

I zmień ustawienia przycisków w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 1,5vw (tablet), 2vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #ffad72
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 50vw
• Czcionka przycisku: Montserrat

Rozstaw

Dodaj również niestandardowe wartości dopełnienia do modułu przycisku.

• Górna wyściółka: 1vw (komputer stacjonarny), 1,5vw (tablet i telefon)
• Dolna wyściółka: 1vw (komputer stacjonarny), 1,5vw (tablet i telefon)
• Lewa wyściółka: 4vw (komputer stacjonarny), 6vw (tablet i telefon)
• Prawa wyściółka: 4vw (komputer stacjonarny), 6vw (tablet i telefon)

Klonuj moduł przycisku i umieść duplikat w kolumnie 3

Po ukończeniu modułu przycisku w kolumnie 2 możesz go sklonować i umieścić duplikat w kolumnie 3.

Sekcja klonowania #2

Kontynuuj, klonując całą drugą sekcję. Upewnij się, że zmieniłeś wartości cen w modułach tekstowych, aby były zgodne z opcjami rozliczeń rocznych. To jest sekcja, która pojawi się, gdy ktoś kliknie „Rozliczenia roczne”.

Zmień identyfikator CSS i dodaj klasę CSS

Następnie zmień identyfikator CSS sekcji i dodaj klasę CSS.

• Identyfikator CSS: cena-2
• Klasa CSS: ukryj sekcję-2

Dodaj nowy wiersz z jedną kolumną na górze sekcji #1

Jedyne, co pozostało do zrobienia, to dodanie kodu CSS i jQuery, aby funkcjonalność działała. Aby to zrobić, dodamy nowy wiersz na górze sekcji 1.

Dodaj moduł kodu #1 z kodem CSS

Dodaj pierwszy moduł kodu i wstaw następujące wiersze kodu CSS:

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Dodaj moduł kodu nr 2 z kodem JQuery

Dodaj kolejny moduł kodu tuż pod poprzednim, wstaw poniżej kod jQuery między tagami skryptu i gotowe!

jQuery(function($){
  
$('#pricing-plan-item-1').addClass('active-pricing-plan');

$('[id*="pricing-plan-item"]').click(function() {

var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

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 stworzyć miesięczny/roczny projekt przełączania cen za pomocą Divi. To świetny sposób na dodanie interakcji do planów cenowych. Oprócz zastosowania techniki klikania opracowaliśmy również piękny plan cenowy siatki, który pozwala podkreślić, które funkcje są zawarte w poszczególnych planach. Udało Ci się również pobrać plik JSON za darmo. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz 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.