如何使用 Divi 布局块为博客文章构建可点击的目录

在博客文章中添加可点击的目录是改善用户体验的好方法。 在许多情况下，博客文章目录使用锚链接来帮助用户浏览内容。 而且，使用基本 HTML 构建目录（带有锚链接）非常简单。 但是，添加自定义设计/CSS 来自定义它可能是一个挑战。 这是 Divi Layout Block 派上用场的地方。

在本教程中，我们将为单个博客文章（在 Gutenburg 中）设计一个可点击的目录，该目录使用锚链接将用户带到整个文章的指定标题。 为此，我们将使用 Divi Layout 块来创建目录，并使用我们可以使用的 Divi builder 的所有强大设计工具。

让我们开始吧！

抢先看

免费下载可重复使用的目录布局块

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

下载文件

免费下载

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

下载

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

如何使用下载在您的站点上导入此布局块

要将这些可重用的 Divi Image Layout Block 导入您的站点，首先，您需要解压缩下载文件。 在那里，您将找到需要导入站点的三个 JSON 文件。

使用默认编辑器 (Gutenberg) 编辑帖子。 打开页面右上角的“更多工具和选项”菜单，选择“管理所有可重用块”。

然后单击从 JSON 按钮导入。 从下载文件夹中选择 JSON 文件之一，然后单击导入按钮。

完成后，在 Gutenberg 中添加一个新块。 我们将能够在 Reusable 选项切换下找到导入的 Reusable 布局块。 只需单击名为“目录”的内容即可将其添加到您的帖子中。

就是这样！

让我们进入教程，好吗？

我们需要开始做什么

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

1. 如果您还没有安装并激活 Divi 主题。
2. 在 WordPress 中创建一个新帖子并使用默认编辑器（Gutenberg）添加一些模拟内容（标题、标题、段落、特色图片等）。 确保创建至少三个标题块，每个标题块下都有内容。 由于我们将向目录添加锚链接，因此我们需要三个标题来链接到帖子的下方。

之后，我们就可以开始了。

使用 Divi 布局块为博客文章创建可点击的目录

添加 Divi 布局块

首先，在博客文章内容的顶部添加一个新的 Divi 布局块。

然后单击“构建新布局”按钮。 这将部署布局编辑器，它是布局块的 Divi 构建器。

添加行

在布局编辑器中，通过添加一列行开始设计。

添加顶部分隔线

在列内，添加一个分隔模块。 这将是我们用来构建目录的两个分隔符之一。

分隔线设置

接下来更新分隔线设置，如下所示：

• 线条颜色：#eeeeee
• 线位置：垂直居中
• 分隔线重量：3px
• 宽度：25%
• 填充：顶部 30 像素，底部 30 像素

添加底部分隔线

要创建第二个分隔线，请复制前一个分隔线。

使用 Blurb 模块创建目录标题

一旦分隔线就位，让我们为目录创建我们的标题。

在两个分隔线之间添加一个新的模糊模块。

模糊内容

打开blurb设置并更新内容如下：

• 书名：《目录》
• 使用图标：是
• 图标：见截图

模糊设计设置

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

• 图标颜色：#eeeeee
• 图像/图标放置：左
• 使用图标字体大小：是
• 图标字体大小：100px
• 标题标题级别：H2
• 内容宽度：100%
• 高度：38px

请注意，模糊的高度小于图标的高度。 这允许图标向下延伸到我们接下来要添加的模糊项目旁边。

一旦标题模糊就位，我们就可以开始添加构成我们目录的可点击项目/模糊。 为此，我们还将使用模糊模块。

添加项目 #1 Blurb

在标题 blurb 下添加一个新的 blurb 模块。

模糊内容

打开模糊设置并取出默认正文内容，以便只有标题可见。 标题是您将添加与我们要链接到帖子更下方的部分/标题相对应的文本块的位置。

然后使用桌面上的右箭头图标更新内容。

为图标部署悬停选项，并在悬停时将图标更改为向下箭头。 这将是一个很好的微交互，强调链接将滚动到帖子下方的某个位置。

模糊设计

现在我们可以随心所欲地设计 blurb 模块。 对于此示例，让我们按如下方式更新模糊设置：

• 图标颜色：#b856c7
• 圆圈图标：是
• 圆圈颜色：#ffffff
• 显示圆形边框：是
• 圆形边框颜色：#b856c7
• 图像/图标放置：左
• 使用图标字体大小：是
• 图标字体大小：16px
• 文字文字大小：16px
• 标题行高度：2em
• 内容宽度：100%
• 边距：118px 左
• 填充：10px 顶部
• 填充（悬停）：左 10 像素

为更多项目复制模糊

现在我们的第一个简介项目已经完成，我们可以根据需要将其复制多次，具体取决于我们想要包含在帖子中的可点击链接的数量。 现在，让我们将它复制两次，为我们的目录创建总共三个项目。

添加锚链接 URL

现在我们的简介项目不可点击，因此我们需要为每个项目添加必要的锚链接 URL。 锚链接 URL 始终以主题标签 (#) 开头，后跟您想要包含的任何 ID。

锚链接#one

为简单起见，我们将锚链接“#one”添加到列表中的第一个简介。 为此，请打开列表中第一个模糊模块的设置（不是标题模糊）并更新以下内容：

• 模块链接网址：#one

锚链接#two

然后打开第二个blurb项的设置并添加以下链接：

• 模块链接网址：#two

锚链接#3

最后，将以下链接添加到第三个简介项：

• 模块链接网址：#three

收紧间距

行设置

现在，我们行的元素之间的空间有点太大了。 要解决此问题，请打开行设置并更新装订线宽度和填充，如下所示：

• 天沟宽度：1
• 宽度：100%
• 填充：0px 顶部，0px 底部

部分设置

让我们也去掉部分的填充。 打开部分设置并更新以下内容：

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

保存布局

我们已经完成了我们的目录设计。 确保保存并退出布局编辑器。

现在您应该在默认块编辑器中看到您的新目录。

将 HTML 锚点添加到帖子标题

我们已将锚链接 URL 添加到构成目录项的每个简介中。 现在我们需要将相应的 CSS ID（或 HTML 锚点）添加到帖子下方的标题块中。

HTML 锚点一

单击包含要链接/跳转到的第一个标题的块。 然后打开该块的设置。 在高级选项切换下，将“一个”添加到 HTML 锚点输入框：

HTML 锚点：一

请记住，我们的第一个简介项目具有 URL“#one”，它将链接到这个项目。 但不要将主题标签添加到此 HTML 锚点。 不需要。）

HTML 锚点二

接下来，选择第二个标题块并更新以下内容：

• HTML 锚点：两个

HTML 锚点三

最后，选择第三个标题块并添加 HTML 锚点，如下所示：

• HTML 锚点：三个

最后结果

让我们在实时帖子中查看最终结果。

这是锚链接的运作方式。 注意图标上的悬停效果以及链接如何平滑滚动到页面下方的相应锚点。

添加目录作为可重用的布局块

如果您想继续使用此布局块作为未来帖子的模板，最好将布局块保存为可重用的布局块。 这将允许您从内置的块列表中轻松添加“目录”块。

为此，请单击包含目录的 Divi 布局块并打开更多设置菜单。 然后选择“添加到可重用布局块”。

输入可重用块的名称（“目录”），然后单击保存。

现在，在向帖子添加新块时，可在“可重用块”列表下使用该块。

现在，布局块可用作为您的帖子构建目录的便捷模板。 在为特定帖子自定义之前，不要忘记将块转换为常规布局块。 您不想更改可重用布局块。

为此，请打开可重用布局块的更多设置菜单，然后选择“转换为常规块”。

最后的想法

我希望这个目录 Divi 布局块被证明对那些足够长的帖子有帮助。 如果您有兴趣动态地为您完成这项工作（例如根据帖子的标题自动为您构建目录），那么有一些插件（例如目录 Plus）可以为您完成此类操作。 这篇文章适合那些喜欢使用 Divi 进行设计并且不介意逐篇构建目录的人。

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

干杯!