Jak zrobić Kalkulator szacowania kosztów za pomocą Elementora i Element Pack
Opublikowany: 2022-01-11Stworzenie kalkulatora szacowania kosztów za pomocą Elementora może być bardzo przydatne dla Twojej witryny, zwłaszcza jeśli prowadzisz witrynę biznesową WooCommerce lub witrynę planowania pakietów z wieloma kombinacjami produktów.
Widzieliśmy strony techniczne, odzieżowe, kosmetyczne, spożywcze i bankowe oferujące kalkulator szacowania kosztów na swojej stronie głównej, aby pomóc odwiedzającym. Przydaje się, aby szybko ustalić budżet i wybrać, co kupujesz w sklepie.
Teraz zbudowanie własnego kalkulatora szacowania kosztów za pomocą Elementora nie jest trudnym zadaniem, ponieważ masz zainstalowaną naszą wtyczkę Element Pack Pro. Mamy specjalną wtyczkę kalkulatora, która jeszcze bardziej ułatwia zaprojektowanie własnego kalkulatora z pełnymi dostosowaniami.
W tym artykule pokażemy, jak to zrobić. Zaczynajmy!
Czy Kalkulator szacowania kosztów jest wart?
W przypadku typowej witryny WooCommerce ludzie zwykle spędzają przyzwoitą ilość czasu na zakupach.
Niejednokrotnie znajdują produkty, których szukają i chcą zobaczyć, ile by kosztowały, z uwzględnieniem podatku VAT i kosztów wysyłki.
Jeśli nie masz czegoś takiego jak kalkulator szacowania kosztów za pomocą Elementora, wpłynie to na użytkowników, którzy nie znaleźli odpowiedniego sposobu na oszacowanie cen produktów.
Tak więc, aby poprawić wrażenia użytkownika, możesz skorzystać z naszej niestandardowej wtyczki kalkulatora szacowania kosztów dostarczonej przez Element Pack Pro.
Aby więc wykonać kalkulator kosztorysowy, musisz mieć:
- Witryna WordPress z zainstalowanym kreatorem stron Elementor
- Wtyczka Element Pack Pro
- Zaawansowany widżet kalkulatora (włączany z pulpitu nawigacyjnego)
Jeśli wszystkie przygotowania zostaną zakończone, możemy ruszyć do przodu w kierunku głównego celu.
Utwórz kalkulator szacowania kosztów za pomocą Elementora i Element Pack
Zaprojektujmy kalkulator ręcznie, korzystając z widżetu z pakietu Element Pack. Będzie to proces krok po kroku, więc radzimy postępować dalej.
Teraz zacznijmy-
Krok 1: Wstaw zaawansowany kalkulator i ustaw pola kalkulatora
Aby wykonać kalkulator szacowania kosztów za pomocą Elementora, pierwszą rzeczą, którą musimy zrobić, to pobrać widżet zaawansowanego kalkulatora na stronie docelowej.
Przede wszystkim
Po prostu wpisz nazwę naszego widżetu w menu widżetów w edytorze stron Elementor i przeciągnij go na stronę. Jak widać, najpierw stworzyliśmy sekcję, aby ładnie wyświetlać kalkulator na stronie.
Po tym
Zbudujmy pola kalkulatora jeden po drugim. Najpierw są Produkty. Kliknij przycisk Dodaj element i zacznij dostosowywać pole.
Tutaj wybieramy typ pola „Wybierz”, ustawiamy etykietę jako „Nazwa produktu” i wstawiamy nasze produkty w polu opcji.
Pamiętaj, że każda nowa linia oznacza tutaj nową opcję i musisz użyć „|” znak przed wartością, aby dodać ją do obliczenia.
Potraktuj to jako pierwsze pole kalkulatora szacowania kosztów za pomocą Elementora.
Wtedy podobnie
Będziemy postępować z dokładnie tymi samymi ustawieniami dla drugiego i trzeciego pola. Typ to „Wybierz” i umieścimy dla nich różne etykiety z różnymi zestawami wartości.
Ustawiamy szerokość kolumny na 33%, aby zmieścić 3 pola w 1 wierszu.
W następnym
Poniżej wybraliśmy 3 dodatkowe pola, aby spełnić nasze wymagania dotyczące kalkulatora szacowania kosztów za pomocą Elementora.
W tym przypadku pole ilości jest polem typu Numer , które wymaga wybrania liczby określającej ilość produktu, który chcesz kupić.
Ponownie, pole VAT jest polem kalkulatora typu Disabled , które nie pobiera danych wejściowych od strony trzeciej. Oznacza to, że jest to stały koszt, który należy dodać do ostatecznego kosztu produktu.
Musisz tylko przejść do podsekcji Zaawansowane , aby wstawić domyślną wartość, która zostanie ustalona w tej części kalkulatora.
Nie zapomnij
Przejdź do zakładki treści widżetu Zaawansowany kalkulator i ustaw wyrównanie treści. Utrzymujemy go wyrównany do lewej strony, aby uzyskać lepszy klasyczny widok.
Krok 2: Formuła kalkulatora szacowania kosztów za pomocą Elementora
To najważniejszy krok.
Od początku tworzenia pól formularza do tego kroku kalkulator nadal nie jest gotowy do działania, chyba że dołączymy formułę.
Formuła może być dowolnym równaniem logicznym z szerokiego zakresu wyboru. Oto lista dostępnych formuł, z którymi możesz pracować.
Tak czy inaczej.
Wstawiliśmy działający wzór do zaprojektowanego przez nas kalkulatora kosztorysowego. Po wstawieniu formuły od razu zacznie działać.
Krok 3: Inne dostosowania do kalkulatora szacowania kosztów
Nasz główny cel został już osiągnięty. Ale kalkulator wygląda zwyczajnie i nudno, bez żadnych kolorów.
Tak więc teraz dostosujemy wygląd kalkulatora za pomocą wielu zmiennych.
Na razie
Kliknij sekcję Wynik i wybierz opcję „ Po zmianie ” dla opcji Pokaż wynik . Oznacza to, że wynik zostanie utworzony za pomocą kalkulatora, bez konieczności naciskania żadnego przycisku.
Następnie pokażemy wynik na dole z wyrównaniem do lewej strony i niestandardowym tekstem.
Po tym
W dolnym polu umieścimy tekst do wyświetlenia w przypadku błędu. Błąd może wystąpić z powodu niewłaściwej formuły lub niewłaściwych danych wejściowych.
Teraz doszliśmy do ostatniej części tworzenia wtyczki kalkulatora kosztów za pomocą Elementora.
Krok 4: Dodajmy kolory
Teraz wszystko, co musisz zrobić, to przejść do części dotyczącej stylu widżetu i zacząć wprowadzać zmiany w wyglądzie zgodnie z własnymi potrzebami.
Przede wszystkim
Zmienimy parametry z sekcji Styl formularza , dostosowując przestrzeń pól i przestrzeń kolumn.
Po tym
Możemy zmienić kolor i typografię etykiety z następnej sekcji kalkulatora szacowania kosztów za pomocą Elementora.
Tutaj możesz wybrać unikalną czcionkę etykiet, aby odróżnić ją od reszty rynku.
W następnym kroku
Dostosowaliśmy pola wejściowe, używając jasnego koloru tekstu, bardzo cienkiego koloru tła, cienkiego obramowania i dopełnienia.
Zmieniliśmy również czcionkę za pomocą opcji typografii dla kalkulatora szacowania kosztów za pomocą Elementora.
Potem znowu
Wprowadziliśmy zmiany do tekstu wynikowego, stosując podobny ton kolorów do tekstu i typografii.
Jak dotąd wygląda całkiem gładko, prawda?
I wreszcie
Tekst błędu ma teraz nowy kolor etykiety i jest pomalowany na czerwono na banerze.
Dodaliśmy trochę wypełnienia wokół tekstów i trochę zmieniliśmy czcionkę, aby pasowała do reszty.
Teraz Twój kalkulator szacowania kosztów za pomocą Elementora jest gotowy do wyświetlenia.
Wniosek
Ten blog ma na celu umożliwienie korzystania z wtyczki do tworzenia stron Elementor i pakietu Element do tworzenia przyzwoitych wtyczek do kalkulatorów zgodnie z Twoimi wymaganiami.
Mam nadzieję, że nauczyłeś się wszystkiego.
Dzięki za trzymanie się z nami do mety.
Ten blog jest prezentowany przez BdThemes.