WordPress divi主题

如何将重叠与 Divi 的粘性选项相结合以创建轻松的过渡

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

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

随着技术的不断发展,设计也在不断发展。 比以往任何时候都多,您会遇到让您惊讶并想知道它们是如何创建的网站。 尽管进行滚动交互的网站并不适合所有类型的业务,但知道如何加倍努力尤其有助于留下良好的印象。 使用 Divi,许多事情已经成为可能,而无需触及一行代码。 今天的教程帮助你从另一个角度理解Divi。 我们将向您展示如何将 Divi 的粘性选项与其他内置设置相结合,以创建轻松的过渡。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

粘性重叠

移动的

粘性重叠

免费下载布局

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

1.重新创建设计结构

添加新部分

间距

在本教程的第一部分,我们将专注于在 Divi 中重新创建设计结构。 然后,在第二部分,我们将花时间浏览所有粘性选项,以达到您在这篇文章的预览中注意到的效果。 首先向您正在处理的页面添加一个新部分。 打开部分设置,转到设计选项卡并添加一些底部填充。

粘性重叠

添加第 1 行

立柱结构

继续使用以下列结构添加新行:

粘性重叠

WordPress divi主题

浆纱

在不添加模块的情况下,打开行设置,转到设计选项卡并相应地更改尺寸设置:

  • 宽度:90%
  • 最大宽度:100%

粘性重叠

Z 指数

也将 az index 分配给该行。

粘性重叠

将图像模块添加到列

将图像框留空

是时候添加模块了,从图像模块开始。 将内容框留空。

粘性重叠

改用背景图片

并使用您选择的背景图像。

  • 背景图片尺寸:封面

粘性重叠

浆纱

接下来更改模块的宽度。

粘性重叠

fiverr建站WordPress程序员

间距

然后,将一些自定义顶部和底部填充应用于间距设置。

  • 顶部填充:40vh
  • 底部填充:40vh

粘性重叠

将文本模块添加到列

添加H2含量

进入下一个模块,这是一个包含您选择的一些 H2 内容的文本模块。

粘性重叠

H2 文本设置

相应地更改模块的 H2 文本设置:

独立站选品工具
  • 标题 2 字体:蒙特塞拉特
  • 标题 2 文本对齐:居中
  • 标题 2 文本颜色:#ffffff
  • 标题 2 文字大小:
    • 台式机:10vw
    • 平板电脑:14vw
    • 电话:15vw
  • 标题 2 字母间距:-0.5vw

粘性重叠

浆纱

确保模块也是“100%”。

粘性重叠

位置

并在高级选项卡中重新定位模块。

  • 职位:绝对
  • 地点:中心

粘性重叠

高质量外链购买

添加第 2 行

立柱结构

到下一行。 使用以下列结构:

粘性重叠

浆纱

尚未添加模块,打开行设置,转到设计选项卡并更改尺寸设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:90%
  • 最大宽度:100%

粘性重叠

Z 指数

也将 az index 分配给该行。

JasperAI 10000字免费额度试用

粘性重叠

第 1 列间距

通过打开第一列设置并分配一些左右填充来完成行设置。

  • 左填充:5%
  • 右填充:5%

粘性重叠

粘性重叠

将文本模块添加到第 1 列

添加H3内容

现在行设置已经到位,是时候添加模块了。 将文本模块添加到第 1 列,其中包含您选择的一些 H3 内容。

WordPress备份工具updrafplus

粘性重叠

H3 文字设置

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

  • 标题 3 字体:蒙特塞拉特
  • 标题 3 字体样式:下划线
  • 标题 3 下划线颜色:#ffffff
  • 标题 3 下划线样式:实线
  • 标题 3 文本颜色:#ffffff
  • 标题 3 文字大小:
    • 台式机:4vw
    • 平板电脑和手机:10vw
  • 标题 3 字母间距:-3px

粘性重叠

间距

在较小的屏幕尺寸上添加一些右填充。

  • 右侧填充:20%(仅限平板电脑和手机)

粘性重叠

将文本模块添加到第 2 列

添加内容

将另一个文本模块添加到第 2 列,其中包含您选择的一些描述内容。

粘性重叠

背景颜色

接下来更改背景颜色。

  • 背景颜色:#ffffff

粘性重叠

文字设置

然后,修改文本设置如下:

  • 文字字体:Playfair Display
  • 文字字体样式:斜体
  • 字体大小:
    • 台式机:1.6vw
    • 平板电脑:3vw
    • 电话:4vw
  • 文字行高:1.5em

粘性重叠

间距

也应用一些自定义填充值。

  • 顶部填充:10vh
  • 底部填充:10vh
  • 左填充:10%
  • 右填充:10%

粘性重叠

将按钮模块添加到第 2 列

添加副本

我们将添加的下一个也是最后一个模块是第 2 列的按钮模块。添加一些您选择的副本。

粘性重叠

按钮设置

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

  • 为按钮使用自定义样式:是
  • 按钮文字大小:
    • 台式机:1.2vw
    • 平板电脑:2.5vw
    • 电话:3.5vw
  • 按钮文字颜色:#000000
  • 按钮背景颜色:#ffffff
  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 按钮字体:蒙特塞拉特

粘性重叠

  • 按钮字体样式:下划线
  • 按钮下划线颜色:#000000
  • 按钮下划线样式:实心

粘性重叠

间距

也添加一些自定义填充值。

  • 上边距:20px
  • 底部填充:20px
  • 左填充:50px
  • 右内边距:50px

粘性重叠

位置

并在高级选项卡中重新定位模块。

  • 职位:绝对
  • 位置:右下角

粘性重叠

2. 应用粘性效果

第 1 行中的图像模块

粘性设置

现在我们已经建立了设计的基础,是时候开始应用自定义粘性效果了。 打开第 1 行中的图像模块,然后将模块粘贴如下:

  • 粘性位置:坚持顶部
  • 底部粘性限制:部分
  • 与周围粘性元素的偏移量:否

粘性重叠

粘性大小

一旦应用了粘性设置,我们也可以更改模块的粘性样式。 我们要做的第一件事是改变粘性状态的宽度。

粘性重叠

粘性间距

接下来,我们将修改粘性顶部和底部填充。

  • 粘性顶部填充:50vh
  • 粘性底部填充:50vh

粘性重叠

粘性渐变背景

我们还将为我们的模块应用粘性渐变背景。

  • 颜色 1:#00336b
  • 颜色 2:rgba(41,196,169,0)
  • 渐变类型:线性
  • 渐变方向:90度
  • 在背景图像上方放置渐变:是

粘性重叠

过渡

为了确保顺利过渡,我们将增加模块的过渡时长。

  • 转换持续时间:1500ms

粘性重叠

第 2 行第 2 列

第 2 列粘性设置

接下来,我们还将使第二行的第二列变为粘性。

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

粘性重叠

粘性重叠

粘性列中的文本模块

粘性背景颜色

现在第 2 行的第 2 列已变为粘性,我们可以将一些粘性样式应用于该列内的文本模块。 首先在粘性状态下更改背景颜色。

  • 粘性背景颜色:#333333

粘性重叠

粘性文本颜色

接下来,修改粘性状态下的文本颜色。

  • 粘性文本颜色:#ffffff

粘性重叠

过渡

并通过在高级选项卡中增加过渡持续时间来完成模块设置。 就是这样!

  • 转换持续时间:1000ms

粘性重叠

预览

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

桌面

粘性重叠

移动的

粘性重叠

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的粘性选项发挥创意。 更具体地说,我们向您展示了如何将重叠与 Divi 的粘性选项相结合,以创建轻松的过渡。 一旦您掌握了本教程中使用的方法,您将能够创建无穷无尽的不同变化。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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