如何使用 Divi 创建自动价格计算（使用 JQuery）

有些人不愿意在他们的网站上展示他们的服务价格。 但尽管它可以吓到一些游客，但它也显示了信心和专业知识。 透明定价有助于您以可以合作的预算吸引合适的客户。 在今天的教程中，我们将向您展示如何创建可用于下一个 Divi 项目的惊人价格计算设计。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载价格计算布局

要了解免费的价格计算布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

不要忘记将 JQuery 代码也添加到您的网站！ 您可以在本教程的末尾找到代码。

让我们开始重建吧！

添加第 1 节

背景颜色

首先向您正在处理的页面添加一个新部分。 打开部分设置并更改背景颜色。

• 背景颜色：#f8c5ac

底部分隔线

在下一个部分添加底部分隔线。

• 分隔线样式：在列表中查找
• 分隔线翻转：垂直

间距

也添加一些底部填充。

• 底部填充：130px

添加新行

列结构

继续使用以下列结构添加新行：

将文本模块 #1 添加到列

添加 H2 内容

将第一个文本模块添加到您的列并插入您选择的一些 H2 内容。

H2 文本设置

转到设计选项卡并相应地更改 H2 文本设置：

• 标题 2 字体：蒙特塞拉特
• 标题 2 字体粗细：半粗体
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#0f1c4d
• 标题 2 文字大小：57 像素（桌面）、35 像素（平板电脑）、30 像素（手机）
• 标题 2 字母间距：-2px

将文本模块 #2 添加到列

添加内容

在上一个文本模块的正下方添加另一个文本模块并插入您选择的一些内容。

文字设置

转到设计选项卡并相应地更改文本设置：

• 文字字体：蒙特塞拉特
• 文本对齐：居中
• 文字颜色：#0f1c4d
• 文字大小：22px（桌面）、18px（平板电脑）、16px（手机）

将分隔模块添加到列

能见度

此列中需要的下一个也是最后一个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

线

移至设计选项卡并将线条颜色更改为白色。

• 线条颜色：#ffffff

浆纱

还要修改分隔线的宽度。

• 宽度：12%

添加第 2 节

背景颜色

进入设计的下一部分！ 添加一个新部分并更改背景颜色。

• 背景颜色：#0f1c4d

间距

接下来添加一些自定义的顶部和底部填充。

• 顶部填充：70px
• 底部填充：130px

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

浆纱

尚未添加任何模块，打开行设置并更改较小屏幕尺寸的宽度。

• 宽度：80%（桌面），90%（平板电脑和手机）

间距

接下来添加一些自定义底部填充。

• 底部填充：70px（桌面）、20px（平板）、0px（手机）

边界

也为该行添加一个底部边框。

• 底部边框宽度：1px
• 底部边框颜色：#ffffff

展示

最后，为了确保所有列彼此相邻显示，我们将向行的主要元素添加一行 CSS 代码。

display: flex;

将 Blurb 模块添加到第 1 列

选择图标

是时候开始添加模块了！ 将 Blurb 模块添加到第 1 列并选择您选择的图标。

默认图标设置

转到设计选项卡并相应地更改图标设置：

• 图标颜色：#f7f7f7
• 圆形图标：是
• 圆形图标：#f8c5ac
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：96px（桌面），20px（平板电脑和手机）

悬停图标设置

修改悬停时的图标颜色。

• 图标颜色：#000000

CSS ID

还要插入一个 CSS ID。

• CSS ID：price-item-click-1

将文本模块 #1 添加到第 2 列

添加H3内容

进入第二列！ 添加第一个文本模块并插入一些 H3 内容。

H3 文本设置

转到设计选项卡并相应地更改 H3 文本设置：

• 标题 3 字体：蒙特塞拉特
• 标题 3 字体粗细：半粗体
• 标题 3 文本颜色：#f8c5ac
• 标题 3 文字大小：40 像素（桌面）、25 像素（平板电脑）、18 像素（手机）
• 标题 3 字母间距：-1px
• 标题 3 行高：1.1em

将文本模块 #2 添加到第 2 列

添加内容

使用您选择的一些内容将另一个文本模块添加到第 2 列。

文字设置

移至设计选项卡并更改文本设置。

• 文字字体：蒙特塞拉特
• 文字字体粗细：超轻
• 文字颜色：#f8c5ac
• 文字大小：23px（桌面）、18px（平板电脑）、14px（手机）
• 文字字母间距：-1px
• 文本行高：1.1em

将文本模块添加到第 3 列

向内容框添加价格

进入第三列！ 添加一个文本模块并将价格放在内容框中。

文字设置

转到设计选项卡并相应地更改文本设置：

• 文字字体：蒙特塞拉特
• 文字字体粗细：重
• 文本对齐：居中
• 文字颜色：#ffffff
• 文字大小：40px（桌面）、25px（平板电脑）、18px（手机）

CSS ID 和类

转到高级选项卡并添加 CSS ID 和 CSS 类。

• CSS ID：价格-1
• CSS 类：价格隐藏优先

根据需要多次克隆行

完成该行及其中的所有模块后，您可以根据需要最多克隆该行。

更改重复的模糊模块 CSS ID

相应地更改每个新 Blurb 模块的 CSS ID：

• 模糊模块 1：price-item-click-1
• 模糊模块 2：price-item-click-2
• 模糊模块 3：price-item-click-3
• …

更改重复文本模块价格和 CSS ID

对每行第三列中的价格文本模块执行相同操作。

• 价格 1：价格-1
• 价格 2：价格-2
• 价格 3：价格-3
• …

添加新行

列结构

使用以下列结构向您的部分添加另一行：

浆纱

尚未添加任何模块，打开行设置并更改较小屏幕尺寸的宽度。

• 宽度：80%（桌面），90%（平板电脑和手机）

展示

为了确保所有列在较小的屏幕尺寸上彼此相邻，我们还将向该行的主要元素添加一行 CSS 代码。

display: flex;

将代码模块添加到第 1 列

插入 CSS 代码

继续向行的第一列添加代码模块并插入以下 CSS 代码行：

<style>
.price-hide-first {
display: none;
}

.price-item-active .et-pb-icon {
color: black !important;
}
</style>

将文本模块添加到第 2 列

添加内容

移至第二列并添加具有您选择的一些内容的新文本模块。

文字设置

相应地更改文本设置：

• 文字字体：蒙特塞拉特
• 文字字体粗细：超轻
• 文字颜色：#f8c5ac
• 文字大小：23px（桌面）、18px（平板电脑）、14px（手机）
• 文字字母间距：-1px
• 文本行高：1.1em

将空文本模块添加到第 3 列

将内容框留空

转到下一列和最后一列。 添加文本模块并确保内容框保持为空。

文字设置

移至设计选项卡并按如下方式更改文本设置：

• 文字字体：蒙特塞拉特
• 文字字体粗细：重
• 文本对齐：居中
• 文字颜色：#ffffff
• 文字大小：40 像素（桌面）、25 像素（平板电脑）、18 像素（手机）

CSS ID

通过添加 CSS ID 完成模块的设置。

• CSS ID：总价校准

将 JQuery 添加到 Divi 主题选项

转到集成选项卡

现在我们已经完成了设计，是时候使用一些 JQuery 代码来使功能发挥作用了。 如果您只想将价格计算添加到一页，您可以将代码放在代码模块中。 但是，如果您在多个页面上使用它，请转到您的 Divi 主题选项并选择集成选项卡。

将 JQuery 代码添加到 Head 标签

在 script 标签之间插入以下几行 JQuery 代码，你就完成了：

jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    var sum = 0;
    $price.toggle();
    $price.toggleClass('price-active');
    $(this).toggleClass('price-item-active');
    $('.price-active').each(function(){
    sum += parseFloat($(this).text().replace(/\D/g,''));
    });
    if (sum > 0){
    $("#total-price-cal").show();
        $("#total-price-cal").text("$" + sum + "k");
    }
    else {
    $("#total-price-cal").hide();
    }
  });
});

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 创建令人惊叹的价格计算设计。 这是向访问者展示您的服务的起始价格的好方法，它可以帮助您吸引合适的受众。 您可以在为下一个 Divi 项目创建的任何价格计算设计中使用这种方法！ 如果您有任何问题或建议，请务必在下面的评论部分留言。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。