津南网站建设哪家好：如何向您的divi站点添加支付计算器和有限时间协议

如果你想在津南网站建设哪家好的网站上销售产品，你可以添加一些元素来促进转换。对于汽车这样的大型售票项目尤其如此。

让我们面对现实吧，并不是所有的人都有足够的钱(或纪律)为一辆车投入30000英镑的现金。这就是为什么当你想买一辆新车时，在线支付计算器在购买过程中起着关键的作用。除了数学魔术在幕后工作，付款计算器帮助买方与一个方便的工具，就在你的网站上，可以真正促进转换为卖方。

另一种激励用户点击按钮的方法是在特色交易上添加一个倒计时器，让用户更清楚地看到交易即将到期。

在本用例教程中，我将向您展示如何向您的网站添加支付计算器和有限时间交易。要添加支付计算器，我将使用计算字段表单插件和自定义设计与VisualBuilder匹配汽车经销商融资页面布局。我还将向您展示如何使用来自汽车经销商列表页面布局的元素，并将它们与倒计时器结合起来创建一个有限的时间特色交易。

我们开始吧!

偷窥

以下是我们将创建的支付计算器和有限时间特色交易的偷偷浏览：

本教程需要什么？

对于本用例教程，您需要：

· Divi主题

· 从VisualBuilder访问的汽车经销商布局包(融资页面和列表页布局)。

· 这个计算场形式插件

探索插件功能

计算字段表单插件是一个强大的工具，可以创建任何类型的计算，如果你知道你在做什么。但是，如果你想让你的生活变得更简单(我正在和你说的是非数学家)，你应该看看插件的专业版本，以便更容易地实现。例如，开发人员或白金版本包括财务模块这使得实施金融方程式变得容易多了。

值得庆幸的是，免费版本提供了一些有用的预构建表单来帮助您启动和运行，包括一个LeaseCalculator表单。

让我们来看看这些表单是如何构建的。单击此处查看LeasCalculator窗体的设置。在那里，您将看到表单生成器，您可以在其中添加新字段、编辑字段和窗体设置。

要编辑特定字段，只需将鼠标悬停在右侧窗体生成器中的字段上，字段设置将出现在左侧。

此“租赁计算器”表单有三个计算字段，它们计算每月付款、总付款和利息金额。这些特殊的计算字段将根据用户为数字输入字段(贷款金额、利率%等)输入的内容生成新的计算结果(…)。..

单击每月支付计算字段，查看用于生成该字段的等式。

在不涉及这个方程背后的数学细节的情况下(如果我想的话，我也不能)，我想指出方程中使用的不同的字段名变量。不同的变量与表单上的某些字段相关。当输入表单字段后，这些变量被替换为实际数字，这样等式就可以输出计算出的字段(在这种情况下，是每月支付)。请随时查看不同方程格式用于这个表格。

将支付计算器的短代码添加到页面中

要将LeasCalculator表单短代码添加到页面中，首先返回表单列表并复制LeasCalculator表单旁边的短代码。

然后转到您的页面与汽车经销商融资网页布局。如果您还没有，创建一个新页面并使用DiviBuilder导入布局。

请在标题为“参考资料”的部分下面找到该部分。本节有一个两列行，右边有一个联系人表单，左边有一个文本模块。将左侧列中的TextModule移动到右侧列的顶部，就在联系人表单的上方。

现在，我们可以使用我们的短代码将计算器添加到左边的列中。继续添加一个新的文本模块，并将短代码粘贴到内容框中。

定制化支付计算器的设计

在我们开始对表单进行样式化以匹配布局之前，我想指出的是，这个插件确实包含了一些预先设计的模板，您可以使用这些模板为表单定制皮肤。可以通过窗体设置访问此选项。

但是请记住，这确实限制了您在文本模块设置中覆盖模板的CSS的能力。因此，我认为最好将表单保留到默认模板，并尽可能使用DiviBuilder添加样式。

使用您的短代码转到文本模块，并将文本颜色更改为光线。

将文本的其余部分与布局匹配的一个快速方法是将右边列中的blurb模块并复制所使用的正文文本样式。

然后右击左侧列中的文本模块，将正文文本样式粘贴到模块上。

这将更新文本设置以匹配布局。

现在返回到blurb模块并复制标题文本样式。

然后将津南网站建设哪家好它们粘贴到文本模块。这将更新您的计算器表单的标题文本以匹配您的布局。

既然您的表单文本与您的布局匹配，您将需要最后一次定制CSS来设计表单字段。您可以找到插件使用的CSS ID和类，用于针对窗体上的不同元素。常见问题页面.

由于我们希望针对所有输入字段，请转到主题定制器>附加CSS并输入以下CSS：

所有这些CSS所做的就是给我们的输入字段更多的填充，取出丑陋的边框，并增加字体大小。

现在你的身体准备好了！

创造有限的时间交易

随着我们的支付计算器到位，我们准备创建一个特色有限的时间交易.为此，我们将使用来自汽车经销商列表页面布局的汽车列表来跳转我们需要的设计元素。然后，我们将添加一个定价表模块，以获得价格文本设计，我们正在寻找一个倒计时计时器，以创造有限的时间激励。

利用汽车列表启动设计

首先，转到汽车经销商列表页面布局并部署可视化构建器。找到带有特色列表的第一行，并单击行菜单中的“添加到库”图标将该行保存到Divi库中。给您的布局一个名称，并单击“保存到库”。

现在回到您的页面与融资页面布局，并添加一个新的常规部分下的顶部标题部分。然后单击“插入行圈”图标，单击“添加从库”选项卡，然后从列表中选择保存的行，将保存的行添加到divi库中。

按以下方式更新节设置：

插入背景图像
背景梯度左颜色：RGBA(0，0，0，0.8)
背景渐变右颜色：#ffffff
背景图像上方的位置梯度：是

现在，将包含车辆规格的文本模块从行的中间列移到右列的顶部。删除历史报告按钮和文本模块的价格“$34000”。

添加定价表以创建自定义价格文本

空中间列，添加一个新的定价表模块。使用定价表模块将允许您使用价格设计为您的特色交易，而不必使用自定义html/CSS。

在“定价表”设置中，删除默认生成的一个定价表，以便只剩下一个表。然后更新以下内容：

显示子弹：不
背景颜色：RGBA(255，255，255，0)

然后按以下方式更新设计设置：

表格标题背景色：RGBA(0，0，0，0)
体形：Teko
体型重量：规则
正文颜色：#c10f1b
身高：1.2em
货币和频率字体：Teko
货币和频率字体重量：半圆柱形
货币和频率文本颜色：RGBA(0，0，0，0.63)
货币和频率文本大小：30 px
价格字体：Teko
价格字体：重量：普通
价格文本颜色：#c10f1b
自定义保证金：5便士底部
边框宽度：0 px

现在回到Content选项卡，单击以更新特定定价表的设置，如下所示。

去掉标题和副标题。
每月：月
价格：199

并添加以下内容以替换内容框中的文本：

在设计设置下，更新以下内容：

正文大小：28 px
身长：0.2m
自定义填充：20 px顶部，0 px底部，0 px左，0 px右

在特色交易中增加一个倒计时器

为了创造有限的时间提供，我们将增加一个倒计时计时器以上的排与特色的交易。

首先，添加一个新的一列行，并向该行添加一个倒计时模块。

将新行拖到行的上方，并按特色处理。删除区段顶部填充，并删除新行的顶部和底部填充。

现在，按以下方式更新倒计时设置：

倒计时标题：交易即将结束
背景色：#c10f1b

标题字体：Teko
标题文本大小：50 px
数字字体：Teko
宽度：500 px
模块对齐：中心
框影：见截图

您将需要添加一个5%的顶部填充到您的倒计时计时器下的行，以给您的底部盒阴影一些喘息的空间。

现在来看看最后的结果。

最后思想

计算字段表单插件将允许您创建表单来计算您想要的任何内容，但是对于高级计算来说，学习曲线确实有点陡峭。谢天谢地，这个插件的免费版本附带了一个租赁计算器，可以立即使用。将其添加到Divi中就像嵌入一个短代码和更新一些设置一样简单。

使用预先制作的布局的一个伟大的事情是，您不必从头开始添加额外的元素到您的网站。创建有限的时间特色交易是快速和容易的，因为我们使用设计的汽车清单，以使事情顺利进行。

我希望这将有助于平滑的过程，增加这些必要的要素，以促进转换在您自己的网站。

我期待着在津南网站建设哪家好的尾部评论中听到你的意见。

干杯!