WordPress divi主题

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

by | May 18, 2022 | Divi主题使用教程 | 0 comments

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

锚链接可以改善导航并帮助组织您的内容,尤其是在具有长篇内容的网站上。 除了导航之外,使用锚链接的其他主要好处之一是它们对 SEO 来说非常棒。 虽然使用锚链接的概念非常简单,但很难知道从哪里开始。 这实际上是我开始开发 WordPress 网站时首先要寻找的东西之一。

google广告开户

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

我们走吧!

您将学习如何:

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

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

订阅我们的 Youtube 频道

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

切换是可以增强用户体验的元素之一。 叫我懒惰(我会用高效这个词),但我越容易获得我的信息越好。 我非常喜欢切换某些类型的内容。

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

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

现在您已准备好添加锚链接功能。 对于这个例子,我将使用顶部标题部分中的按钮作为锚链接,这样,当点击时,页面将滚动到一个特定的切换,该切换将同时自动打开。

WordPress divi主题

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

按钮链接 URL:#toggle3

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

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

接下来为按钮模块添加一个唯一的 CSS 类:

CSS 类:打开切换

然后保存您的设置。

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

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

在高级选项卡下,添加以下 CSS ID:

fiverr建站WordPress程序员

CSS ID:切换3

重要的是,这与之前使用的按钮链接 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 类,以便您可以在代码中使用它。

JasperAI 10000字免费额度试用

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

这种菜单设计在单页网站中很受欢迎。 在菜单中创建链接以在页面上从一个部分跳转到另一个部分会很有用。 如果您正在构建单页网站或登录页面,这将特别有用。 您可以查看有关如何使用 Divi 创建单页网站的文档,以获取有关此过程的更多信息。

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

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

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

WordPress备份工具updrafplus

现在您需要将 CSS ID 添加到您想要链接(或滚动)到的每个部分。 找到标题为“我的服务”的部分。 打开部分设置,单击高级选项卡,然后添加以下 CSS ID:

CSS ID:服务

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

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

CSS ID:工作

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

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

CSS ID:关于

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

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

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

自定义链接 1
网址:#服务
链接文本:服务

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

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

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

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

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

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

有关构建杀手单页风格网站的更多灵感,请查看以下帖子:

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

我们可以使用上面的示例来演示这一点。 由于我们在页面的三个部分(服务、工作、关于)中添加了 CSS ID,我们不仅可以使用菜单锚链接跳转到这些部分,而且还可以从完全不同的页面跳转到这些部分。

您需要做的就是在不同页面上创建链接时使用锚链接的 URL。 如果您想放置一个链接到 ID 为“服务”的服务部分,它看起来像, www.yourdomain.com/page/#services.

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

这对于您可能希望从站点的不同页面跳转到的许多不同的号召性用语(即了解更多、获取 Divi、投票给我!等)非常有效。

使用 Divi 点导航

从技术上讲,这些是内置的锚链接。 您不需要添加自己的 CSS 部分 ID。 点导航功能会自动从您的部分创建锚链接。 要为您的页面打开点导航,只需在编辑页面时将屏幕右上角的 Divi 页面设置下的点导航选项设置为“ON”。 打开点导航后,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,如下所示。

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

很酷的东西。

包起来

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

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