如何使用 Elementor 和 Element Pack 製作成本估算計算器
已發表: 2022-01-11使用 Elementor 製作成本估算計算器可以為您的網站提供非常有用的信息，特別是如果您正在運行 WooCommerce 商業網站或包含大量產品組合的包裝規劃網站。
我們已經看到科技、布料、化妝品、雜貨和銀行網站在其主頁上提供成本估算計算器來幫助訪問者。 它可以方便地快速確定您的預算並選擇您在商店購買的商品。
現在，使用 Elementor 構建您自己的成本估算計算器並不是一項艱鉅的任務，因為您安裝了我們的 Element Pack Pro 插件。 我們有一個特殊的計算器插件，可以更輕鬆地設計您自己的計算器並進行完全自定義。
在本文中，我們將展示如何做到這一點。 讓我們開始！
成本估算計算器有什麼價值嗎？
對於典型的 WooCommerce 網站，人們通常會花費大量時間購物。
他們不止一次地找到了他們正在尋找的產品，並想看看他們的成本包括增值稅和運費。
除非你有使用 Elementor 的成本估算計算器之類的東西，否則它會影響那些沒有找到合適的方法來估算產品價格的用戶。
因此，為了提升您的用戶體驗，您可以使用 Element Pack Pro 為您帶來的自定義成本估算計算器插件。
因此，為了製作成本估算計算器，您必須 -
- 安裝了 Elementor 頁面構建器的 WordPress 網站
- Element Pack Pro 插件
- 高級計算器小部件（從儀表板啟用）
如果一切準備就緒，我們就可以朝著主要目標前進。
使用 Elementor 和 Element Pack 製作成本估算計算器
讓我們使用 Element Pack 中的小部件手動設計計算器。 這將是一個循序漸進的過程，因此建議您遵循。
現在，讓我們開始——
第 1 步：插入高級計算器和設置計算器字段
要使用 Elementor 製作成本估算計算器，我們要做的第一件事是在目標頁面中獲取Advanced Calculator小部件。
首先
只需在 Elementor 頁面編輯器內的小部件菜單上鍵入小部件的名稱，然後將其拖到頁面內。 如您所見，我們首先製作了一個部分，以便在頁面上很好地顯示計算器。
在那之後
讓我們一一構建計算器字段。 首先是產品。 單擊“添加項目”按鈕並開始自定義該字段。
在這裡，我們選擇字段類型“選擇”，設置標籤為“產品名稱”，並在選項字段中插入我們的產品。
請注意，每一個新行都意味著一個新選項，您必須使用“|” 在值之前簽名，以便將其添加到計算中。
將此作為使用 Elementor 的成本估算計算器的第一個字段。
然後同樣
我們將為第二個和第三個字段使用完全相同的設置。 類型為“選擇”，我們將使用不同的值集為它們放置不同的標籤。
我們將列寬設置為 33% 以適合 1 行中的 3 個字段。
下一個
我們在下面增加了 3 個字段來滿足我們對使用 Elementor 的成本估算計算器的要求。
在這裡，數量字段是數字類型字段，要求您為要購買的產品數量選擇一個數字。
同樣，增值稅字段是禁用類型的計算器字段，不接受第三方的輸入。 這意味著，將其添加到產品的最終成本中是固定成本。
您只需轉到高級小節插入一個默認值，該值將為計算器的這一部分固定。
不要忘記
轉到高級計算器小部件的內容選項卡並設置內容的對齊方式。 我們將其保持在左側對齊以獲得更好的經典視圖。
第 2 步：使用 Elementor 的成本估算計算器公式
這是最重要的一步。
從開始製作表單域到這一步，除非我們包含公式，否則計算器還沒有準備好運行。
該公式可以是從廣泛的選擇範圍內的任何邏輯方程。 這是您可以使用的可用公式的列表。
反正。
我們為剛剛設計的成本估算計算器插入了工作公式。 插入公式後，它將立即運行。
步驟 3：成本估算計算器的其他自定義
我們的主要目標已經實現。 但是，計算器看起來平淡無奇，沒有任何顏色。
因此，現在我們將使用大量變量自定義計算器的外觀。
目前
單擊結果部分並為結果顯示選項選擇選項“更改時”。 這意味著只需使用計算器即可形成結果，無需按任何按鈕。
然後我們將在底部顯示結果，左側對齊和自定義文本。
在那之後
我們將在底部字段中放置一些文本以在出現錯誤時顯示。 錯誤可能是由於錯誤的公式或錯誤的輸入而發生的。
現在我們已經來到了使用 Elementor 製作成本計算器插件的最後一部分。
第 4 步：讓我們添加顏色
現在您所要做的就是，轉到小部件的樣式部分，並根據您的需要開始更改外觀。
首先
我們將通過調整字段空間和列空間來更改表單樣式部分的參數。
在那之後
我們可以使用 Elementor 從下一部分更改成本估算計算器的標籤顏色和版式。
在這裡，您可以為標籤選擇一種獨特的字體，以使其與市場上的其他產品不同。
下一步
我們通過使用明亮的文本顏色、非常細的背景顏色、細邊框和一些填充來自定義輸入字段。
我們還使用 Elementor 的成本估算計算器的排版選項更改了字體。
然後再一次
我們通過為文本和排版應用類似的色調來更改結果文本。
到目前為止看起來很順利，對吧？
最後
錯誤文本現在具有新的標籤顏色，並為橫幅塗成紅色。
我們在文本周圍添加了一些填充，並稍微更改了字體以匹配其餘部分。
現在，您使用 Elementor 的成本估算計算器已準備好顯示。
結論
該博客旨在讓您使用 Elementor 頁面構建器插件和 Element Pack 根據您的要求構建體面的計算器插件。
希望你學會了整個事情。
感謝您與我們一起到達終點線。
本博客由 BdThemes 提供。