Divi 帖子标题模块的 4 个令人惊叹的例子以及如何实现它们

已发表: 2019-01-13

对于所有 Divi 博主来说，他们正在寻找让人们与您的博客文章互动的新方式，Divi 帖子标题模块是一个很好的起点。帖子标题模块允许您以多种方式设置帖子标题（和特色图片）的样式，以实现无数令人惊叹的设计。这使您可以创建一些精美的文章，从第一眼就吸引潜在读者。今天，我将向您展示四种令人惊叹的方式，您可以通过这些方式来设置 Divi 帖子标题模块的样式，以帮助吸引读者。

让我们开始吧！

抢先看

这是本教程中介绍的帖子标题模块设计的快速浏览。

#1 抽象框架

开始建造#1

#2 重叠文本和特色图片

开始建造#2

#3 独特的内容背景以提高可读性

开始建造#3

#4 具有双重特色图像的堆叠效果

开始建造#4

入门

订阅我们的 YouTube 频道

对于本教程，您真正需要的只是 Divi。我们将创建新帖子并使用 Divi Builder 创建帖子标题设计。您还需要一些图像作为特色图像。

新帖子的设置

在本教程中，我将使用 Divi Builder 在新帖子上构建示例帖子标题设计。为了设置本教程中的构建，您需要执行以下操作：

创建一个新帖子。
为您的帖子添加标题。
在您的帖子中添加特色图片。
部署 Divi Builder。
选择从头开始构建
在 Divi 页面设置下，选择无侧边栏页面布局并选择隐藏帖子标题。
然后在前端点击Build或者在后端部署Desktop view模式，可以直观的设计页面。

divi 帖子标题模块

您是要为每个设计创建一个新帖子还是简单地将多个帖子标题设计添加到一个帖子，这取决于您。请记住，如果您在一个帖子中添加多个帖子标题，它们将继承相同的页面标题和特色图片。

#1 抽象框架

这种干净的帖子标题设计具有微妙的抽象框架元素，可以很好地配合您的特色图片和帖子标题。框架效果是使用一些自定义边框和框阴影样式创建的。

这是如何做到的。

确保按照本文开头所述设置新帖子（添加标题、特色图片、无侧边栏页面布局、隐藏默认帖子标题）。在您的帖子中添加一个包含一列行的新部分。然后将帖子标题模块添加到该行。

在帖子标题设置中，设置特色图片放置如下：

特色图片放置：标题上方

然后更新添加背景渐变，在模块的右下角添加一个小的抽象设计元素。

背景渐变左颜色：rgba(0,0,0,0.06)
背景渐变右颜色：rgba(0,0,0,0)
渐变类型：径向
径向：右下
起始位置：10%
结束位置：0%

divi 帖子标题模块

继续更新设计的其余部分，如下所示：

标题字体： Josefin Sans
标题文字对齐：右
标题文字大小：36px
标题行高度：1.7em（桌面），1.3em（平板电脑和智能手机）
元字体： Josefin Sans
元字体样式：TT
元文本对齐方式：左
元字母间距：2px
元线高度：2em
自定义保证金：-5vw 顶部
自定义填充：5vw 顶部，5vw 底部，5vw 左，5vw 右
右边框宽度：4px

divi 帖子标题模块

-5vw 边距将模块拉到行外，以使右边框位于我们将添加到行中的左边框上方。

现在让我们使用框阴影添加一个抽象的设计元素：

盒子阴影：见截图
框阴影水平位置：112px
框阴影垂直位置：85px
框阴影传播强度：-80px
阴影颜色：rgba(224,43,32,0.3)

divi 帖子标题模块

保存设置。

现在打开行设置以调整其大小并使用边框和框阴影创建框架设计的左侧。

自定义宽度：700px
右边框宽度：4px

divi 帖子标题模块

盒子阴影：见截图
框阴影水平位置：112px
框阴影垂直位置：85px
框阴影传播强度：-80px
阴影颜色：rgba(224,43,32,0.3)

divi 帖子标题模块

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

divi 帖子标题模块

#2 重叠文本和特色图片

创建一个有两列行的新部分。然后在左栏中添加一个图像模块。

divi 帖子标题模块

这将用作我们使用动态内容的特色图片。打开图片设置，删除模拟图片，点击图片预览框右上角的动态内容图标。然后从列表中选择特色图片以将特色图片添加到页面。

divi 帖子标题模块

现在将帖子标题模块添加到右列。通过将“显示特色图片”选项设置为“否”，打开设置并隐藏特色图片。

divi 帖子标题模块

然后为帖子标题模块添加背景渐变。

背景渐变左颜色：#ffffff
背景渐变右侧颜色：rgba(255,255,255,0)

一旦我们添加一些负边距以重叠图像，这将变得可见。

divi 帖子标题模块

更新设计的其余部分如下：

标题字体：Fira Sans Condensed
标题字体粗细：超轻
标题文字大小：80 像素（桌面）、70 像素（平板电脑）、45 像素（智能手机）
元字体：Fira Sans Condensed
元字体样式：TT
元文本对齐：右
元文本颜色：#cccccc
元字母间距：2px
自定义边距：剩余 -20%（桌面），0%（平板电脑和智能手机）
自定义填充：顶部 5vw，底部 5vw，左侧 30px

divi 帖子标题模块

现在让我们给它一个框阴影以在标题下创建一条线。

盒子阴影：见截图
框阴影水平位置：80px
框阴影垂直位置：82px
框阴影传播强度：-80px

divi 帖子标题模块

保存设置并打开行设置以调整装订线宽度。

天沟宽度：1
均衡柱高：是

divi 帖子标题模块

现在看看最终的设计。

divi 帖子标题模块

替代圆形图像设计

只需进行一些小的调整，您就可以使特色图像呈圆形，并将贴图调整为垂直居中。为此，请打开图像设置并更新以下内容：

圆角：50%

divi 帖子标题模块

然后打开行设置并在 Main Element 下添加以下自定义 CSS：

align-items: center;

这仅在您将 Equalize Column Heights 设置为 YES 时才有效，这会激活 flex 属性，允许我们垂直对齐项目。
divi 帖子标题模块

这是最终的设计。

divi 帖子标题模块

#3 独特的内容背景以提高可读性

这个帖子标题设计结合了背景渐变，使标题和元文本在特色图像背景下更具可读性。

这是如何做到的。

创建一个具有一列行的新部分。然后将帖子标题模块添加到该行。

然后更新帖子标题模块设置以隐藏特色图片。

divi 帖子标题模块

标题字体：Abril Fatface
标题文字颜色：#121212
标题文字大小：75 像素（桌面）、50 像素（平板电脑）、30 像素（智能手机）
标题字母间距：2px
标题行高度：1.1em
元字体：Roboto Condensed
元文本颜色：#ffffff
元文本大小：16px
元字母间距：2px
元线高度：2em
宽度：60%（桌面）、90%（平板电脑）、100%（智能手机）
自定义填充：3vw 左

divi 帖子标题模块

现在让我们添加一个框阴影作为元文本的背景并使其可读。

盒子阴影：见截图
框阴影水平位置：0px
框阴影垂直位置：-32px
框阴影颜色：#121212

divi 帖子标题模块

现在我们将使用动态内容将我们的特色图片添加到部分背景中。打开版块设置，点击背景图片预览框右上角的动态内容图标。然后从列表中选择特色图片以将特色图片添加到该部分。

divi 帖子标题模块

现在让我们添加渐变背景元素，使帖子标题文本更具可读性。只需单击渐变选项卡并更新以下内容：

背景渐变左颜色：rgba(255,255,255,0.76)
背景渐变右侧颜色：rgba(255,255,255,0)
渐变类型：径向
径向：左上角
起始位置：40%
结束位置：0%
将渐变放在背景图像上方：是

divi 帖子标题模块

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

divi 帖子标题模块

#4 具有双重特色图像的堆叠效果

这种设计结合了一些框阴影，以提供堆叠构成帖子标题模块和部分背景的元素的效果。它还使用两个版本的特色图像（动态）作为独特的设计元素。

这是如何做到的。

创建一个具有一列行的新部分。然后将帖子模块添加到行中，并将特色图片位置更新为标题/元背景图片。

divi 帖子标题模块

然后更新设计设置如下：

文字颜色：浅
文本背景颜色：rgba(1,59,104,0.79)
文字方向：居中
标题字体：Roboto Condensed
标题字体粗细：轻
标题文字大小 70 像素（桌面）、50 像素（平板电脑）、30 像素（智能手机）
标题行高度：1.3em
元字体重量：轻
元字体样式：TT
元文本颜色：#cccccc
元字母间距：1px
自定义填充：10vw 顶部，0px 底部

divi 帖子标题模块