WordPress divi主题

如何为独特的断网设计错开 Divi 列和模块

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

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

现代网页设计仍然是关于打破网格。 这是通过在打破网格布局的正常结构的位置错开元素和设计重点来完成的。 你可以看到我们在我们很棒的 Divi 布局中应用了很多这些破碎的网格设计。 通常,这涉及到将模块移到列或行之外,以便它们延伸到容器之外或与页面上的其他元素重叠。 但是您可能没有想过移动实际的列。

google广告开户

在本教程中,我将向您展示如何错开 Divi 列和模块以实现独特的断网设计。 使用 Divi 的新列选项,您可以轻松地移动列以及它们包含的模块。 这使您可以设计具有独特风格的模块和列,以实现创造性的破碎网格设计。

让我们开始吧!

抢先看

这是我们将在本教程中构建的设计示例的快速浏览。

错开divi列和模块

错开divi列和模块

错开divi列和模块

免费下载 Stagger Divi 列和模块布局

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

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

让我们来看看教程好吗?

WordPress divi主题

基本思想解释

如何错开 Divi 列和模块以实现独特的断开网格设计的基本思想涉及使用 Divi 的 transform translate 属性来定位列和它们包含的模块。

错开divi列和模块

一旦元素交错,您就拥有了列和模块的所有设计功能,可以添加设计重点,从而创建独特的破碎网格设计。

错开divi列和模块

因此,例如,您可以为您的列添加一个独特的背景(颜色、图像等),并为您的列添加一个完全不同的背景和框阴影。

错开divi列和模块

现在您已经有了基本的想法,让我们从头开始创建设计。

你需要什么开始

要开始,您需要具备以下条件:

  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 用于模拟内容的几个图像

之后,您将有一个空白画布开始在 Divi 中进行设计。

错开列和模块以在 Divi 中创建独特的断网设计

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

fiverr建站WordPress程序员

错开divi列和模块

然后在第 1 列中添加号召性用语模块。

错开divi列和模块

将标题文本更改为“Divi Module”或您选择的另一个短标题。

然后用深色背景颜色更新模块,然后按如下方式更改标题文本:

独立站选品工具

背景颜色:#333333
文字对齐:左
标题字体:苦涩
标题文字大小:50px
标题字母间距:2px

错开divi列和模块

然后更新号召性用语模块按钮,如下所示:

按钮文字大小:16px
按钮文字颜色:#333333
按钮背景颜色:
按钮边框颜色:#ffffff
按钮边框半径:25px
按钮字母间距:2px
按钮字体:Raleway
按钮字体粗细:粗体
按钮字体样式:TT

错开divi列和模块

高质量外链购买

接下来,复制模块并将副本粘贴到第 2 列中,以便在每一列中都有相同的号召性用语模块。

错开divi列和模块

更新行间距

现在让我们为该行添加一些顶部和底部边距,以便为设计腾出空间。

保证金:20% 顶部,20% 底部

错开divi列和模块

JasperAI 10000字免费额度试用

添加列背景图像

尽管我们还不能看到它们,但我们将为每一列添加背景图像。 一旦我们使用转换转换将我们的模块移到列容器之外,它们就会变得可见。

继续打开第 1 列的设置并添加背景图像。

错开divi列和模块

然后打开第 2 列的设置并添加背景图像。

错开divi列和模块

WordPress备份工具updrafplus

为每一列添加一个盒子阴影

打开第 1 列设置并添加以下框阴影:

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:0px
盒子阴影传播强度:100px
阴影颜色:rgba(151,178,193,0.21)

错开divi列和模块

然后将相同的框阴影样式添加到第 2 列。为了加快速度,您可以使用右键单击选项复制第 1 列中的框阴影样式,然后将它们粘贴到第 2 列中的框阴影样式中。

错开divi列和模块

你会注意到盒子阴影会重叠。 使用半透明的盒子阴影颜色将有助于创建很酷的重叠效果。 这是在设计中使用盒子阴影的好处。 与边框不同,您可以添加看起来像边框的大阴影,但它们不会影响布局的实际间距。

使用 Transform Translate 错开 Divi 列

至此,我们准备开始错开列和模块,以完成断网设计。 首先,我们需要将列移动到页面的外边缘。 然后我们可以稍后将模块移向中心。

错开第 1 列

打开第 1 列设置并添加以下转换转换属性。

变换平移 X 轴:25%
变换平移 Y 轴:-25%(台式机),-5%(平板电脑)

错开divi列和模块

错开第 2 列

对于第 2 列,添加以下转换转换属性。

变换平移 X 轴:-25%
变换平移 Y 轴:25%(台式机)、5%(平板电脑)

错开divi列和模块

使用 Transform Translate 错开模块

现在我们准备通过将模块移出列容器来错开我们的模块。 这将暴露列背景图像,并允许我们为模块添加另一个框阴影,以获得额外的重叠设计元素。

交错模块 1

打开第 1 列中号召性用语模块的设置并更新以下内容:

变换平移 X 轴:-60%
变换平移 Y 轴:50%(台式机)、10%(平板电脑)

错开divi列和模块

为模块 1 添加一个盒子阴影

然后将以下框阴影添加到第 1 列的号召性用语模块中:

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:0px
盒子阴影传播强度:100px
阴影颜色:rgba(151,178,193,0.21)

错开divi列和模块

交错模块 2

要移动第 2 列中的模块,请更新以下内容:

变换平移 X 轴:60%
转换 Y 轴:-50%(桌面),-10%(平板)

错开divi列和模块

向模块 2 添加盒子阴影

接下来,我们可以在第 2 列中的号召性用语模块中添加一个盒子阴影。我们需要使这个盒子阴影几乎完全透明,因为它将与模块​​ 1 重叠,并且我们不想让内容难以阅读。

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:0px
盒子阴影传播强度:100px
阴影颜色:rgba(151,178,193,0.09)

错开divi列和模块

添加行框阴影框

为了完成设计,让我们在行中添加一个框阴影,作为位于背景中的框架设计元素。

盒子阴影:见截图
盒子阴影垂直位置:0px
阴影颜色:#97b2c1

错开divi列和模块

最终设计

现在让我们看看最终的设计。

桌面

错开divi列和模块

药片

错开divi列和模块

电话

错开divi列和模块

尝试不同的设计

这种设计的酷炫之处在于,它允许您轻松更改新设计的模块数量、颜色和间距。 您还可以在不同位置错开 Divi 列和模块。

为模块添加间距以创建与模块相同大小的列背景图像

因为列的大小是由它所包含的内容的大小决定的,所以无论你添加到模块中的任何空间都会增加列的大小。 由于我们的专栏与背景图像交错,这是一种让背景图像始终随模块大小缩放以实现平衡设计的简单方法。

例如,打开第 1 列中号召性用语模块的设置并更新填充,如下所示:

填充:顶部 20%,底部 15%

并注意第 1 列背景图像如何随模块大小缩放。

错开divi列和模块

添加更多模块

以同样的方式为模块添加更多的填充会增加列背景的大小,在列中添加更多的模块也会增加列背景的大小。

例如,复制第 2 列中的模块,并注意背景图像如何扩展以容纳列中两个模块所需的空间。

错开divi列和模块

然后,您可以将第 2 列中的顶部模块向右移动一点,以获得不错的替代设计。

错开divi列和模块

这是结果。

错开divi列和模块

改变颜色

如果您希望将布局与您自己的配色方案相匹配,一个很好的方法是更新框阴影颜色。

这是更新第 1 列、模块 1 和模块 2 的半透明框阴影时的示例。

错开divi列和模块

最后的想法

我希望本教程能给您一些启发,让您了解如何错开 Divi 列和模块以创建自己独特的破碎网格设计。 该技术非常简单,主要涉及一些变换转换属性以交错列和模块以及一些框阴影以创建独特的破碎设计。 随意探索更多颜色选项并引入更多模块,看看设计可能会带你去哪里。

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

干杯!

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