您可以使用内置设置实现的 5 种创意 Divi 标题模块样式

已发表: 2019-01-06

开箱即用，Divi Header Module 只需进行少量调整即可创建引人注目的标题设计。这使它成为在 Divi 中为您的网站设计标题时非常流行的模块。通过一些开箱即用的思考，您可以仅使用内置设置（无自定义 CSS）创建一些真正独特的设计。因此，对于那些想要探索一些新标题设计的人，我将向您展示 5 种可能会激发您灵感的 Divi 标题模块样式。

享受！

5 种 Divi 标题模块样式的先睹为快

风格#1：抽象渐变

div 头模块

开始设计风格#1

风格#2：三重威胁

div 头模块
开始设计风格#2

风格 #3：圆形框架

div 头模块
开始设计风格 #3

风格 #4：混合左撇子

div 头模块
开始设计风格 #4

样式 #5：大缩放类型

div 头模块
开始设计风格 #5

您需要什么才能开始

首先，您需要 Divi 主题。我将使用 Divi Builder 在前端构建设计。您还需要一些图像来完成本教程。请记住，您始终可以导入预制布局的图像。事实上，在本教程中，我将使用来自 Cleaning Company Layout Pack、Business Coach Layout Pack 和 Web Freelancer Layout Pack 的图像。

让我们开始吧！

订阅我们的 YouTube 频道

风格 #1：抽象的 Gadient

div 头模块

第一个 Divi 标题模块设计是一种简单的多用途设计，以创造性的方式使用渐变背景。

首先，添加一个带有全角标题模块的新全角部分。

div 头模块

使用新标题和标题图像更新标题设置内容。

div 头模块

然后更新设计设置如下：

标题字体：Lato
标题文字大小：6vw
按钮一背景颜色：#0c71c3
按钮一边框宽度：0px
自定义填充：8vw 顶部，8vw 底部

div 头模块

在我们添加我们的部分背景之前，我们必须首先使标题模块背景透明并给它一个自定义渐变以在右下角创建我们的圆形。返回内容选项卡并更新背景如下：

背景颜色：rgba(255,255,255,0)
背景渐变左颜色：#0096eb
背景渐变右侧颜色：rgba(255,255,255,0)
渐变类型：径向
径向：右下
起始位置：25%
结束位置：0%

div 头模块

保存设置

接下来，我们需要将我们的背景设计添加到位于标题模块后面的部分。为此，请打开部分设置并更新以下内容：

背景渐变左颜色：#0096eb
背景渐变右颜色：#007ea1
渐变类型：径向
径向：左上角
起始位置：43%
结束位置：0%

设计提示：如果您正在寻找一些颜色来尝试自己的标题渐变，我建议您使用您可能正在使用的标题图像/图形中使用的颜色。

div 头模块

为了给我们的抽象背景添加另一个微妙的设计元素，我们可以添加一个顶部和底部的分隔线。为此，请转到设计选项卡并添加以下分隔线：

顶部分隔线样式：见截图
顶部分隔线颜色：rgba(150,210,210,0.2)
顶部分隔线高度：8vw
顶部分隔线水平重复：0.7x
顶部分隔线翻转：垂直

底部分隔线样式：见截图
底部分隔线颜色：rgba(150,210,210,0.2)
底部分隔线高度：10vw
底部分隔线水平重复：0.5x
底部分隔线翻转：垂直

div 头模块

就是这样！查看最终设计。

div 头模块

风格#2：三重威胁

div 头模块

下一个 divi 标题模块样式包括三个号召性用语，包括两个按钮和滚动到底部的图标。将按钮图标与滚动图标相匹配有助于设计的对称方面。部分分隔线创建了一个漂亮的抽象三角形设计，引导用户向下浏览页面。

创建一个带有全角标题的新全角部分。

然后更新标题、按钮 #1 链接文本和按钮 #2 链接文本的文本。

div 头模块

然后按如下方式更新设计的其余部分：

背景颜色：#1a1844
文字和标志方向：中心
图标：见截图
向下滚动图标大小：20px
标题字体：Lato
标题字体粗细：重
标题文字大小：5vw（桌面）、40px（平板电脑）、30px（智能手机）
标题行高度：1.3em
按钮二背景颜色：#fe4943
按钮二边框宽度：0px
按钮二图标：右箭头（见截图）
按钮一背景颜色：#fe4943
按钮一边框宽度：0px
按钮一图标：左箭头（见截图）
按钮一图标位置：左
自定义填充：顶部 10vw，左侧 10vw

div 头模块

现在我们要做的就是添加我们的部分分隔线来创建三角形背景设计。打开截面设置并更新以下设计设置：

顶部分隔线样式：见截图
顶部分隔线颜色：rgba(255,255,255,0.3)
顶部分隔线高度：45vw

顶部分隔线样式：见截图
顶部分隔线颜色：rgba(255,255,255,0.1)
顶部分隔线高度：45vw

div 头模块

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

div 头模块

额外设计提示：按钮的移动调整

我知道我说过没有自定义 CSS，但我认为你们中的一些人会喜欢这是一个不必要的额外繁荣。您可能会注意到，对于带有两个按钮的标题，第二个按钮的左边距与智能手机上的设计不符。为了在智能手机上实现更简洁的设计，您可以在页面设置中添加一段自定义 CSS，以使按钮具有相同的宽度并且没有第二个按钮边距。

在Divi Builder中打开页面设置并添加以下CSS

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

现在看看手机上的设计。

div 头模块

风格 #3：圆形框架

div 头模块

这种圆形的 divi 标题模块设计是构建背景图像和标题内容的好方法，可以让您更加关注行动号召。所需要的只是对标题的边框半径、框阴影和一些自定义间距进行一些调整。

首先，创建一个带有全角标题的新全角部分。

首先，让我们通过添加标题、按钮 #1 链接文本和徽标图像来更新标题的内容元素。

div 头模块

接下来添加一个足够大的背景图像，以跨越标题的高度和宽度。由于这将是一个圆形标题，请尝试使用具有相同高度和宽度的图像（例如 1000 像素 x 1000 像素）。

然后更新其余的设计设置，如下所示：

div 头模块

保存设置。

然后打开section设置添加背景颜色和间距如下：

背景颜色：#000000
自定义填充：5vw 顶部，5vw 底部

div 头模块

现在看看最终的设计。

div 头模块

混合左撇子

div 头模块

这种接头设计有一些独特的设计特点。标题模块实际上已调整大小并左对齐以显示部分背景图像的右半部分。并且头部模块内容具有混合效果，通过内容暴露背景图像。要做到这一点，您需要为您的部分提供正确类型的背景图像。通常，您会希望图像具有较暗的元素，以便混合内容更加可见。

让我们开始吧。

首先，创建一个带有全角标题的新全角部分。

在我们开始更新我们的标题样式之前，首先跳转到部分设置并添加以下背景：

添加背景图像，图像的焦点位于右侧。

背景渐变左颜色：rgba(0,0,0,0.54)
背景渐变右侧颜色：rgba(255,255,255,0)
梯度方向：90度
径向：右下
起始位置：50%
结束位置：0%
将渐变放在背景图像上方：是

渐变的目的是使图像的左侧更暗，这样当我们混合头模块内容时，它会更具可读性。此外，您现在将无法看到部分背景，因为默认标题背景颜色仍处于活动状态。我们接下来会改变它。

div 头模块

打开标题设置并使用标题、按钮 #1 链接文本和深色徽标更新内容。

div 头模块

现在将背景颜色更改为白色。

然后更新以下内容：

标题字体粗细：超粗
标题文字颜色：#000000
标题文字大小：8vw
标题行高度：1.1em
按钮一文字大小：2.7vw
按钮一文本颜色：#000000
按钮一边框宽度：0.2em
按钮一边框颜色：#edf000
字体粗细：超粗
宽度：50%（台式机、平板电脑和智能手机）
混合模式：屏幕

div 头模块

这是最终的设计。

div 头模块

样式 #5：大缩放类型

div 头模块

这种 Divi 标题模块设计引入了一种简单有效的方法来创建随浏览器窗口缩放的大文本，而不会影响设计。由于我们使用的是全角标题模块，因此我们需要稍微扩展我们的内容区域。然后我们需要使用 vw 长度单位来调整我们的文本大小。这种设计非常适合节标题。

首先，创建一个带有全角标题的新全角部分。

在全角标题设置中，更新以下内容：

标题：咨询
副标题文本：服务
按钮 #1 链接文本：立即开始

删除内容框中的默认文本。

然后添加一个浅色徽标图像。

div 头模块

接下来，我们将增加标题容器的默认最大宽度，以便为标题创建更多的水平空间。为此，请转到高级选项卡并在 Header Container 下添加以下 CSS：

width: 100% ;
max-width: 100% ;

div 头模块

现在更新其余的设计设置，如下所示：

添加背景图像。
文字和标志方向：中心
标题字体：Cuprum
标题字体粗细：粗体
标题字体样式：TT
标题文字颜色：#bfbfbf
标题文字尺寸：10vw
标题字母间距：0.1em
副标题字体： Cuprum
副标题文本对齐：右（这有助于将文本与字母间距居中）
副标题文字大小：3vw
副标题字母间距：7.8vw
按钮一边框宽度：0px
按钮一字体：Cuprum
按钮一图标：见截图

诀窍是对文本使用 vw 长度单位。然后调整副标题字母间距以尽可能与标题文本对齐。

div 头模块

为了最大化我们的水平间距，我们需要为我们的标题内容添加一个自定义宽度，如下所示：

内容宽度：80%；

即使这小于默认的 100%，更改设置将覆盖默认值并使用我们之前添加的自定义 css 进行调整。

最后，添加一个框阴影来完成设计：

盒子阴影：见截图
框阴影模糊强度：0px
框阴影传播强度：60px

div 头模块

现在看看最终的结果。

div 头模块

把它们变成全屏标题！

只需单击一下按钮，就可以轻松地将上述设计全屏显示。这是 fullwidth header 模块的一个强大功能。只需转到标题设计设置并选择“制作全屏”选项。

div 头模块

此外，您需要删除这些设计的自定义填充，以便标题完全适合浏览器窗口。

最后的想法

这些只是 Divi 接头模块可用的接头设计可能性中的一部分。尝试所有的设计设置会很有趣。如果有的话，我希望这些例子能为你的下一个项目提供一点灵感。

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

干杯!