如何在 Divi 中使用平行四边形创建时尚的标题设计

向您的页面添加时尚的新标题设计是让访问者惊叹的有效方式。 为您的标题设计独特的背景是一个很好的起点。 在本教程中，我将向您展示如何使用 Divi 以创造性的方式使用渐变背景将平行四边形添加到您的页眉设计中。 这为设计添加了一个很好的纹理元素，脱离了传统的盒子布局。

让我们开始吧。

抢先看

下面是我们将要构建的设计。

你需要什么

要创建此设计，您需要做以下主要工作：

1. 迪维主题
2. 室内设计公司关于页面布局（可从 Divi Builder 中获得）

设置页面

对于本教程，我将在新页面上使用室内设计公司关于页面布局。 转到您的 WordPress 仪表板并导航到页面 > 添加新。 然后为您的页面命名并单击以使用 Divi Builder。 然后单击按钮部署可视化构建器。 选择“选择预制布局”选项。 然后找到并选择室内设计布局包。 选择关于页面布局，然后最后单击“使用此布局”。

页面加载到页面后，您就可以开始编辑了。

取出部分的顶部填充并替换背景图像

这是简单的第一步。 您需要做的就是将鼠标悬停在页面顶部标题部分的顶部。 您将看到当前顶部填充设置为 10%。 只需将填充向下拖动到 0%。 或者您可以随时进入页面设置并将自定义顶部填充也设置为 0%。

此时您还可以更改背景图像，但这不是必需的。 为此，请转到部分设置并更改内容选项卡下的背景图像。 然后取出背景渐变。 这将有助于使文本（将是白色）在移动设备上更具可读性，因为会有一些文本与背景图像重叠。

调整行大小和填充

接下来，转到行设置并在“设计”选项卡下更新以下内容：

使用自定义宽度：是
自定义宽度：100%
自定义填充：0px 顶部，10vw 底部

向行和列添加渐变背景

为了创建这种时尚的设计，我们将使用不同的开始和停止位置重叠渐变背景。 首先，我们需要向行添加渐变背景，然后向列添加渐变背景。

转到内容选项卡下的行设置并更新以下内容：

背景渐变左颜色：#1a1a1a
背景渐变右侧颜色：rgba(255,255,255,0)
梯度方向：45度
起始位置：60%
结束位置：0%

第 1 列背景渐变左颜色：rgba(244,88,63,0.83)
第 1 列背景渐变右侧颜色：rgba(255,255,255,0)
柱梯度方向：45deg
列起始位置：66%
列结束位置：0%

我们添加到列中的橙色渐变将用于标题设计中的第一个平行四边形。 要创建平行四边形，我们需要缩短橙色渐变，左侧成 45 度角以匹配右侧。 我们将通过向号召性用语模块添加渐变来做到这一点。

调整号召性用语模块的文字大小和间距

在我们将背景渐变添加到号召性用语模块之前，让我们先拨入间距和文本样式。

转到号召性用语模块设置并更新“设计”选项卡下的以下内容：

文本方向：左
文字颜色：浅
标题文字大小：4.5vw（桌面），42px（平板）
按钮文字颜色：#1a1a1a
按钮背景颜色：#ffffff
宽度：100%
重置边距
自定义填充（桌面）：10vw 顶部，左 5%，右 45%
自定义填充（平板电脑）：38% 正确
自定义填充（智能手机）：5% 正确

现在我们可以将我们的背景渐变添加到我们的模块中。 要加快此过程，请转到行设置并右键单击并复制行的背景渐变。

然后转到号召性用语模块设置，在内容选项卡下，右键单击并将背景渐变粘贴到模块。 然后将起始位置调整到 47%。

如您所见，这为独特的设计元素创建了一个长角矩形重叠深色渐变背景的效果。

这将是一个很棒的设计，但让我们继续前进，通过添加一个额外的平行四边形重叠我们行的底部来获得更多创意。

使用空文本模块创建额外的平行四边形

标题设计的最后阶段的概念包括并排创建两个文本模块，每个模块都有一个自定义渐变，当组合时，显示一个“框”，左右边的角度相等。 为此，我们必须首先创建一个单列行来保存我们的文本模块。 然后我们可以调整模块的大小和位置以并排放置。

直接在包含我们在同一部分内的号召性用语模块的部分下添加一列行。

然后在左列添加一个文本模块，更新文本模块如下：

擦除内容框中的所有内容（我们将使用空文本模块）
背景渐变左颜色：rgba(255,255,255,0)
背景渐变右颜色：rgba(58,80,107,0.83)
梯度方向：45度
起始位置：50%
结束位置：0%

现在跳过设计选项卡并更新以下内容：

文本行高：0em（这将去掉任何不需要的间距）
宽度：50%
自定义边距：-8vw 顶部，0px 底部
自定义填充：8vw 顶部，8vw 底部

保存设置。

从可视化构建器中，复制模块并更新新模块的文本模块设置，如下所示：

将鼠标悬停在背景渐变预览上，然后单击“切换渐变”图标从左到右切换渐变颜色。

模块对齐：右
自定义边距：-16vw 顶部，0px 底部

保存设置。

现在我们已经对齐了我们的模块，我们可以调整行设置来定位我们的模块并调整它们的大小以适应设计。 打开行设置并更新以下内容：

行对齐方式：左
使用自定义宽度：是
自定义宽度：45%
自定义保证金：剩余 30%
自定义填充：0px 顶部，0px 底部

这样就可以了！ 查看最终结果。

这是在平板电脑和智能手机上。

最后的想法

我希望这种设计技术能给您一些灵感，让您了解如何使用 Divi 的渐变背景选项将一些光滑的平行四边形融入您自己的标题设计中。 而且，当然，这种设计不仅限于标题。 随意探索此设计适合您的新领域。 如需更多灵感，请查看一些可能对您有所帮助的破碎网格设计秘诀。

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

干杯!