WordPress divi主题

如何在 Divi 中创建随滚动而变化的文本和图像

| 5月 4, 2022 | Divi主题使用教程 | 0 条评论

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

Divi 滚动效果非常适合创建有趣的布局。 自该功能推出以来,我们已经发布了很多。 在本教程中,我们将向您展示如何使用滚动时更改的文本和图像创建布局。 此设计可用于服务页面或您需要的任何类型的页面。 我们保持它干净和简单,以使滚动效果成为焦点。

google广告开户

您可以将布局下载为 JSON 文件或在您自己的 Divi 网站上重新创建。

让我们开始吧。

预览

在开始之前,让我们看一下不同屏幕尺寸的布局。

桌面

滚动时更改的文本和图像

移动的

滚动时更改的文本和图像

免费下载在滚动部分更改的文本和图像

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

使用滚动时更改的文本和图像重新创建部分

添加新部分

背景

要开始重新创建设计,请在新页面或现有页面上添加新部分。 添加我们在上面下载中提供的背景图像。

  • 背景图片:盒子和圆点设计
    • 桌面:图片 1
    • 平板电脑:图片 2
    • 电话:图 3
  • 图片尺寸:封面
  • 背景图像重复:重复 Y(垂直)

滚动时更改的文本和图像

间距

为该部分添加一些间距。

WordPress divi主题
  • 顶部和底部填充:30%

滚动时更改的文本和图像

能见度

也隐藏溢出。

  • 水平和垂直溢出:隐藏

滚动时更改的文本和图像

添加新行

能见度

现在添加第一行并在高级选项卡中调整可见性设置。

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

添加文本模块

文本

为标题添加第一个文本模块。 插入您选择的一些 H1 内容。

  • 正文:H1 内容 – 制作团队

滚动时更改的文本和图像

标题文字

转到设计选项卡并设置标题文本的样式。

  • 标题级别:H1
  • 字体:弗雷多克一号
  • 重量:粗体
  • 颜色:黑色
  • 尺寸
    • 桌面:100px
    • 平板电脑:75px
    • 电话:33px
  • 字母间距
    • 桌面:4px
    • 平板电脑:3px
    • 电话:2px

滚动时更改的文本和图像

浆纱

然后,调整宽度。

fiverr建站WordPress程序员

添加新行

浆纱

现在添加第二行并相应地调整大小设置:

  • 宽度:80%
  • 最大宽度:1000px

滚动时更改的文本和图像

能见度

也隐藏溢出。

  • 水平和垂直溢出:隐藏

独立站选品工具

添加第一个文本模块

文本

添加另一个文本模块。 这次,输入您选择的一些 H2 内容。

  • 正文:H2 内容 – 布景摄影

标题文字

接下来为标题设置样式。

  • 标题级别:H2
  • 重量:粗体
  • 款式:TT
  • 颜色:黑色#000000
  • 尺寸
    • 桌面:50px
    • 平板电脑:40px
    • 电话:28px
  • 字母间距:3px

滚动时更改的文本和图像

间距

也为模块设置一些间距。

高质量外链购买
  • 上下边距:0px

滚动时更改的文本和图像

滚动效果

通过添加以下滚动效果来完成模块设置:

  • 淡入淡出:启用
  • 视口底部
    • 职位:42%
    • 起始不透明度:0%
  • 中等不透明度
    • 底部位置:43%
    • 最高职位:53%
    • 中等不透明度:100%
  • 视口顶部
    • 职位:54%
    • 结束不透明度:0%

复制文本模块两次

克隆文本模块两次。

滚动时更改的文本和图像

JasperAI 10000字免费额度试用

调整第二个文本模块

文本

更改新文本模块中的内容。

  • 正文:H2 内容 – 艺术指导

滚动时更改的文本和图像

位置

也为模块添加绝对定位。

  • 职位:绝对
  • 位置:左上角

滚动时更改的文本和图像

滚动效果

接下来,更新滚动效果设置。

WordPress备份工具updrafplus
  • 淡入淡出:启用
  • 视口底部
    • 职位:56%
    • 起始不透明度:0%
  • 中等不透明度
    • 底部位置:57%
    • 最高职位:67%
    • 中等不透明度:100%
  • 视口顶部
      • 职位:68%
      • 结束不透明度:0%

调整第三个文本模块

文本

现在调整第二个文本模块副本。 先改一下内容。

  • 正文:H2 内容 – 道具和衣柜

位置

接下来添加一个绝对位置。

  • 职位:绝对
  • 位置:左上角

滚动效果

然后,修改滚动效果。

  • 淡入淡出:启用
  • 视口底部
    • 职位:70%
    • 起始不透明度:0%
  • 中等不透明度
    • 底部位置:71%
    • 最高职位:80%
    • 中等不透明度:100%
  • 视口顶部
    • 职位:81%
    • 结束不透明度:0%

滚动时更改的文本和图像

添加图像模块

图片

现在是时候添加一个图像模块了。 使用图像大小为 350 x 350 像素的方形图像。

  • 图片:方形图片 350 x 350 像素

滚动时更改的文本和图像

结盟

将对齐设置为左侧。

滚动时更改的文本和图像

间距

也调整间距。

  • 在图像下方显示空间:否
  • 上边距:-60px

过滤器

然后,添加一个滤镜,使图像去饱和。

滚动时更改的文本和图像

能见度

现在,转到高级选项卡并将溢出设置为隐藏。

  • 水平和垂直溢出:隐藏

滚动时更改的文本和图像

滚动效果

最后但同样重要的是,添加淡入和淡出滚动效果。

  • 淡入淡出:启用
  • 视口底部
    • 职位:70%
    • 起始不透明度:0%
  • 中等不透明度
  • 视口顶部
    • 职位:100%
    • 结束不透明度:0%

添加号召性用语模块

文本

进入下一个模块,即行动号召模块。 包括您选择的一些内容。

  • 名称:杰森的艺术团队
  • 按钮:预订杰森的艺术团队
  • 正文:描述性内容

关联

接下来添加链接。

背景

也删除默认背景颜色。

文本

然后,将对齐设置为右侧。

标题文字

也为标题文本设置样式。

  • 标题级别:H3
  • 字体:弗雷多克一号
  • 标题文本对齐:左
  • 颜色:黑色#oooooo
  • 尺寸
    • 桌面:48px
    • 平板电脑:42px
    • 电话:33px
  • 字母间距
    • 台式机和平板电脑:1px
    • 电话:0px
  • 线高
    • 台式机和平板电脑:1.6em
    • 电话:1.1em

主体

然后是正文。

  • 字体:Verdana
  • 颜色:黑色#000000
  • 尺寸:14 像素
  • 字母间距:0.5px

按钮

也调整按钮样式。

  • 自定义样式
  • 文字大小:17px
  • 文字颜色:白色#ffffff
  • 背景:黑色#000000
  • 字母间距:1px
  • 字体:Verdana
  • 上边距:20px
  • 顶部和底部填充:10px
  • 左右内边距:25px

位置

转到高级选项卡并更改位置设置,如下所示:

  • 职位:相对
  • 偏移原点:左上角
  • 水平偏移:25px

滚动时更改的文本和图像

能见度

然后,隐藏溢出。

  • 水平和垂直溢出:隐藏

滚动时更改的文本和图像

滚动效果

最后但同样重要的是,启用淡入和淡出滚动效果。

  • 淡入淡出:启用
  • 视口底部
    • 职位:54%
    • 起始不透明度:0%
  • 中等不透明度
    • 底部位置:55%
    • 最高职位:80%
    • 中:100%
  • 视口顶部
    • 职位:100%
    • 结束不透明度:0%

复制第二行

克隆行及其所有模块。

调整第一个文本模块

文本

现在更改克隆文本模块的内容。 从顶部开始。

  • 主体:H2 含量/预生产

文本

将对齐方式更改为右侧。

扩展文本对齐

将对齐应用于同一行中的所有克隆文本模块。

  • 扩展文本对齐:到该行中的所有文本模块

滚动时更改的文本和图像

滚动时更改的文本和图像

调整第二个文本模块

文本

现在更新第二个克隆文本模块中的内容。

  • 正文:H2 内容/现场制作

位置

更改位置设置中的位置。

调整第三个文本模块

文本

现在更改第三个克隆文本模块的内容。

  • 正文:H2 内容/团队之间的协调

位置

更改位置设置中的位置。

调整新图像模块

图片

接下来,更改图像模块中的照片。

  • 图片:新图片 350 x 350 像素

结盟

更改图像对齐方式。

调整新的号召性用语模块

文本

接下来打开号召性用语模块并更改所有内容。

  • 名称:爱丽丝的制作团队
  • 按钮:预订爱丽丝的制作团队
  • 正文:新的描述性内容。

关联

也换个链接。

文本

同时修改对齐方式。

标题文字

更改标题文本的对齐方式。

  • 标题文本对齐:左

主体

以及正文。

  • 正文文本对齐:左

浆纱

不要忘记在尺寸设置中更改整个模块的对齐方式。

位置

最后,将位置设置重置为默认值,您就完成了!

  • 位置:重置为默认值

预览

让我们最后看一下不同屏幕尺寸上的页面布局。

桌面

移动的

这是布局的包装,文本和图像在滚动时发生变化!

我们已经完成了重新创建滚动时更改的文本和图像。 由于 Divi 的内置滚动效果,我们能够实现这种效果。 将此布局用于服务页面、关于页面、会见团队页面或您喜欢的任何内容! 使用提供的背景或将背景保留为白色。

请在留言中让我们知道你的想法!

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