使用 Divi 的变换控件创建独特的 Blurb 模块布局

Divi 的 Transform 控件可以非常轻松地定位和设置页面元素的样式，以创建独特的布局。 Divi 的简介模块是在网站上展示项目的最常见元素之一。 所以，我想我会展示如何通过创建几个具有模糊模块的独特布局来使用这些变换效果。 当然，您可以使用边距和填充来完成类似的定位，但这个过程会更加复杂，而且没有那么有趣。 此外，变换控件允许您添加额外的样式来缩放和旋转您的简介，以获得更独特的设计。

在本教程中，我将向您展示如何使用 Divi 的变换控件以创造性的方式定位和旋转模糊。

让我们开始吧。

入门

对于本教程，您真正需要的只是 Divi。 要进行设置，请继续创建一个新页面。 给你的页面一个标题，并在前端部署Divi builder，从头开始构建一个页面。

现在您可以开始了。

创建 Blurb 布局设计 #1

在第一个布局设计中，我们将使用两个不同的行来构建我们的简介。 然后我们将使用 Divi Transform 选项来缩放和定位模糊模块以创建独特的模糊模块布局。

创建第一行

首先，创建一个常规部分，然后为该行添加以下列布局：1/2 1/6 1/6 1/6

添加文本模块并为其设置样式

在左侧的1/2列中，添加一个文本模块，内容如下：

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

然后更新以下设计设置：

背景颜色：#ffffff
宽度：500px
自定义边距（桌面）：-70px 左
自定义边距（平板电脑）：左 20 像素
自定义填充：顶部 20 像素，底部 20 像素

更新部分填充

接下来，我们需要为我们的部分添加一些填充。 打开部分设置并更新以下内容：

自定义填充：20vw 顶部

更新第一行的设置

接下来，按如下方式更新行设置：

天沟宽度：1
自定义填充：10vw 顶部，0px 底部
边框宽度：5px
边框颜色：#eeeeee

添加第二行

接下来在您刚刚自定义的行下添加另一行。 给它一个六列布局。

创建和设计 Blurb 模块

现在是时候开始创建我们最终将使用变换控件定位的模糊模块。 添加您创建的第一（顶）行的模糊模块第 2 列。

在简介设置中，删除内容并使用“服务”一词更新标题文本。 然后单击以使用图标而不是图像。 在这个例子中，我使用的是云图标。

更新其余的模糊设置，如下所示：

图标颜色：#ffffff
圆圈图标：是
圆圈颜色：#5e89fb
标题字体：Nunito
标题文本对齐：居中
标题文字大小：16px
自定义填充：1vw 顶部，1vw 底部，1vw 左，1vw 右

然后通过将以下 CSS 添加到高级选项卡下的 Blurb Image CSS 框来更新模糊图标下的默认边距：

margin-bottom: 5px

接下来，复制您刚刚创建的模糊模块并将其粘贴到每一列中，确保在顶行的第 3 列中有两个模糊模块，并且在第二行中将第 5 列和第 6 列留空。

添加变换效果以缩放和定位模糊

现在我们准备好使用变换控件来定位和缩放模糊到一个独特的设计。

首先，打开顶行第 2 列中的模糊设置并更新变换控件，如下所示：

变换比例 X 轴：242%
变换比例 Y 轴：242%

变换 平移 X 轴：-96px
变换 平移 Y 轴：-44px

接下来，更新第一行第 3 列顶部 Blurb 模块的设置，如下所示：

变换比例 X 轴：192%
变换比例 Y 轴：192%

变换 平移 X 轴：-70px
变换 平移 Y 轴：-13px

然后，更新顶行第 4 列中的模糊模块，如下所示：

变换比例 X 轴：158%
变换比例 Y 轴：158%

Transform Translate X 轴：33px
变换 平移 Y 轴：-13px

接下来，更新顶行第 3 列中的底部模糊模块，如下所示：

变换比例 X 轴：132%
变换比例 Y 轴：132%

变换 平移 X 轴：89px
变换 平移 Y 轴：39px

然后给它一个下面的背景颜色，为一个微妙的设计元素在行边框中创建一个中断：

背景颜色：#ffffff

就是这样！

对于额外的设计元素，您可以逐渐增加整个布局中使用的每个图标上圆圈颜色的不透明度。

移动调整

要调整平板电脑和手机显示器的导语模块布局，我们可以简单地将转换效果设置回原始状态，以便导语恢复其原始大小并很好地定位在列内。 为此，我们可以使用 Divi 的多选功能。 由于可能很难单击已使用 transform 属性定位的模块，因此现在是在构建器设置中启用网格模式的好时机。 这将允许您在原始位置看到模糊模块。 进入网格模式后，继续按住 ctrl 或 cmd，然后单击每个具有转换效果的模块。 然后单击所选任何模块的齿轮图标以打开元素设置模式。

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

变换比例 X 轴：100%
变换比例 Y 轴：100%

变换 平移 X 轴：0px
变换 平移 Y 轴：0px

这将恢复平板电脑和手机显示器上的原始位置和比例。

最后结果

这是最终的设计。

创建 Blurb 模块布局 #2

在下一个示例中，我将使用 Divi 的缩放、平移和旋转变换选项向您展示一个独特的模糊模块布局。 我还将添加一个额外的 CSS 片段，为每个简介添加透视图。 这是如何做到的。

创建标题

首先，添加一个具有一列行的新常规部分。 然后将文本模块添加到具有以下内容的行：

<h2>Our Process</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

然后更新其余的文本模块设置，如下所示：

标题 2 字体：Nunito
标题 2 字体粗细：半粗体
标题 2 文字大小：50px
标题 2 字母间距：7px
宽度：500px

使用六列行创建 Blurb 布局

这照顾了标题。 现在是时候为我们的模糊模块布局添加行了。 继续并在当前行的正下方创建一个具有六列布局的新行。

设置 Blurb 模块的样式

在第一列中，添加一个新的模糊模块并更新设置如下：

删除内容框中的正文，并使用“Step”一词更新标题文本。

然后单击以使用图标并选择圆形检查图标。

为 Blurb 设置白色背景色，如下所示：

背景颜色：#ffffff

然后更新设计设置：

图标颜色：#ffffff
圆圈图标：是
圆圈颜色：#3d0dad
标题字体：Nunito
标题字体粗细：粗体
标题字体样式：TT
标题文本对齐：居中
标题字母间距：4px

然后，给blurb一个盒子阴影，如下所示：

盒子阴影：见截图
阴影颜色：rgba(0,0,0,0.12)

最后，将旋转变换效果添加到模糊模块：

Transform 旋转 X 轴：-3deg
Transform 旋转 Y 轴：-10deg
Transform 旋转 Z 轴：31deg

这处理了我们的第一个模糊模块。

更新行设置

现在在我们开始复制我们的模糊模块之前，我们需要按如下方式更新行设置：

天沟宽度：2
自定义填充：11vw 顶部，0px 底部

这将有助于在布局中分隔宣传语。

复制和设计其余的 Blurbs

现在我们准备复制和自定义其余的简介。 继续复制第 1 列中的模糊模块并将其粘贴到除最后一列（第 6 列）之外的所有其余列中。 我们将第 6 列留空，以便为要向右移动的广告留出更多空间。

现在打开第 2 列中的模糊模块设置并更新以下内容：

圆圈颜色：#62de9d

变换比例 X 轴：120%
变换比例 Y 轴：120%

Transform Translate Y 轴：-10%（确保在此处输入百分比值）

接下来，更新第 3 列中的 blurb 模块，如下所示：

圆圈颜色：#5e89fb

变换比例 X 轴：140%
变换比例 Y 轴：140%

变换 平移 Y 轴：-20%
变换 平移 X 轴：10%

更新第 4 列中的模糊模块，如下所示：

圆圈颜色：#2a3fc9

变换比例 X 轴：160%
变换比例 Y 轴：160%

变换 平移 Y 轴：-30%
变换 平移 X 轴：30%

最后，更新第 5 列中的 blurb 模块，如下所示：

圆圈颜色：#62de9d

变换比例 X 轴：180%
变换比例 Y 轴：180%

变换 平移 Y 轴：-40%
变换 平移 X 轴：55%

正如您所看到的，每个模糊都会从左到右增加 20% 的大小。 并且变换翻译百分比值确保宣传语保持良好排列。

由于设计溢出到最后一列（第 6 列），我们将其留空。 但是，如果您增加行的大小，您始终可以在第 6 列中添加另一个简介。

将透视属性添加到每一列

在 CSS 中，perspective 属性用于在 Z-Space 中为 3D 定位元素提供一些透视。 基本上它定义了当用户看屏幕时对象离用户多远。 透视属性必须应用于具有 3D 位置的父容器，在这种情况下是我们的模糊模块。 因此，我们必须使用一小段 CSS 将透视图添加到每一列，如下所示。

将以下 CSS 添加到 5 列中的每一列的“列主要元素 CSS”框中，如下所示：

第 1 列主要元素：

perspective: 1000px

第 2 列主要元素：

perspective: 1000px

第 3 列主要元素：

perspective: 1000px

第 4 栏主要元素：

perspective: 1000px

第 5 列主要元素：

perspective: 1000px

在这种情况下，变化非常微妙，但我认为值得付出额外的努力。

这是没有透视图的模糊模块布局设计。

在这里，透视就到位了。

如果你想让模糊看起来更接近用户，你可以降低透视值。 例如，这就是每列添加“透视：400像素”后的模糊效果。

向该部分添加分隔线背景

为了使宣传语看起来像是站在一个表面上，我们可以为该部分添加一个分隔线背景。 打开部分设置并更新以下内容：

底部分隔线样式：见截图
底部分隔线颜色：#dddddd
底部分隔线高度：27vw
底部分隔线水平重复：0.8x
底部分隔线翻转：水平

要调整平板电脑和手机显示器的布局，您需要多选每个模糊模块并更新平板电脑显示器元素设置中的以下转换选项：

变换比例 X 轴：100%
变换比例 Y 轴：100%

变换 平移 Y 轴：0%
变换 平移 X 轴：0%

最后结果

现在让我们检查一下模糊模块布局的最终​​结果。

最后的想法

使用 Divi 的变换控件，您可以轻松地将简介模块放置在页面的精确区域中。 这使得为​​特色服务、流程步骤和无数其他用途试验和创建新的模糊模块布局变得很有趣。 我希望本教程能给您一些灵感，让您自己测试这些设计技术。

如需更多灵感，请查看这 5 个创意简介模块设计。

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

干杯!