使用锚链接可以在 Divi 中做的 5 件很酷的事情

已发表: 2018-10-21

锚链接可以改进导航并帮助组织您的内容，尤其是在包含长内容的网站上。使用导航以外的锚链接的其他主要好处之一是它们对 SEO 来说非常棒。虽然使用锚链接的概念非常简单，但可能很难知道从哪里开始。这实际上是我开始开发 WordPress 网站时寻找的第一件事。

本文向您展示了可以在 Divi 中使用锚链接做的 5 件很酷的事情。对于这些示例，您所需要的只是 Divi 和学习的愿望。

我们走吧！

您将学习如何：

在 Divi 中滚动并打开带有锚链接的切换
创建一页导航菜单
从另一个页面跳转到一个页面部分
使用 Divi 点导航
将锚链接添加到您的标题

使用锚链接可以在 Divi 中做的 5 件很酷的事情

订阅我们的 YouTube 频道

在 Divi 中滚动并打开带有锚链接的切换

使用锚链接可以在 Divi 中做的 5 件很酷的事情

切换是可以增强用户体验的元素之一。称我为懒惰（我会使用“高效”这个词），但对我来说，获取信息越容易越好。我非常喜欢切换某些类型的内容。

我见过的切换的最佳用途之一是用于常见问题解答页面。它们非常适合揭示用户想要关注的少量信息。这将只需要一分钟和几行 JavaScript 即可完成。您还可以使用此方法的变体来打开选项卡或手风琴，虽然这看起来很困难，但实际上并不太复杂。

首先，创建一个新页面并部署可视化构建器。然后选择“选择预制布局”选项。在从库加载弹出窗口中，通过在搜索栏中键入“faq”找到会计师常见问题解答页面布局。然后单击布局并在出现的预览上单击使用此布局按钮将其部署到您的页面。

现在您已准备好添加锚链接功能。对于本示例，我将使用顶部标题部分中的按钮作为锚链接，以便在单击时页面将滚动到特定切换，该切换将同时自动打开。

为此，首先打开按钮设置并为您的按钮添加以下链接 URL：

按钮链接网址：#toggle3

我给这个锚链接指定了 id“toggle3”，以帮助记住我想链接到页面上的第三个切换。这个 id 名称将与我们稍后添加的切换 CSS ID 相关联，以便按钮知道要滚动的切换。

使用锚链接可以在 Divi 中做的 5 件很酷的事情

接下来向按钮模块添加一个唯一的 CSS 类：

CSS 类：打开切换

然后保存您的设置。

此类名称有助于提醒您单击按钮时切换开关的操作。我们将在我们的自定义 jqeury 中使用这个类来获得所需的功能。

接下来将页面向下滚动到包含用于常见问题解答的两列切换模块的行。打开第一列中第三个切换模块的设置。这是我们要在单击按钮（或锚链接）时滚动到并打开的模块。

在高级选项卡下，添加以下 CSS ID：

CSS ID：toggle3

重要的是，这与之前使用的按钮链接 url 完全相关。这里唯一的不同是您必须省略“#”。

使用锚链接可以在 Divi 中做的 5 件很酷的事情

最后一步是在页面正文中添加一些自定义代码。为此，请导航到 Divi 主题选项，然后打开集成选项卡，然后将以下内容粘贴到正文部分，如下面的 GIF 所示。

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

不要忘记将代码包装在正确的脚本标签中。

使用锚链接可以在 Divi 中做的 5 件很酷的事情

现在您可以测试您的页面，看看它是否有效。

使用锚链接可以在 Divi 中做的 5 件很酷的事情

稍微了解一下这段代码在做什么。让我们仔细看看。这是片段：

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

在代码中，选择器“a.open-toggle”指的是带有我们自定义类的按钮。选择器“#toggle3.et_pb_toggle_2 .et_pb_toggle_title”指的是切换的标题，id 为“toggle3”，类为“et_pb_toggle_2”。

“et_pb_toggle_2”类实际上是与第三个切换关联的类。那是因为 Divi 为第一个切换提供了类“et-pb_toggle_0”，第二个切换为“et-pb_toggle_1”，依此类推。

因此，如果您想知道页面上特定切换的类是什么，您可以简单地从页面上的第一个切换开始从 0 开始计数，然后继续往下计算。或者您可以随时检查 html 代码以找到该类。

了解这一点很重要，以便您可以相应地更新代码。例如，如果我想让我的按钮打开页面上的第二个开关，我会将“#toggle3.et_pb_toggle_2 .et_pb_toggle_title”替换为“#toggle3.et_pb_toggle_1 .et_pb_toggle_title”。

此代码片段是以下概念的变体。我尽量保持简单。

这种很酷的技术也适用于标签和手风琴。诀窍是为手风琴项目或选项卡确定正确的 css 类，以便您可以在代码中使用它。

创建一页导航菜单

使用锚链接可以在 Divi 中做的 5 件很酷的事情

这种菜单设计在单页网站上很流行。在菜单中创建链接以在页面上的部分之间跳转非常有用。如果您正在构建单页网站或登录页面，这尤其有用。您可以查看有关如何使用 Divi 创建单页网站的文档，了解有关此过程的更多信息。

这是有关如何执行此操作的快速概述。

这适用于任何预制布局，但对于本示例，我将使用 Web Freelancer 主页布局。创建一个新页面，部署可视化构建器，选择“选择预制布局”，然后将 Freelancer 主页布局部署到您的页面。

使用锚链接可以在 Divi 中做的 5 件很酷的事情

现在，您需要向要链接（或滚动）到的每个部分添加 CSS ID。找到标题为“我的服务”的部分。打开栏目设置，点击高级选项卡，添加如下CSS ID：

CSS ID：服务

使用锚链接可以在 Divi 中做的 5 件很酷的事情

接下来，找到“特色作品”部分并为该部分指定一个 CSS ID，如下所示：

CSS ID：工作

使用锚链接可以在 Divi 中做的 5 件很酷的事情

并将以下 CSS ID 添加到“关于我们”部分：

CSS ID：关于

使用锚链接可以在 Divi 中做的 5 件很酷的事情

通过这三个部分及其唯一的 CSS ID 正确设置，我们可以知道创建我们的菜单锚链接。

从仪表板，导航到外观 > 菜单并创建一个新的主菜单。然后使用以下 URL 和链接文本创建三个自定义链接：

自定义链接 1
网址：#services
链接文字：服务

自定义链接 2
网址：#工作
链接文字：工作

自定义链接 3
网址：#about
链接文字：关于

使用锚链接可以在 Divi 中做的 5 件很酷的事情

不要忘记选择将您的显示位置设置为主菜单。然后保存您的菜单。

现在，当您访问您的页面时，您可以尝试一下。您可能会注意到有平滑滚动。这是因为 Divi 主题会自动添加平滑滚动 - 此功能是在 Divi 2.4 版中添加的。

使用锚链接可以在 Divi 中做的 5 件很酷的事情

有关构建杀手级单页式网站的更多灵感，请查看以下帖子：

如何使用锚链接构建响应式固定侧边栏
如何使用 Divi 创建带有顶部和底部滚动链接的全屏部分
如何在一页 Divi 网站的滚动上创建活动链接

从另一个页面跳转到一个页面部分

我们可以使用上面的例子来证明这一点。由于我们在页面上的三个部分（服务、工作、关于）中添加了 CSS ID，因此我们不仅可以使用菜单锚链接跳转到这些部分，还可以从完全不同的页面跳转到这些部分。

您需要做的就是在不同页面上创建链接时使用锚链接的 URL。如果您想添加一个指向 ID 为“services”的服务部分的链接，它看起来类似于www.yourdomain.com/page/#services 。

以下是从另一个页面链接到该部分时页面将如何加载并滚动到“我的服务”部分的示例。

这对于您可能想要从站点的不同页面跳转到的许多不同的号召性用语（即了解更多信息、获取 Divi、投票给我！等）非常有用。

使用 Divi 点导航

从技术上讲，这些是内置的锚链接。您无需添加自己的 CSS 部分 ID。点导航功能会自动从您的部分创建锚链接。要为您的页面打开点导航，只需在编辑页面时在屏幕右上角的 Divi 页面设置下将点导航选项设置为“开”。打开 Dot Navigation 后，Divi 会自动在页面一侧添加一个透明菜单。单击时，每个点都会滚动到整个页面的各个部分。

使用锚链接可以在 Divi 中做的 5 件很酷的事情

有关更多信息，有一篇关于如何向点导航添加标签的精彩帖子。

将锚链接添加到您的标题

在标题中添加锚链接总是一个好主意。这是索引包含大量内容的较长页面的好方法，使您可以轻松导航到同一页面中的每个标题，或者从网站上的其他页面创建指向这些标题的链接。它还可以帮助搜索引擎抓取您的网站。

要使用 Divi Builder 向标题添加 CSS ID，请打开包含标题文本的模块。确保您打开了文本选项卡。找到标题标签（h1、h2、h3 等...），然后在开始标题标签的括号内输入一个 id。下面是一个带有 id 为“webdesign”的 h3 标题示例：

<h3 id="webdesign">Website Design</h3>

现在我可以从任何地方链接到这个标题，只要我使用正确的锚链接 URL。对于这个例子，它应该是这样的：

www.yourdomain.com/page/#webdesign

对于不使用 Divi 构建器的页面或帖子，这也将派上用场。要将锚链接添加到这些页面或帖子的标题中，请打开 WordPress 文本编辑器中的文本选项卡。只需找到您选择的标题并在标题标签内添加 id，如下所示。

这正是我为这篇文章所做的。这篇文章顶部的部分链接是一个很好的目录，链接到文章的不同标题。

很酷的东西。

包起来

锚链接有一些很好的实际用途，但不要对它们太疯狂，因为您必须始终首先考虑您的受众和您的目标。请记住，好的设计是关于可用性和功能的，因此，在某些情况下，锚链接可能非常有用。但在其他情况下，这只是意味着用户在视差部分来回切换并最终迷路。希望您能够从这篇文章中获得一些有用的提示。

您对锚链接有任何提示或问题吗？ 在下面的评论部分让我们知道您的经历。