Niektórzy ludzie niechętnie wyświetlają ceny swoich usług na swoich Witryna internetowa. Ale tak bardzo, jak to może niektórych przestraszyć odwiedzający, świadczy również o pewności siebie i wiedzy fachowej. Przejrzystość cen pozwala przyciągnąć odpowiednich klientów z budżetem, z którym możesz pracować. W dzisiejszym samouczku pokażemy, jak stworzyć oszałamiający projekt kalkulacji ceny, który możesz wykorzystać w następnym projekcie Divi. Możesz również pobrać plik JSON za darmo!
Chodźmy.
badanie
Zanim przejdziemy do samouczka, przyjrzyjmy się, jak to wygląda na różnych rozmiarach ekranu.
Zacznijmy od nowa!
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 dolny separator do następnej sekcji.
- Styl separacji: Szukaj na liście
- Flip Divider: Vertical
rozstaw
Dodaj również trochę paddingu.
- Dolne wypełnienie: 130px
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:
Dodaj moduł tekstowy # 1 do kolumny
Dodaj zawartość H2
Dodaj pierwszy moduł tekstowy do kolumny i wstaw wybraną zawartość H2.
Ustawienia tekstu H2
Przejdź do zakładki Projekt i odpowiednio zmień ustawienia tekstu H2:
- Nagłówek Czcionka 2: Montserrat
- Tytuł 2 Czcionka: Semi Bold
- Tytuł 2 Wyrównanie tekstu: centrum
- Tytuł 2 Kolor tekstu: # 0f1c4d
- Tytuł Rozmiar tekstu 2: 57 pikseli (komputer stacjonarny), 35 pikseli (tablet), 30 pikseli (telefon)
- Tytuł 2 Odstępy między literami: -2px
Dodaj moduł tekstowy # 2 do kolumny
Dodaj treść
Dodaj kolejny moduł tekstowy tuż pod poprzednim i wstaw wybraną treść.
Ustawienia tekstu
Przejdź do zakładki Projekt i odpowiednio zmień ustawienia tekstu:
- Tekst czcionki: Montserrat
- Wyrównanie tekstu: środek
- Kolor tekstu: #0f1c4d
- Rozmiar tekstu: 22px (komputer stacjonarny), 18px (tablet), 16px (telefon)
Dodaj moduł podziału do kolumny
widoczność
Kolejnym i ostatnim modułem potrzebnym w tej kolumnie jest moduł podziału. Upewnij się, że opcja „Pokaż separator” jest włączona.
- Pokaż dzielnik: Tak
Linia
Przejdź do zakładki Projekt i zmień kolor linii na biały.
- Kolor linii: #ffffff
zaklejania
Zmień także szerokość dzielnika.
- Szerokość: 12%
Dodaj sekcję 2
Kolor tła
Przejdźmy do rysunku! Dodaj nową sekcję i zmień kolor tła.
- Kolor tła: #0f1c4d
rozstaw
Następnie dodaj niestandardowe wypełnienie w górę lub w dół.
- Najlepsze dopełnienie: 70px
- Dolne wypełnienie: 130px
Dodaj wiersz 1
Struktura kolumny
Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień szerokość na mniejsze rozmiary ekranu.
- Szerokość: 80% (komputer stacjonarny), 90% (tablet i telefon)
rozstaw
Dodaj trochę niestandardowego wypełnienia puchu.
- Tapicerka u dołu: 70px (komputer stacjonarny), 20px (tablet), 0px (telefon)
granica
Dodaj także dolną ramkę do linii.
- Szerokość dolnej granicy: 1px
- Kolor dolnej ramki: #ffffff
pokaz
Na koniec, aby upewnić się, że wszystkie kolumny są wyświetlane obok siebie, dodamy linię kodu CSS do głównego elementu wiersza.
wyświetlacz: flex;
Dodaj moduł Blurb do kolumny 1
Wybierz ikonę
Czas zacząć dodawać moduły! Dodaj moduł Blurb do kolumny 1 i wybierz ikonę do wyboru.
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
- Ikony pozycjonowania: góra
- Użyj rozmiaru czcionki ikony: Tak
- Rozmiar czcionki ikon: 96 pikseli (komputer stacjonarny), 20 pikseli (tablet i telefon)
Najedź kursorem na ustawienia ikony
Zmień kolor ikony najechania.
- Kolor ikony: # 000000
Identyfikator CSS
Wstaw także identyfikator CSS.
- Identyfikator CSS: cena-pozycja-kliknij-1
Dodaj moduł tekstowy # 1 do kolumny 2
Dodaj zawartość H3
W drugiej kolumnie! Dodaj pierwszy moduł tekstowy i wstaw treść H3.
Ustawienia tekstu H3
Przejdź do zakładki Projekt i odpowiednio zmień ustawienia tekstu H3:
- Nagłówek Czcionka 3: Montserrat
- Tytuł Czcionki 3: pół pogrubione
- Tytuł 3 Kolor tekstu: # f8c5ac
- Tytuł Rozmiar tekstu 3: 40 pikseli (komputer stacjonarny), 25 pikseli (tablet), 18 pikseli (telefon)
- Odstępy między literami tytułu 3: -1px
- Tytuł 3 Wysokość linii: 1.1em
Dodaj moduł tekstowy # 2 do kolumny 2
Dodaj treść
Dodaj kolejny moduł tekstowy do kolumny 2 z wybraną treścią.
Ustawienia tekstu
Przejdź do zakładki Projekt i zmień ustawienia tekstu.
- Tekst czcionki: Montserrat
- Waga czcionki tekstu: bardzo lekka
- Kolor tekstu: #f8c5ac
- Rozmiar tekstu: 23px (komputer stacjonarny), 18px (tablet), 14px (telefon)
- Odstępy między literami: -1px
- Wysokość linii tekstu: 1.1em
Dodaj moduł tekstowy do kolumny 3
Dodaj cenę do treści
Przejdźmy do trzeciej kolumny! Dodaj moduł tekstowy i umieść cenę w polu zawartości.
Ustawienia tekstu
Przejdź do zakładki Projekt i odpowiednio zmień ustawienia tekstu:
- Tekst czcionki: Montserrat
- Masa czcionki tekstu: Ciężki
- Wyrównanie tekstu: środek
- Kolor tekstu: #ffffff
- Rozmiar tekstu: 40px (komputer stacjonarny), 25px (tablet), 18px (telefon)
Identyfikator i klasa CSS
Przejdź do zakładki Zaawansowane i dodaj identyfikator CSS oraz klasę CSS.
- Identyfikator CSS: cena-1
- Klasa CSS: cena-ukryj-pierwsza
Duplikuj linię tyle razy, ile potrzeba
Po wypełnieniu wiersza i wszystkich zawartych w nim modułów możesz go zduplikować dowolną liczbę razy.
Zmodyfikuj identyfikatory CSS modułu Blurb
Zmień odpowiednio identyfikator CSS każdego nowego modułu Blurb:
- Moduł Blurb 1: cena-pozycja-kliknij-1
- Moduł Blurb 2: cena-pozycja-kliknij-2
- Moduł Blurb 3: cena-pozycja-kliknij-3
- ...
Zmień cenę duplikatu modułu tekstowego i identyfikatorów CSS
Zrób to samo dla modułu tekstu ceny w trzeciej kolumnie każdego wiersza.
- Cena 1: cena 1
- Cena 2: cena 2
- Cena 3: cena 3
- ...
Dodaj nową linię
Struktura kolumny
Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień szerokość na mniejsze rozmiary ekranu.
- Szerokość: 80% (komputer stacjonarny), 90% (tablet i telefon)
pokaz
Aby mieć pewność, że wszystkie kolumny pojawią się obok siebie na mniejszych ekranach, dodamy również jedną linię kodu CSS do głównego elementu wiersza.
wyświetlacz: flex;
Dodaj moduł kodu do kolumny 1
Wstaw kod CSS
Kontynuuj, dodając moduł kodu do pierwszej kolumny wiersza i wstawiając następujące wiersze kodu CSS:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Dodaj moduł tekstowy do kolumny 2
Dodaj treść
Przejdź do drugiej kolumny i dodaj nowy moduł tekstowy z wybraną treścią.
Ustawienia tekstu
Zmień odpowiednio ustawienia tekstu:
- Tekst czcionki: Montserrat
- Waga czcionki tekstu: bardzo lekka
- Kolor tekstu: # f8c5ac
- Rozmiar tekstu: 23px (komputer stacjonarny), 18px (tablet), 14px (telefon)
- Odstępy między literami: -1px
- Wysokość linii tekstu: 1.1em
Dodaj pusty moduł tekstowy do kolumny 3
Pozostaw zawartość pustą
Przejdźmy do ostatniej kolumny. Dodaj moduł tekstowy i upewnij się, że obszar zawartości pozostaje pusty.
Ustawienia tekstu
Przejdź do zakładki Projekt i zmień ustawienia tekstu w następujący sposób:
- Tekst czcionki: Montserrat
- Masa czcionki tekstu: Ciężki
- Wyrównanie tekstu: środek
- Kolor tekstu: #ffffff
- Rozmiar tekstu: 40px (komputer stacjonarny), 25px (tablet), 18px (telefon)
Identyfikator CSS
Uzupełnij parametry modułu, dodając identyfikator CSS.
- Identyfikator CSS: cena calkowita
Dodaj opcje motywu JQuery do Divi
Przejdź do zakładki integracji
Teraz, gdy projekt jest gotowy, nadszedł czas, aby zaczął działać z kodem JQuery. Jeśli chcesz dodać kalkulacje cen do jednej strony, możesz umieścić kod w module kodu. Jeśli jednak używasz go na wielu stronach, przejdź do opcji Motyw Divi i wybierz zakładkę Integracja.
Dodaj kod JQuery do tagów głównych
Wstaw następujące wiersze kodu JQuery między znacznikami 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) {$ ("# cal-cena-calkowita"). show (); $ ("# cal-cena-calkowita"). text ("$" + suma + "k");} else {$ ("# calkowita-cena-cal"). hide ();}});});
badanie
Po wykonaniu wszystkich kroków przyjrzyjmy się ostatecznie, co się stało z różnymi rozmiarami ekranu.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak stworzyć wyjątkowy szablon kalkulacji ceny za pomocą Divi. To świetny sposób, aby pokazać swoje odwiedzający od jakiej ceny zaczynają się Twoje usługi i przyciągnąć odpowiednią publiczność. Możesz użyć tego podejścia do dowolnej kalkulacji ceny, którą utworzysz dla swojego następnego projektu Divi! Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej.
