WordPress divi主题

如何使用 Divi 的粘性选项在不移动的情况下更改滚动样式

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

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

如果您在构建新网站时要采用简洁的设计风格,您很可能希望找到一种方法来为您的网站添加额外的维度。 本教程将全部介绍。 我们将向您展示如何使用 Divi 的粘性选项在不移动的情况下更改粘性样式。 具体来说,这意味着一旦访问者滚动浏览页面的某个部分,该部分的样式就会发生变化,但元素将保持不变。 这种类型的效果完全集中在用户行为上。 只有当人们滚动过去时,粘性样式的变化才会发生,这会产生一个美丽的结果。 在本教程中,我们将逐步向您展示如何到达那里。 一旦你掌握了这种方法,你就可以在你构建的任何类型的设计中使用它! 您还可以免费下载 JSON 文件。

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

更改粘性样式

移动的

更改粘性样式

免费下载布局

要掌握免费布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

1.创建元素结构

添加新部分

能见度

首先向您正在处理的页面添加一个新部分。 打开部分设置并在高级选项卡中隐藏溢出。 这将有助于确保不出现水平滚动条。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

更改粘性样式

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

更改粘性样式

WordPress divi主题

浆纱

在不添加任何模块的情况下,打开行设置并相应地修改大小设置:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 宽度:100%
  • 最大宽度:2580px

更改粘性样式

间距

接下来删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

更改粘性样式

第 1 列设置

间距

然后,打开第 1 列设置并在不同的屏幕尺寸上应用一些自定义填充值。

  • 顶部填充:
    • 桌面:200px
    • 平板电脑:100px
    • 电话:80 像素
  • 底部填充:
    • 桌面:200px
    • 平板电脑:100px
    • 电话:80 像素

更改粘性样式

Z 指数

也增加该列的 z 索引。 在本教程的后面,我们将在第 1 列和第 2 列之间创建水平重叠。我们正在增加 z 索引以确保第 1 列模块保持在第 2 列模块之上。

更改粘性样式

第 2 列设置

背景颜色

接下来,我们将为第 2 列添加背景颜色。

  • 背景颜色:#f9f9f9

更改粘性样式

fiverr建站WordPress程序员

间距

我们还将在不同的屏幕尺寸上使用一些自定义填充值。

  • 顶部填充:
    • 桌面:200px
    • 平板电脑:150 像素
    • 电话:100像素
  • 底部填充:
    • 桌面:200px
    • 平板电脑:150 像素
    • 电话:100像素

更改粘性样式

第 3 列设置

间距

最后但同样重要的是,我们还将向第 3 列添加一些自定义填充值。

  • 顶部填充:
    • 桌面:200px
    • 平板电脑:100px
    • 电话:50 像素
  • 底部填充:
    • 桌面:200px
    • 平板电脑:100px
    • 电话:50 像素
  • 左填充:8%
  • 右填充:8%

更改粘性样式

将文本模块添加到第 1 列

添加副本

是时候添加模块了,从第 1 列中的文本模块开始。在内容框中添加一个数字。

独立站选品工具

更改粘性样式

背景颜色

接下来更改背景颜色。

  • 背景颜色:#efefef

更改粘性样式

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文字字体:蒙特塞拉特
  • 文字颜色:#ffffff
  • 文字大小:100px
  • 文本行高:1em
  • 文本对齐:居中

更改粘性样式

高质量外链购买

浆纱

接下来修改宽度。

更改粘性样式

间距

然后,添加一些自定义顶部和底部填充。

  • 上边距:20px
  • 底部填充:20px

更改粘性样式

位置

重新定位模块。

JasperAI 10000字免费额度试用
  • 职位:绝对
  • 位置:右下角
  • 水平偏移:-5%

更改粘性样式

将文本模块添加到第 2 列

添加 H3 & H4 副本

到第二列。 在那里,我们将添加一个带有一些 H3 和 H4 副本的文本模块。

更改粘性样式

文字设置

转到模块的设计选项卡并更改文本设置,如下所示:

  • 文本对齐:居中
  • 文字颜色:深色

更改粘性样式

WordPress备份工具updrafplus

H3 文字设置

然后,修改 H3 文本设置。

  • 标题 3 字体:Playfair 显示
  • 标题 3 文本对齐:居中
  • 标题 3 文字大小:
    • 桌面:90px
    • 平板电脑:70px
    • 电话:60px

更改粘性样式

H4文字设置

也为 H4 文本设置样式。

  • 标题 4 字体:蒙特塞拉特
  • 标题 4 字体粗细:Light

更改粘性样式

浆纱

然后,转到尺寸设置并应用“100%”宽度。 这将有助于下一步,即重新定位模块。

更改粘性样式

位置

通过转到高级选项卡并修改位置设置来完成模块设置,如下所示:

  • 职位:绝对
  • 位置:左下角
  • 垂直偏移:20px

更改粘性样式

将文本模块添加到第 3 列

添加H5和段落内容

到第三栏。 添加带有您选择的一些 H5 和段落内容的文本模块。

更改粘性样式

文字设置

转到模块的设计选项卡并更改文本设置中的字体。

更改粘性样式

H5文字设置

也为 H5 文本设置样式。

  • 标题 5 字体:蒙特塞拉特
  • 标题 5 字体粗细:粗体
  • 标题 5 文字大小:
    • 台式机和平板电脑:23px
    • 电话:18px

更改粘性样式

2.创造效果的关键变化

部分

删除部分填充

现在我们已经为我们的设计奠定了基础,我们可以开始创建您可以在这篇文章的预览中看到的自定义粘性样式效果。 实现此效果的第一步是确保您的部分的顶部和底部填充值为零。 这样做将有助于我们确保节和行在同一点开始和结束。 当我们在接下来的步骤中将粘性位置添加到行时,这一点很重要。 通过将限制设置为该部分的底部,我们没有为行移动留下空间。 但是,该行将在这几秒钟内变为粘性,并将突出显示我们设计中更改的粘性样式。

  • 顶部填充:0px
  • 底部填充:0px

更改粘性样式

将行设为粘性

打开行设置并将行变为粘性。 如上一步所述,确保我们的行的底部粘性限制是该部分非常重要。 因为行的末端和部分的末端之间没有空间,所以粘性行将保持在原位。

  • 粘性位置:坚持顶部
  • 粘性顶部偏移:0px
  • 底部粘性限制:部分
  • 从周围的粘性元素偏移:是
  • 过渡默认和粘性样式:是

更改粘性样式

粘性行背景颜色

是时候开始对我们的元素应用一些粘性样式了! 从行背景颜色开始。

  • 背景颜色:#161616

更改粘性样式

行转换

为确保平稳过渡,我们将在行的高级选项卡中增加过渡持续时间。

  • 转换持续时间:500ms
  • 过渡速度曲线:轻松

更改粘性样式

粘滞列 2 背景颜色

然后,我们将更改粘性列 2 的背景颜色。

  • 背景颜色:#262626

更改粘性样式

第 1 列中的文本模块

粘性背景颜色

我们还将更改第 1 列中文本模块的背景颜色。

  • 背景颜色:#ddc7b5

更改粘性样式

粘性文本颜色

连同粘性文本颜色。

更改粘性样式

粘性大小

我们将在尺寸设置中增加模块的宽度。

更改粘性样式

过渡

我们通过在高级选项卡中修改模块的过渡持续时间来确保平稳过渡。

  • 转换持续时间:500ms
  • 过渡速度曲线:轻松

更改粘性样式

第 2 列中的文本模块

粘性文本颜色

接下来,我们在第 2 列中有文本模块。我们将在粘性状态下将文本颜色更改为浅色。

更改粘性样式

第 3 列中的文本模块

粘性文本颜色

第 3 列中的文本模块也是如此。

更改粘性样式

3. 克隆部分以供重用

现在我们已经完成了第一部分,包括粘滞样式更改效果,我们可以通过克隆它来重复使用此部分最多多次。

更改粘性样式

更改所有副本

确保更改所有重复的副​​本。

更改粘性样式

在第一部分添加一些顶部边距,在最后一部分添加底部边距

最后但并非最不重要的一点是,我们将为第一部分添加一些顶部边距,为最后一部分添加底部边距。 这将帮助我们防止在人们开始滚动之前立即转换。 就是这样!

更改粘性样式

更改粘性样式

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

更改粘性样式

移动的

更改粘性样式

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的粘性选项发挥创意。 更具体地说,我们使用 Divi 粘性选项来更改粘性样式而不添加移动。 一旦人们滚动浏览页面的某个部分,设计风格就会发生变化,从而突出显示页面的特定部分。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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