Comment créer un calculateur d'estimation des coûts à l'aide d'Elementor et d'Element Pack
Publié: 2022-01-11Créer un calculateur d'estimation des coûts à l'aide d'Elementor peut être très utile pour votre site Web, en particulier si vous exploitez un site commercial WooCommerce ou un site Web de planification de packages avec de nombreuses combinaisons de produits.
Nous avons vu des sites Web de technologie, de vêtements, de cosmétiques, d'épicerie et de banque proposer un calculateur d'estimation des coûts sur leur page d'accueil pour aider les visiteurs. C'est pratique pour fixer rapidement votre budget et choisir ce que vous achetez en magasin.
Maintenant, ce n'est pas une tâche difficile de créer votre propre calculateur d'estimation des coûts à l'aide d'Elementor car vous avez installé notre plugin Element Pack Pro. Nous avons un plug-in de calculatrice spécial qui facilite encore plus la conception de votre propre calculatrice avec des personnalisations complètes.
Dans cet article, nous allons montrer comment le faire. Commençons!
Le calculateur d'estimation des coûts a-t-il une valeur ?
Pour un site Web WooCommerce typique, les gens passent généralement beaucoup de temps à faire leurs achats.
Plus d'une fois, ils trouvent les produits qu'ils recherchent et veulent voir combien ils coûteraient, TVA et frais d'expédition compris.
À moins que vous n'ayez quelque chose comme un calculateur d'estimation des coûts utilisant Elementor, cela affectera les utilisateurs qui n'ont pas trouvé de moyen approprié d'estimer les prix des produits.
Ainsi, afin d'améliorer votre expérience utilisateur, vous pouvez utiliser notre plugin de calculateur d'estimation de coût personnalisé proposé par Element Pack Pro.
Donc, pour faire le calculateur d'estimation des coûts, vous devez avoir-
- Un site WordPress avec le constructeur de pages Elementor installé
- Plugin Element Pack Pro
- Widget Calculatrice avancée (activé depuis le tableau de bord)
Si toutes les préparations sont faites, nous pouvons avancer vers l'objectif principal.
Créer un calculateur d'estimation des coûts à l'aide d'Elementor et d'Element Pack
Concevons la calculatrice manuellement à l'aide du widget d'Element Pack. Ce sera un processus étape par étape, il vous est donc conseillé de suivre.
Maintenant, commençons-
Étape 1 : Insérer les champs de la calculatrice avancée et de la calculatrice de configuration
Pour créer le calculateur d'estimation des coûts à l'aide d'Elementor, la première chose que nous devons faire est d'obtenir le widget Advanced Calculator dans la page cible.
D'abord
Tapez simplement le nom de notre widget dans le menu du widget à l'intérieur de l'éditeur de page Elementor et faites-le glisser à l'intérieur de la page. Comme vous pouvez le voir, nous avons d'abord créé une section afin de bien afficher la calculatrice sur la page.
Après ça
Construisons les champs de la calculatrice un par un. Vient d'abord les Produits. Cliquez sur le bouton Ajouter un élément et commencez à personnaliser le champ.
Ici, nous choisissons le type de champ "Sélectionner", définissons une étiquette comme "Nom du produit" et insérons nos produits dans le champ des options.
Notez que chaque nouvelle ligne signifie une nouvelle option ici et vous devez utiliser le "|" signe avant la valeur afin de l'ajouter au calcul.
Considérez cela comme le tout premier champ du calculateur d'estimation des coûts utilisant Elementor.
Puis de même
Nous utiliserons exactement les mêmes paramètres pour les 2e et 3e champs. Le type devient "Sélectionner" et nous leur attribuerons différentes étiquettes avec différents ensembles de valeurs.
Nous fixons la largeur de colonne à 33 % pour ajuster 3 champs sur 1 ligne.
Pour la suite
Nous avons pris 3 autres champs ci-dessous pour répondre à nos exigences pour le calculateur d'estimation des coûts à l'aide d'Elementor.
Ici, le champ de quantité est le champ Type de nombre qui vous oblige à choisir un nombre pour la quantité de produit que vous souhaitez acheter.
Encore une fois, le champ TVA est un champ de calculatrice de type désactivé qui ne prend pas les entrées du tiers. Cela signifie qu'il s'agit d'un coût fixe à ajouter au coût final du produit.
Il vous suffira d'aller dans la sous-section Avancé pour insérer une valeur par défaut qui sera fixe pour cette partie de la calculatrice.
N'oubliez pas de
Accédez à l'onglet Contenu du widget Calculatrice avancée et définissez l'alignement du contenu. Nous le gardons aligné à gauche pour une meilleure vue classique.
Étape 2 : Formule pour le calculateur d'estimation des coûts à l'aide d'Elementor
Ceci est l'étape la plus importante.
Depuis le début de la création des champs de formulaire jusqu'à cette étape ici, la calculatrice n'est toujours pas prête à fonctionner à moins que nous n'incluions une formule.
La formule peut être n'importe quelle équation logique à partir d'un large éventail de sélections. Voici une liste des formules disponibles avec lesquelles vous pouvez travailler.
En tous cas.
Nous avons inséré la formule de travail pour le calculateur d'estimation des coûts que nous venons de concevoir. Une fois que vous avez inséré la formule, elle fonctionnera immédiatement.
Étape 3 : Autres personnalisations du calculateur d'estimation des coûts
Notre objectif principal est déjà atteint. Mais, la calculatrice semble simple et terne sans aucune couleur.
Nous allons donc maintenant personnaliser l'apparence de la calculatrice en utilisant de nombreuses variables.
Pour le moment
Cliquez sur la section Résultat et sélectionnez l'option « En cas de changement » pour l'option Afficher le résultat . Cela signifie que le résultat sera formé simplement en utilisant la calculatrice, pas besoin d'appuyer sur un bouton.
Ensuite, nous afficherons le résultat en bas avec un alignement à gauche et un texte personnalisé pour celui-ci.
Après ça
Nous mettrons du texte dans le champ du bas à afficher en cas d'erreur. L'erreur peut se produire en raison d'une mauvaise formule ou d'une mauvaise saisie.
Nous sommes maintenant arrivés à la dernière partie de la création d'un plugin de calculateur de coûts utilisant Elementor.
Étape 4 : Ajoutons des couleurs
Maintenant, tout ce que vous avez à faire est de passer à la partie style du widget et de commencer à modifier l'apparence en fonction de vos besoins.
D'abord
Nous allons modifier les paramètres de la section Style de formulaire en ajustant l'espace de champ et l'espace de colonne.
Après ça
Nous pouvons modifier la couleur et la typographie de l'étiquette à partir de la section suivante pour le calculateur d'estimation des coûts à l'aide d'Elementor.
Ici, vous pouvez opter pour une police unique pour les étiquettes afin de différencier les choses du reste du marché.
À l'étape suivante
Nous avons personnalisé les champs de saisie en utilisant une couleur de texte vive, une couleur d'arrière-plan très fine, une bordure fine et un peu de rembourrage.
Nous avons également changé la police à l'aide de l'option de typographie pour le calculateur d'estimation des coûts à l'aide d'Elementor.
Puis encore
Nous avons apporté des modifications au texte résultant en appliquant une tonalité de couleur similaire pour le texte et la typographie.
Ça a l'air assez lisse jusqu'à présent, non ?
Et enfin
Le texte d'erreur a maintenant une nouvelle couleur d'étiquette et est peint en rouge pour la bannière.
Nous avons ajouté du rembourrage autour des textes et modifié un peu la police pour qu'elle corresponde au reste.
Maintenant, votre calculateur d'estimation des coûts utilisant Elementor est prêt à être affiché.
Conclusion
Ce blog vise à vous permettre d'utiliser le plugin de création de pages Elementor et Element Pack pour créer des plugins de calculatrices décents selon vos besoins.
J'espère que vous avez tout appris.
Merci de nous avoir suivi jusqu'à la ligne d'arrivée.
Ce blog est présenté par BdThemes.