如何使用 Divi 在您的常见问题设计中添加可互换的粘性问题

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何在滚动查看常见问题设计时创建相互转换的粘性问题。 这是在您的设计中添加交互的好方法，同时允许人们找到他们正在寻找的信息。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载粘性问题常见问题设计

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

下载文件

免费下载

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

下载

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

1. 使用图书馆联系人页面布局创建新页面

添加新页面

首先添加一个新页面。 输入页面标题，发布页面并启用 Divi Builder。

上传库联系人页面布局

导航到预制布局并在库布局包中选择联系人页面布局。

2. 删除当前常见问题部分

找到并删除常见问题部分

在已经包含常见问题设计的页面上找到并删除以下部分：

3.新增FAQ版块设计

添加新的常规部分

我们现在可以开始创建我们的新设计，其中包括交换粘性问题！ 为此，请插入一个新的常规部分。

添加新行

列结构

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

浆纱

还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。 此步骤的一个非常重要的部分是启用“均衡列高”选项。 这将根据放置在第 2 列中的内容自动在第 1 列中生成一些空间。此空间将用于允许粘性问题在页面上下滚动时自由移动。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是
• 宽度：100%
• 最大宽度：100%

间距

接下来删除所有默认的顶行和底行填充。

• 顶部填充：0px
• 底部填充：0px

第 1 栏

继续打开第 1 列设置。

默认背景颜色

添加默认背景颜色。

• 背景颜色：rgba(224,216,200,0.15)

悬停背景颜色

并在悬停时更改此背景颜色。

• 背景颜色：#FFFFFF

第 2 栏

接下来打开第二列的设置。

间距

并在不同的屏幕尺寸上应用一些自定义填充值。

• 顶部填充：100 像素（桌面）、50 像素（平板电脑和手机）
• 底部填充：100px（桌面），50px（平板电脑和手机）
• 左内边距：100 像素（桌面）、50 像素（平板电脑）、30 像素（手机）
• 右内边距：100 像素（桌面）、50 像素（平板电脑）、30 像素（手机）

将文本模块添加到第 1 列

添加H3内容

是时候开始添加模块了！ 第 1 列中我们需要的第一个也是唯一一个模块是包含一个常见问题的文本模块。 我们为此使用 H3。

背景颜色

接下来为文本模块添加背景颜色。

• 背景颜色：#FFFFFF

H3 文本设置

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

• 标题 3 字体：Open Sans
• 标题 3 字体粗细：粗体
• 标题 3 字体样式：大写
• 标题 3 文本对齐：居中
• 标题 3 文字大小：20px
• 标题 3 字母间距：1px
• 标题 3 行高：1.5em

间距

还广告一些自定义填充值。

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

CSS 类

通过为模块分配 CSS 类来完成设置。 在本教程的最后，我们将使用这个 CSS 类来使模块具有粘性。

• CSS 类：粘性

将文本模块添加到第 2 列

添加内容

进入第二列。 在那里，我们将添加一个带有我们选择的一些内容的文本模块。

文字设置

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

• 文字字体：Open Sans
• 文本行高：2em（桌面和平板电脑），1.6em（手机）

间距

以及模块间距设置的一些底部边距。

• 下边距：50px

克隆第 2 列中的文本模块并更改内容

克隆第 2 列中的整个文本模块并更改内容。

删除底部边距

也删除底部边距。

根据需要多次克隆整行

完成第一行及其所有模块后，您可以根据需要最多克隆整行； 取决于您想在页面上显示多少常见问题。

更改问题和答案

当然，您必须修改所有副本。

更改第 1 列默认背景颜色

还要更改每行重复的第 1 列默认背景颜色。 如果您希望它与 Library Layout Pack 相匹配，请使用以下颜色代码：

• 颜色 1：#f2ece1
• 颜色 2：RGBA(0,0,0,0.2)
• 颜色 3：RGBA(0,0,0,0.64)
• 颜色 4：#000000

添加新行

列结构

本教程的最后一部分侧重于使粘性效果起作用。 为此，我们需要几行 CSS 代码。 在您的部分底部添加一个新行。

将代码模块添加到列

插入粘性问题 CSS 代码

添加具有以下 CSS 代码行的代码模块，这将使粘性效果适用于每个问题文本模块：

<style>
.sticky {
position: sticky;
position: -webkit-sticky;
top: 200px !important;
}
</style>

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的 Library Layout Pack 为您的下一个 FAQ 设计创建可互换的粘性问题。 尽管我们使用了 Library Layout Pack 的外观和感觉，但您可以根据需要设置此设计的样式，并将其用于即将到来的 Divi 项目。 本教程是我们 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！

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