WordPress divi主题

如何使用变换选项在 Divi 中设计独特的部分分隔线背景

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

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

Divi 的内置分区分隔线样式一直是向页面添加创意背景设计的流行(且简单)方式。 它不仅提供了一种快速而美观的方式来分解页面内容,它还可以添加抽象的背景纹理来使您的网站与众不同。 随着 Divi 变换选项的发布,您可以使用这些部分分隔符做更多很酷的事情。

google广告开户

在本教程中,我将向您展示如何使用转换选项在 Divi 中设计独特的部分分隔线背景。

让我们开始吧。

抢先看

这是您将能够在本教程中构建的设计的预览。

divi 部分分隔线背景

divi 部分分隔线背景

divi 部分分隔线背景

divi 部分分隔线背景

divi 部分分隔线背景

divi 部分分隔线背景

WordPress divi主题

免费下载部分分隔线背景示例布局

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

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

现在让我们进入教程吧?

入门

要开始使用本教程,您只需要 Divi 主题和用于示例内容的图像。 我们将从头开始构建设计。 您需要做的就是创建一个新页面并在前端部署 Divi 构建器。 然后你准备好了。

使用部分分隔线创建抽象形状背景

divi 部分分隔线背景

第一个示例是为您的内容创建一些抽象形状背景的非常酷的方法。 基本上,这涉及使用分隔线自定义一个空白部分,并将该部分分隔线放置在页面上其他内容后面的任何位置。

这是如何做到的。

创建内容部分

在我们开始向页面添加部分分隔符之前,让我们首先添加一些示例内容。 创建一个具有两列行的新常规部分。

divi 部分分隔线背景

添加文本模块

然后使用以下模拟内容将文本模块添加到第 1 列:

fiverr建站WordPress程序员
<h2>About Divi Meetups</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>

然后更新设计如下:

文字文字大小:16px
文字行高:1.9em
标题 2 字体:Roboto
标题 2 字体粗细:Light
标题 2 文字大小:50 像素(桌面)、40 像素(平板电脑)、32 像素(手机)
标题 2 行高:1.4em

divi 部分分隔线背景

添加图像模块

接下来将图像模块添加到第 2 列并上传您要显示的图像。 在此示例中,我使用了来自我们的布局包之一的 800 像素 x 1156 像素的图像。

divi 部分分隔线背景

独立站选品工具

然后调整图像的宽度和对齐方式如下:

宽度:80%(台式机)、70%(平板电脑)
模块对齐:左

divi 部分分隔线背景

将填充添加到第 1 列

有了我们的文本和图像,我们需要在第 1 列添加一些顶部填充以关闭我们的文本模块。 打开行设置并更新以下内容:

第 1 列自定义填充(桌面):顶部 250 像素
第 1 列自定义填充(平板电脑):顶部 50 像素

高质量外链购买

divi 部分分隔线背景

使用部分分隔线添加顶部

此时,我们已准备好添加我们的第一个分区分隔器设计。 为此,我们需要创建一个新部分。 所以继续创建一个新的常规部分(不要在该部分中添加列,因为我们不需要)并将其拖到包含我们的文本和图像的部分上方。

divi 部分分隔线背景

然后通过更新以下内容给出部分和透明背景以及顶部分隔线:

背景颜色:rgba(0,0,0,0)
顶部分隔线样式:见截图
分隔线颜色:rgba(120,168,193,0.45)
分隔线高度:500px(桌面)、400px(平板电脑)、300px(手机)

JasperAI 10000字免费额度试用

divi 部分分隔线背景

接下来,转到高级选项卡并将 Z 索引值设置为 1,以便它保持在其下方部分的上方。

divi 部分分隔线背景

然后更新节的大小和间距,如下所示:

宽度:500px(桌面)、400px(平板电脑)、320px(手机)
部分对齐:中心
自定义边距:-100px
自定义填充:顶部 100 像素,底部 100 像素

WordPress备份工具updrafplus

divi 部分分隔线背景

请注意,宽度等于我们之前添加的分隔线的高度(台式机为 500 像素,平板电脑为 400 像素,手机为 320 像素)。 这将为我们的分区分隔器提供完美的方形设计。 缩小宽度和分隔高度以针对平板电脑和手机进行调整也很重要,因为如果您不这样做,该部分将歪斜并破坏设计或导致浏览器视口溢出。

自定义填充只是为了给部分一些高度,这样我们就不必在以后调整转换转换值。

现在我们已经有了我们的部分设计,我们可以使用转换选项来定位和旋转部分分隔线在页面上的任何我们想要的位置。

更新以下内容:

变换平移 X 轴(桌面):-100%
变换平移 Y 轴(桌面):200%

变换平移 X 轴(平板电脑):-50%
变换平移 Y 轴(桌面):100%

divi 部分分隔线背景

变换旋转Z轴:-45度

divi 部分分隔线背景

复制和粘贴部分

我们将在页面中再添加一个分区分隔线设计。 但要抢占设计先机,请部署线框视图模式并复制顶部部分(使用部分分隔线样式)并将其粘贴到包含文本和图像的部分下方。

divi 部分分隔线背景

更新部分设置

然后更新自定义边距如下:

自定义边距:-100px 底部

divi 部分分隔线背景

接下来,我们可以使用 transform scale 选项缩小部分的大小,如下所示:

变换比例(X 和 Y 轴):50%

divi 部分分隔线背景

使用 transform translate,我们可以将部分向上和向右移动,如下所示:

变换平移 X 轴(桌面):-20%
变换平移 Y 轴(桌面):-100%

变换平移 X 轴(平板电脑):80%

变换平移 X 轴(平板电脑):30%

divi 部分分隔线背景

现在旋转部分如下:

变换旋转Z轴(桌面):225度

变换旋转Z轴(平板电脑):-225deg

divi 部分分隔线背景

最后结果

让我们看看最终结果。 注意这些部分是如何在平板电脑和手机上重新定位的,以获得漂亮的设计。

divi 部分分隔线背景

divi 部分分隔线背景

divi 部分分隔线背景

下面是一些使用相同布局的不同分隔线样式的示例。 随意尝试自己的不同风格和旋转。

divi 部分分隔线背景

divi 部分分隔线背景

创建水平剖面分隔线

divi 部分分隔线背景

Divi 的变换选项还允许我们旋转部分分隔器以创建水平部分分隔器设计。 这可以为您的页面内容提供独特的背景。

这是如何做到的。

使用模拟内容复制部分

对于此示例,我们可以使用为上面第一个示例创建的相同内容部分。 继续复制并粘贴页面底部的部分。

divi 部分分隔线背景

更新内容部分

接下来,打开重复部分的部分设置并更新以下内容:

自定义填充(桌面):顶部 80 像素,底部 80 像素
自定义填充(平板电脑):0px 顶部

divi 部分分隔线背景

创建水平截面分隔线

要创建水平部分分隔线,首先在内容部分的正上方创建一个新的常规部分。

divi 部分分隔线背景

然后更新以下内容:

背景颜色:rgba(0,0,0,0)
顶部分隔线样式:见截图
顶部分隔线颜色:rgba(120,168,193,0.45)
顶部分隔器高度:80vw
顶部分隔板翻转:垂直

divi 部分分隔线背景

为了确保我们可以看到下方部分顶部的部分分隔符,我们需要将 Z 索引更新为 1。

divi 部分分隔线背景

接下来我们需要给我们的部分一个自定义的宽度和间距,如下所示:

宽度:800 像素
部分对齐:左
自定义边距:-100px 顶部
自定义填充:顶部 100 像素,底部 100 像素

divi 部分分隔线背景

部分的宽度 (800px) 将成为部分的高度,一旦它旋转以用作水平部分分隔符。 因此,您可能需要根据下面部分中的内容量来调整此高度。

现在我们准备好使用变换选项来定位和旋转部分,如下所示:

变换平移 X 轴:-50%
变换平移 Y 轴:250%

divi 部分分隔线背景

变换旋转Z轴:-90度

divi 部分分隔线背景

最后结果

这是设计的最终结果。

divi 部分分隔线背景

divi 部分分隔线背景

这里还有一些使用相同布局的不同分隔线样式的示例。

divi 部分分隔线背景

divi 部分分隔线背景

包起来

关于如何为您的网站添加独特的设计,总是有更多想法的空间。 借助 Divi 的转换选项和易于设计的分区分隔线,您可以做一些非常有创意的事情。 希望本教程中的示例能够启发您创建一些分区分隔背景,从而为您的下一个项目带来全新的体验。

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

干杯!

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