使用 Divi 创建具有可扩展内容的“便签”

借助 Divi 的内置选项，您可以通过多种方式在您的网站上展示服务和/或流程步骤。 为了帮助您获得灵感，我们将向您展示如何仅使用 Divi 的内置选项创建带有可扩展内容的便签。 这是一种在访问者触发交互后立即共享其他内容的有趣方式。 您可以将此设计用于您正在处理的任何网站，并且您还可以免费下载 JSON 文件！

让我们开始吧！

预览

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

桌面

移动的

免费下载粘滞便笺布局

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

下载文件

免费下载

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

下载

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

让我们开始重建吧！

订阅我们的 YouTube 频道

添加新的常规部分

您需要做的第一件事是向您正在处理的页面添加一个新的常规部分。

添加新行

列结构

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

过渡持续时间

尚未添加任何模块，打开行设置。 我们正在通过更改高级选项卡中的过渡持续时间来创建即时过渡。

• 转换持续时间：0ms

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

添加内容

是时候开始添加模块了！ 在行的第一列添加一个新的文本模块，并输入您想要在便签设计中出现的 H2 内容。

背景颜色

然后，转到背景设置并相应地更改背景颜色：

• 背景颜色：#ffd800

H2 文本设置

转到 H2 文本设置并在那里进行一些更改：

• 标题 2 字体：独立花
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#3a0cf2
• 标题 2 文字大小：40px

间距

为了创建便利贴的外观和感觉，我们将向模块添加一些自定义填充值：

• 顶部填充：150px
• 底部填充：150px
• 左填充：20px
• 右填充：20px

边界

我们还使用以下设置添加顶部边框：

• 顶部边框宽度：20px
• 顶部边框颜色：#ffc300

将分频器模块添加到第 1 列

能见度

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

• 显示分隔线：是

颜色

然后，转到设计选项卡并更改分隔线颜色。

• 颜色：#ffc300

样式

还要修改分隔线的样式设置。

• 分隔线样式：虚线

浆纱

并更改大小设置。

• 分隔线重量：5px
• 高度：0px

间距

为了在上一个模块和这个模块之间创建一些空间，我们添加了一些顶部边距。

• 上边距：150px

变换旋转

正如您在这篇文章的预览中所注意到的，我们希望创建一个垂直分隔线而不是水平分隔线。 为此，我们将更改 Divider 模块的变换旋转设置中的左值：

• 左：270度

能见度

我们还希望确保分隔模块出现在文本模块下方。 为此，我们将减少高级选项卡中分隔线的 z 索引。

• Z指数：-99

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

将符号添加到内容框

第一列中我们需要的下一个也是最后一个模块是另一个文本模块。 将“●”字符添加到内容框中。

文字设置

然后，转到设计选项卡并更改文本设置。

• 文字字体：Open Sans
• 文字颜色：#3a0cf2
• 文字大小：100px
• 文本行高：1em
• 文字方向：居中

间距

接下来通过添加一些负上边距来创建所需的重叠。

• 上边距：-50px

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

添加H3内容

让我们继续第二列。 在这里，我们需要的第一个模块是文本模块。 输入您选择的一些 H3 内容。

H3 文本设置

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

• 标题 3 字体：独立花
• 标题 3 文本颜色：#3a0cf2
• 标题 3 文字大小：30px

间距

接下来添加一些自定义上边距：

• 上边距：400px（桌面）、200px（平板）、150px（手机）

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

添加内容

进入下一个模块，这是另一个文本模块。 输入您选择的一些段落内容。

文字设置

然后，转到设计选项卡并更改文本设置。

• 文字字体：Open Sans
• 文字大小：13px
• 文本行高：2em

浆纱

接下来修改模块的宽度。

• 宽度：78%

间距

并添加一些顶部和底部边距。

• 上边距：10px
• 下边距：50px

将按钮模块添加到第 2 列

添加副本

我们在第二列中需要的最后一个模块是按钮模块。 输入您选择的一些副本。

按钮设置

然后，转到设计选项卡并设置按钮样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：20px
• 按钮文字颜色：#3a0cf2
• 按钮背景颜色：#ffd800
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字体：Abhaya Libre

间距

添加一些自定义填充值。

• 顶部填充：20px
• 底部填充：20px
• 左填充：60px
• 右填充：60px

克隆行两次

添加完所有模块后，您可以继续克隆该行两次。

修改重复行 #1

更改文本模块 #1 背景颜色

我们正在更改两个副本的调色板，从第一个开始。 打开第 1 列中的第一个文本模块并更改背景颜色。

• 背景颜色：#00ffee

更改文本模块 #1 顶部边框颜色

也修改顶部边框颜色。

• 顶部边框颜色：#00e0c2

更改分隔线颜色

然后，为分隔线使用以下颜色代码：

• 分隔线颜色：#00e0c2

更改按钮模块背景颜色

并更改按钮背景颜色。

• 按钮背景颜色：#00ffee

修改重复行 #2

更改文本模块 #1 背景颜色

移至第二个重复行，打开第 1 列中的第一个文本模块并更改背景颜色。

• 背景颜色：#42ff21

更改文本模块 #1 顶部边框颜色

还要修改顶部边框颜色。

• 顶部边框颜色：#1de524

更改分隔线颜色

然后，打开分隔线模块并使用以下分隔线颜色：

• 分隔线颜色：#1de524

更改按钮模块背景颜色

最后但并非最不重要的是，更改按钮背景颜色：

• 按钮背景颜色：#42ff21

创建可扩展的内容

将默认行大小添加到所有行

现在我们已经自定义了我们部分中的所有行，是时候使内容可扩展了。 为此，请打开每一行并应用以下最大高度：

• 最大高度：397px

将悬停行大小添加到所有行

将悬停时的最大高度修改为“100%”。 这将允许该行再次占据其初始大小。

• 最大高度：100%

更改所有行的溢出

确保你也隐藏了每一行的溢出，你就完成了！

• 水平溢出：隐藏
• 垂直溢出：隐藏

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项创建带有可扩展笔记的便签。 这是在您的网站上展示服务的一种创造性和有趣的方式。 如果您有任何问题或建议，请务必在下方评论区留言！

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