如何为 Divi 中的内容创建浮动角设计

创建浮动角设计是一种向 Divi 模块添加一点创意风格的简单而简单的方法，您可能认为没有自定义代码是不可能的。 好消息！ 使用 Divi，您可以使用 Divi 的内置选项使用分隔线和宣传语来设置模块的四个角的样式。 而且，尝试不同的可能性会非常有趣。

在本教程中，我将向您展示如何在 Divi 中为您的内容创建浮动角设计。 一旦你有了元素，你就可以用无数的形状、图标和颜色来设计这些角落！

让我们开始吧！

抢先看

这是本教程中可能的浮动角设计的先睹为快。

免费下载浮动边框设计示例布局

要将您的手放在浮动边框设计布局上，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

现在让我们进入教程吧？

入门

本教程唯一需要的是 Divi。 我们将在 Divi Builder 的前端从头开始构建这些示例。

首先，创建一个新页面并为您的页面命名。 单击以使用前端的 Divi Builder，然后选择“从头开始构建”选项。

现在你准备好了！

创建浮动角设计布局模板

由于此设计将有无数的设计可能性，因此创建基本布局（或模板）以进行工作是有意义的。

对于此模板，我们将在文本模块的每个角添加四个分隔线。 然后，一旦布局到位，您将能够探索新的方法来为独特的设计定制这些分隔线。

首先，创建一个具有一列行的新常规部分。

在我们添加文本模块之前，更新行设置如下：

自定义宽度：640px
自定义填充：0px 顶部，0px 底部

然后向该行添加一个文本模块并更新以下内容：

文字文字大小：20px
文本行高：1.8em
自定义边距：-25px 顶部，-25px 底部，25px 左，25px 右
自定义填充（桌面）：顶部 10%，底部 10%，左侧 10%，右侧 10%
自定义填充（电话）：顶部 20%，底部 20%
边框宽度：4px
边框颜色：#eeeeee

自定义边距和填充将有助于对齐我们将很快添加的分隔器模块。 由于分隔线的高度和宽度为 50 像素，-25 像素的顶部和底部边距会将这些分隔线拉入文本模块的一半，以获得漂亮的对称设计（您会看到）。

添加前两个浮动角分隔线

文本模块到位后，我们可以开始使用分隔模块添加顶部的两个浮动角设计。

创建一个新的分隔线模块并将其拖到文本模块的顶部。

然后按如下方式更新分隔线设置：

显示分隔线：否

背景颜色：#7cda24（或您想要的任何颜色）
高度：50px
宽度：50px

50px 的高度和宽度为我们提供了可以用于浮动边框的完美正方形。

现在，向分隔线添加框阴影以创建如下浮动效果：

盒子阴影：见截图
框阴影垂直位置：0px
框阴影模糊强度：0px
框阴影传播强度：20px
阴影颜色：#ffffff

为了确保分隔模块保持在文本模块上方（并且不会隐藏在它后面），我们需要向主元素添加一个 CSS 片段，如下所示：

主要元素 CSS：

position: relative

然后将 Z 索引更新为 1。

接下来复制分隔器模块并更新复制的分隔器设置，如下所示：

模块对齐：右
自定义边距：-50px 顶部

这会将分隔器对齐到右侧，并将其向上拉到位于其上方的分隔器模块的确切高度。 这将创建我们正在寻找的确切角落位置。

添加底部角分隔线

要添加两个底角分隔线，请部署线框视图模式并复制您刚刚创建的左右分隔线并将它们粘贴到文本模块下方（确保左分隔线保持堆叠在右分隔线的顶部，如图所示以下）。

就是这样！ 让我们来看看我们的基本布局的最终​​设计。

探索新的浮动角设计

有了这个模板，我们可以探索一些可能的不同设计。 您可以将整个部分保存到 Divi 库中，以便您可以将其作为模板继续使用。 但是现在，让我们复制该部分并探索新设计。

具有渐变背景的钻石形状

复制我们的模板后，使用多选功能选择所有四个分隔模块。 然后单击所选分隔线之一上的设置齿轮图标以部署元素设置模式。 在此步骤中使用单击模式可能会有所帮助。

在元素设置中，更新以下内容：

渐变背景左颜色：#7cda24
渐变背景右颜色：#edf000
梯度方向：45度

然后使用变换选项将分隔线旋转成菱形。

Transform 旋转 Z 轴：45deg

这是最终的设计。

偏斜的分隔线

您还可以使用变换倾斜选项来倾斜分隔线以获得更加独特的设计。 您可以为每个分隔线添加单独的倾斜设计，或使用多选将所有四个分隔线的变换倾斜同时更新为 -37deg 在 X 和 Y 轴上。

这就是它的样子。

深色背景设计

您甚至可以尝试为文本模块添加深色背景色，以获得独特的浮动角设计。 这是一个背景色为#002130 的文本模块的示例，使用无变换旋转或倾斜。

圆角边角

要在设计上放置一些圆角，您可以简单地将圆角添加到行中，如下所示：

圆角：20px

圆形浮角

要将这些方角变成圆形，您可以将以下自定义 CSS 片段添加到每个分隔线的主要元素：

border-radius: 50%;

由于分隔线为 50 像素 x 50 像素，这将创建一个完美的圆形设计。

正如您所看到的，您可以通过多种不同的方式为无数新的角设计调整这些元素。

现在，让我们探索使用模糊图标代替分隔模块的浮动角。

使用 Blurb 图标创建浮动角

将 Blurb 图标添加到文本模块的每个角落可以为您提供更加独特的设计。 您可以使用我们在本教程开头构建的相同布局模板。 唯一的区别是使用模糊模块而不是四个角的分隔模块。

继续并获取部署的部分布局模板的副本。

然后删除文本模块上方和下方的分隔线模块。

添加前两个模糊图标角

由于我们只想使用模糊模块来显示单个图标，因此我们需要确保并获得正确的大小和间距。

在文本模块上方添加一个blurb 模块，并取出标题和正文文本。 然后单击以使用图标而不是图像并选择圆形 Facebook 图标。

然后更新以下模糊设置（这些设置与我们在第一个示例中添加到分隔器模块的设置非常相似）：

背景颜色：#ffffff
图标字体大小：50px
宽度：50px
自定义边距：底部 0px
圆角：50%
盒子阴影：见截图
框阴影垂直位置：0px
框阴影模糊强度：0px
框阴影传播强度：20px
阴影颜色：#ffffff

主要元素 CSS：

position: relative;

模糊图像 CSS：

margin-bottom: 0px

Z指数：1

接下来，复制blurb 模块以在当前blurb 下方创建另一个模块并更新以下内容：

模块对齐：右
自定义边距：-50px 顶部

然后复制顶部的两个简介模块并将它们粘贴到文本模块下（确保左简介保持堆叠在右简介上方）。

然后您可以将每个简介的图标更新为您想要的任何内容。

这是最终的设计。

探索更多带有 Blurb 图标浮动角的设计

通过此设置，您可以探索许多独特的设计。 您可以更改图标，使用不同的颜色组合，甚至可以使用变换选项缩放或旋转它们。

这是一个设计示例，文本模块使用深色背景颜色和不同的图标颜色。

适用于多列布局

只要将元素保持在一起，就可以在多列中添加这些浮动角布局。

包起来

在 Divi 中为您的内容创建浮动角设计确实展示了 Divi builder 的强大功能。 使用所有可用的内置选项，您可以从一个基本布局模板创建无数设计变体。 我希望这会激发您探索自己的新设计的乐趣。

我期待在评论中收到您的来信。

干杯!