WordPress divi主题

为 Divi 下载免费的彩色飞溅动画英雄部分

by | May 4, 2022 | Divi主题使用教程 | 0 comments

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

您设计页面英雄部分的方式设置了对页面其余部分的期望。 如果您正在设计一个庆祝某事的登录页面,无论是周年纪念日还是促销活动,它绝对有助于将节日气氛带入您的设计中。 一种解决方法是在英雄部分的背景中添加彩色飞溅动画。 重点仍将放在您提供的书面副本和 CTA 上。 在本教程中,我们将向您展示如何使用 Divi 的内置设置创建漂亮的彩色飞溅动画部分。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

飞溅动画

移动的

飞溅动画

免费下载飞溅动画英雄部分布局

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

让我们开始重建吧!

添加新部分

渐变背景

首先向您正在处理的页面添加一个新部分。 打开部分设置并应用您选择的渐变背景。

  • 颜色一:#070a49
  • 颜色2:#6f00f7
  • 渐变类型:线性
  • 渐变方向:148度

飞溅动画

浆纱

转到该部分的设计选项卡并在尺寸设置中添加最小高度。 这将使我们的部分全屏显示。

飞溅动画

WordPress divi主题

间距

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

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

飞溅动画

能见度

为了确保我们的设计中没有出现水平滚动条,我们将隐藏该部分的溢出。

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

飞溅动画

添加第 1 行

立柱结构

部分设置到位后,使用以下列结构添加第一行:

飞溅动画

浆纱

在不添加任何模块的情况下,打开行设置并通过如下修改大小设置允许行接触节容器的左侧和右侧:

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

飞溅动画

间距

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

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

飞溅动画

fiverr建站WordPress程序员

主要元素 CSS

为了确保模块在较小的屏幕尺寸上彼此相邻,我们将在行的主要元素中添加一行 CSS 代码。

display: flex;

飞溅动画

第一栏动画

通用行设置到位后,打开第 1 列设置并添加动画。

  • 动画风格:缩放
  • 动画方向:中心
  • 动画强度:100%

飞溅动画

第 2 列动画

接下来将动画添加到第二列。

独立站选品工具
  • 动画风格:缩放
  • 动画方向:中心
  • 动画延迟:250ms
  • 动画强度:100%

飞溅动画

第 3 列动画

我们也在为第三列使用动画。

  • 动画风格:缩放
  • 动画方向:中心
  • 动画延迟:500ms
  • 动画强度:100%

飞溅动画

将图像模块添加到第 1 列

上传飞溅图像

是时候添加模块了,从第 1 列中的图像模块开始。上传您可以在本教程开始时下载的下载文件夹中找到的飞溅图像。

飞溅动画

高质量外链购买

浆纱

转到模块的设计选项卡并在尺寸设置中强制全角。

飞溅动画

过滤器

然后,使用过滤器设置更改模块的颜色。

  • 色相:303度
  • 饱和度:200%

飞溅动画

变换比例

我们也在变换设置中缩放图像。

JasperAI 10000字免费额度试用

飞溅动画

垂直运动滚动效果

接下来,转到高级选项卡并启用一些垂直运动。

  • 启用垂直运动:是
  • 起始偏移量:0
  • 中偏移:
    • 桌面:0(50%)
    • 平板电脑:0(70%)
    • 电话:0(85%)
  • 结束偏移:2
  • 运动效果触发器:元素底部

飞溅动画

水平运动滚动效果

我们也在使用一些水平运动。

  • 启用水平运动:是
  • 起始偏移量:
    • 桌面:-10
    • 平板电脑和手机:0
  • 中偏移:0
  • 结束偏移:4
  • 运动效果触发器:元素底部

飞溅动画

WordPress备份工具updrafplus

放大和缩小滚动效果

以及放大和缩小效果。

  • 启用向上和向下扩展:是
  • 起始比例:100%
  • 中档:150%
  • 结束比例:200%
  • 运动效果触发器:元素底部

飞溅动画

克隆图像模块两次并在行的剩余列中放置重复项

第一个图像模块完成后,您可以克隆整个模块两次,并将重复的内容放在该行的剩余列中。

飞溅动画

更改第 2 列中的图像模块

间距

打开第 2 列中的图像模块并在平板电脑和手机上添加一些上边距。

  • 最高利润率:50%(仅限平板电脑和手机)

飞溅动画

过滤器

也可以在滤镜设置中更改色调。

飞溅动画

更改第 3 列中的图像模块

过滤器

然后,打开第三列中的图像模块并相应地更改过滤器设置:

  • 色相:309度
  • 亮度:0%

飞溅动画

添加第 2 行

立柱结构

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

飞溅动画

位置

打开行设置并在高级选项卡中更改行的位置设置。

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

飞溅动画

将文本模块 #1 添加到列

添加H1内容

是时候添加模块了,从包含您选择的一些 H1 内容的文本模块开始。

飞溅动画

H1 文字设置

更改模块的 H1 文本设置如下:

  • 标题字体:魔方
  • 标题文字颜色:#ffffff
  • 标题文字大小:80px(桌面)、50px(平板电脑)、35px(手机)

飞溅动画

  • 标题文字阴影垂直长度:0.08em
  • 标题文本阴影模糊强度:0em
  • 标题文字阴影颜色:#1a005b

飞溅动画

将文本模块 #2 添加到列

添加内容

然后,添加另一个带有一些描述内容的文本模块。

飞溅动画

文字设置

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

  • 文字字体:木里
  • 文字颜色:#dddddd
  • 文字大小:15px(桌面),14px(平板电脑和手机)
  • 文本行高:2.1em

飞溅动画

  • 文字阴影颜色:#1a005b

飞溅动画

浆纱

接下来修改模块的宽度。

  • 宽度:60%(桌面)、100%(平板电脑和手机)

飞溅动画

间距

并通过在不同的屏幕尺寸上添加一些顶部和底部边距来完成模块设置。

  • 最高利润率:6%(台式机)、10%(平板电脑)、14%(手机)
  • 底边距:6%(台式机)、10%(平板电脑)、14%(手机)

飞溅动画

将按钮模块添加到列

添加副本

在我们的专栏中,我们需要的最后一个模块是按钮模块。 添加一些您选择的副本。

飞溅动画

按钮设置

然后,转到设计选项卡并设置按钮样式,如下所示:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:17px
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#ea01a6
  • 按钮边框宽度:0px
  • 按钮边框半径:100px

飞溅动画

  • 按钮字体:魔方
  • 按钮字体粗细:粗体
  • 按钮字体样式:大写

飞溅动画

间距

在间距设置中添加一些自定义填充值。

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

飞溅动画

盒子阴影

并通过添加框阴影完成模块设置。

  • 盒子阴影水平位置:5px
  • 盒子阴影垂直位置:5px
  • 阴影颜色:#30005b

飞溅动画

预览

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

桌面

飞溅动画

移动的

飞溅动画

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的内置动画和滚动效果来发挥创意。 更具体地说,我们已经向您展示了如何为您为特殊场合设置的登录页面创建彩色飞溅动画英雄部分。 那个场合可能是,但不限于,贵公司的周年纪念日或特卖。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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