WordPress divi主题

为 Divi 下载免费的 Motion Testimonial Layout

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

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

推荐是许多企业及其网站的重要组成部分,这已不是什么秘密。 它们为您提供的服务或您提供的产品增加了可信度。 特别注意您展示推荐的方式通常会有所回报。 使用 Divi,您可以通过多种方式为您的推荐部分设置样式,甚至还有一个专门用于它的推荐模块。 但是,如果您正在寻找一种独特的方式来为您的推荐书添加互动,那么您会喜欢这篇文章的。 我们正在分享一个使用 Divi 的新滚动效果构建的漂亮的自定义运动推荐布局。 我们还将逐步重新创建设计!

google广告开户

让我们开始吧。

预览

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

桌面

议案见证

移动的

议案见证

免费下载 Motion Testimonial Layout

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

让我们开始重建吧!

添加新部分

背景颜色

首先向您正在处理的页面添加一个新部分。 打开部分设置并将背景颜色更改为黑色。

  • 背景颜色:#000000

议案见证

间距

转到该部分的设计选项卡,并在不同的屏幕尺寸上添加一些自定义的顶部和底部填充。

  • 顶部填充:10%(台式机)、20%(平板电脑)、30%(手机)
  • 底部填充:10%(台式机)、20%(平板电脑)、30%(手机)

议案见证

WordPress divi主题

添加第 1 行

立柱结构

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

议案见证

将文本模块添加到列

添加H2含量

我们在这一行的列中需要的第一个模块是一个带有一些 H2 内容的文本模块。

议案见证

H2 文本设置

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

  • 标题 2 字体:Questial
  • 标题 2 文本对齐:居中
  • 标题 2 文本大小:85 像素(桌面)、45 像素(平板电脑)、35 像素(手机)
  • 标题 2 字母间距:2px
  • 标题 2 行高:1.1em

议案见证

将分隔模块添加到列

能见度

然后,在 Text Module 正下方添加一个 Divider Module 并确保启用了“Show Divider”选项。

议案见证

线路设置

转到模块的设计选项卡并更改行设置,如下所示:

  • 线条颜色:#161616
  • 线型:实线
  • 线位置:顶部

议案见证

fiverr建站WordPress程序员

浆纱

也修改大小设置。

  • 分隔线重量:14px
  • 宽度:13%(台式机)、20%(平板电脑)、30%(手机)
  • 模块对齐:中心

议案见证

添加第 2 行

立柱结构

到下一行! 这一行将专门用于我们的第一个推荐。 使用以下列结构:

议案见证

桌面背景图片

然后,上传您可以在本文开头下载的下载文件夹中找到的蓝色桌面背景图像。

独立站选品工具
  • 背景图像大小:适合
  • 背景图片位置:中心

议案见证

平板电脑和手机背景图片

我们在较小的屏幕尺寸上使用蓝色背景图像的旋转版本。 您也可以在下载文件夹中找到此背景图像。

  • 背景图像大小:适合
  • 背景图像位置:中心

议案见证

浆纱

转到行的设计选项卡并在尺寸设置中更改最大宽度。

议案见证

高质量外链购买

间距

也对间距设置进行一些更改。

  • 上边距:100px
  • 顶部填充:15%
  • 底部填充:15%

议案见证

水平运动滚动效果

然后,转到高级选项卡并在滚动效果中启用一些水平运动。

  • 启用水平运动:是
  • 起始偏移量:-4
  • 中偏移:0(在 50% 时)
  • 结束偏移:0
  • 运动效果触发器:元素顶部

议案见证

淡入淡出滚动效果

我们还将添加自定义淡入和淡出滚动效果。

JasperAI 10000字免费额度试用
  • 启用淡入和淡出:是
  • 起始不透明度:0%(19%)
  • 中等不透明度:100%(从 25% 到 88%)
  • 结束不透明度:0%(93%)
  • 运动触发效果:元素顶部

议案见证

将文本模块添加到列

添加内容

我们在这一行中需要的第一个模块是文本模块。 将推荐内容放入内容框中。

议案见证

文字设置

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

  • 文字字体:Questial
  • 文字字体粗细:粗体
  • 文字颜色:#ffffff
  • 文字大小:50px(桌面)、30px(平板电脑)、25px(手机)
  • 文字行高:1.5em
  • 文本对齐:居中

议案见证

WordPress备份工具updrafplus

浆纱

然后,在设计选项卡中修改不同屏幕尺寸的宽度。

  • 宽度:63%(桌面)、100%(平板电脑和手机)
  • 模块对齐:中心

议案见证

将人员模块添加到列

添加内容

进入下一个模块,即人员模块。 添加姓名、职位和社交媒体链接。

议案见证

上传图片

接下来上传您选择的方形图像。

议案见证

图标设置

转到设计选项卡并在图标设置中更改图标颜色。

议案见证

图片

通过添加一些圆角将图像变成圆形。

议案见证

标题文本设置

然后,修改标题文本设置如下:

  • 标题字体:Questial
  • 标题字体粗细:粗体
  • 标题文字颜色:#ffffff
  • 标题文字大小:24px

议案见证

正文文本设置

也对正文文本设置进行一些更改。

  • 正文字体:Questial
  • 正文文本颜色:#ffffff
  • 正文大小:15px

议案见证

位置文本设置

我们还在修改位置文本设置。

  • 位置字体:问题
  • 位置文字颜色:#1b66ff
  • 位置文字大小:17px

议案见证

浆纱

随着不同屏幕尺寸的宽度。

  • 宽度:25%(桌面)、100%(平板电脑和手机)
  • 模块对齐:中心

议案见证

间距

接下来导航到间距设置并添加一些上边距。

议案见证

主要元素

为了确保所有内容在我们的 Person 模块中对齐,我们将转到高级选项卡并将两行 CSS 代码添加到模块的主要元素中。

display: flex;
align-items: center;

议案见证

会员形象

我们也会在较小的屏幕尺寸上为成员图像元素使用一些自定义宽度。

药片:

width: 20% !important;

电话:

width: 30% !important;
margin-right: 5%;

议案见证

克隆行#2

完成包含推荐的行后,您可以克隆整个行一次。

议案见证

更改行背景图像

我们需要对这个重复的行进行一些更改,从桌面上的背景图像和较小的屏幕尺寸开始。 您可以在下载文件夹中找到背景图像的红色版本。

议案见证

更改行间距

在下一行添加一些负上边距。

议案见证

更改人员模块位置文本颜色

并通过更改 Person Module 设置中的位置文本颜色来完成重复行设置。

  • 位置文本颜色:#ff233e

议案见证

克隆最后一行

完成重复的推荐行后,您可以克隆它。

议案见证

更改行背景图像

使用下载文件夹中的黄色版本更改行的背景图像。

议案见证

更改人员模块位置文本颜色

修改人员模块设置中的位置文本颜色,你就完成了!

  • 位置文本颜色:#ffbc1b

议案见证

预览

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

桌面

议案见证

移动的

议案见证

最后的想法

在这篇文章中,我们分享了一个漂亮的动作推荐布局,您可以免费下载! 我们使用了自定义背景,并且能够使用 Divi 的滚动效果突出显示每个推荐。 我们也一步一步地重新创建了设计! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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