您想改进您的博客文章吗？ Divi 通过添加一个英雄部分？
全屏英雄部分在任何网页上看起来都很棒，但它们在博客文章中尤其出色。
即使特色图像是全屏的，也有很多用于放置标题和元文本的设计选项。 这很容易做到 Divi 主题生成器 .
在本文中，我们将看到几种将全屏英雄部分添加到您的博客文章模板的方法。 迪维。
让我们开始。
概观
这是我们将在本教程中设计的内容的预览。
另请参阅： Divi：如何使用“渐变生成器”美化您的图像
带有帖子标题的英雄部分桌面版模块
具有帖子标题移动版模块的英雄部分
带有帖子标题桌面版模块的备用英雄部分布局
立即下载DIVI！！！
带有移动帖子标题模块的备用英雄部分布局
带有元数据的英雄部分桌面版
具有元数据移动版本的英雄部分
立即下载DIVI！！！
全屏英雄部分的博客文章模板
您可以在中创建博客文章模板 Divi 从头开始创建 Theme Builder 或从 Elegant Themes 博客下载模板。 要找到它们，请搜索博客 “免费博客文章模板”. 如果您下载了模板，请务必将其解压缩。
对于我们的示例，我们将使用 Divi 时装设计师布局包的免费博客帖子模板 。 我们还使用布局包 免费 页眉和页脚时装设计师 .
为全屏英雄部分下载或创建博客文章模板
您可以下载您的博文模板或从头开始创建一个。 我们将上传一个，但创建全屏英雄部分的过程是相同的。
也可以看看： Divi：如何为英雄部分使用蒙版和背景图案
方法一：全屏帖子标题模块
此方法将使用 帖子标题模块 . 如果您想将所有信息一起显示，这是一个不错的选择。 获得模板后，选择编辑图标将其打开。
我们上传的模板有一个包含特色图片的部分。 我们将删除此部分并添加一个 全角部分 在它的位置。
选择 全角帖子标题 在全宽模块列表中。
默认情况下选择所有项目。 启用它们。 滚动到 特色图片放置 并选择 以上标题.
- 特色图片放置：标题上方
滚动到 背景颜色 并将颜色设置为#fff9f2
- 背景：#fff9f2
标题文字
选择标签 设计。 对于标题文本，保留 H1 并选择 Playfair Display。 将其设置为左对齐并选择#34332e 作为颜色。
- 标题：
- 标题级别：H1
- 字体：Playfair Display
- 文字对齐：左对齐
- 文字颜色：#34332e
为 字体大小 ，设置桌面版为65px，移动版为42px，行高为1,2em。
- 标题文字大小（桌面）：65px（桌面），42px（手机）
- 标题行高度：1,2 em
元文本
滚动到 元文字. 选择 Montserrat 作为字体，并将其设置为中号、大写、桌面版右对齐和移动版左对齐。 颜色选择#7b7975。
- 元字体：
- 字体：蒙特塞拉特
- 体重：中等
- 款式：TT
- 元文本：
- 对齐方式：右（桌面），左（手机）
- 颜色：#7b7975
设置 字体大小 桌面版为 14 px，移动版为 10 px，字母间距为 1 px，行高为 1,6 em。 关闭您的设置并保存您的模板。
- 元文本：
- 大小（桌面）：14px
- 尺寸（手机）：10px
- 字母间距：1px
- 线高：1,6 em
背景图片上的标题
如果您决定要标题出现在特色图片上，请使用相同的设计设置并返回选项卡 内容.
选择 标题/元背景图片 为 特色图片放置.
- 特色图片放置：标题/元背景图片
滚动到 背景 并选择 背景渐变. 将左侧颜色设置为#fff9f2，将右侧颜色设置为 rgba(255,255,255,0)，将方向设置为 90 度，将起始位置设置为 30%，然后选择是将渐变放置在背景图像上方。 关闭并保存您的设置。
- 梯度停止：
- 30%：#fff9f2
- 100%：RGBA(255,255,255,0)
- 渐变方向：90 度
- 背景图像上方的方形渐变：是
方法 2：带元数据的全屏英雄部分
此方法将使用文本模块 动态内容 的信息。 如果您想在不同的地方显示所有项目，这是一个不错的选择。
首先，下载模板并删除第一部分。 我们将在左栏中重新创建模块及其设置，但我们将遍历它们以便您可以配置它们。
带元数据的全屏英雄部分设置
打开设置 部分 并滚动到 背景图。 选择 背景渐变 并按如下方式更改设置：
- 梯度停止：
- 30%：#fff9f2
- 100%：RGBA(255,255,255,0)
- 渐变方向：90度
- 背景图像上方的方形渐变：是
选择 背景图 然后选择选项 使用动态内容.
选择 特色图片 在选项中。
选择标签 设计并滚动到 尺寸. 将 100vh 添加到最小高度。 关闭部分设置。
- 最小高度：100vh
带元数据的全屏英雄部分设置
接下来，向该部分添加一个双列行。
添加一个 文本模块 在右列中。
为了他的 内容，sélectionnez 使用动态内容.
选择 帖子/档案标题 在选项列表中。
- 动态内容：帖子/存档标题
转到选项卡 设计。
- 标题：
- 文字：H1
- 字体：Playfair Display
- 文字对齐：左对齐
- 文字颜色：#34332e
对于大小 文本 ，将桌面版设置为 65px，将移动版设置为 42px，将行高设置为 1,2em。
- 标题：
- 文字大小：65px（桌面），42px（手机）
- 线高：1,2 em
滚动到 间距 并为顶部填充输入 50%。 关闭设置。
- 填充：50%（顶部）
您还可以阅读这篇文章： 如何使用 Divi 的全角标题模块创建英雄部分
具有元数据类别的英雄部分
添加新部分 常规在英雄部分下。
打开它的设置并设置 钻石颜色 #fff9f2 上的背景。 关闭设置。
- 背景颜色：#fff9f2
然后添加一个 线 4 列到新部分。
带有元数据类别文本的全屏英雄
添加一个 文本模块 在左栏中。
打开模块设置并选择 使用动态内容 对于正文。
选择 过去的类别 在列表中。
- 动态内容：帖子类别
选择标签 设计 并向下滚动到标题文本。 选择 H4。 字体选择Playfair Display，设置为中大写，桌面版右对齐，手机版左对齐。 颜色选择#7b7975。
- 标题：
- 文字显示
- 字体：Playfair Display
- 字体粗细：中等
- 款式：TT
- 文本对齐：居中
- 文字颜色：#7b7975
将桌面版的字体大小设置为 14 px，移动版的字体大小为 10 px，字母间距为 1 px，行高为 1,6 em。 关闭您的设置并保存您的模板。
- 标题 4：
- 大小（桌面）：14px
- 尺寸（手机）：10px
- 字母间距：1px
- 线高：1,6 em
滚动到 间距 并将 0px 添加到底部边距。 关闭设置。
- 边距（底部）：0px
带有元文本元数据的全屏英雄部分
接下来，复制类别模块并将其拖到下一列。 每个元模块都有相同的设置。 我们将展示如何创建第一个模块，然后将其复制两次以创建其他模块。
导演
打开设置并删除 内容 动态的。
点击 使用动态内容 然后选择 作者.
- 动态内容：文章作者
在选项卡中 设计, 更改以下设置。
- 标题 4：
- 字体：蒙特塞拉特
- 字体粗细：中等
- 款式：TT
- 文本对齐方式（桌面）：居中
- 文本对齐（电话）：左
- 颜色：#7b7975
参数表 字体大小 包括：
- 文字大小：14px（桌面），10px（手机）
- 字母间距：1px
- 线高：1,6 em
La 底边距 必须有 0px。
- 边距（底部）：0px
日期
复制 作者模块并将其拖到下一列。
删除它 内容 动态 当前，选择 使用动态内容 并选择 发布日期. 关闭设置。
- 动态内容：发布日期
评论
enfin， 复制 发布日期模块并将其拖到最后一列。
与其他模块一样，删除动态内容并选择 使用动态内容 .
选择 发表评论数 从你的选择。
- 动态内容：发表评论数
这次在字段中添加一个空格和单词 Comments 后 . 关闭小模态然后关闭设置。 保存您的工作。
- 之后：评论
Résultats
带有帖子标题的英雄部分桌面版模块
具有帖子标题移动版模块的英雄部分
带有帖子标题桌面版模块的备用英雄部分布局
带有移动帖子标题模块的备用英雄部分布局
带有元数据的英雄部分桌面版
具有移动版本元数据的英雄部分
立即下载DIVI！！！
结论
仅此而已！ 这是我们对如何将全屏英雄部分添加到您的博客文章模板的看法。 Divi.
模块 Divi 和主题生成器提供了多个用于创建全屏英雄部分的选项。 所有方法都非常有效并且都有其优点。
使用这些方法，您可以将全屏英雄部分添加到任何 Divi 博客文章模板。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
