如何使用 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 計算器的簡單過程。 希望您可以將此應用到您自己的網站。

感謝您耐心閱讀本文。 再見!