WordPress divi主题

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

| 5月 6, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

在本教程中,我们将为单个博客文章(在古腾堡)设计一个可点击的目录,它使用锚链接将用户带到整个文章的指定标题。 为此,我们将使用 Divi 布局块创建目录,并使用 Divi 构建器的所有强大设计工具供我们使用。

让我们开始吧!

抢先看

可点击的目录

可点击的目录

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

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

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

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

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

可点击的目录

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

WordPress divi主题

可点击的目录

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

可点击的目录

就是这样!

让我们进入教程,好吗?

我们需要什么开始

首先,我们需要执行以下操作:

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

之后,我们准备开始。

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

添加 Divi 布局块

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

可点击的目录

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

fiverr建站WordPress程序员

可点击的目录

添加行

在布局编辑器中,通过添加一行来启动设计。

可点击的目录

添加顶部分隔线

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

可点击的目录

独立站选品工具

分频器设置

接下来更新分隔线设置,如下所示:

  • 线条颜色:#eeeeee
  • 行位置:垂直居中
  • 分隔线重量:3px
  • 宽度:25%
  • 内边距:顶部 30 像素,底部 30 像素

可点击的目录

添加底部分隔线

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

可点击的目录

使用 Blurb 模块创建目录标题

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

高质量外链购买

在两个分隔符之间添加一个新的简介模块。

可点击的目录

模糊内容

打开简介设置并更新内容如下:

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

可点击的目录

模糊设计设置

在设计选项卡下,更新以下内容:

JasperAI 10000字免费额度试用
  • 图标颜色:#eeeeee
  • 图像/图标位置:左
  • 使用图标字体大小:是
  • 图标字体大小:100px
  • 标题标题级别:H2
  • 内容宽度:100%
  • 高度:38px

可点击的目录

请注意,简介的高度小于图标的高度。 这允许图标在我们接下来添加的简介项目旁边向下延伸。

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

添加项目 #1 模糊

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

可点击的目录

WordPress备份工具updrafplus
模糊内容

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

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

可点击的目录

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

可点击的目录

模糊设计

现在我们可以随心所欲地设计简介模块。 对于此示例,让我们按如下方式更新简介设置:

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

可点击的目录

更多项目的重复模糊

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

可点击的目录

添加锚链接 URL

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

锚链接#one

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

可点击的目录

锚链接#two

然后打开第二个简介项的设置并添加以下链接:

可点击的目录

锚链接#three

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

可点击的目录

收紧间距

行设置

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

  • 天沟宽度:1
  • 宽度:100%
  • 内边距:0px 顶部,0px 底部

可点击的目录

部分设置

让我们也取出该部分的填充。 打开部分设置并更新以下内容:

  • 内边距:0px 顶部,0px 底部

可点击的目录

保存布局

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

可点击的目录

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

可点击的目录

将 HTML 锚点添加到帖子标题

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

HTML 锚点一

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

HTML 锚点:一个

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

可点击的目录

HTML 锚点二

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

可点击的目录

HTML 锚点三

最后,选择第三个标题块并添加 HTML Anchor,如下所示:

可点击的目录

最后结果

让我们在直播中看到最终结果。

可点击的目录

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

可点击的目录

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

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

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

可点击的目录

输入可重用块的名称(“目录”),然后单击保存。

可点击的目录

现在,在将新块添加到帖子时,您将在可重用块列表下获得该块。

可点击的目录

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

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

可点击的目录

最后的想法

我希望这个目录 Divi 布局块被证明对那些长到需要它们的帖子有所帮助。 如果您有兴趣动态地为您完成此操作(例如根据帖子的标题自动为您构建目录),则有一些插件,例如 Table of Contents Plus 可以为您做这种事情。 这篇文章适用于那些喜欢使用 Divi 进行设计并且不介意逐个帖子构建目录的人。

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题