WordPress divi主题

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

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

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

粘性(或固定)元素是网站的一部分,在用户向下滚动页面时会保留在原处。 这种功能有很多用途。 也许主导航菜单跟随用户。 或者电子邮件选择在页面一侧滚动。 也许只是一个不错的设计元素增加了用户的整体体验。 无论您需要坚持页面,Divi 都有内置选项可以简单快速地将此效果添加到您的网站。

google广告开户

在本教程中,我们将向您展示如何使用内置的 Divi 设置使页面上的任何元素“粘性”(固定),这样您就不必担心插件代码。 它简单、容易、快速。 所以让我们深入研究。

本教程需要什么

要使任何元素在您的网站上具有粘性,您将需要以下内容:

  • 迪维主题
  • 制作粘性的元素
  • 就是这样!

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

使元素具有粘性的第一步是打开要使用的页面。 因为这不是全局或扩展设置并且仅适用于单个元素,所以我们将直接在页面(或主题构建器布局)中工作。 请务必在 Divi builder 中打开它进行编辑。

为divi选择的页面

接下来,您将选择 Divi 粘性元素。 它可以是页面上的任何内容,但我们今天将使用单个模块。 让我们选择 网上购物 按键模块 因为这是一个非常常见的元素贴在屏幕上。

按键模块

然后,通过单击齿轮图标打开模块的设置并导航到 先进的 标签。 向下滚动直到找到 滚动效果 入口。 选择其中一个 坚持顶部, 坚持到底, 或者 坚持顶部和底部. 区别意味着如果您选择该元素将坚持向下滚动 坚持顶部。 (将其想象为被视口的那部分向下推。) 坚持到底 意味着当用户向上滚动时它仍然是粘性的,而不是被抛在后面。

粘性滚动效果

坚持顶部和底部 是那些的组合。 就是这样! 该元素现在很粘。 现在,您可以对元素设置限制,使其仅滚动到页面的某些部分或距视口的某些距离。

WordPress divi主题

divi中的粘性限制

一旦你选择了你希望 Divi 元素如何粘贴,你可以选择一旦用户开始滚动,它将粘贴到顶部和/或底部的距离。 如果你选择 0像素,例如,元素只会粘在视口的最边缘。 同样,如果您选择 55像素,它在滚动时总是与视口边缘的距离。 它也只会在视口的边缘达到与它的距离时才开始滚动。

顶部/底部粘性限制 下拉菜单调整保持粘性的位置。 您可以选择将任何元素粘贴在其任何父容器中(柱子, , 或者 部分),或者您可以选择让它粘贴在整个页面上,使用 身体部位 选项。 此设置可以是不同的。 您可以选择让一个元素在向下滚动时一直粘到页面底部,但如果用户在其上方滚动,则在其部分的顶部停止。

您可能正在使用多个粘性元素并希望它们保持距离。 如果是这种情况,请启用 从周围的粘性元素偏移 并且您在上面使用的偏移值将应用于其他棒元素。 如果不这样做,您的粘性元素可能会在滚动时重叠。 没有人想要那样。

偏移选项

转换默认和粘性样式 是尝试的绝佳选择。 您可以更改元素使用的过渡/动画 滚动变换效果. 您可以使元素淡入粘性或旋转以引起对现在跟随它们的元素的注意。

此外,您可以使用此选项更改任何粘性元素的整个样式。 在里面 设计 选项卡,您可以启用 粘性样式 通过点击 图钉图标. 请注意,此图标仅在您启用了粘性时才会出现 先进的 – 滚动效果 已经。

粘性元素的设计选项

然后,您可以像调整任何其他辅助 Divi 样式一样调整粘性元素的样式。 您只需单击图钉选项卡,而不是移动设备、台式机或平板电脑。 Divi 让您可以选择更改从背景到颜色到大小的任何内容,以便粘性元素看起来总是与静态元素不同。

我们还想指出,例如,如果您将某个部分设为粘性,则其中的所有子元素(行、列、模块)都会出现图钉图标。 因为它们的父对象是粘性的,所以它们继承了该属性,但可以为滚动单独设置样式。

fiverr建站WordPress程序员

调整 Z 索引

您很可能希望 Divi 粘性元素保持在页面上其他内容的顶部。 所以你需要调整他们的 Z 索引值. 你会发现在 位置 的部分 先进的 标签。 Z-index 是页面上元素的相对深度。 这意味着具有较高 Z-index 的元素将出现在具有较低值的元素之前。

粘性元素 z 索引

如果您调整该值并且粘性元素位于页面上其他元素的下方,即使它们具有较低的 Z-index 值,那么您将需要调整包含行或部分的 Z-index。

z 行索引

只要这两个元素都大于页面上的其他元素,粘性元素就会浮在上面。

独立站选品工具

用 Divi 粘性元素结束

使用 Divi 的内置粘性元素选项,您可以在用户滚动时将任何模块、行、列或部分粘贴到用户的屏幕上。 无论是 CTA、子菜单、促销优惠还是您能想到的任何其他内容,我们都为您提供了一些强大的选项。 我们迫不及待地想看看您是如何使用它们的!

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