河东建设网站：Divi中断续网格布局设计的秘密

2019.05.30 河东建设网站

河东建设网站设计破格布局是网页设计的一种现代趋势。更传统的网格布局倾向于通过将站点的所有内容整齐地组织在适当的位置来安全地运行。而且公平地说，所有的网站都依赖于这种类型的和谐网格所提供的结构。另一方面，打破网格设计是要打破网格的约束，通过页面上的分层和重叠元素来创建更吸引人的布局。

我们的许多Divi布局使用了破碎的网格设计元素。而且，使用Divi的预先制作的布局，把这个现代设计带到您自己的网站上可以是一个巨大的保护器，不仅为设计灵感，也为开发。但是，如果你还没有学会创造力背后的方法，你可能会错过一些先进的技术，可以提高你的设计技能。

因此，如果您有兴趣学习背后的秘密，打破网格设计使用Divi，这是你的帖子。我将向您介绍在我们的Divi布局中使用的6种设计技术，以优雅和创造性的方式抵消您的内容。

我们开始吧。

#1重叠元素

重叠是一个流行的设计趋势，它是许多Divi布局的共同特征。您可以通过拖动区段内容以重叠相邻的区段或行来垂直重叠内容，也可以水平地重叠内容以将内容拉到相邻的列中。这是一种很好的方式，可以将内容拉到标题中，使元素突出和/或引导用户下页，或者将那些图像和特征服务的信息重叠起来。

例

有关如何在标题中垂直重叠内容的一个很好的示例，招聘人员布局包使用此技术可以将大文本作为一个信息丰富的设计元素，以独特的方式补充页眉设计。

怎么做的

首先，在Header部分下添加一个新的区段，其自定义宽度为100%，以使其跨越该节的全部宽度。

在行内，将添加一个文本模块，其中包含要使用的文本。在本例中，添加了“Employeed”一词作为内容。然后，使用VW长度单元给出文本的自定义文本大小。这对于使用浏览器窗口的宽度来缩放字母非常重要，这样大型文本就不会在较小的浏览器上中断到另一行。

在本例中，文本的文本大小为27 vw。由于1vw相对于浏览器宽度的1/100，因此将文本大小设置为27 vw意味着每个字母将为浏览器窗口宽度的27/100(或27%)。这不是一个精确的科学，因为每个字母在网络字体的宽度可能会有所不同，所以你可能需要调整宽度，以使它正确。

为了偏移文本，使其与上面的标题重叠，在文本模块中添加一个负的顶边距值(-14 vw)。此外，一个负的左边距值(-2%)被添加到文本模块中，以将文本拉到页面的左边。

注意，VW长度单元用于上边距，%长度单元用于左边距。在这种情况下，%和VW长度单元都可以实现非常相似的结果。例如，您可以使用-14%的上边距和-2vw的左边距，这样就可以得到基本相同的结果。但是，通常情况下，您将希望避免将百分比用于顶部和底部边距，因为百分比基于包含元素的宽度，并且在调整浏览器导致设计不一致时，会导致内容上下移动(而不是停留在位置)。它也是常见的使用像素的顶部和底部的边距以及。这将确保准确和一致的垂直放置在所有浏览器上。

对于左右边距，一般倾向于使用%，因为所有Divi节、行、模块都是基于百分比宽度的。

#2为行和节添加自定义大小

在Divi中引入破碎网格设计的另一种方法是调整区段和行的大小。通常，节跨越整个页的宽度，行以该节为中心。通过调整区段大小，可以独特的方式抵消内容。这可以通过向节或行添加自定义大小(最大宽度)来完成。然后，您可以将它们对齐到页面的左或右。

这方面的一个很好的例子可以在马拉松布局包中找到。查看应用程序页面布局它有一个紫色的渐变背景，在右边的列中有一个偏移图像。在本例中，布局使用百分比长度单位以偏移和对称的方式对元素进行空间。请注意，文本与紫色背景的中心排列在一起，图像在右边的空白空间中间重叠。

怎么做的

让我们来看看这个设计是如何完成的。

首先，该节的自定义宽度为80%。

接下来，还为行提供了80%的自定义宽度。因为百分比长度单位相对于父元素(包含)。行将是区段宽度的80%(即页面容器的80%)。

要抵消该行，只需添加一个-12%的右边距，以将该行拉到节的右侧。注意文本是如何在紫色部分的中心对齐的，图像是在曝光的白色内容区域的一半重叠的。这是一个很好的方式来抵消你的内容，以创造一个独特的布局和外观令人赏心悦目。

内容区域背景

河东建设网站该部分右侧的白色区域实际上是默认内容区域背景的颜色。可以在“常规设置”>“背景”下更改主题自定义程序中所有页面的此默认设置。

如果只想更改正在编辑的当前页的内容区域背景色，则可以从可视化生成器转到页面设置，并更改内容区域背景色选项。

如果您的布局在整个节中使用不同的背景色，允许您的内容区域背景色与其他部分的背景色相匹配，这将非常有用。

这个医生办公室布局包还使用此技术来偏移标头部分以及自定义边框设计。

#3使用边界来偏移节和行

将左边框或右边框添加到节、行或模块中，对于以创造性的方式抵消内容可能很有用。因为Divi决定箱形上浆使用边框css属性，行的宽度将包含在元素的框中。因此，如果将左边框添加到节(或框)，则该节的内容将向右移动以适应行。这就是抵消效应的实现方式。

例

使用边框来偏移元素的一个很好的示例可以在律师事务所布局包。在登陆页面布局上，您可以看到每个部分都有一个边框来抵消内容。

怎么做的

这种设计技术非常简单。请查看登陆页布局第二部分的设置：

边框样式：右边框
右边框宽度：8vw
右边框颜色：RGBA(255，186，96，0.6)
右边框风格：实心

注意，边框为8vw(视口宽度的8/100)。这将确保边界与您的浏览器很好地缩放。您也可以设置一个百分比单位(8%将是8%的宽度)，为非常类似的缩放。

#4使用方框阴影创建偏移背景

箱体阴影可以用于创造性的设计元素，而不是传统的“阴影”效果。事实上，这是一种添加偏移背景的好方法，而不必使用自定义边距将元素垂直或水平移动。

示例1

这方面的一个很好的例子可以在SEO代理案例研究布局。请注意标题部分中的图像是如何移动到下面一节的。实际上，这种效果是使用框阴影实现的。您实际看到的是与下面部分的背景色相匹配的白色框影。

怎么做的

查看部分设置，以便了解如何应用此框阴影：

框影水平位置：0 px
框影垂直位置：-220 px(在行内将其放大220 px)
盒影模糊强度：0 px
盒影扩展强度：0 px
阴影颜色：#ffffff(此颜色应与下面部分的背景相匹配)
框影位置：内部阴影(这确保阴影在行内移动)

这里的关键是利用具有负垂直位置的内部阴影位置(因此阴影从该部分的底部出现)。垂直位置值(-220 px)决定了设计有多少重叠。

例2

您还可以不同的方式定位方框阴影，以创建偏移的背景块。这是我最喜欢的设计技巧之一。这方面的一个很好的例子可以在室内设计公司登陆页面布局

怎么做的

您可能想知道这个深色块是如何出现在页面标题的右上角的。它实际上是那个顶部区域的行的一个盒子阴影。框影的“框”被移动到右上角，使其大部分隐藏在视图之外。我们只能看到盒子的左下角。因此，您有一个很好的装饰框，覆盖部分背景图像，并创建一个良好的破碎网格效果。

为了更好地理解这个概念，让我们看看创建此框阴影所需的行设置。

框影水平位置：900 px(向右移动900 px)
框影垂直位置：-500 px(电影上升500 px)
盒影扩展强度：80 px(在盒周围增加80 px的阴影)
阴影颜色：#1a1a1a(这是方框的颜色)
框影位置：外部阴影(这确保阴影在行外移动)

有关这个概念的更多信息，请看一些“框外”如何使用框影的示例.

#5使用列背景和自定义边距来抵消内容

另一种偏移内容的方法是设置列背景色，然后使用自定义边距来调整列内的模块。这是一种独特的图像框架方式。

例

这方面的一个例子可以在时尚布局包中找到。在时尚登陆页面布局，请注意标题下方的部分，标题为“关于我们”。右列具有渐变背景色，其图像模块使用自定义边距进行偏移。

怎么做的

要创建此设计，首先需要添加列2的背景渐变颜色。

之后，您可以通过提供一些自定义边距来移动驻留在该列中的图像模块。对于此示例，添加了以下自定义边距：

自定义页边距：-40 px顶部，40 px底部，-40 px左，40 px右

注意，顶部的负边距值(-40 px)也有一个额外的正的底边距值(40 Px)，而左负边距值(-40 px)也有一个互补的正边距值(40 Px)。这是因为您的列的大小是基于它包含的内容的大小。简单地向上或向左移动负边距不会创建所需的间距，以便在图像的右侧和底部暴露列背景。您需要使用额外的正边距(或填充)来创建这个空间。

使用此技术而不是创建框影来创建偏移背景的最佳原因之一是创建梯度背景和图像的能力。方框阴影更多地限制在一个单一的颜色背景。