fbpx

How to make BMI calculator using Elementor & Element Pack Pro

If you run a health-related site or start a blog about fitness or health in WordPress offering your visitors products, services, or content regarding well-being and keeping fit, then it would be a wise decision for you to offer them a BMI calculator using Elementor.

Your efforts to make awareness about health will be worthless if you give your visitors lots of advice and tell them to calculate their BMI themselves. As a result, your visitors will turn back at once and find another source suitable for them.

Instead, it will be a wise consideration to add a BMI calculator using Elementor to your site and let your visitors easily calculate their BMI. As a result, your visitors will spend more time keeping in touch for a long time and get more visitors to your site ending up buying something from you.

It is a better way to encourage your traffic about keeping in good health by making a BMI calculator using Elementor and provide it ready-made to them. If someone is trying to keep fit, they may return to your site to see if their BMI has improved.

What is BMI and BMI calculator?

BMI stands for Body Mass Index. It is a rough measure of body fat based on height and weight that applies to adult men and women. BMI indicates a person’s condition of weight for your height. With BMI, you can quickly indicate underweight, overweight, normal weight, or obesity.

BMI calculator is the essential tool to calculate BMI you can attach to your website. After making a BMI calculator using Elementor, Just input weight in kg, and height in feet and inch, and get the BMI result. From that result, you can see if a person is at a healthy weight or not.

Why measuring BMI is so important?

By measuring BMI, you can figure out your health condition. The higher the BMI, the higher is the risk of developing various health problems like diabetes, high blood pressure, liver disease, some types of cancer, arthritis, etc.

By making a BMI calculator using Elementor and adding it to your WordPress site, you can make an easy way for your visitors to measure BMI and engage more traffic and drive more repeat traffic.

BMI chart

A BMI chart in BMI calculator using Elementor shows the indicator of weight according to height:

how_to_make_BMI_calculator_using_Elementor_&_Element_pack_pro

In this article, I will show you the easiest step-by-step way to add a BMI calculator using Elementor to your WordPress website.

Let’s dive right in!

To add a BMI calculator to your website, you have to follow these easy steps:

Step-1: Form field customization

First, to make a BMI calculator using Elementor, go to the Admin menu, click on the square box, type ‘calculator’ in the search bar, some widgets will appear. Select the ‘Advanced Calculator’, hold and drag it to the text area.

Now, a form will appear showing the value field and submit button.

Start customizing with the Value fields. Click on the ‘First Value’, click ‘Content’, select ‘Number’ from the ‘Type’ option.

Now, select ‘First Value’ in the Label, select ‘Enter your value’ in the ‘Placeholder’ option. Type ‘Your Weight (Kg)’.

Next, click on ‘Second Value’, in the first portion, set ‘Select’ in the ‘Type’ option, set ‘Your Height (Feet)’ in the Label, set the column width to 50%. In the option section, type 1 to 7. See the document to insert the value.

Now, copy the section and make it into another portion. In the second portion, set ‘Select’ in the ‘Type’ option, set ‘Your Height (Inch)’ in the Label option, set the column width to 50%. In the option section, type 1 to 12.

Step-2: Inserting Formula

In this step making a BMI calculator using Elementor, we will insert a formula to calculate BMI. Now, click on the ‘Formula’ bar, type the formula in the formula box. The formula is: SUM (f1/ ((f2*0.3048 + f3 *0.0254)* (f2*0.3048 + f3 *0.0254))).

A little more to finish! Be patient and keep reading.

Step-3: Column customization

In this step making a BMI calculator using Elementor, we will customize the column. To do this, click on the ‘Column’ option then click ‘Advanced’ tab in the upper left 3rd position, set the padding to 80.

After that, click on the ‘Style’ bar in the upper left 2nd position, customize the box shadow.

Almost done! Keep patience, we are going to proceed to the final step.

Step-4: Styling

In this step making a BMI calculator using Elementor, click on the ‘Form Style’, change the Spacing, text colour, and Typography.

After that, click on the ‘Fields’ bar, change the text colour, placeholder colour, and background colour.

Then, in the fields section change the width, colour, and padding.

After that, click on the ‘Submit Button’, change the colour and add some padding around it.

Then, click on the ‘Content’ tab, change the alignment of the submit button to ‘justify’.

Now, customize the ‘Result’, change the condition of the result section.

After that, click on ‘Style’ bar, change the ‘Error’ section. This section will show an error message if the user enters the wrong information.

If the user inserts wrong information or does not put the value then an error message will show like this.

All done! You have finished making a BMI calculator using Elementor successfully. Now, you can offer your visitors to check their BMI using this calculator very easily.

Now that your BMI calculator using Elementor is ready to perform. This is how it works.

This blog is published on BDThemes

Conclusion

I have shown you the easy process of making a BMI calculator using Elementor and Element Pack Pro. Hope you can apply this to your own site.

Thank you for patiently reading this article. See you again!


Leave a Reply

Your email address will not be published.

*


Need any assistance? Call Us: 01700 55 95 95 || © Copyright 2022 All Rights Reserved by BdThemes