使用带有新 Divi 选项的分频器模块的 10 种有趣方法

已发表: 2017-09-26

在今天的 Divi 教程中，我们将与您分享您可以使用先前更新中添加到 Divi 的新选项做什么。更确切地说; 我们将分享 10 种有趣的方式，您可以使用这些新更改来设置分隔模块的样式。可能性确实是无穷无尽的，但这篇文章可能会帮助您找到下一个项目所需的灵感。

抢先看

本教程最好的事情之一是我们不会使用任何额外的 CSS（或任何类型的代码）。我们将创建的所有示例将仅使用包含在分频器模块中的选项。在我向您展示如何逐步创建每个分隔线之前，让我们快速浏览一下我们将构建的分隔线：

分频器模块

使用带有新 Divi 选项的分频器模块的 10 种有趣方法

订阅我们的 YouTube 频道

创建可重用部分

您需要做的第一件事是创建我们将在所有 10 个示例中使用的部分。当然，您也可以在其他上下文中使用分隔符，但是通过先制作这一部分，您将有机会使用自己的 Divi Builder 并查看您更喜欢哪一个。

创建新页面

首先在 WordPress 仪表板中创建一个新页面，启用 Divi Builder 并打开 Visual Builder。

用三列行创建节

进入新页面后，创建一个标准部分并在该标准部分中使用三列行。我们使用了“#f4f4f4”作为部分的背景颜色。

分频器模块

添加第一个文本模块

然后，将第一个文本模块添加到行的第一列。打开设置，键入要显示的文本，然后转到“设计”选项卡。在“设计”选项卡中，对“文本”子类别进行以下更改：

文字字体：龙虾
文字字体大小：35
文字颜色：#000000
文本行高：1.7em
文字方向：居中

分频器模块

添加第二个文本模块

添加第一个文本模块后，您可以在其正下方添加另一个。添加要显示的文本并转到“设计”选项卡。在“设计”选项卡中，确保应用以下修改：

文字字体：Roboto
文字字体大小：14
文本行高：1.7em
文字方向：居中

分频器模块

克隆文本模块并放置在其他两列中

创建这两个文本模块后，您也可以将它们放在该行的其他两列中。

分频器模块

开始之前

我们将分享 10 种有趣的方式来设计 Divi 的分隔模块。每个示例都将具有三个相互协调的分隔符。所有三个模块的大多数设置都相同。我们将首先向您展示对它们中的每一个都很重要的设置，然后展示您需要对其他两个分隔器进行的更改。 因此，每次完成第一个分隔符时，将其克隆并将其放置在其他两列中。 完成后，您可以对其他两个分隔符进行修改。

注意：对于每一个分隔符，您都需要在“内容”选项卡中启用“显示分隔符”选项。

分频器模块

1. 模糊三角形

分频器模块

第一分频器模块设置

内容标签

在内容选项卡中，我们将使用以下背景设置：

第一种颜色：#e09900
第二种颜色：rgba(255,255,255,0)
渐变类型：线性
梯度方向：176deg
起始位置：13%
结束位置：31%

分频器模块

设计选项卡

转到“设计”选项卡并确保以下设置适用于“大小调整”子类别：

分频器重量：0
高度：25px
宽度：35%
模块对齐：居中

分频器模块

向下滚动相同的选项卡并在动画子类别中使用以下动画设置：

动画风格：幻灯片
动画重复：一次
动画方向：中心
动画持续时间：1200ms
动画强度：80%

分频器模块

第二分频器模块设置

内容标签

在内容选项卡中，您唯一需要做的就是将第一个渐变颜色更改为“#0c71c3”。

设计选项卡

接下来，您需要向 Animation 子类别添加一些“250ms”的动画延迟。

分频器模块

第三分频器模块设置

内容标签

将最后一个分隔线的第一个渐变颜色更改为“#8300e9”。

分频器模块

设计选项卡

您需要添加到最后一个分隔符的动画子类别的动画延迟是“500 毫秒”。

分频器模块