如何在 Divi 中使用粘性页面标题创建可点击的手风琴

Divi 的新粘性位置选项为许多新的和令人兴奋的设计可能性打开了大门。 在本教程中，我们将向您展示如何将 Divi 的粘性位置选项与平滑滚动的锚链接相结合，以创建一种类似于手风琴的方式来索引和导航您的页面。 使用 Divi 的内置选项构建它真的很容易，因此不需要额外的 CSS 或其他代码。 完成后，您将拥有一种独特的方式来组织您的页面并提升桌面和移动设备上的用户体验。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

在这里，您可以看到粘性页面标题贴在浏览器窗口的顶部和底部，并像手风琴一样堆叠在一起。

在这里您可以看到，单击其中一个粘性标题将像手风琴一样跳转（使用平滑滚动锚链接）到页面的该部分。

这也是移动设备上的功能。

免费下载布局

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

下载文件

免费下载

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

下载

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

创建粘性行

首先，让我们创建我们的粘性行。 为此，请将一列行添加到默认部分。

打开行设置。 在 Advanced 选项卡下，更新粘性位置如下：

• 粘性位置：粘在顶部和底部

这将导致该行在用户向下滚动时停留在浏览器窗口的顶部，然后在用户向上滚动时停留在浏览器窗口的底部。

设置粘性行的样式

现在粘性位置就位，我们可以使用内置的粘性样式选项开始对行进行样式设置，该选项允许您在粘性位置生效（或卡住）时为元素提供特定样式。 对于行，我们希望背景在处于卡住位置时更改为深色。 为此，请打开行设置并更新以下内容：

• 背景颜色（桌面）：#ffffff
• 背景颜色（粘性）：#051923

在设计选项卡下，更新以下内容：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度（平板电脑和手机）：100%
• 填充：0px 顶部，0px 底部

接下来，我们要为行提供一个底部边框，作为标题和下面内容之间的分隔线。 并且，一旦该行处于粘性位置，我们希望改为显示左边框。

在边框选项切换下，更新以下内容：

• 边框颜色：#6eeb83
• 底部边框宽度（桌面）：8px
• 底部边框宽度（粘性）：0px
• 左边框宽度（桌面）：0px
• 左边框宽度（粘性）：8px

创建粘性标题文本

要创建页面标题文本，请向该行添加一个新文本模块。

然后将以下 HTML 粘贴到正文内容中。

<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>

并更新悬停时的背景颜色......

• 背景颜色（悬停）：rgba(255,255,255,0.2)

这将使用户可以点击标题更加明显。

设置粘性标题文本的样式

在设计选项卡下，更新以下内容：

• 标题 2 字体：蒙特塞拉特
• 标题 2 文本对齐方式：左
• 标题 2 文本颜色（桌面）：默认（或黑色）
• 标题 2 文本颜色（粘性）：#ffffff
• 标题 2 文字大小：80 像素（桌面）、22 像素（粘性）、28 像素（手机）
• 标题 2 行高：1.3em（桌面），1em（粘性）

然后更新填充如下：

• 填充（桌面）：顶部 15 像素，底部 15 像素
• 填充（粘性）：顶部 10 像素，底部 0 像素，左侧 20 像素
• 填充（平板电脑和手机）：顶部 15 像素，底部 15 像素，左侧 15 像素，右侧 15 像素

创建模拟页面内容

一旦粘性行就位，我们可以在标题下添加另一行，其中将包含一些模拟页面内容。 为此，请在粘性行下创建一个新的单列行。

然后向该行添加一个新的文本模块并粘贴一些模拟内容。

根据需要复制该部分以获得更多粘性页面标题和内容

此时，您已经有了基本的设计，只需复制该部分即可创建带有粘性标题的其他页面部分。

重复部分

要创建另一个部分，请复制包含粘性行/标题和模拟内容行的现有部分。 这将加快创建页面下一部分的开发过程。

更新文本内容和行边框颜色

在复制部分，更新文本模块内的文本，然后更新行设置下的边框颜色。

根据需要重复

继续复制该部分并根据需要更新文本内容和行边框颜色。 对于此示例，我们将再复制该部分两次，以提供总共四个粘性页面标题，这些标题将构成手风琴。

将锚链接添加到粘性页面标题

现在，该功能将允许用户向下滚动页面并将标题贴在顶部和底部，就像手风琴一样。 现在我们想让标题可点击，这样当用户点击其中一个粘性标题时，用户将被带到页面的该部分。 这是使用锚链接完成的。

要添加锚链接，我们首先需要向我们希望链接跳转到的部分添加一个 CSS ID。

添加第 1 部分 CSS ID

打开该部分的设置并添加以下 CSS ID：

• CSS ID：1

然后打开粘性行的设置并添加以下行链接 URL：

• 行链接 URL：#one

现在，当用户点击行/标题时，页面将跳转到第一部分。

添加第 2 部分 CSS ID

接下来，我们需要为第二个标题添加锚链接。

打开第二部分设置并添加以下 CSS ID：

• CSS ID：两个

添加第 1 部分粘性行链接 URL

然后打开第二部分中粘性行的设置并添加行链接 URL：

• 行链接 URL：#two

添加第 3 部分 CSS ID

接下来，我们需要为第三个标题添加锚链接。

打开第三部分设置并添加以下 CSS ID：

• CSS ID：三个

添加第 1 部分粘性行链接 URL

然后打开第三部分中粘性行的设置并添加行链接 URL：

• 行链接 URL：#three

添加第 4 节 CSS ID

最后，我们需要为第四个标题添加锚链接。

打开第四部分设置并添加以下CSS ID：

• CSS ID：四

添加第 1 部分粘性行链接 URL

然后打开第四部分中粘性行的设置并添加行链接 URL：

• 行链接 URL：#four

最后结果

在这里，您可以看到粘性页面标题贴在浏览器窗口的顶部和底部，并像手风琴一样堆叠在一起。

在这里您可以看到，单击其中一个粘性标题将像手风琴一样跳转（使用平滑滚动锚链接）到页面的该部分。

这也是移动设备上的功能。

最后的想法

此设计以独特的方式使用粘性位置选项。 不仅页面标题在用户滚动时保持可见，而且每个标题也是可点击的，使用锚链接将用户带到该特定部分。 结果很像整个页面的手风琴。 这种设计对于索引长格式内容或创建用户友好的单页页面肯定会派上用场。

我期待在评论中收到您的来信。

干杯!