WordPress divi主题

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

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

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

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

google广告开户

享受!

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

风格#1:抽象渐变

divi头模块

开始设计风格#1

风格#2:三重威胁

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

风格#3:圆形框架

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

风格#4:混合左撇子

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

风格#5:大型缩放类型

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

你需要什么开始

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

让我们开始吧!

WordPress divi主题

订阅我们的 Youtube 频道

风格#1:抽象的Gadient

divi头模块

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

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

divi头模块

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

divi头模块

然后更新设计设置如下:

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

fiverr建站WordPress程序员

divi头模块

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

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

divi头模块

保存设置

独立站选品工具

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

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

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

divi头模块

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

高质量外链购买

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

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

divi头模块

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

divi头模块

JasperAI 10000字免费额度试用

divi头模块

风格#2:三重威胁

divi头模块

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

使用全角标题创建一个新的全角部分。

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

WordPress备份工具updrafplus

divi头模块

然后更新设计的其余部分,如下所示:

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

divi头模块

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

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

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

divi头模块

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

divi头模块

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

我知道我说过不要自定义 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;    
  }
}

现在看看手机上的设计。

divi头模块

风格#3:圆形框架

divi头模块

这种圆形的 divi 标题模块设计是一种很好的方式来构建您的背景图像和标题内容,从而更加关注您的号召性用语。 只需对标题的边框半径、框阴影和一些自定义间距进行一些调整。

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

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

divi头模块

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

然后更新其余的设计设置,如下所示:

divi头模块

保存设置。

然后打开部分设置添加背景颜色和间距如下:

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

divi头模块

现在查看最终设计。

divi头模块

divi头模块

divi头模块

混合左撇子

divi头模块

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

让我们开始吧。

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

在我们开始更新标题样式之前,请先跳到部分设置并添加以下背景:

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

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

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

divi头模块

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

divi头模块

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

然后更新以下内容:

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

divi头模块

这是最终的设计。

divi头模块

divi头模块

风格#5:大型缩放类型

divi头模块

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

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

在全角标题设置中,更新以下内容:

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

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

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

divi头模块

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

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

divi头模块

现在更新其余的设计设置,如下所示:

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

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

divi头模块

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

内容宽度:80%;

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

最后,添加一个盒子阴影来完成设计:

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

divi头模块

现在查看最终结果。

divi头模块

divi头模块

把它们变成全屏标题!

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

divi头模块

此外,您还需要 取出自定义填充 对于这些设计,以使标题完美地适合浏览器窗口。

最后的想法

这些只是 Divi Header Module 提供的一些接头设计可能性。 尝试所有的设计设置会很有趣。 如果有的话,我希望这些示例能为您的下一个项目提供一点启发。

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

干杯!

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