房山站点建设：使用带有新Divi选项的分离器模块的10种有趣方法

在房山站点建设的Divi教程中，我们将与您分享一下以前更新中添加到Divi中的新选项可以做些什么。更准确地说，我们将分享10种有趣的方法，您可以通过这些新的更改来为DividerModule设计样式。这些可能性确实是无穷无尽的，但这篇文章可能会帮助你找到你下一个项目所需要的灵感。

偷窥

本教程的优点之一是我们不会使用任何额外的CSS(或任何类型的代码)。我们将要创建的所有示例都将只使用分区模块中包含的选项。在我向您展示如何一步地创建每个分隔符之前，让我们先看一下我们将要构建的分隔符：

创建可重用部分

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

创建新页面

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

创建具有三列行的区段

在新页面上之后，创建一个标准部分，并在该标准部分中使用三列行。我们使用‘#f4f4f4’作为部分背景色。

添加第一个文本模块

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

· 文本字体：龙虾

· 文本字体大小：35

· 文本颜色：#000000

· 文本线高度：1.7em

· 文本定位：中心

添加第二个文本模块

一旦添加了第一个文本模块，就可以在它下面添加另一个文本模块。添加要显示的文本并转到“设计”选项卡。在“设计”选项卡中，确保适用以下修改：

· 文本字体：Roboto

· 文本字体大小：14

· 文本线高度：1.7em

· 文本定位：中心

克隆文本模块&放置在另外两列中

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

在开始之前

我们将分享10种有趣的方式，你可以风格Divi的分隔模块。每一个例子都有三个互相协调的分隔器。对于所有三个模块，大多数设置都是相同的。我们将首先向您展示对其中每一个都有意义的设置，并继续显示您需要对其他两个分隔器所做的更改。所以，每次你完成第一个除法器，克隆它，并把它放在另外两列。一旦你这样做了，你可以对其他两个除法器进行修改。

注：对于每个分隔符，您需要在Content选项卡中启用“ShowDivider”选项。

1。模糊三角

第一分配器模块设置

内容标签

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

· 第一颜色：#e 09900

· 第二颜色：RGBA(255，255，255，0)

· 梯度型：线性

· 梯度方向：176德克

· 起始位置：13%

· 期末职位：31%

设计标签

继续到“设计”选项卡，确保以下设置适用于“尺寸”子类别：

· 分压器重量：0

· 身高：25 px

· 宽度：35%

· 模块对齐：中心

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

· 动画风格：幻灯片

· 动画重复：一次

· 动画方向：中心

· 动画持续时间：1200 ms

· 动画强度：80%

第二分配器模块设置

内容标签

在Content选项卡中，您只需要将第一个渐变颜色更改为‘#0c71c3’。

设计标签

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

第三分配器模块设置

内容标签

将最后一个分配器的第一个渐变颜色改为#8300e9。

设计标签

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

2。彩色阴影

第一分配器模块设置

内容标签

在“内容”选项卡中使用以下渐变背景设置：

· 第一颜色：#e 09900

· 第二颜色：RGBA(255，255，255，0)

· 梯度型：线性

· 梯度方向：180度

· 起始位置：0%

· 期末职位：72%

设计标签

在“设计”选项卡中，您需要做的第一件事是将分隔符的颜色更改为“#000000”。

在同一选项卡的样式子类别中，使用“Solid”作为分隔样式，使用“top”作为分区位置。

继续向下滚动，并对SING子类别进行以下更改：

· 分压器重量：2

· 身高：20 px

· 宽度：70%

· 模块对齐：中心

最后，为动画子类别使用以下选项设置：

· 动画风格：弹跳

· 动画重复：一次

· 动画方向：中心

· 动画持续时间：2000 ms

第二分配器模块设置

内容标签

将渐变背景的第一个渐变颜色更改为‘0c71c3’。

设计标签

在动画子类别中，在动画延迟选项中添加‘350 ms’。

第三分配器模块设置

内容标签

对第三个分隔符进行相同的更改，但使用‘#8300e9’颜色代替。

设计标签

最后，添加一个动画延迟‘700毫秒’。

3。梯度级数

第一分配器模块设置

内容标签

对于第一个分配器，使用以下渐变背景设置：

· 第一颜色：#0970a0

· 第二颜色：RGBA(255，255，255，0)

· 梯度型：线性

· 梯度方向：119 deg

· 起始位置：0%

· 期末职位：86%

设计标签

在“设计”选项卡中，选择“#FFFFFF”作为分隔符的颜色。

接下来，对“样式”子类别进行以下更改：

· 分隔方式：实心

· 分隔位置：垂直中心

当仍然在同一选项卡中时，请确保以下设置适用于“大小”子类别：

· 分压器重量：3

· 身高：10 px

· 宽度：25%

· 模块对齐：左

在间隔子类别中的底部填充中添加“15 px”。

最后，对动画子类别使用以下设置：

· 动画风格：幻灯片

· 动画重复：一次

· 动画方向：左

· 动画持续时间：2000 ms

· 动画强度：100%

第二分配器模块设置

内容标签

第二个分频器的梯度背景设置略有不同：

· 第一颜色：#0970a0

· 第二颜色：RGBA(255，255，255，0)

· 梯度类型：径向

· 径向：中心

· 起始位置：0%

· 结束位置：100%

设计标签

在“大小”子类别中，将模块对齐更改为“中心”。

最后，集中动画方向。

第三分配器模块设置

内容标签

第三个除法器还包含另一个梯度背景：

· 第一颜色：RGBA(255，255，255，0)

· 第二颜色：#0970a0

· 梯度型：线性

· 梯度方向：119 deg

· 起始位置：14%

· 结束位置：100%

设计标签

我们将对第二个除法器进行同样的修改，但使用的是右，而不是中间。

4。滚动圈

第一分配器模块设置

内容标签

首先，应用以下渐变背景设置：

· 第一颜色：#e 09900

· 第二颜色：RGBA(255，255，255，0)

· 梯度类型：径向

· 径向：中心

· 起始位置：20%

· 期末职位：21%

设计标签

在“设计”选项卡中，您需要做的第一件事是为分隔符使用“#000000”颜色。

然后，选择“Solid”作为您的分区样式，选择“垂直居中”作为您的分区位置。

继续，对SING子类别进行以下更改：

· 分压器重量：2

· 高度：50 px

· 宽度：40%

· 模块对齐：中心

最后，动画子类别需要以下设置：

· 动画风格：滚动

· 动画重复：一次

· 动画方向：中心

· 动画持续时间：1500 ms

· 动画延迟：850 ms

· 动画强度：60%

第二分配器模块设置

内容标签

将第一个渐变颜色改为‘0c71c3’。

设计标签

并将动画延迟更改为“0MS”。

第三分配器模块设置

内容标签

对于最后一个分隔符，您只需要将第一个渐变背景色更改为‘#8300e9’。

5。托架

第一分配器模块设置

内容标签

使用下列梯度背景设置：

· 第一颜色：#e0d1b1

· 第二颜色：#e 09900

· 梯度类型：径向

· 径向：中心

· 起始位置：36%

· 结束位置：100%

设计标签

确保分隔符的颜色与区域背景色相同。在本例中，是‘#f4f4f4’。

向下滚动设计选项卡，并使用‘虚空’作为您的分区风格和‘顶部’作为您的分区位置。

使下列设置应用于“尺寸”子类别：

· 分压器重量：100

· 身高：18 px

· 宽度：60%

· 模块对齐：中心

您还需要添加‘15 px’到顶部，右和左填充。

最后，使用以下动画设置：

· 动画风格：缩放

· 动画重复：一次

· 动画方向：中心

· 动画持续时间：1000 ms

· 动画强度：80%

第二分配器模块设置

内容标签

将渐变背景的颜色更改为“#87acc1”和“#0c71c3”。

设计标签

接下来，房山站点建设将动画持续时间更改为“1300 ms”，将动画延迟更改为“250 ms”。

第三分配器模块设置

内容标签

在第三个分频器中使用的渐变颜色是‘#c9a4e8’和‘#8300e9’。

设计标签

将动画持续时间更改为“1300 ms”，将动画延迟更改为“500 ms”。

6。双线

第一分配器模块设置

内容标签

应用下列梯度背景设置：

· 第一颜色：#e 09900

· 第二颜色：RGBA(255，255，255，0)

· 梯度型：线性

· 梯度方向：179德克

· 起始位置：0%

· 期末职位：45%

设计标签

选择“#000000”作为分隔颜色。

在“样式”子类别中，使用“双”作为分区样式，使用“垂直居中”作为分区位置。

继续，为“大小”子类别使用以下设置：

· 分压器重量：5

· 身高：25 px

· 宽度：35%

· 模块对齐：左

最后，使用以下动画设置：

· 动画风格：滚动

· 动画重复：一次

· 动画方向：左

· 动画持续时间：1000 ms

· 动画强度：50%

第二分配器模块设置

内容标签

将第一个渐变颜色改为‘0c71c3’。

设计标签

接下来，对第二个分隔器使用不同的动画：

· 动画风格：淡出

· 动画重复：一次

· 动画持续时间：1400 ms

第三分配器模块设置

内容标签

对于第三个分光镜，使用‘#8300e9’作为第一个渐变背景色。

设计标签

在“设计”选项卡中，唯一需要更改的是“动画方向”，在本例中是“右”。

7。大桥

第一分配器模块设置

内容标签

首先，将‘#8300e9’分配给背景。

设计标签

继续使用部分背景色作为分隔颜色，在本例中为“#f4f4f4”。

接下来，使用“虚线”作为您的分区样式和“顶部”作为您的分区位置。

在“大小”子类别中，使用以下设置：

· 隔板重量：15

· 身高：7 px

· 宽度：70%

· 模块对齐：左

我们还需要一些定制的填充：

· 顶部填充物：7 px

· 右垫：-7 px

· 左填充物：-7 px

我们将要使用的动画具有以下设置：

· 动画风格：幻灯片

· 动画重复：一次

· 动画方向：左

· 动画持续时间：800 ms

· 动画延迟：400 ms

· 动画强度：30%

第二分配器模块设置

内容标签

对于第二个分隔符，将背景改为‘0c71c3’。

设计标签

我们还将使用不同的动画：

· 动画风格：缩放

· 动画重复：一次

· 动画方向：中心

· 动画持续时间：800 ms

· 动画强度：30%

第三分配器模块设置

内容标签

第三个除法器将使用‘#8300e9’作为其背景色。

设计标签

第三个分隔器的动画也略有不同：

· 动画风格：缩放

· 动画重复：一次

· 动画方向：右

· 动画持续时间：800 ms

· 动画延迟：400 ms

· 动画强度：30%

8。优雅

第一分配器模块设置

内容标签

首先，向第一个分配器添加以下渐变背景：

· 第一颜色：#000000

· 第二颜色：RGBA(255，255，255，0)

· 梯度类型：径向

· 径向：中心

· 起始位置：20%

· 期末职位：20%

设计标签

使用‘#8300e9’颜色为您的分隔器。

接下来，使用‘点’作为您的分区样式‘和’垂直中心‘作为您的分区位置。

我们也需要一个‘40便士’的顶部填充。

和具有下列设置的动画：

· 动画风格：弹跳

· 动画重复：一次

· 动画方向：向下

· 动画持续时间：1000 ms

第二分配器模块设置

设计标签

对于第二个分隔符，将颜色更改为‘0c71c3’。

动画还需要一些修改：

· 动画方向：中心

· 动画持续时间1500 ms

第三分配器模块设置

设计标签

第三个分隔符将使用‘#8300e9’作为它的颜色。

并将以“UP”作为其动画方向。

9。微妙

第一分配器模块设置

内容标签

为渐变背景选择下列设置：

· 第一颜色：#8300e9

· 第二颜色：RGBA(255，255，255，0)

· 梯度类型：径向

· 径向：中心

· 起始位置：0%

· 期末职位：38%

设计标签

在SING子类别中，您需要以下设置：

· 分压器重量：0

· 身高：4PX

· 宽度：100%

最后，我们将要使用的动画具有以下设置：

· 动画风格：弹跳

· 动画重复：一次

· 动画方向：向上

· 动画持续时间1800 ms

第二分配器模块设置

内容标签

对于第二个分频器，将第一个渐变背景色改为‘0c71c3’。

第三分配器模块设置

内容标签

对第三个分隔符做相同的更改，但使用‘#8300e9’紫色代替。

10。萤光

第一分配器模块设置

内容标签

使用最后一系列分配器的下列梯度背景设置：

· 第一颜色：

· 第二颜色：

· 梯度类型：径向

· 径向：中心

· 起始位置：0%

· 期末职位：38%

设计标签

选择部分背景颜色作为您的分隔颜色以及，在本例中，它是‘#f4f4f4’。

接下来，使用‘虚线’作为您的分区样式和‘垂直中心’作为您的分区位置。

在“大小”子类别中，使用以下设置：

· 分压器重量：70

· 身高：20 px

· 宽度：100%

最后，我们将使用具有以下选项的动画：

· 动画风格：淡出

· 动画重复：一次

· 动画持续时间：1800 ms

· 动画延迟：800 ms

第二分配器模块设置

内容标签

对于第二个分频器，将第二个渐变背景色改为‘0c71c3’。

设计标签

并添加动画延迟‘250毫秒’。

第三分配器模块设置

内容标签

对于最后一个分隔符，将第二个渐变背景色更改为‘#8300e9’。

设计标签

最后把动画延迟到‘0MS’。

最后思想

房山站点建设与新的Divi选项，许多新的创造性的东西是可能的内建设置的每个模块。在这篇文章中，我们特别向您展示了这些选项如何帮助您通过分区模块来增强您的设计。如果您有任何问题或建议，请确保在下面的评论部分留下评论！