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. 一般步骤

添加第 1 节

间距

在教程的第一部分,我们将建立我们设计的基础。 一旦到位,我们就可以专注于应用正确的设置来实现本文预览中的两个示例。 向您正在处理的页面添加一个新部分,移动到该部分的设计选项卡并删除所有默认的顶部和底部填充。

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

触发图像转换

添加新行

立柱结构

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

触发图像转换

WordPress divi主题

浆纱

在不添加模块的情况下,打开行设置并修改大小设置,如下所示:

  • 最大宽度:1480px
  • 行对齐:居中

触发图像转换

间距

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

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

触发图像转换

Z 指数

并在位置设置中设置 az index。 这将帮助我们确保该行保持在我们稍后在教程中添加的下一行之下。

触发图像转换

列溢出

接下来,打开列设置并将溢出设置为隐藏。

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

触发图像转换

将图像模块添加到列

将图像框留空

我们在这一行中唯一需要的模块是图像模块。 将图像框留空。

触发图像转换

fiverr建站WordPress程序员

背景图片

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

  • 背景图片尺寸:封面
  • 背景图像位置:中心

触发图像转换

间距

为了让图像显示出来,我们将在不同的屏幕尺寸上使用一些自定义填充值。

  • 顶部填充:
    • 桌面:300px
    • 平板电脑和手机:150px
  • 底部填充:
    • 桌面:300px
    • 平板电脑和手机:150px

触发图像转换

添加第 2 节

间距

在前一个部分的正下方添加另一个部分。 打开部分设置并删除间距设置中的默认顶部填充。

独立站选品工具

触发图像转换

添加新行

立柱结构

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

触发图像转换

Z 指数

也为此行添加 az 索引。

触发图像转换

高质量外链购买

将号召性用语模块添加到列

添加内容

在这一行中,我们唯一需要的模块是行动号召模块。 添加您选择的内容。

触发图像转换

添加按钮链接

连同一个按钮链接。

触发图像转换

背景颜色

然后,添加白色背景颜色。

JasperAI 10000字免费额度试用
  • 背景颜色:#ffffff

触发图像转换

文字设置

转到设计选项卡并更改文本设置。

  • 文本对齐:左
  • 文字颜色:深色

触发图像转换

标题文本设置

也为标题文本设置样式。

  • 标题字体:Playfair Display
  • 标题字体样式:斜体
  • 标题文字大小
    • 桌面:45px
    • 平板电脑:40px
    • 电话:35px
  • 标题字母间距:1px

触发图像转换

WordPress备份工具updrafplus

正文文本设置

以及正文。

  • 正文字体:卡拉
  • 车身线高:2em

触发图像转换

按钮设置

然后,为按钮设置样式。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:18px
  • 按钮文字颜色:#000000
  • 渐变色 1:#ffffff
  • 渐变色 2:#ffdc91
  • 渐变类型:线性
  • 起始位置:50%
  • 结束位置:50%

触发图像转换

  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 按钮字体:Karla
  • 按钮字体样式:大写
  • 显示按钮:是

触发图像转换

  • 按钮图标位置:左
  • 仅在悬停按钮时显示图标:否
  • 上边距:10px
  • 底部填充:10px
  • 左填充:15%
  • 右填充:15%

触发图像转换

浆纱

我们也在修改不同屏幕尺寸的尺寸设置。

  • 宽度:
    • 桌面:65%
    • 平板电脑:80%
    • 电话:100%
  • 模块对齐:中心

触发图像转换

间距

接下来,我们将在间距设置中添加一些自定义边距和填充值。

  • 最高边距:
    • 桌面:-150px
    • 平板电脑:-50px
    • 电话:0px
  • 下边距:50px
  • 上边距:150px
  • 底部填充:150px

触发图像转换

盒子阴影

我们将通过添加一个微妙的盒子阴影来完成模块设置。

  • Box Shadwo 模糊强度:30px
  • 阴影颜色:rgba(0,0,0,0.11)

触发图像转换

2. 对行应用粘性效果

第 1 节中的打开行

现在我们已经为我们的设计奠定了基础,是时候应用粘性效果了。 当人们滚动经过元素时,这种粘性效果将帮助我们改变样式。 我们将添加粘性效果的元素是第一部分中包含图像的行。

触发图像转换

应用粘性效果

确保将底部粘性限制设置为部分很重要。 我们行的开始和结束点与部分的相同,这确保了行实际上不会变得粘滞,但会应用粘滞样式。 粘性顶部偏移确定过渡开始发生的时间点。 例如,如果此值为零,则意味着浏览器的顶部必须触摸行的顶部才能开始转换。 通过将粘性顶部偏移设置为“300px”,我们更早地创建了该过渡。

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

触发图像转换

确保第一部分上方的顶部偏移相等

由于我们已将粘性顶部偏移设置为“300px”,因此我们需要页面顶部的空间来实现这一点。 如果您在页面的中途使用此设计,则不必担心这一步。 但是,如果您在页面顶部使用这种方法,则必须修改置顶偏移或在顶部添加足够的空间。 我们将在第一部分添加一些顶部边距以生成该空间。

触发图像转换

3. 将 Ken Burn 效果应用到图像模块

现在我们的行已经变成了粘性,我们可以开始将粘性样式应用于该行及其所有子元素。 尽管可能性是无穷无尽的,但我们将向您展示两个不同的示例以及如何实现它们。 为了更容易玩弄这两个不同的示例,我们将克隆这两个部分一次并将它们放在第一个部分的下方。

触发图像转换

示例 #1

粘滞行设置

盒子阴影

要重新创建示例 #1,您可以在这篇文章的预览中看到,打开行设置并应用以下框阴影设置:

  • 盒子阴影垂直位置:0px
  • 盒子阴影传播强度:0px
  • 阴影颜色:rgba(0,0,0,0)

触发图像转换

  • 粘性垂直位置:100px
  • 粘性阴影颜色:#ffdc91

触发图像转换

过渡

在高级选项卡中也包括平滑过渡。

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

触发图像转换

粘性图像模块设置

变换比例

接下来,打开图像模块并在粘性状态下应用变换缩放效果。

触发图像转换

触发图像转换

过渡

通过相应地修改模块的过渡设置来确保平滑过渡:

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

触发图像转换

示例 #2

粘滞行设置

转换翻译

继续第二个例子! 打开行设置并应用以下转换转换设置:

触发图像转换

触发图像转换

过渡

也修改行的转换设置。

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

触发图像转换

粘性图像模块设置

过滤器

然后,打开图像模块并在默认和粘性状态下使用过滤器。

  • 饱和度:0%
  • 亮度:50%

触发图像转换

  • 粘性饱和度:100%
  • 粘性亮度:100%

触发图像转换

过渡

通过如下更改转换设置来完成模块设置和本教程:

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

触发图像转换

预览

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

桌面

触发图像转换

移动的

触发图像转换

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的粘性选项发挥创意。 更具体地说,我们向您展示了如何触发图像转换。 一旦人们滚动经过图像,图像的样式就会发生变化,从而产生漂亮的过渡。 我们处理了两个不同的例子,但可能性是无穷无尽的。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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