如何使用 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 提供。