WordPress divi主题

如何使用 Divi 构建具有平滑滚动锚链接的响应式固定侧边栏

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

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

侧边栏不像以前那么受欢迎了。 在许多情况下,它们最终会分散注意力而不是有用。 但有时侧边栏非常有意义,尤其是在处理冗长的内容时。 这就是为什么我着手创建一个很有意义的侧边栏。

google广告开户

今天我将向您展示如何使用 Divi Builder 创建具有平滑滚动锚链接(或跳转链接)的响应式固定(或粘性)侧边栏。 因为侧边栏保持可见并且锚链接平滑地滚动到页面上的不同部分,所以侧边栏与内容保持结合,使其成为一个有用的用户体验功能。 就像文档大纲一样,这种组合使您的网页内容更易于访问和阅读。 对于那些长滚动页面来说,这是一个令人耳目一新的解决方案。

看看这个!

抢先看

这是我们将共同构建的内容的一个偷偷摸摸的高峰。

这个概念

对于和我一样经常使用 Google Docs 的人来说,您知道这个有用的文档大纲工具,它可以让您轻松部署一个固定的侧边栏,该边栏带有一个可点击的大纲,可以跳转到文档的不同标题。 我喜欢它,因为它可以帮助我更快地找到信息。 我认为将相同的功能带到您的网站会很酷。

你需要什么开始

对于本教程,您真正需要的是 Divi! 我们还将使用食物食谱布局包中的食谱页面,该页面可从 Divi Builder 中免费访问。

将布局添加到您的页面

订阅我们的 Youtube 频道

WordPress divi主题

要开始,请继续创建一个新页面并部署 Divi Builder。 选择“选择预制布局”选项。 从“从库加载”弹出窗口中,选择“食物食谱布局包”,然后单击以使用“食谱页面”。

布局加载后,单击以在前端构建。

创建新部分

从前端 Divi Builder,创建一个新部分并将其拖到布局的最顶部。

复制布局标题部分中的按钮并将其粘贴到您创建的新部分的单列行中。

打开按钮设置并将以下自定义 CSS 添加到高级选项卡下的主元素:

display: block !important;

这只是允许按钮跨越列的整个宽度。

fiverr建站WordPress程序员

将按钮文本更改为“简介”。 然后为按钮链接网址添加以下内容:

#介绍

这就是您创建锚链接的方式。 标签 (#) 告诉浏览器您将链接到 CSS ID。 以下文本“介绍”将对应于 CSS ID 的名称,我们将添加到布局中的某个部分。 CSS ID 的名称可以是任何您想要的名称。 只需确保它与您稍后在该部分中提供的 CSS ID 匹配即可。

复制按钮,然后重复为按钮提供新按钮文本和新按钮链接 URL 的过程。 由于这将是一个跳转到页面不同部分的锚链接,因此请确保 CSS ID(“#”之后的文本)是唯一的,并且与您稍后将为您的部分指定的名称相对应。

独立站选品工具

对于此按钮,将按钮文本更改为“Ingredients”,将按钮链接 URL 更改为“#ingredients”。

再次复制按钮,然后为新按钮提供按钮文本“Nutrition”并将按钮链接 URL 更改为“#nutrition”。

再复制一次按钮,然后为新按钮提供按钮文本“Instructions”并将按钮链接 URL 更改为“#instructions”。

高质量外链购买

这就是我们现在需要做的。 我们将回到本节,稍后将其变成一个固定的侧边栏。

将 CSS ID 添加到部分和行

现在我们已经使用锚链接创建了所有按钮,我们准备将相应的 CSS ID 名称添加到我们的部分和行。

锚链接将自动跳转到页面上具有相应 CSS ID 的任何元素。 CSS ID 可以应用于内联文本、模块、行或部分。 如果您想使用 HTML 向标题添加 CSS ID,它看起来像这样:

<h2 id="introduction">Introduction</h2>

但是,由于我们要跳转到页面的某个部分,我们可以将 CSS ID 添加到页面的特定部分。 这将为用户提供足够舒适的查看空间,以便访问者可以轻松识别他们在页面上的位置。 跳转到内联文本或模块可能会导致访问者混淆。

JasperAI 10000字免费额度试用

正如我们之前提到的,我们创建的每个按钮 url 都旨在对应于它们需要跳转到的部分的 CSS ID。

对于“介绍”按钮,我们需要将 CSS ID 添加到包含介绍内容的页面部分。 为此,请打开页面第三部分(标题正下方的部分)的部分设置,并在高级选项卡下添加以下 CSS ID:

CSS ID:介绍

这将对应于我们之前创建的 Introduction 锚链接按钮。

WordPress备份工具updrafplus

现在在同一部分中,找到包含标题“Ingredients”的行。 然后打开行设置并添加以下 CSS ID:

CSS ID:成分

这将对应于我们之前创建的成分锚链接按钮。

向下滚动到标题为“营养”的下一部分,然后打开部分设置。 然后添加以下 CSS ID:

CSS ID:营养

这将对应于我们之前创建的 Nutrition 锚链接按钮。

最后,向下滚动到标题为“逐步说明”的布局的下一部分。 然后打开部分设置并在高级选项卡下添加以下 CSS ID:

CSS ID:说明

这将对应于我们之前创建的说明锚链接按钮。

保存更改。

现在是查看您的锚链接是否正常工作的好时机。 在新选项卡中打开页面,然后单击顶部的按钮以确保它们跳转/滚动到页面上的相应位置。

如果它们不起作用,请确保返回并检查 CSS ID 是否正确以及它们是否匹配。

创建固定侧边栏布局

向部分添加左边距以为侧边栏创建空间

在页面顶部有锚链接对于目录之类的东西来说很好。 但是对于这个用例,我们希望这些锚链接始终对用户可见,这样用户就不必在单击其中一个链接后滚动回页面顶部。 固定侧边栏将解决此问题,因为当用户单击锚链接时,它将保持固定在页面的一侧。

但在我们定位侧边栏之前,我们需要在页面左侧为其创建一些空间。 为此,我们将为布局的每个部分添加一个左边距。

我们添加到每个部分的左边距量将等于侧边栏的宽度,所以现在是时候决定您希望侧边栏有多宽了。 对于这个例子,20% 的宽度就可以了。

打开第二部分的设置(直接在我们的锚链接按钮下方)并添加以下自定义边距:

自定义边距:剩余 20%

现在在保存设置之前,右键单击自定义边距选项,然后单击“复制自定义边距”并保存设置。

在整个页面布局的其余每个部分上,通过右键单击该部分并单击“粘贴自定义边距”将自定义边距粘贴到该部分。

这将为您的所有部分提供 20% 的左边距,除了包含锚链接按钮的最顶部部分。

创建固定边栏

要创建侧边栏,我们需要在页面左侧给它一个固定的位置。 所以基本上,我们会把顶部变成一个固定的侧边栏。 为此,请打开顶部的设置并更新以下内容:

在“设计”选项卡下,更新高度和宽度……

宽度:20%
高度:100%

在高级选项卡下,更新位置…

位置:固定
垂直偏移:80px

这为该部分提供了一个固定位置,其宽度为页面的 20%。 它还将该部分定位在页面左侧,距离页面顶部 80 像素,以适应标题导航的高度。 100% 高度确保该部分跨越页面的整个高度。

现在在另一个浏览器选项卡中查看该页面以查看功能。 当您向下滚动页面时,侧边栏保持固定,您可以单击锚链接按钮轻松导航到不同的部分。

修复页脚重叠

您可能已经注意到该部分与页面底部的底部页脚栏重叠。

有几种方法可以解决这个问题。 例如,我可以从该部分中取出“高度:100%”,或者您可以在页面设置中添加一些 CSS 来调整页脚栏的宽度。 但是如果你想保持部分高度为 100%,一个简单的解决方法是去掉部分背景颜色。 打开我们用于侧边栏的部分的部分设置并添加以下背景颜色:

背景颜色:rgba(255,255,255,0)

如果要更改侧边栏的颜色,可以打开页面设置并更改内容区域背景颜色。

由于部分背景颜色是透明的,因此您的页面的内容区域背景颜色会发光。 而且由于我们所有其他部分都有背景颜色,因此它只会通过侧边栏部分显示,而不会与底部页脚栏重叠。

针对移动设备进行调整

这种设计对智能手机来说确实没有意义,因为侧边栏没有空间,并且页面顶部的链接将要求用户每次点击锚链接时都要向上滚动。 但该设计仍然适用于平板电脑,但您可能需要为这些锚链接创建更多空间。 为此,请打开部分侧边栏行的行设置并更新以下内容:

自定义宽度:100
自定义填充(桌面):左侧 10%,右侧 10%
自定义填充(平板电脑):左侧 0%,右侧 0%

现在我们要做的就是隐藏(或禁用)智能手机上的部分。 为此,请打开部分设置并转到高级选项卡,然后单击复选框以在智能手机上禁用。

就是这样。 您现在有一个响应式固定侧边栏菜单,带有平滑滚动的锚链接!

最终结果

现在让我们检查最终结果。

这是平板电脑上的布局。

了解有关固定元素和锚链接的更多信息

如果您发现本教程有帮助,请查看以下我们的一些相关教程:

最后的想法

此设置的美妙之处在于您可以轻松地将固定侧边栏添加到具有不同锚链接(或任何您想要的任何内容)的任何页面。 由于您的侧边栏基本上是一个 Divi 部分,您可以使用内置设置对其进行自定义,添加更多行并使用您想要的任何模块组合。

此设置非常适合会员课程、教程、常见问题解答、作品集或长博客文章。 您甚至可以将它用于一页网站。 你还有其他用途可以分享吗? 我很想听听他们在评论中的内容。

干杯!

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