Comment créer un calculateur d'IMC à l'aide d'Elementor & Element Pack Pro

Publié: 2022-02-01

Si vous gérez un site lié à la santé ou démarrez un blog sur le fitness ou la santé dans WordPress offrant à vos visiteurs des produits, des services ou du contenu concernant le bien-être et le maintien en forme, alors ce serait une sage décision pour vous de leur offrir un calculateur d'IMC en utilisant Elementor.

Vos efforts de sensibilisation à la santé ne serviront à rien si vous prodiguez de nombreux conseils à vos visiteurs et leur dites de calculer eux-mêmes leur IMC. En conséquence, vos visiteurs reviendront immédiatement et trouveront une autre source qui leur convient.

Au lieu de cela, il sera judicieux d'ajouter un calculateur d'IMC utilisant Elementor à votre site et de permettre à vos visiteurs de calculer facilement leur IMC. En conséquence, vos visiteurs passeront plus de temps à rester en contact pendant longtemps et attireront plus de visiteurs sur votre site qui finiront par vous acheter quelque chose.

C'est une meilleure façon d'encourager votre trafic à rester en bonne santé en créant un calculateur d'IMC à l'aide d'Elementor et en le leur fournissant prêt à l'emploi. Si quelqu'un essaie de rester en forme, il peut revenir sur votre site pour voir si son IMC s'est amélioré.

Qu'est-ce que l'IMC et le calculateur d'IMC ?

IMC signifie indice de masse corporelle. Il s'agit d'une mesure approximative de la graisse corporelle basée sur la taille et le poids qui s'applique aux hommes et aux femmes adultes. L'IMC indique la condition de poids d'une personne pour votre taille. Avec l'IMC, vous pouvez rapidement indiquer un poids insuffisant, un surpoids, un poids normal ou une obésité.

Le calculateur d'IMC est l'outil essentiel pour calculer l'IMC que vous pouvez joindre à votre site Web. Après avoir créé un calculateur d'IMC à l'aide d'Elementor, entrez simplement le poids en kg et la taille en pieds et en pouces, et obtenez le résultat de l'IMC. À partir de ce résultat, vous pouvez voir si une personne a un poids santé ou non.

Pourquoi mesurer l'IMC est-il si important ?

En mesurant l'IMC, vous pouvez déterminer votre état de santé. Plus l'IMC est élevé, plus le risque de développer divers problèmes de santé comme le diabète, l'hypertension artérielle, les maladies du foie, certains types de cancer, l'arthrite, etc.

En créant un calculateur d'IMC à l'aide d'Elementor et en l'ajoutant à votre site WordPress, vous pouvez permettre à vos visiteurs de mesurer facilement l'IMC, d'engager plus de trafic et de générer plus de trafic récurrent.

Tableau IMC

Un graphique IMC dans la calculatrice IMC utilisant Elementor affiche l'indicateur de poids en fonction de la taille :

how_to_make_BMI_calculator_using_Elementor_&_Element_pack_pro

Dans cet article, je vais vous montrer le moyen le plus simple, étape par étape, d'ajouter un calculateur d'IMC à l'aide d'Elementor à votre site Web WordPress.

Plongeons dedans !

Pour ajouter un calculateur d'IMC à votre site Web, vous devez suivre ces étapes simples :

Étape 1 : Personnalisation des champs de formulaire

Tout d'abord, pour faire une calculatrice d'IMC avec Elementor, allez dans le menu Admin, cliquez sur la case carrée, tapez 'calculatrice' dans la barre de recherche, des widgets apparaîtront. Sélectionnez la "Calculatrice avancée", maintenez-la enfoncée et faites-la glisser vers la zone de texte.

Maintenant, un formulaire apparaîtra montrant le champ de valeur et le bouton Soumettre.

Commencez la personnalisation avec les champs Valeur. Cliquez sur 'Première valeur', cliquez sur 'Contenu', sélectionnez 'Numéro' dans l'option 'Type'.

Maintenant, sélectionnez "Première valeur" dans l'étiquette, sélectionnez "Entrez votre valeur" dans l'option "Espace réservé". Tapez 'Votre poids (Kg)'.

Ensuite, cliquez sur 'Second Value', dans la première partie, définissez 'Select' dans l'option 'Type', définissez 'Your Height (Feet)' dans l'étiquette, définissez la largeur de la colonne à 50%. Dans la section option, saisissez 1 à 7. Consultez le document pour insérer la valeur.

Maintenant, copiez la section et transformez-la en une autre partie. Dans la deuxième partie, définissez 'Select' dans l'option 'Type', définissez 'Your Height (Inch)' dans l'option Label, définissez la largeur de colonne à 50%. Dans la section des options, tapez 1 à 12.

Étape 2 : Insertion d'une formule

Dans cette étape de création d'un calculateur d'IMC à l'aide d'Elementor, nous allons insérer une formule pour calculer l'IMC. Maintenant, cliquez sur la barre 'Formule', tapez la formule dans la boîte de formule. La formule est : SOMME (f1/ ((f2*0,3048 + f3 *0,0254)* (f2*0,3048 + f3 *0,0254))).

Un peu plus pour finir ! Soyez patient et continuez à lire.

Étape 3 : Personnalisation de la colonne

Dans cette étape de création d'un calculateur d'IMC à l'aide d'Elementor, nous personnaliserons la colonne. Pour ce faire, cliquez sur l'option 'Colonne' puis cliquez sur l'onglet 'Avancé' en 3ème position en haut à gauche, réglez le rembourrage à 80.

Après cela, cliquez sur la barre 'Style' en 2e position en haut à gauche, personnalisez l'ombre de la boîte.

Presque fini! Soyez patient, nous allons passer à l'étape finale.

Étape 4 : Style

Dans cette étape de création d'un calculateur d'IMC à l'aide d'Elementor, cliquez sur le "Style de formulaire", modifiez l'espacement, la couleur du texte et la typographie.

Après cela, cliquez sur la barre "Champs", modifiez la couleur du texte, la couleur de l'espace réservé et la couleur d'arrière-plan.

Ensuite, dans la section des champs, modifiez la largeur, la couleur et le rembourrage.

Après cela, cliquez sur le "bouton Soumettre", changez la couleur et ajoutez un peu de rembourrage autour.

Ensuite, cliquez sur l'onglet 'Contenu', changez l'alignement du bouton d'envoi en 'justifier'.

Maintenant, personnalisez le 'Résultat', modifiez l'état de la section de résultat.

Après cela, cliquez sur la barre 'Style', modifiez la section 'Erreur'. Cette section affichera un message d'erreur si l'utilisateur saisit des informations erronées.

Si l'utilisateur insère des informations erronées ou ne met pas la valeur, un message d'erreur s'affichera comme ceci.

Terminé! Vous avez fini de créer un calculateur d'IMC avec Elementor avec succès. Désormais, vous pouvez proposer à vos visiteurs de vérifier très facilement leur IMC à l'aide de ce calculateur.

Maintenant que votre calculateur d'IMC utilisant Elementor est prêt à fonctionner. Voilà comment cela fonctionne.

Ce blog est publié sur BDThemes

Conclusion

Je vous ai montré le processus simple de création d'un calculateur d'IMC à l'aide d'Elementor et d'Element Pack Pro. J'espère que vous pourrez l'appliquer à votre propre site.

Merci d'avoir patiemment lu cet article. À la prochaine!