Divi 标题类型、教程和免费赠品概述

已发表: 2020-11-20

自从 Divi 主题生成器问世以来,我们创建 Divi 标题的方式已经发生了最好的变化。 我们可以添加我们想要的任何元素,使用 Divi 的内置设计选项对其进行样式设置,并创建无缝响应的体验。 在过去的几个月中,我们一直在关注如何通过教程和免费赠品帮助您充分利用页眉设计。 在某些时候,浏览所有这些不同的标题类型、教程和免费赠品可能会变得有点混乱,这就是我们设置这篇文章的原因,您可以随时返回。 这篇文章将介绍您可以创建的不同标题类型,其中还包括一个免费下载文件。 除了免费下载,您还可以获得分步教程,帮助您了解您正在创建的内容以及如何调整内容以满足您自己的需求。

这篇文章的第二部分重点介绍了 Divi 社区中经常被问到的一些技巧和窍门,我们向您展示了如何解决某个问题或实现设计而不必浪费时间试图自己弄清楚。 最后但并非最不重要的一点是,我们列出了您可以立即下载和使用的所有标题免费赠品。

发现标题类型
发现标题提示和技巧
发现标题免费赠品

标题类型

1. 常规标题

divi 标题教程

Divi Theme Builder 发布时在博客上出现的第一个标题类型教程是常规标题。 本教程侧重于熟悉 Divi Theme Builder 环境并构建全局标题。 我们添加了带有徽标、社交关注图标和按钮的顶部栏。 导航栏动态显示可以在 WordPress 网站后端设置的菜单项。

访问教程

2. 粘性标题

divi 标题教程

如果您也想设置一个具有粘性的标题,您需要熟悉这篇文章。 除了向您展示如何设置适当的标题结构(包括顶部栏)外,本教程还向您展示了如何使用 Divi 的内置粘性选项将标题变为粘性。 标题中元素的样式也会随着滚动而改变,这使标题具有全新的外观和感觉。

访问教程

3.全屏标题

divi 标题教程

当然,顶部标题栏并不是允许在您的网站上导航的唯一方法,因此接下来我们有一个全屏标题。 在本教程中,我们将向您展示如何使用 Divi 构建一个完整的自定义全屏标题。 菜单中的所有项目都是模块,单击功能由教程和下载文件中包含的一些 JQuery 代码启用。 使用这种类似方法的一些免费赠品是:

  1. 公关公司页眉和页脚模板模板
  2. 意大利餐厅页眉和页脚模板
  3. 自由作家页眉和页脚模板
  4. 财务顾问页眉和页脚模板

访问教程

4. 滑入式标题

divi 标题教程

接下来,我们有一个从右侧滑入的标题。 本教程也是基于 Divi 的内置元素。 您可以在滑入式菜单中放置任何您想要的内容,并使用响应式选项创建一个完全响应式的环境。 单击功能通过教程中包含的一些自定义 JQuery 代码以及免费赠品模板 JSON 文件形成。

访问教程

5. 向下滑动推头

divi 标题教程

我们列表中的另一种很酷的标题类型是滑下推标题。 单击汉堡图标时,页眉从顶部向下滑动并将页面内容向下推。 这为所有屏幕尺寸提供了有趣而美丽的效果。

访问教程

6. 垂直导航

divi 标题教程

另一种为访问者提供轻松导航的方法是使用垂直导航栏。 如果您正在寻找一种在 Divi Theme Builder 中执行此操作的方法,请务必查看本教程。 垂直导航在浏览器中占据了自己的空间,从而缩小了页面内容的宽度并创建了一个漂亮的并排页面结构。

访问教程

7.透明浮动标题

divi 标题教程

如果您想在页面顶部添加标题或发布内容,本教程非常适合您! 我们使用具有三个不同元素的透明标题; 徽标、菜单和按钮。 这三个元素通过一个绝对的 CSS 位置放置在页面内容的顶部。 结果也是高度响应,并在您的网站上提供了很好的凝聚力。

访问教程

8.透明粘性标题

divi 标题教程

本教程与上一教程略有相似,但有一个很大的不同; 一旦访问者向下滚动页面或发布他们所在的页面,导航栏就会变得粘滞并改变样式。 这使您可以充分利用页面顶部的英雄部分设计,同时在访问者向下滚动时保持轻松导航。

访问教程

9. 旋转标题

divi 标题教程

如果您正在为您的网站寻找更开箱即用的设计,您可能需要考虑使用旋转的透明标题。 此标题类型放置在您网站的一侧,并在访问者访问您的网页的整个过程中跟踪他们。 它为您的桌面设计提供了更精致的外观和感觉,同时在较小的屏幕尺寸上保持轻松的顶部栏体验。

访问教程

10. 自定义电子商务下拉菜单

divi 标题教程

您的网站越大,就越难找到一种列出网站上所有页面的好方法。 这就是大型菜单派上用场的地方。 尽管您始终可以使用 Divi 的内置超级菜单,但如果您正在寻找一个更由 Divi 构建的环境,您可以在其中添加任意数量的模块,这就是适合您的教程。 特别是对于电子商务网站,它可以派上用场,以有吸引力和高度可视化的方式展示不同的产品类别。 虽然本教程是一种更“高级”的资源类型,但已经为您设置了代码基础,它可以让您在设计中获得任意创意。 请确保即使在本教程中使用模板 JSON 文件时,您也可以通过几个步骤来使这个超级菜单栩栩如生。

访问教程

11.自定义优雅主题的下拉菜单

divi 标题教程

自从Divi Theme Builder问世以来,人们一直在想如何创建优雅主题的无缝导航下拉菜单。 本教程重点向您展示如何在 Divi Theme Builder 中复制优雅的主题下拉菜单。 更重要的是,它允许您添加所需的任何类型的模块并创建自己独特的菜单变体。

访问教程

提示与技巧

在概述帖子的这一部分中,我们将以教程形式分享不同的提示和技巧。 这些帖子中的每一篇都包含 A 到 Z 的体验。 这意味着我们不仅会向您展示如何实现这一技巧,还会指导您完成整个头文件构建过程,从而为您提供选择; 您想将整个设计用于您自己的目的,还是只专注于特定的技巧和窍门。

1.在滚动上显示和隐藏标题

divi 标题教程

访问教程

2. 移动折叠嵌套菜单

divi 标题教程

访问教程

3. 动画你的全局标题

divi 标题教程

访问教程

4. 在您​​的标题中添加内联登录表单

divi 标题教程

访问教程

5. 在标题中添加两个并排的按钮

divi 标题教程

访问教程

6. 自动将页眉置于每个页面的第一部分下方

divi 标题教程

访问教程

7. 在您的标题中添加下拉联系表

divi 标题教程

访问教程

8. 在滚动时交换标题

divi 标题教程

访问教程

9. 优化 Divi 的菜单模块,提供 5 个全局预设

divi 标题教程

访问教程

10. 在标题内的菜单项中添加角标签

divi 标题教程

访问教程

11.在标题中添加和动画你的SVG标志

divi 标题教程

访问教程

12. 将您的页眉和页面与 Divi 部分分隔线混合

divi 标题教程

访问教程

13. 在标题中添加动态网站标题和标语

divi 标题教程

访问教程

14. 使用全局预设优化您的 Divi 站点的徽标

divi 标题教程

访问教程

15.在标题中添加固定的“最新剧集”音频栏

divi 标题教程

访问教程

16. 在你的标题 CTA 中添加延迟按钮动画

divi 标题教程

访问教程

17. 更改滚动条上的粘性徽标

divi 标题教程

访问教程

标题免费赠品

最后但并非最不重要的一点是,我们还列出了您可以在 Elegant Themes 博客上找到的不同标题免费赠品。 标题免费赠品设计计划始于我们在 2019 年 12 月分享的第一个主题构建器包,但这还不止于此。 我们一直并将继续分享与 Divi 布局包匹配的免费页眉和页脚免费赠品。 尽管该样式主要基于所讨论的布局包,但它们也可以轻松用于其他网站。

1. 主题生成器包

主题生成器包 #1

divi 标题教程

访问教程

主题生成器包 #2

divi 标题教程

访问教程

主题生成器包 #3

divi 标题教程

访问教程

主题生成器包 #4

divi 标题教程

访问教程

主题生成器包 #5

divi 标题教程

访问教程

主题生成器包 #6

divi 标题教程

访问教程

2. 布局包页眉和页脚免费赠品

意大利餐厅布局包

访问教程

虚拟助手布局包

访问教程

联合办公空间布局包

访问教程

窗户清洁布局包

访问教程

塔罗牌布局包

访问教程

画家布局包

divi 标题教程

访问教程

宠物用品布局包

访问教程

美容产品布局包

访问教程

烹饪学校布局包

访问教程

香水布局包

访问教程

寿司餐厅布局包

访问教程

草药疗法布局包

访问教程

装修布局包

访问教程

机器人布局包

访问教程

整体治疗师布局包

访问教程

香料店布局包

访问教程

室内装潢布局包

访问教程

公关公司布局包

访问教程

健身教练布局包

访问教程

婚礼摄影师布局包

访问教程

营养师布局包

访问教程

自由作家布局包

访问教程

解释器布局包

访问教程

财务顾问布局包

访问教程

美甲沙龙布局包

访问教程

影响者布局包

访问教程

皮革公司布局包

访问教程

针灸布局包

divi 标题教程

访问教程

3. 其他

最小的页眉和页脚组合

访问教程

在我们的博客上搜索新标题

我们会定期在我们的博客上发布新的标题免费赠品和教程。 我们会一直更新这篇文章,但是如果您想了解最新的内容,请随时使用“标题”和“菜单”等关键字搜索博客搜索栏!

最后的想法

在这篇文章中,我们清楚地概述了您可以在我们的博客上找到的 Divi 标头类型、教程和免费赠品! 这篇文章希望能帮助您在开始新项目之前设置标题的基础。 您可以决定要创建的标头类型,转到向您展示如何操作的博客文章或下载 JSON 文件以准备好所有内容! 我们还分享了一些适用于您的标题的技巧和窍门,希望它们能帮助您快速解决问题并专注于真正重要的事情:拥有一个您心目中的均衡网站。 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件时事通讯和 YouTube 频道,这样您将永远是第一批了解此免费内容并从中受益的人之一。