WordPress divi主题

使用 Divi 内置边距和装订线控件的 5 种创造性方法

by | May 17, 2022 | Divi主题使用教程 | 0 comments

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

Divi 边距和装订线控件是两个强大的设计设置,可以真正以创造性的方式改变您的布局。 而且,如果您了解它们的工作原理,您就不会害怕突破并为自己尝试新事物。 在这篇文章中,我将向您展示 5 种使用 Divi 边距和装订线控件的创造性方法。 有些会比其他的更容易完成,但总的来说,我认为你会对这两种设计设置有新的认识。

google广告开户

关于边距和装订线宽度

边距是指元素之间(或外部)的间距。 因此,可以将部分、行或模块视为一个框。 边距是在框外添加空间的部分,用于分隔页面上的框(此处对此进行了更详细的介绍)。

divi 边距和装订线

装订线宽度只是一行中列之间的边距的一个花哨的术语。 很难在运行中充分构建具有正确边距的网格。 这就是 Divi 为每一行提供装订线宽度选项的原因。 它有助于减轻均匀间隔列的痛苦。

装订线宽度的可选值范围为 1 到 4。

1 表示列之间的边距为零。
2 表示列之间有 3% 的右边距。
3 表示列之间有 5.5% 的右边距。
4 表示列之间有 8% 的右边距。

divi 边距和装订线

现在我们对我们正在处理的事情有了更好的处理,让我们开始使用它们吧!

以下是使用 Divi 边距和装订线控件的 5 种创造性方法:

抢先看

以下是使用这些技术可能实现的设计的快速预览:

WordPress divi主题

divi 边距和装订线

divi 边距和装订线

divi 边距和装订线

divi 边距和装订线

使用 Divi 内置边距和装订线控件的 5 种创造性方法

订阅我们的 Youtube 频道

#1 在行外扩展图像模块

divi 边距和装订线

由于破碎的网格设计如今风靡一时,在其容器(或行)之外扩展模块是打破传统网格布局以获得独特外观的好方法。 诀窍是使用负边距沿某个方向扩展模块。

在 Fitness Gym 登陆页面布局中可以找到这种创造性技术的一个很好的例子。 在标题为“成为成员”的部分中,您可以看到图像是如何扩展到其行容器之外的。

以下是如何完成此设计的基本思想。

fiverr建站WordPress程序员

创建一个包含两个四列行的新部分。 为每一行提供以下设置:

天沟宽度:1
自定义边距:0px 顶部
自定义填充:0px 顶部,0px 底部

divi 边距和装订线

然后更新部分设置如下:

背景渐变左颜色:#fa2a20
背景渐变右颜色:rgba(16,23,45,0.85)
渐变方向:90度
起始位置:50%
结束位置:50%
自定义填充:0px 顶部,0px 底部

独立站选品工具

divi 边距和装订线

接下来在顶行中,将图像模块添加到第 3 列并将图像添加到模块。 然后使用负上边距更新设置,如下所示:

自定义边距:-6vw 顶部

divi 边距和装订线

在第二行中,将图像模块添加到第 2 列,并将图像添加到模块中。 然后使用负下边距更新设置,如下所示:

高质量外链购买

divi 边距和装订线

然后在同一行的第 4 列添加一个图像模块,并在该模块中添加一个图像。 然后使用负下边距更新设置,如下所示:

自定义边距:-5vw 底部

divi 边距和装订线

因为我们将装订线宽度设置为 1,所以图像/模块彼此齐平,它们之间没有任何空间。 这与 50% 的渐变起始位置相结合,使其在背景中有一个很好的对称断点。

JasperAI 10000字免费额度试用

您可能已经注意到我使用 vw 长度单位作为自定义边距。 vw(视口宽度)长度单位是相对于浏览器的宽度。 所以 10vw 基本上是浏览器窗口的 10%。 这允许设计与浏览器一起缩放,而不会跳来跳去。 有关更多信息,请参阅我们关于长度单位的完整文章。

这是最终的设计。

divi 边距和装订线

#2 在列之外扩展文本模块和分隔符

divi 边距和装订线

在列或行之外扩展文本模块为独特的标题设计打开了大门。 行或列可以用作自定义背景元素,因为文本向左和右延伸超出背景元素以获得独特的外观。

WordPress备份工具updrafplus

这是如何完成的。 首先创建一个包含两列行的新部分。 在添加任何模块之前,请按如下方式更新行设置:

第 1 列背景颜色:#00ca8f
自定义宽度:700px
天沟宽度:4
盒子阴影:见截图
盒子阴影水平位置:-10px
盒子阴影垂直位置:-10px
盒子阴影颜色:rgba(100,113,248,0.37)

将装订线宽度设置为 4 可以最大化列之间的空间,使我们更容易将模块扩展到列之外。

divi 边距和装订线

现在让我们将一个文本模块添加到第 1 列并更新设置,如下所示:

标题字体:Fira Sans Condensed
标题字体粗细:超粗体
标题字体样式:TT
标题文字对齐:居中
标题文字颜色:#0f135d
标题文字大小:100px (60
标题字母间距:10px
宽度:600 像素
自定义边距:-100px 左,-100px 右
自定义填充:0px 顶部,0px 底部,0px 左侧,0px 右侧

这个设计的关键是增加模块的宽度,这样,当我们添加负左右边距时,文本模块有空间延伸到两侧的列之外。

divi 边距和装订线

作为附加设计元素,您还可以在列 2 中添加一个分隔线,该分隔线也延伸到列之外。 为此,请在第 2 列中添加一个分隔模块并更新以下设置:

颜色:#0f135d
分隔线重量:12px
宽度:150%
自定义边距:顶部 15 像素,左侧 -25%,右侧 -25%

这里也使用相同的设计技术。 我们将宽度(或最大宽度)增加到 150%,以便我们可以将模块扩展到左侧和右侧的列之外。

这是最终结果。

divi 边距和装订线

这里是移动端。

divi 边距和装订线

您还可以通过对设置进行一些更新来轻松地将其更改为单列布局,以获得完全现在的外观。 为此,请将行的列布局更改为一列,并将行宽更改为 400 像素。

这是结果。

divi 边距和装订线

如需更多灵感,请查看这篇文章,了解如何扩展模块以在 Divi 中创建独特的列布局。

#3 用按钮重叠模块

自定义边距可用于将按钮放置在整个设计中的独特位置。 我最喜欢做的事情之一是定位按钮,以便它们与其他模块重叠。

为了说明这个概念,我将使用 Soccer Club Layout Pack 中的 Soccer Club Landing Page Layout。 在布局的顶部,您会注意到在视频的顶部和底部放置了两个按钮。 顶部按钮的底部边距为 0px,因此它与视频顶部齐平。 并且视频模块已被赋予 0px 底部边距,以便底部按钮与视频底部齐平。 我要做的是移动每个按钮,使它们与视频模块重叠。

divi 边距和装订线

为此,请打开顶部按钮模块设置并为其自定义底部边距 -56px(基本上是按钮的高度)。

divi 边距和装订线

然后打开底部按钮设置并给它一个-56px的自定义上边距。

divi 边距和装订线

这是最终的设计。

divi 边距和装订线

因为我们为负边距使用了像素长度值,所以按钮也将保留在移动设备上。

divi 边距和装订线

如需更多灵感,请查看这篇文章,了解如何使用类似技术添加动画滚动按钮。

#4 与行重叠的部分

divi 边距和装订线

将一个部分与一行重叠是一个简单的过程,但它确实可以增加一定程度的创造力来提升页面的设计并使内容脱颖而出。

为了说明这个概念,让我们看一下房地产布局包中的房地产登陆页面。 请注意第二部分中的内容行是如何被拉上来与顶部部分重叠的,从而使内容脱颖而出。

让我们快速回顾一下这是如何完成的。

该行的自定义宽度为 1440 像素,因此它的两侧都有一些间距,可以很好地框住内容。

装订线宽度设置为 1 以最大化三个简介及其内容所需的空间。

最后,该行的自定义上边距为 -10vw。 这会将行向上拉,使其与上面的部分重叠。

divi 边距和装订线

简单的东西对吗?

有关此概念的更多信息,请查看有关如何重叠模块和行的帖子。

#5 在悬停时扩展行

divi 边距和装订线

这种悬停风格是在您的网站上显示有关特定服务或促销优惠的更多信息的好方法。 这种悬停效果的关键是使用自定义边距将一行的一半延伸到浏览器窗口之外。 然后,当悬停在行的可见一半上时,边距会恢复并显示行内容的另一半。

为了向您展示这是如何完成的,我将使用 Plumber Layout Pack 中的 Plumber Services Page。 将管道工服务布局加载到页面后,向下滚动到带有“10% 折扣”的大型促销优惠的部分。 这是一个两列的行,第 1 列中包含大型促销文本,第 2 列中包含有关促销的更多信息。我们要做的是默认隐藏第 1 列中的信息,然后在悬停时显示该信息。

为此,请打开行设置并更新以下内容:

第 1 列背景颜色:rgba(12,113,195,0.16)
行对齐:右
自定义宽度:800px
天沟宽度:1

divi 边距和装订线

现在我们需要添加自定义边距设置来获得悬停效果。 由于我们使用的是排水沟宽度 1,我们需要在第 1 列添加一些填充。更新以下内容:

自定义边距(桌面):-400px 右
第 2 列自定义填充:左 2vw,右 2vw

由于我们的行宽是 800px,我们想要隐藏 400px(行的一半)。 这就是为什么我们将右边距设置为-400px。

divi 边距和装订线

自定义边距(悬停):0px 右
自定义边距(平板电脑):0px 右

通过在悬停时将右边距设置回 0px,整行变得可见!

divi 边距和装订线

这是最终结果。

divi 边距和装订线

整个行在移动设备上变得可见。

divi 边距和装订线

更多灵感

在我们的预制布局中有大量使用边距和装订线值的独特样式示例。 我已经在这篇文章中介绍了其中一些元素。

如果您想要更多类似这样的教程,请查看我们博客中的以下帖子:

最后的想法

我希望这篇文章有助于指出一些使用自定义边距和装订线值的简单但独特的设计。 而且,我相信,一旦您对这些开箱即用的设计技术更加熟悉,您会惊讶于制作自己独特的布局是多么容易。

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

干杯!

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