WordPress divi主题

下载使用 Divi 的转换选项制作的免费时间线部分

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

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

在构建内容时,创建时间线是保持信息有趣并吸引访问者的好方法。 它还可以帮助他们更快地浏览和处理他们阅读的信息。 当你使用一个好的设计时,它也会提升你页面的整体外观和感觉。 在这篇文章中,我们将向您展示如何使用 Divi 的转换选项创建令人惊叹的时间线部分。 我们将重新创建的设计将在较小的屏幕尺寸下保持响应。

google广告开户

让我们开始吧!

预览

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

桌面

时间线部分

移动的

时间线部分

免费下载时间线部分布局

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

让我们开始重建吧!

订阅我们的 Youtube 频道

添加新部分

间距

创建一个新页面或打开现有页面并向其中添加常规部分。 打开部分设置,转到间距设置并添加一些自定义顶部和底部填充。

  • 顶部填充:12vw
  • 底部填充:0vw

时间线部分

WordPress divi主题

添加第 1 行

立柱结构

继续使用以下列结构向该部分添加新行:

时间线部分

浆纱

在不添加任何模块的情况下,打开行设置。 转到设计选项卡中的大小设置,让行占据屏幕的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

时间线部分

能见度

我们将使用此行在接下来的步骤中添加插图。 不过,我们只需要用于桌面的插图。 这就是我们将在平板电脑和手机上隐藏整行的原因。

时间线部分

添加图像模块

上传插图

正如本文上一步所述,我们需要这一行的唯一原因是添加时间线插图。 您可以在本文开头下载的文件夹中找到它。 找到它后,将其上传到新的图像模块。

时间线部分

浆纱

为了确保在所有屏幕尺寸下一切都保持响应,我们将在图像模块的尺寸设置中启用“强制全宽”选项。

时间线部分

fiverr建站WordPress程序员

添加第 2 行

立柱结构

继续向该部分添加第二行,使用以下列结构:

时间线部分

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

时间线部分

间距

然后,进入间距设置。 在这里,我们希望通过删除所有自定义顶部和底部填充来限制行(在桌面上)占用的空间。 我们在较小的屏幕尺寸上保留了一些顶部和底部填充。

独立站选品工具
  • 顶部填充:0px(桌面),15vw(平板电脑和手机)
  • 底部填充:0px(桌面),15vw(平板电脑和手机)

时间线部分

将 Blurb 模块添加到第 1 列

添加内容

是时候开始添加模块了! 将 Blurb Module 添加到第 1 列。输入您选择的一些内容。

时间线部分

选择图标

继续选择您选择的图标。

时间线部分

高质量外链购买

渐变背景

也添加渐变背景。

  • 颜色 1:#a5c4ff
  • 颜色2:#ffffff
  • 起始位置:40%
  • 结束位置:40%

时间线部分

图标设置

然后,转到设计选项卡并更改图标设置。

  • 图标颜色:#ffffff
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:5vw(桌面)、17vw(平板电脑)、18vw(手机)

时间线部分

标题文本设置

转到标题文本设置并相应地修改选项:

JasperAI 10000字免费额度试用
  • 标题字体:Didact Gothic
  • 标题字体粗细:粗体
  • 标题文本对齐方式:居中
  • 标题文字大小:1.1vw(桌面)、2.7vw(平板电脑)、4vw(手机)
  • 标题行高度:2.8em

时间线部分

正文文本设置

对正文设置执行相同的操作。

  • 正文字体:Open Sans
  • 正文文本对齐:居中
  • 正文文本大小:0.7vw(桌面)、1.5vw(平板电脑)、2.1vw(手机)
  • 车身线高:2em

时间线部分

间距

我们还添加了一些自定义边距和填充值,我们将根据不同的屏幕尺寸进行自定义。

  • 左边距:3vw
  • 右边距:3vw
  • 底边距:5vw(平板电脑)、7vw(手机)
  • 顶部填充:2vw(桌面)、6vw(平板电脑和手机)
  • 底部填充:2vw(桌面)、6vw(平板电脑和手机)
  • 左填充:3vw(桌面),9vw(平板电脑和手机)
  • 右填充:3vw(桌面)、9vw(平板电脑和手机)

时间线部分

WordPress备份工具updrafplus

边界

继续进行边框设置并在每个角上添加“20px”。

时间线部分

盒子阴影

最后但并非最不重要的一点是,通过向 Blurb 模块添加微妙的框阴影在页面上创建一些深度。

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

时间线部分

克隆 Blurb 模块三次并在剩余列中放置重复项

创建和自定义 Blurb 模块后,您可以克隆它 3 次。 将重复项放在该行的其余列中。

时间线部分

更改重复 #1 的渐变背景

打开第一个副本(第 2 列中的模糊模块)并修改渐变背景的第一种颜色。

时间线部分

更改重复 #2 的渐变背景

对第 3 列中的 Blurb 模块执行相同的操作。

时间线部分

更改重复 #3 的渐变背景

并修改最后一个 Blurb Module 的渐变背景。

时间线部分

将变换设置添加到模糊模块

将变换翻译添加到模糊模块 #1

现在我们已经拥有了我们需要的所有设计元素,我们可以开始改变它们的位置了! 为此,我们将使用 transform translate 选项。 打开第 1 列中的 Blurb Module 并相应地修改值:

  • 底部:2vw(台式机)、0vw(平板电脑和手机)
  • 右:-106vw(台式机)、0vw(平板电脑和手机)

时间线部分

将 Transform Translate 添加到 Blurb 模块 #2

转到第二个 Blurb 模块并相应地更改变换转换值:

  • 底部:16.6vw(底部)、0vw(平板电脑和手机)
  • 右:-78vw(右)、0vw(平板电脑和手机)

时间线部分

将 Transform Translate 添加到 Blurb 模块 #3

接下来打开第 3 列中的 Blurb 模块,并使用以下变换转换值:

  • 底部:17vw(台式机)、0vw(平板电脑和手机)
  • 右:-46vw(台式机)、0vw(平板电脑和手机)

时间线部分

将 Transform Translate 添加到 Blurb 模块 #4

使用以下值对最后一个 Blurb 模块执行相同的操作:

  • 底部:-66vw(台式机)、0vw(平板电脑和手机)
  • 右:-24vw(桌面)、0vw(平板电脑和手机)

时间线部分

将负底部边距添加到第 2 行

使用转换转换选项不会删除行中的模糊模块最初占用的空间。 为了摆脱这个空间,我们可以在行中添加一些负的底部边距,我们就完成了!

  • 底边距:-15vw(桌面),0vw(平板电脑和手机)

时间线部分

预览

现在我们已经完成了所有步骤,让我们来看看最终的结果。

桌面

时间线部分

移动的

时间线部分

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的新转换选项创建漂亮的时间线部分。 在教程开始时,您可以免费下载 JSON 文件和插图! 这应该可以帮助您立即开始。 如果您有任何问题或建议,请务必在下面的评论部分发表评论。

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