和平开发网站：如何设计抽象行以在Divi中构建内容框架

和平开发网站divi允许您使用VisualBuilder以多种不同的方式创建抽象行。分配器，边界，背景渐变，和方框阴影都有你需要的选项。如果你的间距有点创意，你可以使用所有这些元素的组合，以创造性的方式构建你的内容。

在本教程中，我将向您展示如何使用线条轻松地将布局的一部分转换为独特的设计。

潜峰

这里是我们将要建造的设计的一个偷窥。

设计灵感

这个设计背后的灵感来自Divi的加密货币布局包。关于页面布局的特点是一个独特的设计与标题背景图像的连接线，继续向下的页面，以划分两列网格布局的中间。因此，我决定探索使用Divi来添加线条的概念，这些线条可以更多地限定内容，并在总体设计中添加一些亮点。

这个设计的主要亮点是分隔模块的使用。我发现Divider模块并不局限于创建带有单一颜色的水平线。实际上，只要稍加调整，您就可以创建带有背景渐变的垂直线了！

你只需要迪维

本教程唯一需要的是Divi。我将使用关于页面布局的加密货币来提供我们设计的基础。然后，我将自定义节、行和模块的设置，以完成设计。

添加带区段边界的行

第一件事。继续创建一个新页面，并使用VisualBuilder导入有关页布局的加密货币。

本教程的重点将放在第二个方面(就在全宽度标题的右下方)。

增加区段边界

您可能已经知道，默认情况下，各节跨越页面的整个宽度。因此，一个2px边框在一个区域的左和右将很难被注意到。但是，如果您给节一个自定义宽度，这些边框将出现在视图中。

转到节设置并按以下方式更新节设置：

宽度：90%
截面对齐：中心
右边框宽度：4px
右边框颜色：#332 faf
左边框宽度：4px
左边框颜色：RGBA(237，240，0.51)

现在，不要担心，该部分的自定义宽度将下降到100%在手机上。

添加内容区域背景色

现在，内容区域的背景颜色是白色的，所以您可以看到它暴露在您的节的每一边。这可以通过转到您的页面设置并为内容区域背景分配相同的深色以与节背景匹配来更改。

内容区域背景颜色：#101535

将线条添加到您的行中

现在，让我们更新行设置，以创建一些额外的行设计。

使用列背景梯度添加线条

为了给我们的列添加一条线，我们可以在我们的渐变背景中使用一个小技巧，在我们的每一列的侧面添加一个细梯度除法。若要执行此更新，请执行以下操作：

第1栏背景梯度左颜色：RGBA(255，255，255，0)
第1栏背景梯度右颜色：RGBA(237，240，0，0.34)
第1栏梯度方向：90德克
第1栏起始位置：99.5%
第1栏末端位置：0%

第2栏背景梯度左颜色：RGBA(51，47，175，0.51)
第2栏背景梯度右颜色：RGBA(255，255，255，0)
第2栏梯度方向：90度
第2栏起始位置：99.5%
第2栏末端位置：0%

给行一个自定义宽度

因为我们给我们的部分一个自定义宽度，所以我们需要给我们的行一个自定义宽度，以便为我们的设计元素创造更多的空间。将行的宽度设置为90%。

将边界添加到您的行中

若要向行添加边框，请更新以下内容：

左边框宽度：2px
左边框颜色：RGBA(237，240，0.56)
右边框宽度：2px
右边框颜色：#332 faf

间距

我们还需要调整行的间距，以帮助拆分我们将添加的模块行的对齐方式。为此，请更新以下内容：

定制填充物：10%
第1栏自定义填充物：底部5%，左3%，右3%
第2栏自定义填充：3%右，3%左

向文本模块添加边界

接下来，我们将为我们的模块添加一些边框，以便进行额外的线路设计。

对于左侧列中的图像模块，更新以下设置：

宽度：62%(这将给我们更多的间距，并有助于我们的线对齐)

左边框宽度：4px
左边框颜色：RGBA(67，40，183，0.53)

在右边的列中，用带有一定间距和左边框的标题更新顶部的文本模块。

然后，和平开发网站将一些空格和右边框添加到右侧列中的第二个文本模块(带有虚拟文本的一个)中，如下所示：

客户保证金：5%上线，5%右
定制填充：5%(上、下、左、右)

右边框宽度：2px
右边框颜色：#332 faf

向按钮中添加边框、背景梯度和框影

这个设计元素也许是我最喜欢的。我们将添加线条元素，使用边框、背景渐变和框影来样式和帧按钮。

首先，让我们使用以下背景梯度向按钮添加左边框：

按钮背景渐变左颜色：#edf 000
按钮背景渐变右颜色：RGBA(255，255，255，0)
梯度方向：90德克
起始位置：1%
最终位置：0%

现在，我们增加边框大小并更改颜色以匹配区域背景，以便为我们的框阴影创建一些空间：

按钮边框宽度：24 px
按钮边框颜色：#101535

增加一些间隔，给按钮文本一些喘息的空间：

定制衬垫：1em顶部，1em底部

现在，我们的框阴影要将按钮的右下角框为框架：

方框阴影水平位置：2PX
盒影垂直位置：2PX
阴影颜色：#332 faf
盒影位置：外阴影

添加带有自定义分隔符的行

这就是事情变得有趣的地方。我们可以在页面的任何位置添加分隔符。诀窍是利用分光镜的背景梯度来创造一个独特的设计。

首先，让我们在行的左列的图像模块的右边添加一个分隔符。然后更新以下设置：

按钮背景渐变左颜色：#edf 000
按钮背景渐变右颜色：RGBA(255，255，255，0)
梯度方向：90德克
起始位置：1%
最终位置：0%

颜色：#edf 000
分压器重量：2 PX
身高：2 PX
定制填充物：剩余80%

自定义填充将边框颜色推到右侧，并公开背景渐变以创建唯一效果。

现在，复制模块并将其粘贴到右侧列的顶部，并将其直接粘贴到文本模块的标题下(替换当前的标题)。

以下是目前为止的情况。

添加垂直分隔线

最后一个阶段将通过引入一些额外的垂直线来为设计添加最后的内容，这些线会流血到部分中。

为此，我们需要创建一个具有四列的新行，并按如下方式更新行设置：

定制宽度：95%
自定义填充：0 px顶部，0 px底部

然后更新所有平板显示…的自定义填充

第1栏填充物(片剂)：20%右
第2栏填充物(片剂)：右15%
第1栏填充物(片剂)：30%右
第1栏填充物(片剂)：左20%

这将抵消当移动显示器上的列堆叠时垂直分隔符(尚未添加)。

现在，我们准备添加我们的分隔模块。

在第一列中添加一个分隔模块，并更新以下设置：

秀师：不
背景梯度左颜色：RGBA(255，255，255，0)
背景渐变右色：#edf 000
高度：100 px
宽度：2 PX
模块对齐：右
自定义页边距(桌面)：-300 px顶部，300 px底部
自定义页边距(平板电脑)：0 px顶部，0 px底部

现在复制刚才创建的模块并将其添加到第二列。然后更新以下内容：

背景渐变左颜色：#edf 000
背景渐变右色：#332 faf
最后职位：40%
高度：300 px
模块对齐：中间

接下来，将第一列中的divder复制并粘贴到第三列，并更新以下内容：

模块对齐：中间
自定义边距(桌面)：0px
自定义页边距(平板电脑)：-200 px顶部

现在，将该模块复制到第二列中，并将其粘贴到第四列，并更新以下内容：

背景渐变左色：#332 faf
背景渐变右色：#edf 000
结束位置：100%
身高：200 px
自定义页边距(平板电脑)：-200 px顶部

就这样。看看最后的结果。

这是平板电脑和智能手机…上的样子

没有足够的线？

通过向每个分隔模块添加框阴影，您始终可以轻松地向页面添加更多的行。这将允许您放置线基本上任何你想要的地方。诀窍是将您的框阴影位置设置为外部阴影，选择您想要的颜色，然后将其放置在页面的任何位置。

看看在右边列的顶部除法器模块中添加一个方框阴影是什么样子的，它看起来像…。

最后思想

在构建设计时，我的最初目标是探索所有可能的方法，将行添加到Divi预先制作的布局中的一个部分。我发现有不少！

与灵活的设计方案提供的分隔模块，可能性变得似乎无穷无尽。

和平开发网站希望这篇文章给你提供了更多的工具在您的设计工具箱，以帮助您最大化Divi在惊人的新方式。

我期待着在评论中听到你的意见。