Come creare un calcolatore di stima dei costi utilizzando Elementor ed Element Pack
Pubblicato: 2022-01-11Realizzare un calcolatore di stima dei costi utilizzando Elementor può essere molto utile per il tuo sito Web, soprattutto se gestisci un sito aziendale WooCommerce o un sito Web di pianificazione di pacchetti con molte combinazioni di prodotti.
Abbiamo visto siti Web di tecnologia, abbigliamento, cosmetici, alimentari e banche che offrono un calcolatore di stima dei costi sulla loro home page per aiutare i visitatori. È utile per fissare rapidamente il tuo budget e scegliere ciò che stai acquistando nel negozio.
Ora, non è un compito difficile creare il tuo calcolatore di stima dei costi utilizzando Elementor poiché hai installato il nostro plug-in Element Pack Pro. Abbiamo uno speciale plugin per calcolatrice che rende ancora più facile progettare la tua calcolatrice con personalizzazioni complete.
In questo articolo, mostreremo come farlo. Cominciamo!
Il Calcolatore per la stima dei costi ha un valore?
Per un tipico sito Web WooCommerce, le persone di solito trascorrono una discreta quantità di tempo a fare acquisti.
Più di una volta, trovano i prodotti che stanno cercando e vogliono vedere quanto costerebbero IVA e spedizione incluse.
A meno che tu non abbia qualcosa come un calcolatore di stima dei costi che utilizza Elementor, influenzerà gli utenti che non hanno trovato un modo adatto per stimare i prezzi dei prodotti.
Quindi, per migliorare la tua esperienza utente, puoi utilizzare il nostro plug-in per la stima dei costi personalizzato offerto da Element Pack Pro.
Quindi, per fare il calcolatore di stima dei costi, devi avere-
- Un sito WordPress con installato il generatore di pagine Elementor
- Plugin Element Pack Pro
- Widget Calcolatrice avanzata (abilitato dalla dashboard)
Se tutti i preparativi sono stati fatti, possiamo andare avanti verso l'obiettivo principale.
Crea un calcolatore di stima dei costi utilizzando Elementor ed Element Pack
Progettiamo manualmente la calcolatrice utilizzando il widget di Element Pack. Questo sarà un processo passo dopo passo, quindi ti consigliamo di seguirlo.
Ora, iniziamo-
Passaggio 1: inserire i campi della calcolatrice avanzata e della calcolatrice
Per creare il calcolatore di stima dei costi utilizzando Elementor, la prima cosa che dobbiamo fare è ottenere il widget Calcolatrice avanzata all'interno della pagina di destinazione.
Prima di tutto
Semplicemente, digita il nome del nostro widget nel menu del widget all'interno dell'editor di pagine di Elementor e trascinalo all'interno della pagina. Come puoi vedere, abbiamo prima creato una sezione per visualizzare bene la calcolatrice sulla pagina.
Dopo di che
Costruiamo i campi della calcolatrice uno per uno. Prima vengono i prodotti. Fare clic sul pulsante Aggiungi elemento e iniziare a personalizzare il campo.
Qui scegliamo il tipo di campo "Seleziona", impostiamo un'etichetta come "Nome prodotto" e inseriamo i nostri prodotti nel campo delle opzioni.
Nota che ogni nuova riga indica una nuova opzione qui e devi usare "|" segno prima del valore per aggiungerlo al calcolo.
Prendi questo come il primo campo del calcolatore di stima dei costi utilizzando Elementor.
Poi Allo stesso modo
Andremo con le stesse identiche impostazioni per il 2° e il 3° campo. Il tipo va "Seleziona" e metteremo etichette diverse per loro con diversi set di valori.
Stiamo impostando la larghezza della colonna al 33% per adattare 3 campi in 1 riga.
Per il prossimo
Abbiamo preso altri 3 campi di seguito per soddisfare i nostri requisiti per il calcolatore di stima dei costi utilizzando Elementor.
Qui, il campo della quantità è il campo Tipo di numero che richiede di scegliere un numero per la quantità di prodotto che desideri acquistare.
Anche in questo caso, il campo IVA è un campo del calcolatore di tipo Disabilitato che non accetta input da terze parti. Ciò significa che è un costo fisso da aggiungere al costo finale del prodotto.
Dovrai solo andare alla sottosezione Avanzate per inserire un valore predefinito che verrà corretto per questa parte della calcolatrice.
Non dimenticare di
Vai alla scheda contenuto del widget Calcolatrice avanzata e imposta l'allineamento per il contenuto. Lo stiamo mantenendo allineato sul lato sinistro per una migliore visualizzazione classica.
Passaggio 2: formula per il calcolatore di stima dei costi utilizzando Elementor
Questo è il passo più importante.
Dall'inizio della creazione dei campi del modulo fino a questo passaggio qui, la calcolatrice non è ancora pronta per funzionare a meno che non includiamo una formula.
La formula può essere qualsiasi equazione logica da un'ampia gamma di selezione. Ecco un elenco delle formule disponibili con cui puoi lavorare.
Comunque.
Abbiamo inserito la formula di lavoro per il calcolatore di stima dei costi che abbiamo appena progettato. Una volta inserita la formula, questa funzionerà immediatamente.
Passaggio 3: altre personalizzazioni al calcolatore di stima dei costi
Il nostro obiettivo principale è già raggiunto. Ma la calcolatrice sembra semplice e opaca senza alcun colore.
Quindi, ora personalizzeremo l'aspetto della calcolatrice usando molte variabili.
Per adesso
Fare clic sulla sezione Risultato e selezionare l'opzione " Al cambiamento " per l'opzione Mostra risultati . Ciò significa che il risultato sarà formato semplicemente utilizzando la calcolatrice, non è necessario premere alcun pulsante.
Quindi mostreremo il risultato in basso con l'allineamento sul lato sinistro e un testo personalizzato per esso.
Dopo di che
Metteremo del testo nel campo in basso da visualizzare in caso di errore. L'errore può verificarsi a causa della formula errata o dell'input errato.
Ora siamo arrivati all'ultima parte della realizzazione di un plug-in per il calcolo dei costi utilizzando Elementor.
Passaggio 4: aggiungiamo i colori
Ora tutto ciò che devi fare è passare alla parte relativa allo stile del widget e iniziare a modificare l'aspetto in base alle tue esigenze.
Prima di tutto
Modificheremo i parametri dalla sezione Stile modulo regolando lo spazio dei campi e lo spazio delle colonne.
Dopo di che
Possiamo cambiare il colore e la tipografia dell'etichetta dalla sezione successiva per il calcolatore della stima dei costi utilizzando Elementor.
Qui puoi scegliere un carattere unico per le etichette per rendere le cose diverse dal resto del mercato.
Nel prossimo passo
Abbiamo personalizzato i campi di input utilizzando un colore del testo brillante, un colore di sfondo molto sottile, un bordo sottile e un po' di riempimento.
Abbiamo anche cambiato il carattere utilizzando l'opzione tipografia per il calcolatore di stima dei costi utilizzando Elementor.
Poi ancora
Abbiamo apportato modifiche al testo risultante applicando una tonalità di colore simile per il testo e la tipografia.
Sembra abbastanza liscio finora, giusto?
E infine
Il testo dell'errore ora ha un nuovo colore dell'etichetta ed è dipinto in rosso per il banner.
Abbiamo aggiunto un po' di riempimento attorno ai testi e cambiato un po' il carattere in modo che corrisponda al resto.
Ora, il tuo calcolatore di stima dei costi che utilizza Elementor è pronto per la visualizzazione.
Conclusione
Questo blog mira a consentirti di utilizzare il plug-in per la creazione di pagine Elementor e Element Pack per creare plug-in per calcolatrici decenti secondo le tue esigenze.
Spero che tu abbia imparato tutto.
Grazie per essere rimasti con noi fino al traguardo.
Questo blog è presentato da BdThemes.