Jak tworzyć automatyczne kalkulacje cen za pomocą Divi (przy użyciu JQuery)

Niektórzy ludzie niechętnie prezentują ceny swoich usług na swojej stronie internetowej. Ale choć może przestraszyć niektórych odwiedzających, pokazuje również pewność siebie i wiedzę. Przejrzyste ustalanie cen pomaga przyciągnąć odpowiednich klientów z budżetem, z którym możesz pracować. W dzisiejszym samouczku pokażemy Ci, jak stworzyć oszałamiający projekt kalkulacji ceny, który możesz wykorzystać w swoim następnym projekcie Divi. Będziesz mógł również pobrać plik 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 Kalkulacji Cen ZA DARMO

Aby położyć swoje ręce na darmowym układzie kalkulacji 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!

Nie zapomnij również dodać kodu JQuery do swojej witryny! Kod znajdziesz na końcu tego samouczka.

Zacznijmy odtwarzać!

Dodaj sekcję #1

Kolor tła

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

• Kolor tła: #f8c5ac

Dolny rozdzielacz

Dodaj dolną przegrodę do następnej sekcji.

• Styl dzielnika: Znajdź na liście
• Przerzucanie dzielnika: Pionowy

Rozstaw

Dodaj również dolną wyściółkę.

• Dolna wyściółka: 130px

Dodaj nowy wiersz

Struktura kolumny

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

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość H2

Dodaj pierwszy moduł tekstowy do swojej kolumny i wstaw wybrane przez siebie treści H2.

Ustawienia tekstu H2

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

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: pół pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #0f1c4d
• Rozmiar tekstu nagłówka 2: 57px (komputer), 35px (tablet), 30px (telefon)
• Nagłówek 2 Odstępy między literami: -2px

Dodaj moduł tekstowy nr 2 do kolumny

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
• Wyrównanie tekstu: do środka
• Kolor tekstu: #0f1c4d
• Rozmiar tekstu: 22px (komputer), 18px (tablet), 16px (telefon)

Dodaj moduł dzielnika do kolumny

Widoczność

Następnym i ostatnim modułem potrzebnym w tej kolumnie jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Przejdź do zakładki projekt i zmień kolor linii na biały.

• Kolor linii: #ffffff

Rozmiary

Zmodyfikuj również szerokość przegrody.

• Szerokość: 12%

Dodaj sekcję #2

Kolor tła

Do następnej części projektu! Dodaj nową sekcję i zmień kolor tła.

• Kolor tła: #0f1c4d

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

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

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 wierszy i zmień szerokość na mniejszych rozmiarach ekranu.

• Szerokość: 80% (komputer stacjonarny), 90% (tablet i telefon)

Rozstaw

Następnie dodaj niestandardową wyściółkę dolną.

• Dolna wyściółka: 70px (komputer), 20px (tablet), 0px (telefon)

Granica

Dodaj również dolną granicę do rzędu.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #ffffff

Wyświetlacz

I na koniec, aby upewnić się, że wszystkie kolumny są wyświetlane obok siebie, dodamy jedną linię kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł Blurb do kolumny 1

Wybierz ikonę

Czas zacząć dodawać moduły! Dodaj moduł Blurb do kolumny 1 i wybierz wybraną ikonę.

Domyślne ustawienia ikon

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

• Kolor ikony: #f7f7f7
• Ikona koła: Tak
• Ikona koła: #f8c5ac
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 96px (komputer), 20px (tablet i telefon)

Ustawienia ikony najechania kursorem

Zmodyfikuj kolor ikony po najechaniu myszą.

• Kolor ikony: #000000

Identyfikator CSS

Wstaw również identyfikator CSS.

• Identyfikator CSS: cena-pozycja-klik-1

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość H3

Do drugiej kolumny! Dodaj pierwszy moduł tekstowy i wstaw trochę treści H3.

Ustawienia tekstu H3

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

• Czcionka nagłówka 3: Montserrat
• Grubość czcionki nagłówka 3: pół pogrubiona
• Kolor tekstu nagłówka 3: #f8c5ac
• Rozmiar tekstu nagłówka 3: 40px (komputer), 25px (tablet), 18px (telefon)
• Nagłówek 3 Odstępy między literami: -1px
• Nagłówek 3 wysokość linii: 1,1 em

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy do kolumny 2 z wybraną zawartością.

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ultra Light
• Kolor tekstu: #f8c5ac
• Rozmiar tekstu: 23px (komputer), 18px (tablet), 14px (telefon)
• Odstępy między literami tekstu: -1px
• Wysokość linii tekstu: 1,1 em

Dodaj moduł tekstowy do kolumny 3

Dodaj cenę do pola zawartości

Do trzeciej kolumny! Dodaj moduł tekstowy i umieść cenę w polu treści.

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ciężka
• Wyrównanie tekstu: do środka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 40px (komputer), 25px (tablet), 18px (telefon)

Identyfikator i klasa CSS

Przejdź do zakładki zaawansowane i dodaj identyfikator CSS i klasę CSS.

• Identyfikator CSS: cena-1
• Klasa CSS: cena-ukryj-najpierw

Klonuj rząd tyle razy, ile potrzeba

Po ukończeniu wiersza i wszystkich zawartych w nim modułów możesz sklonować wiersz dowolną liczbę razy.

Zmień zduplikowane identyfikatory CSS modułu Blurb

Zmień odpowiednio identyfikator CSS każdego nowego modułu Blurb:

• Blurb Moduł 1: cena-pozycja-klik-1
• Blurb Moduł 2: cena-pozycja-klik-2
• Blurb Moduł 3: cena-pozycja-klik-3
• …

Zmień cenę zduplikowanego modułu tekstowego i identyfikatory CSS

Zrób to samo dla modułu tekstowego ceny w trzeciej kolumnie każdego wiersza.

• Cena 1: cena-1
• Cena 2: cena-2
• Cena 3: cena-3
• …

Dodaj nowy wiersz

Struktura kolumny

Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień szerokość na mniejszych rozmiarach ekranu.

• Szerokość: 80% (komputer stacjonarny), 90% (tablet i telefon)

Wyświetlacz

Aby upewnić się, że wszystkie kolumny są wyświetlane obok siebie na mniejszych ekranach, dodamy również jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł kodu do kolumny 1

Wstaw kod CSS

Kontynuuj, dodając moduł kodu do pierwszej kolumny wiersza i wstaw następujące wiersze kodu CSS:

<style>
.price-hide-first {
display: none;
}

.price-item-active .et-pb-icon {
color: black !important;
}
</style>

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

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

Ustawienia tekstu

Zmień odpowiednio ustawienia tekstu:

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ultra Light
• Kolor tekstu: #f8c5ac
• Rozmiar tekstu: 23px (komputer), 18px (tablet), 14px (telefon)
• Odstępy między literami tekstu: -1px
• Wysokość linii tekstu: 1,1 em

Dodaj pusty moduł tekstowy do kolumny 3

Pozostaw puste pole zawartości

Przejdź do następnej i ostatniej kolumny. Dodaj moduł tekstowy i upewnij się, że pole zawartości pozostaje puste.

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ciężka
• Wyrównanie tekstu: do środka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 40px (komputer), 25px (tablet), 18px (telefon)

Identyfikator CSS

Uzupełnij ustawienia modułu, dodając identyfikator CSS.

• Identyfikator CSS: cena-całkowita

Dodaj JQuery do opcji motywu Divi

Przejdź do zakładki Integracja

Teraz, gdy zakończyliśmy projekt, nadszedł czas, aby funkcjonalność działała przy użyciu kodu JQuery. Jeśli chcesz dodać kalkulacje cen tylko do jednej strony, możesz umieścić kod w module kodu. Jeśli jednak używasz go na wielu stronach, przejdź do opcji motywu Divi i wybierz kartę integracji.

Dodaj kod JQuery do tagów nagłówka

Wstaw następujące wiersze kodu JQuery między tagi skryptu i gotowe:

jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    var sum = 0;
    $price.toggle();
    $price.toggleClass('price-active');
    $(this).toggleClass('price-item-active');
    $('.price-active').each(function(){
    sum += parseFloat($(this).text().replace(/\D/g,''));
    });
    if (sum > 0){
    $("#total-price-cal").show();
        $("#total-price-cal").text("$" + sum + "k");
    }
    else {
    $("#total-price-cal").hide();
    }
  });
});

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ć oszałamiający projekt kalkulacji ceny za pomocą Divi. To świetny sposób, aby pokazać odwiedzającym, od jakiej ceny zaczynają się Twoje usługi i pomaga przyciągnąć odpowiednią publiczność. Możesz użyć tego podejścia w dowolnym projekcie kalkulacji ceny, który tworzysz dla swojego następnego projektu Divi! Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś 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.