Did you ever make a BMI calculator with Elementor? It’s not impossible but quite tricky if you don’t know the way. There may arise a need for you to build a BMI calculator on your website for visitors or users. Why you may ask?
A BMI calculator is an essential element in any kind of fitness website. BMI is a primary unit that will help many things to go in order. In other words, we can say that without a proper BMI calculation system, no gym fitness websites can be made easily.
BMI is the main principle in health section. Today we will help you make a BMI calculator with elementor by showing an easy step-by-step tutorial.
Who needs this BMI Calculator:
If you are planning to build a website related to health and fitness, then you will definitely need a BMI calculator. From BMI calculator, a user can determine whether they need to lose weight or have to gain or he is at his ideal weight. Cause diet charts depend on BMI unit. Also, bodybuilders need to make their nutrition list the base of their BMI.
Necessity of BMI Calculator on your website:
If your website has a BMI Calculator, then your visitor won’t go to other places to measure it. They will spend more time on your website. Also, if you add a calorie calculator like the gym calculator, that will increase the engagement and conversion rate improves a lot in this way.
More conversion, more sell of your product. In addition, you can also include a cost calculator like how much expense will spend on their diet chart. All in all, pack for your visitor to make them rely on your site!!
BMI chart
A BMI chart in BMI calculator using Elementor shows the indicator of weight according to height:
How can you make BMI Calculator With Elementor?
In the WordPress theme pack, there are many types of fitness wordpress theme. There you can easily build a BMI calculator by using WordPress Calculator plugin.
There is an alternative way that requires nothing. You don’t need to do a single line of code or draw a design line.
It can be easily prepared by Elementor. Today I will use Element pack pro to do it. They have an advanced calculator. It has key features like customizing the whole plugin according to your necessity. Here we add a formula, a new feature in this type of addon. Let’s rush into the main part. Make a BMI calculator for your gym theme-based website.
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.
You can easily make your website a perfect fitness zone with a BMI calculator. By doing calculation on it , your visitor can make some good impression on website. Also, who are their own personal trainer, this calculator helps them a lot.
We hope our step-by-step guide will help you a lot in your gym WordPress theme. Let us know what is your experience on it.
admin
The BdThemes team builds WordPress plugins trusted by 3M+ users worldwide. We write about web accessibility, WCAG compliance, and inclusive design.