Cum să faci Calculator de estimare a costurilor folosind Elementor și Element Pack

Publicat: 2022-01-11

Realizarea unui calculator de estimare a costurilor folosind Elementor poate fi destul de util pentru site-ul dvs. web, mai ales dacă rulați un site de afaceri WooCommerce sau un site web de planificare a pachetelor cu o mulțime de combinații de produse.

Am văzut site-uri web tehnologice, textile, cosmetice, alimentare și bancare care oferă un calculator de estimare a costurilor pe pagina lor de pornire pentru a ajuta vizitatorii. Este util să vă fixați rapid bugetul și să alegeți ceea ce cumpărați din magazin.

Acum, nu este o sarcină dificilă să vă construiți propriul calculator de estimare a costurilor folosind Elementor, deoarece aveți instalat pluginul nostru Element Pack Pro. Avem un plugin special pentru calculator care face și mai ușor să vă proiectați propriul calculator cu personalizări complete.

În acest articol, vom arăta cum să o faceți. Sa incepem!

Are vreo valoare Calculatorul de estimare a costurilor?

Pentru un site web tipic WooCommerce, oamenii petrec de obicei o cantitate decentă de timp la cumpărături.

De mai multe ori găsesc produsele pe care le caută și vor să vadă cât ar costa acestea, inclusiv TVA și transport.

Dacă nu aveți ceva de genul unui calculator de estimare a costurilor folosind Elementor, acesta va afecta utilizatorii care nu au găsit o modalitate adecvată de a estima prețurile produselor.

Așadar, pentru a vă îmbunătăți experiența utilizatorului, puteți utiliza pluginul nostru personalizat pentru calcularea estimarii costurilor, oferit de Element Pack Pro.

Deci, pentru a face calculatorul de estimare a costurilor, trebuie să aveți-

Un site WordPress cu generatorul de pagini Elementor instalat
Pluginul Element Pack Pro
Widget Calculator avansat (activat din tabloul de bord)

Dacă toate pregătirile sunt făcute, putem avansa către obiectivul principal.

Faceți un Calculator de estimare a costurilor folosind Elementor și Element Pack

Să proiectăm manual calculatorul folosind widget-ul din Element Pack. Acesta va fi un proces pas cu pas, așa că vi se recomandă să urmați.

Acum, să începem...

Pasul 1: Introduceți Calculator avansat și Setați câmpurile Calculator

Pentru a face calculatorul de estimare a costurilor folosind Elementor, primul lucru pe care trebuie să-l facem este să obținem widgetul Calculator avansat în pagina țintă.

Pentru inceput

Pur și simplu, introduceți numele widget-ului nostru în meniul widget din interiorul editorului de pagini Elementor și trageți-l în interiorul paginii. După cum puteți vedea, am făcut mai întâi o secțiune pentru a afișa frumos calculatorul pe pagină.

După care

Să construim câmpurile calculatorului unul câte unul. Mai întâi vin Produsele. Faceți clic pe butonul Adăugare articol și începeți să personalizați câmpul.

Aici, alegem tipul de câmp „Selectați”, setăm o etichetă ca „Nume produs” și inserăm produsele noastre în câmpul de opțiuni.

Rețineți că fiecare linie nouă înseamnă o nouă opțiune aici și trebuie să utilizați „|” semnează înaintea valorii pentru a o adăuga la calcul.

Luați acesta ca primul câmp al calculatorului de estimare a costurilor folosind Elementor.

Apoi În mod similar

Vom merge cu exact aceleași setări pentru al 2-lea și al 3-lea câmp. Tipul este „Selectați” și le vom pune diferite etichete cu seturi de valori diferite.

Setăm lățimea coloanei la 33% pentru a se potrivi cu 3 câmpuri într-un singur rând.

Pentru următorul

Am luat încă 3 câmpuri de mai jos pentru a ne îndeplini cerințele pentru calculatorul de estimare a costurilor folosind Elementor.

Aici, câmpul de cantitate este câmpul de tip Număr care vă cere să alegeți un număr pentru cantitatea de produs pe care doriți să o achiziționați.

Din nou, câmpul TVA este un câmp de calculator de tip Dezactivat care nu primește intrări de la terț. Aceasta înseamnă că este un cost fix care trebuie adăugat la costul final al produsului.

Va trebui doar să mergeți la subsecțiunea Avansat pentru a introduce o valoare implicită care va fi fixată pentru această parte a calculatorului.

Nu uitați

Accesați fila de conținut a widget-ului Calculator avansat și setați alinierea pentru conținut. Îl menținem aliniat în partea stângă pentru o vedere clasică mai bună.

Pasul 2: Formula pentru calculatorul de estimare a costurilor folosind Elementor

Acesta este cel mai important pas.

De la începutul realizării câmpurilor de formular până la acest pas aici, calculatorul nu este încă pregătit să funcționeze decât dacă includem o formulă.

Formula poate fi orice ecuație logică dintr-o gamă largă de selecție. Iată o listă a formulelor disponibile cu care puteți lucra.

Oricum.

Am introdus formula de lucru pentru calculatorul de estimare a costurilor pe care tocmai l-am conceput. Odată ce ați introdus formula, aceasta va funcționa imediat.

Pasul 3: Alte personalizări ale Calculatorului de estimare a costurilor

Scopul nostru principal este deja atins. Dar, calculatorul arată simplu și plictisitor, fără nicio culoare.

Deci, acum vom personaliza aspectul calculatorului folosind o mulțime de variabile.

Pentru acum

Faceți clic pe secțiunea Rezultat și selectați opțiunea „ La modificare ” pentru opțiunea Afișare rezultat . Aceasta înseamnă că rezultatul va fi format doar folosind calculatorul, nu este nevoie să apăsați niciun buton.

Apoi vom afișa rezultatul în partea de jos cu alinierea în partea stângă și un text personalizat pentru acesta.

După care

Vom pune un text în câmpul de jos pentru a fi afișat în cazul unei erori. Eroarea se poate întâmpla din cauza formulei greșite sau a introducerii greșite.

Acum am ajuns la ultima parte a creării unui plugin pentru calculatoare de costuri folosind Elementor.

Pasul 4: Să adăugăm culori

Acum tot ce trebuie să faceți este să treceți la partea de stil a widget-ului și să începeți să faceți modificări de aspect în funcție de nevoile dvs.

Pentru inceput

Vom modifica parametrii din secțiunea Stil formular ajustând spațiul câmpului și spațiul coloanei.

După care

Putem schimba culoarea etichetei și tipografia din secțiunea următoare pentru calculatorul de estimare a costurilor folosind Elementor.

Aici, puteți alege un font unic pentru etichete pentru a face lucrurile diferite de restul pieței.

În Următorul Pas

Am personalizat câmpurile de introducere utilizând o culoare de text strălucitoare, o culoare de fundal foarte subțire, un chenar subțire și o umplutură.

De asemenea, am schimbat fontul folosind opțiunea de tipografie pentru calculatorul de estimare a costurilor folosind Elementor.

Apoi din nou

Am făcut modificări textului rezultat prin aplicarea unui ton de culoare similar pentru text și tipografie.

Pare destul de neted până acum, nu?

Și în cele din urmă

Textul de eroare are acum o nouă culoare de etichetă și este vopsit în roșu pentru banner.

Am adăugat niște umplutură în jurul textelor și am schimbat puțin fontul pentru a se potrivi cu restul.

Acum, calculatorul dumneavoastră de estimare a costurilor folosind Elementor este gata pentru afișare.

Concluzie

Acest blog își propune să vă permită să utilizați pluginul pentru generatorul de pagini Elementor și Element Pack pentru a crea pluginuri decente pentru calculatoare, conform cerințelor dvs.

Sper că ai învățat totul.

Vă mulțumim că ați rămas alături de noi până la linia de sosire.

Acest blog este prezentat de BdThemes.