WordPress divi主题

如何使用 Divi 创建动画移动拆分内容英雄部分

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

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

创建一个突出的英雄部分非常重要。 它不仅应该脱颖而出,而且还应该分成多个元素,以增强行动呼吁。 易于理解的结构拆分内容英雄部分使它们在不同类型的网站中非常流行和频繁使用。

google广告开户

虽然为桌面制作拆分内容的英雄部分很简单,但为较小的屏幕尺寸制作它们可能并不容易。 这就是本教程将派上用场的地方。 我们将重新创建一个高度互动的移动拆分英雄部分,它不仅在移动设备上看起来不错,而且在所有不同的屏幕尺寸上都看起来不错。 我们还结合了一些很棒的动画,使设计风格与 2019 年完美匹配。 我们希望本教程能启发您创建自己的移动拆分内容英雄版块。

让我们开始吧!

预览

在我们深入教程之前,让我们看一下不同屏幕尺寸的结果。

移动的

移动拆分内容

桌面

移动拆分内容

让我们开始重建吧!

添加新部分

间距

首先创建一个新页面或打开现有页面。 向其中添加一个新的常规部分,转到间距设置并删除所有默认的顶部和底部填充。

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

移动拆分内容

添加新行

立柱结构

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

移动拆分内容

WordPress divi主题

背景颜色

尚未添加任何模块,打开行设置并添加完全黑色的背景颜色。

  • 背景颜色:#000000

移动拆分内容

第 1 列背景颜色

将黑色背景颜色添加到第一列。

  • 第 1 列背景颜色:#000000

移动拆分内容

第 2 列背景颜色

第二列也是如此。

  • 第 2 列背景颜色:#000000

移动拆分内容

浆纱

然后,转到大小设置并允许行及其列占据屏幕的整个宽度。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是

移动拆分内容

间距

我们还将删除该行的所有默认顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px
  • 右填充:1vw

移动拆分内容

fiverr建站WordPress程序员

展示

最后但同样重要的是,我们将确保两列在较小的屏幕尺寸上也彼此相邻。 为此,我们需要在行的高级选项卡中添加一行 CSS 代码。

display: flex;

移动拆分内容

将图像模块添加到第 1 列

将图像框留空

是时候添加我们需要的所有不同模块了! 从第一列中的图像模块开始。 我们将在接下来的步骤中将图像上传到背景设置,而不是将图像上传到图像框。 这将允许我们尝试如何定位图像以及它在我们的行中占用多少空间。

移动拆分内容

添加背景颜色

转到图像模块的背景设置并添加背景颜色。 在下一步中,我们将使用混合效果将此背景颜色和背景图像组合起来以使图像变暗。

独立站选品工具
  • 背景颜色:#686868

移动拆分内容

添加背景图片

添加您选择的背景图像并相应地修改背景设置:

  • 背景图片尺寸:封面
  • 背景图像位置:中心
  • 背景图像重复:无重复
  • 背景图像混合:相乘

移动拆分内容

浆纱

我们为正在处理的行使用了两个大小相同的列,但结果看起来不是这样。 我们将手动更改我们添加的每个模块的大小,以使其看起来像是在使用不同的列结构。 我们这样做的原因(而不是仅仅选择另一种列结构)是为了让一切看起来都很好,并且在较小的屏幕尺寸上也能响应。 转到图像模块的尺寸设置并修改宽度。

  • 宽度:88%
  • 模块对齐:左

移动拆分内容

高质量外链购买

间距

我们现在可以在间距设置中决定图像的大小。 我们还为这些值使用视口单元,以确保我们的设计在所有屏幕尺寸上保持完全响应。

  • 顶部填充:26.3vw(台式机)、48vw(平板电脑)、72vw(手机)
  • 底部填充:26.3vw(台式机)、48vw(平板电脑)、72vw(手机)

移动拆分内容

动画片

最后但同样重要的是,我们将向图像模块添加幻灯片动画。 应用动画后,您会注意到图像只会从它进入第一列的那一刻开始显示。 第二列的背景颜色在向左滑动时停留在图像模块的顶部。

  • 动画风格:幻灯片
  • 动画重复:一次
  • 动画方向:左
  • 动画时长:1450ms
  • 动画强度:60%
  • 动画开始不透明度:100%

移动拆分内容

将按钮模块添加到第 1 列

添加副本

第 1 列中我们需要的下一个模块是按钮模块。 输入您选择的一些副本。

JasperAI 10000字免费额度试用

移动拆分内容

按钮设置

然后,转到设计选项卡并更改按钮设置。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1.5vw(桌面)、2.5vw(平板电脑)、4vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#e02b20
  • 按钮边框宽度:0px
  • 按钮边框半径:1px
  • 按钮字体:Poppins
  • 字体粗细:重

移动拆分内容

移动拆分内容

间距

同时修改间距值。

WordPress备份工具updrafplus
  • 最高边距:-3.3vw(台式机)、-6vw(平板电脑)、-9.1vw(手机)
  • 左填充:8vw
  • 右填充:8vw

移动拆分内容

盒子阴影

并添加一个微妙的框阴影以在页面上创建一些深度。

  • 盒子阴影模糊强度:20px
  • 阴影颜色:rgba(0,0,0,0.27)

移动拆分内容

将文本模块 #1 添加到第 2 列

添加H1内容

进入第二列! 我们需要的第一个模块是文本模块。 添加一些您选择的H1内容。

移动拆分内容

H1 文字设置

然后,转到设计选项卡并修改 H1 文本设置。

  • 标题字体:Poppins
  • 标题文字颜色:#ffffff
  • 标题文字大小:4vw(桌面)、5vw(平板电脑)、6vw(手机)

移动拆分内容

间距

也改变间距值。

  • 最高边距:12vw
  • 左边距:-20vw
  • 右边距:17vw(桌面)、15vw(平板电脑)、1vw(手机)

移动拆分内容

动画片

并添加一个微妙的动画。

  • 动画风格:幻灯片
  • 动画重复:一次
  • 动画方向:下
  • 动画时长:1450ms
  • 动画强度:10%
  • 动画开始不透明度:100%

移动拆分内容

将分隔模块添加到第 2 列

能见度

第二列中我们需要的下一个模块是分隔模块。 确保启用了“显示分隔线”选项。

移动拆分内容

颜色

然后,转到设计选项卡并更改分隔线颜色。

移动拆分内容

动画片

接下来将动画添加到 Divider Module。

  • 动画风格:幻灯片
  • 动画重复:一次
  • 动画方向:右
  • 动画时长:1450ms
  • 动画强度:83%
  • 动画开始不透明度:100%

移动拆分内容

将文本模块 #2 添加到第 2 列

添加内容

在第二列中我们需要的下一个也是最后一个模块! 添加您选择的描述。

移动拆分内容

文字设置

然后,转到设计选项卡中的文本设置并相应地进行一些更改:

  • 文字字体:Poppins
  • 文字字体粗细:轻
  • 文字颜色:#919191
  • 文字大小:0.7vw(桌面)、1.8vw(平板电脑)、2.2vw(手机)
  • 文字字母间距:0.1vw
  • 文字行高:2.2em

移动拆分内容

间距

同时修改间距值。

  • 最高边距:9vw(台式机)、19vw(平板电脑)、23vw(手机)
  • 底部边距:12vw(桌面)、19vw(平板电脑)、23vw(手机)
  • 左边距:-3vw
  • 右边距:20vw(桌面)、6vw(平板电脑)、3vw(手机)

移动拆分内容

动画片

最后但同样重要的是,向模块添加淡入淡出动画,您就完成了!

  • 动画风格:淡入淡出
  • 动画重复:一次
  • 动画时长:1450ms
  • 动画延迟:1000ms
  • 动画开始不透明度:0%

移动拆分内容

预览

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

移动的

移动拆分内容

桌面

移动拆分内容

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 创建令人惊叹的拆分内容英雄部分。 拆分内容英雄版块在网络上非常流行且经常使用,但确保它们也具有高度响应性也很重要。 我们希望本教程能帮助您为即将构建的网站创建移动内容拆分英雄版块! 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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