WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧。

入门指南

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

简介模块布局

现在您可以开始了。

创建模糊布局设计#1

简介模块布局

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

创建第一行

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

简介模块布局

WordPress divi主题

添加文本模块并设置样式

在左侧的 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
宽度:500 像素
自定义边距(桌面):-70px
自定义边距(平板电脑):剩余 20 像素
自定义填充:顶部 20 像素,底部 20 像素

简介模块布局

更新部分填充

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

自定义填充:20vw 顶部

简介模块布局

更新第一行的设置

接下来,按如下方式更新行设置:

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

fiverr建站WordPress程序员

简介模块布局

添加第二行

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

简介模块布局

创建和样式化 Blurb 模块

现在是时候开始创建我们最终将使用变换控件定位的简介模块了。 在您创建的第一行(顶部)中添加一个简介模块第 2 列。

简介模块布局

独立站选品工具

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

简介模块布局

更新其余的简介设置,如下所示:

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

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

高质量外链购买
margin-bottom: 5px

简介模块布局

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

简介模块布局

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

现在我们准备好使用变换控件来定位和缩放简介,使其成为一个独特的设计。

首先,打开顶行第 2 列中的简介的简介设置,并更新变换控件,如下所示:

JasperAI 10000字免费额度试用

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

简介模块布局

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

简介模块布局

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

WordPress备份工具updrafplus

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

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

简介模块布局

然后,更新顶行第 4 列中的简介模块,如下所示:

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

变换平移 X 轴:33px
变换平移 Y 轴:-13px

简介模块布局

接下来,更新顶行第 3 列中的底部简介模块,如下所示:

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

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

简介模块布局

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

背景颜色:#ffffff

就是这样!

对于其他设计元素,您可以逐渐增加整个布局中使用的每个图标的圆形颜色的不透明度。

简介模块布局

移动调整

要调整平板电脑和手机显示器的宣传模块布局,我们可以简单地将转换效果设置回原始状态,以便宣传片恢复到原来的大小并很好地定位在列内。 为此,我们可以使用 Divi 的多选功能。 由于可能很难单击已使用转换属性定位的模块,因此现在是在构建器设置中启用网格模式的好时机。 这将允许您在其原始位置查看简介模块。 进入网格模式后,继续按住 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
宽度:500 像素

使用六列行创建模糊布局

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

简介模块布局

设置 Blurb 模块的样式

在第一列中,添加一个新的简介模块并更新设置,如下所示:

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

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

简介模块布局

为 Blurb 赋予白色背景色,如下所示:

背景颜色:#ffffff

然后更新设计设置:

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

简介模块布局

然后,给简介一个框阴影,如下所示:

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

最后,将旋转变换效果添加到简介模块:

变换旋转X轴:-3deg
变换旋转Y轴:-10度
变换旋转Z轴:31度

简介模块布局

这照顾了我们的第一个简介模块。

更新行设置

现在在我们开始复制我们的简介模块之前,我们需要更新行设置,如下所示:

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

这将有助于使用布局中的宣传语。

简介模块布局

复制和样式化其余的 Blubs

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

简介模块布局

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

圆圈颜色:#62de9d

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

转换 平移 Y 轴:-10%(确保在此处输入百分比值)

简介模块布局

接下来,更新第 3 列中的简介模块,如下所示:

圆圈颜色:#5e89fb

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

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

简介模块布局

更新第 4 列中的简介模块,如下所示:

圆圈颜色:#2a3fc9

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

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

简介模块布局

最后,更新第 5 列中的简介模块,如下所示:

圆圈颜色:#62de9d

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

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

简介模块布局

如您所见,每个简介将从左到右增加 20% 的大小。 变换转换百分比值可确保简介保持整齐排列。

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

将透视属性添加到每列

在 CSS 中,透视属性用于在 Z 空间中为 3D 定位的元素提供一些透视。 基本上,它定义了当用户查看屏幕时对象与用户的距离。 透视属性必须应用于具有 3D 位置的父容器,在本例中是我们的模糊模块。 因此,我们必须使用一小段 CSS 将透视图添加到每个列,如下所示。

将以下 CSS 添加到 5 列中的每一个的列主元素 CSS 框中,如下所示:

第 1 列主要元素:

perspective: 1000px

第 2 列主要元素:

perspective: 1000px

第 3 列主要元素:

perspective: 1000px

第 4 列主要元素:

perspective: 1000px

第 5 列主要元素:

perspective: 1000px

简介模块布局

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

这是没有透视的简介模块布局设计。

简介模块布局

在这里,它的视角已经到位。

简介模块布局

如果您想让简介看起来更靠近用户,您可以减小透视值。 例如,这就是在每列中添加“透视:400px”的宣传片的样子。

简介模块布局

向部分添加分隔线背景

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

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

简介模块布局

要调整平板电脑和手机显示的布局,您需要多选每个简介模块,并在平板电脑显示的元素设置中更新以下变换选项:

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

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

简介模块布局

最后结果

现在让我们看看简介模块布局的最终​​结果。

简介模块布局

简介模块布局

简介模块布局

最后的想法

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

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

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

干杯!

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