如何使用 Elementor 和 Element Pack Pro 制作 BMI 计算器

已发表: 2022-02-01

如果您在 WordPress 中运行与健康相关的网站或创建有关健身或健康的博客,为访问者提供有关健康和保持健康的产品、服务或内容,那么为他们提供 BMI 计算器将是一个明智的决定使用元素。

如果您给访问者很多建议并告诉他们自己计算体重指数,那么您提高健康意识的努力将毫无价值。 结果,您的访问者将立即转身并找到适合他们的另一个来源。

相反,将使用 Elementor 的 BMI 计算器添加到您的网站并让您的访问者轻松计算他们的 BMI 将是一个明智的考虑。 因此,您的访问者将花费更多时间与您保持长期联系,并吸引更多访问者访问您的网站,最终向您购买商品。

通过使用 Elementor 制作 BMI 计算器并将其提供给他们,这是一种更好的方法来鼓励您保持身体健康。 如果有人试图保持健康,他们可能会返回您的网站以查看他们的 BMI 是否有所改善。

什么是BMI和BMI计算器?

BMI代表身体质量指数。 它是一种基于身高和体重的体脂粗略测量方法,适用于成年男性和女性。 BMI 表示一个人的体重状况与您的身高相匹配。 使用 BMI,您可以快速指示体重不足、超重、正常体重或肥胖。

BMI 计算器是计算 BMI 的基本工具,您可以将其附加到您的网站。 使用 Elementor 制作 BMI 计算器后,只需输入以 kg 为单位的体重和以英尺和英寸为单位的身高,即可获得 BMI 结果。 从该结果中,您可以看到一个人的体重是否健康。

为什么测量 BMI 如此重要?

通过测量 BMI,您可以了解自己的健康状况。 BMI越高,患糖尿病、高血压、肝病、某些类型的癌症、关节炎等各种健康问题的风险就越高。

通过使用 Elementor 制作 BMI 计算器并将其添加到您的 WordPress 网站,您可以为访问者提供一种简单的方法来衡量 BMI 并吸引更多流量并吸引更多重复流量。

体重指数图表

使用 Elementor 的 BMI 计算器中的 BMI 图表根据身高显示体重指标:

how_to_make_BMI_calculator_using_Elementor_&_Element_pack_pro

在本文中,我将向您展示使用 Elementor 将 BMI 计算器添加到您的 WordPress 网站的最简单的分步方法。

让我们潜入水中!

要将 BMI 计算器添加到您的网站,您必须按照以下简单步骤操作:

Step-1:表单域自定义

首先,要使用 Elementor 制作 BMI 计算器,进入管理菜单,点击方框,在搜索栏中输入“计算器”,会出现一些小部件。 选择“高级计算器”,按住并将其拖动到文本区域。

现在,将出现一个显示值字段和提交按钮的表单。

使用值字段开始自定义。 单击“第一个值”,单击“内容”,从“类型”选项中选择“数字”。

现在,在标签中选择“第一个值”,在“占位符”选项中选择“输入您的值”。 输入“您的体重(公斤)”。

接下来,单击“第二个值”,在第一部分中,在“类型”选项中设置“选择”,在标签中设置“您的身高(英尺)”,将列宽设置为 50%。 在选项部分,键入 1 到 7。请参阅文档以插入值。

现在,复制该部分并将其放入另一个部分。 在第二部分中,在“类型”选项中设置“选择”,在“标签”选项中设置“您的高度(英寸)”,将列宽设置为 50%。 在选项部分中,键入 1 到 12。

第 2 步:插入公式

在使用 Elementor 制作 BMI 计算器的这一步中,我们将插入一个公式来计算 BMI。 现在,单击“公式”栏,在公式框中键入公式。 公式为:SUM (f1/ ((f2*0.3048 + f3 *0.0254)* (f2*0.3048 + f3 *0.0254)))。

还有一点要完成! 请耐心等待并继续阅读。

步骤 3:列自定义

在使用 Elementor 制作 BMI 计算器的这一步中,我们将自定义列。 为此,请单击“列”选项,然后单击左上角第三个位置的“高级”选项卡,将填充设置为 80。

之后,单击左上角第二个位置的“样式”栏,自定义框阴影。

快完成了! 保持耐心,我们将进行最后一步。

第四步:造型

在使用 Elementor 制作 BMI 计算器的这一步中,单击“表单样式”,更改间距、文本颜色和排版。

之后,单击“字段”栏,更改文本颜色、占位符颜色和背景颜色。

然后,在字段部分更改宽度、颜色和填充。

之后,单击“提交按钮”,更改颜色并在其周围添加一些填充。

然后,单击“内容”选项卡,将提交按钮的对齐方式更改为“对齐”。

现在,自定义“结果”,更改结果部分的条件。

之后,单击“样式”栏,更改“错误”部分。 如果用户输入错误信息,此部分将显示错误消息。

如果用户插入错误信息或未输入值,则会显示如下错误消息。

全做完了! 您已成功使用 Elementor 制作了一个 BMI 计算器。 现在,您可以让您的访客使用此计算器非常轻松地检查他们的 BMI。

现在,您使用 Elementor 的 BMI 计算器已准备好执行。 这就是它的工作原理。

该博客发布在 BDThemes

结论

我已经向您展示了使用 Elementor 和 Element Pack Pro 制作 BMI 计算器的简单过程。 希望您可以将此应用到您自己的网站。

感谢您耐心阅读本文。 再见!