WordPress divi主题

如何在 Divi 中的滚动上设计带有背景动画的文本蒙版

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

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

使用 Divi 的内置选项创建文本蒙版设计非常容易。 该构建器具有创建文本蒙版效果的所有要素,包括文本样式、背景和混合模式的选项。 事实上,我们之前已经使用混合模式创建了文本蒙版设计。 但是,通过滚动效果,我们可以将文本蒙版设计提升到一个全新的水平。

google广告开户

在本教程中,我们将向您展示如何在 Divi 中设计带有背景动画的文本蒙版。 设计独特,滚动效果确实让它变得生动起来。

让我们开始吧!

抢先看

下面是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

迪维通知框

WordPress divi主题

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中设计带有背景动画的文本蒙版

添加行

要开始,请在默认常规部分添加两列行。

带有背景动画的文本掩码

更新部分设置

在添加任何模块之前,打开部分设置并更新背景颜色和填充,如下所示:

  • 背景颜色:#750046

带有背景动画的文本掩码

  • 内边距:0px 顶部,0px 底部

带有背景动画的文本掩码

fiverr建站WordPress程序员

更新行设置

完成部分设置后,打开行的设置并更新以下设计设置:

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%
  • 内边距:0px 顶部,0px 底部

带有背景动画的文本掩码

将装订线宽度设置为 1 并将宽度设置为 100% 很重要,因为在创建文本蒙版设计时,我们将使用 vw 长度单位作为文本。 由于 vw 长度单位基于浏览器的宽度,因此父容器(节和行)具有与浏览器相同的宽度(即 100%)很重要。

更新第 1 列设置

我们的文本掩码和图像将被添加到左列(第 1 列)。 我们需要为列添加背景颜色,以便我们添加到图像和文本的混合模式将混合/显示此颜色。 我们还需要将溢出设置为隐藏,这样当我们在滚动时为图像设置动画时,我们不会在列之外看到溢出的图像。

打开第 1 列的设置并更新以下内容:

独立站选品工具
  • 背景颜色:#750046
  • 水平溢出:隐藏
  • 垂直溢出:隐藏

带有背景动画的文本掩码

创建文本蒙版

要创建文本掩码,请将文本模块添加到第 1 列。

带有背景动画的文本掩码

文本内容

然后将单词“divi”添加到正文内容中。 我们使用 4 个字母的单词,这样它就可以均匀地堆叠成方形设计。

带有背景动画的文本掩码

高质量外链购买

文字背景

接下来,为文本模块添加白色背景颜色。

  • 背景颜色:#ffffff

带有背景动画的文本掩码

文字设计

然后,在设计选项卡下,更新以下内容:

  • 文字字体:Rubik Mono One
  • 文字字体样式:TT
  • 文字文字颜色:#000000
  • 文字文字大小:25vw(桌面),50vw(平板电脑和手机)
  • 文字行高:0.8em
  • 文字对齐:居中

带有背景动画的文本掩码

  • 填充:8vw 顶部,8vw 底部

文本混合模式

要完成文本蒙版设计,请添加以下混合模式:

JasperAI 10000字免费额度试用

带有背景动画的文本掩码

到目前为止,这个文本遮罩效果的四个关键要素如下:

  1. 列背景
  2. 白色文本背景
  3. 黑色文本
  4. 文本模块上的屏幕混合模式

屏幕混合模式将图层相乘并产生更轻的混合版本。 在屏幕混合模式下,黑色文本变得完全透明,显示其背后的内容,在这种情况下是背景颜色。

带有背景动画的文本掩码

添加背景图片

要将背景图像添加到文本蒙版,请创建一个新的图像模块并上传大约 1700 像素 x 2500 像素的图像。 图像的大小很重要,这样图像才能覆盖列的高度和宽度。

WordPress备份工具updrafplus

带有背景动画的文本掩码

形象设计

然后更新以下设计设置:

  • 强制全宽:是
  • 混合模式:屏幕

带有背景动画的文本掩码

这种混合模式对于文本蒙版效果不是必需的,但它确实将图像与背景颜色混合在一起,以便更好地匹配设计。

图像位置

接下来,给图像一个绝对位置并更新 Z 索引,使其位于文本模块的后面。

  • 职位:绝对
  • Z指数:-1

带有背景动画的文本掩码

图像滚动效果

图像设计准备好后,转到高级选项卡并更新滚动效果选项,如下所示:

在垂直运动选项卡下,

  • 起始偏移量:-1(0% 时)
  • 中偏移:0(在 50% 时)
  • 结束偏移:1(100%)

在水平运动选项卡下,

  • 起始偏移:-0.5(在 0% 时)
  • 中偏移:0(在 50% 时)
  • 结束偏移:0.5(100% 时)

在放大和缩小选项卡下,

  • 起始比例:110%(0%)
  • 中档:125%(50%)
  • 结束比例:140%(100%)

带有背景动画的文本掩码

结果

您可以在该部分添加一些顶部和底部边距,以便您可以检查到目前为止的结果。

创建模拟文本

在右栏中,添加一个新的文本模块。

带有背景动画的文本掩码

使用以下内容更新正文内容:

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

带有背景动画的文本掩码

然后更新文字设计设置广告如下:

  • 文字颜色:浅色
  • 标题 2 字体:Rubik
  • 标题 2 文字大小:4vw
  • 填充(桌面):顶部 16vw,左侧 5vw,右侧 5vw
  • 填充(平板电脑):顶部 16vw,底部 16vw,左侧 5vw,右侧 5vw

带有背景动画的文本掩码

结果

可选调整

黑色背景/白色文本

如果您想为文本蒙版使用黑色背景,您需要做的就是更新构成文本蒙版效果的三个关键选项。

打开文本模块设置并更改以下内容:

  • 背景颜色:#000000(黑色)
  • 文字文字颜色:#ffffff(白色)
  • 混合模式:相乘

带有背景动画的文本掩码

这是结果……

旋转PNG图片

您可以将动画图像更改为具有透明背景(PNG)的图像,以获得另一种很酷的效果。 这是我使用的添加了旋转滚动效果的 PNG 图像示例。

最终结果

这是对所有设计的另一种看法。

最后的想法

希望这些带有滚动背景动画的文本掩码设计能够为您的网站提供所需的创意优势。 一旦您了解了创建文本遮罩效果的基本要素,您就可以轻松创建无数版本的此设计以满足您的需求。

我期待在评论中收到您的来信。

干杯!

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