WordPress divi主题

如何使任何 Divi 页面元素具有粘性

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

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

知道如何使任何 Divi 页面元素具有粘性(或固定)是网页设计师可以通过多种方式使用的便捷技能之一。 如果您不熟悉术语“粘性”,它只是指网页上的一个元素,当用户向下滚动页面时该元素保持“固定”。 粘性元素的一个流行示例是固定导航菜单。 Divi 默认具有固定(或粘性)导航功能。 因此,当用户向下滚动页面时,固定版本的菜单会在用户滚动时停留在页面顶部。 但是粘性元素几乎可以用于任何事情,这是在任何给定页面上引起人们注意您想要的行动号召的好方法。

google广告开户

在本教程中,我将向您展示一种使用 Scroll 上名为 Sticky Menu(或任何东西!)的插件使页面上的任何元素具有粘性的简单方法。 只需花一点时间来配置插件设置。 然后你需要做的就是为你的元素添加一个自定义的 CSS ID。 就这么容易。

让我们开始吧!

本教程需要什么

对于本教程,您将需要以下内容:

如何使任何 Divi 页面元素具有粘性

订阅我们的 Youtube 频道

配置插件设置

在 Divi 主题上安装并激活 Scroll 插件上的 Sticky Menu(或任何东西!)后,前往 WordPress 仪表板并导航至 Settings > Sticky Menu(或任何东西!)。

在基本设置选项卡下,更新选项如下:

首先,您需要为粘性元素添加一个唯一标识符。 这可以是 CSS ID 或类。 稍后我们将在 Divi 中将此标识符添加到我们的元素中。 为了便于记忆,我将添加 CSS ID“#sticky”。

粘性元素:#sticky

WordPress divi主题

然后你需要为页面顶部和粘性元素之间的空间添加像素值。 由于 Divi 的固定导航栏默认高度为 54px,我们希望为此选项添加至少 54px,以便我们的粘性元素不会与固定导航重叠。

页面顶部和粘性元素之间的空间:54 像素

在移动设备上禁用粘性元素也是一个好主意。 为此,我们需要将插件配置为在屏幕小于 980 像素时不粘贴元素。

屏幕小于980像素时不粘贴元素

divi页面元素粘性

保存您的设置,然后转到“高级设置”选项卡并更新以下内容:

对于 z-index 选项,我们希望确保我们的元素堆叠在页面上的所有其他元素之上,特别是如果我们计划让我们的元素在滚动时与其他元素重叠。 为确保发生这种情况,请将 z-index 设置为 99998。

Z指数:99998

为了让您了解 Divi 中元素的排序方式,部分的 z-index 为 2,列的 z-index 为 9,标题/导航栏的 z-index 为 99999。所以基本上,我们是希望我们的粘性元素比标题导航的 z-index 低 1 个数字。 这将确保粘性元素位于页面上除导航之外的所有其他内容之上。 每当您想停止元素并将其向上推到页面上时,这将派上用场,这样粘性元素就不会在您滚动时位于导航顶部(看起来凌乱和损坏)。

接下来,我们可以添加一个“上推”元素标识符。 您可以将其视为我们粘性元素的塞子。 这通常是页脚元素。 基本上,这标识了在向下滚动页面时将停止粘性元素的元素,允许粘性元素与页面的其余部分一起向上推。 在本例中,我将使用 CSS ID“#stop”设置标识符。

fiverr建站WordPress程序员

俯卧撑元素:#stop

divi页面元素粘性

保存设置。

现在我们具备了制作粘性元素所需的能力!

使 Divi 页面元素具有粘性

为了向您展示如何使 Divi 元素具有粘性,我将使用 Accountant Layout Pack 中的 Divi 会计博客页面。 首先,创建一个新页面,为页面命名,然后部署 Visual Builder。 然后选择“选择预制布局”选项。 从从库加载弹出窗口中,选择 Accountant Layout Pack 并选择博客页面。

独立站选品工具

divi页面元素粘性

此页面在专业部分的右侧栏中有一个电子邮件订阅选择表单。 为了引起对该表单的更多关注,我们可以在用户向下滚动页面时使其变得粘滞。 然后我们可以让元素在到达页面的下一个部分时停止(或向上推),这样它就不会重叠。

如何使列具有粘性

但是,此时,我们需要决定要使哪些特定元素具有粘性。 我们可以将电子邮件选项模块设置为粘性,但这不会考虑表单正下方的社交媒体关注模块,我们也希望将其设置为粘性。 而且,我们可以为这两个模块赋予相同的标识符,因为它们都会在同一位置变得粘滞,从而导致重叠。 最好的方法是使整个列(第 2 列)具有粘性。

要使第 2 列具有粘性,请打开包含我们要定位的列的行的行设置。 然后,在 Advanced 选项卡下,添加 CSS ID “sticky”。 这对应于我们在插件设置中添加的粘性元素唯一标识符。

CSS ID:粘性

高质量外链购买

(注意:不要在此处的 ID 之前放置井号(或井号)符号。此外,请确保将其添加到 CSS ID 而不是 CSS 类)

divi页面元素粘性

保存设置并预览页面的实时版本。 如果向下滚动,您会注意到第 2 列(包含两个模块)一旦从窗口顶部变为 54px 就会变得粘滞,并在您继续滚动时保持在该位置。

divi页面元素粘性

在某个部分停止粘性元素

如您所见,该元素继续保持粘性,因此它与下面其他部分的内容重叠。 为了阻止这种情况发生,我们可以使用我们在插件设置中添加的“上推”标识符(#stop)。

JasperAI 10000字免费额度试用

要停止下面部分的粘性元素,我们需要打开部分设置并添加 CSS ID “stop”。

CSS ID:停止

divi页面元素粘性

现在去预览页面的实时版本。 请注意粘性元素如何在您识别的部分停止。

divi页面元素粘性

WordPress备份工具updrafplus

很酷吧?

如何使模块具有粘性

要使单个模块具有粘性,您需要在 Divi 中进行调整以确保您的元素具有正确的 z-index,以便在滚动时它位于整个页面的其他元素之上。 正如我之前提到的,Divi 为所有部分分配了 2 的 z-index。 该插件将 99998 的 z-index 应用于粘性元素。 但是由于一个模块不能在其父元素(部分)之上排序(或索引),该模块仍将位于页面上其他模块的后面。 为了解决这个问题,我们需要确保并手动为保存粘性模块的部分提供 99998 的 z-index。

为了说明这一点,我将使用我们之前使用的相同会计博客页面布局。 在我们将 CSS ID 添加到模块之前,首先,我们需要取出我们为第 2 列设置的 CSS ID(粘性)。然后取出我们为其下面的部分设置的 CSS ID(停止)。 之后,打开 Social Media Follow 模块设置并将 CSS ID “sticky”添加到模块中。

divi页面元素粘性

如果您查看实时页面,您会注意到在滚动时与下面部分中的其他模块重叠时,粘性元素被隐藏了。

要解决此问题,请打开包含社交媒体关注模块粘性元素的部分的部分设置。 然后将以下自定义 CSS 添加到主元素:

z-index: 99998;

divi页面元素粘性

现在检查实时页面。 请注意社交媒体图标将如何粘在页面顶部(距顶部 54 像素),就在固定导航下方,然后在您滚动时保持在其他模块上方。

divi页面元素粘性

使部分变粘

要使整个部分具有粘性,您将遵循添加 CSS ID“粘性”您选择的部分的相同过程。 无需使用自定义 css 更新 z-index,因为插件会自动为您完成。

悬停效果可能会导致粘性元素出现故障

如果您在整个页面或粘性元素上启用了悬停效果,则可能会遇到一些故障。 如果发生这种情况,您可能需要停用粘性元素悬停效果。

每页只有一个粘性元素

该插件每页只允许一个粘性元素,因此如果您想添加多个粘性元素,您将需要一个更高级的解决方案(或另一个支持此的插件)。

最后的想法

我希望这篇文章有助于提供一种令人耳目一新的简单方法来使任何 Divi 页面元素具有粘性。 使用它来创建粘性子菜单、粘性 CTA、粘性促销优惠以及您能想到的任何其他内容。 玩得开心探索各种可能性!

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

干杯!

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