WordPress divi主题

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

| 5月 13, 2022 | Divi主题使用教程 | 0 条评论

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

创建浮动角设计是一种简单易行的方法,可以为 Divi 模块添加一点创意风格,如果没有自定义代码,您可能不会认为这是可能的。 好消息! 使用 Divi,您可以使用 Divi 的内置选项使用分隔线和简介来设置模块的四个角的样式。 而且,尝试不同的可能性会很有趣。

google广告开户

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

让我们开始吧!

抢先看

这是本教程中可能的浮动角落设计的偷窥。

浮角设计

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

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

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

现在让我们进入教程吧?

入门

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

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

WordPress divi主题

现在你准备好了!

创建浮动角设计布局模板

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

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

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

浮角设计

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

自定义宽度:640px
自定义填充:0px 顶部,0px 底部

浮角设计

然后将一个文本模块添加到该行并更新以下内容:

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

fiverr建站WordPress程序员

浮角设计

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

添加前两个浮动角分隔线

有了文本模块,我们可以开始使用分隔模块添加顶部两个浮动角设计。

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

浮角设计

独立站选品工具

然后更新分隔线设置,如下所示:

显示分隔线:否

浮角设计

背景颜色:#7cda24(或任何你想要的颜色)
高度:50 像素
宽度:50 像素

浮角设计

高质量外链购买

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

现在,为分隔线添加一个盒子阴影以创建浮动效果,如下所示:

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

浮角设计

为了确保分隔模块位于文本模块上方(并且不会隐藏在其后面),我们需要向主元素添加一段 CSS,如下所示:

JasperAI 10000字免费额度试用

主要元素 CSS:

position: relative

然后将 Z 索引更新为 1。

浮角设计

接下来复制分频器模块并更新复制的分频器设置,如下所示:

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

WordPress备份工具updrafplus

浮角设计

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

添加底部角落分隔线

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

浮角设计

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

浮角设计

探索新的浮角设计

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

具有渐变背景的钻石形状

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

浮角设计

在元素设置中,更新以下内容:

渐变背景左颜色:#7cda24
渐变背景正确颜色:#edf000
渐变方向:45度

浮角设计

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

变换旋转Z轴:45度

浮角设计

这是最终的设计。

浮角设计

倾斜的分隔线

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

浮角设计

这就是它的样子。

浮角设计

深色背景设计

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

浮角设计

圆角边角

要在设计上添加一些圆角,您可以简单地在行中添加圆角,如下所示:

圆角:20px

浮角设计

圆形浮动角

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

border-radius: 50%;

浮角设计

由于分隔线是 50px x 50px,这将创建一个完美的圆形设计。

浮角设计

如您所见,您可以通过多种不同的方式调整这些元素以实现无数新的角落设计。

现在,让我们探索使用浮动角的模糊图标而不是分隔模块。

使用模糊图标创建浮动角

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

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

浮角设计

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

添加前两个模糊图标角

由于我们只想使用 blurb 模块来显示单个图标,因此我们需要确保大小和间距正确。

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

浮角设计

然后更新以下简介设置(这些设置与我们在第一个示例中添加到分隔器模块的设置非常相似):

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

主要元素 CSS:

position: relative;

模糊图像 CSS:

margin-bottom: 0px

Z指数:1

浮角设计

接下来,复制简介模块以在当前简介下方创建另一个并更新以下内容:

模块对齐方式:右
自定义边距:-50px 顶部

浮角设计

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

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

这是最终的设计。

浮角设计

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

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

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

浮角设计

适用于多列布局

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

浮角设计

包起来

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

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

干杯!

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