WordPress divi主题

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

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

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

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

google广告开户

让我们开始吧!

抢先看

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

#1 抽象框架

开始建造 #1

#2 重叠文本和特色图片

开始建造 #2

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

开始建造#3

WordPress divi主题

#4 双特征图像的堆叠效果

开始建造#4

入门

订阅我们的 Youtube 频道

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

新帖子的设置

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

  1. 创建一个新帖子。
  2. 为您的帖子添加标题。
  3. 在您的帖子中添加特色图片。
  4. 部署 Divi Builder。
  5. 选择从头开始构建
  6. 在 Divi 页面设置下,选择 没有侧边栏 页面布局并选择 隐藏 帖子标题。
  7. 然后点击在前端构建或在后端部署桌面视图模式,以便您可以直观地设计页面。

divi 帖子标题模块

是否要为每个设计创建一个新帖子,或者只是将多个帖子标题设计添加到一个帖子,这取决于您。 请记住,如果您在一篇文章中添加多个文章标题,它们将继承相同的页面标题和特色图片。

#1 抽象框架

fiverr建站WordPress程序员

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

这是如何做到的。

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

在 Post Title Settings 中,将 Featured Image Placement 设置如下:

特色图片位置:标题上方

独立站选品工具

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

背景渐变左颜色: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 帖子标题模块

JasperAI 10000字免费额度试用

保存设置。

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

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

divi 帖子标题模块

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

WordPress备份工具updrafplus

divi 帖子标题模块

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

divi 帖子标题模块

divi 帖子标题模块

#2 重叠文本和特色图片

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

divi 帖子标题模块

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

divi 帖子标题模块

现在在右栏中添加一个帖子标题模块。 通过将“显示特色图像”选项设置为“否”来打开设置并隐藏特色图像。

divi 帖子标题模块

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

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

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

divi 帖子标题模块

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

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

divi 帖子标题模块

现在让我们给它一个盒子阴影来在标题下创建一条线。

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

divi 帖子标题模块

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

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

divi 帖子标题模块

现在查看最终设计。

divi 帖子标题模块

divi 帖子标题模块

另类圆形图像设计

只需进行一些小调整,您就可以使特色图像成为圆形,并将帖子平铺调整为垂直居中。 为此,请打开图像设置并更新以下内容:

圆角:50%

divi 帖子标题模块

然后打开行设置并在主元素下添加以下自定义 CSS:

align-items: center;

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

这是最终的设计。

divi 帖子标题模块

divi 帖子标题模块

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

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

这是如何做到的。

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

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

divi 帖子标题模块

标题字体:Abril Fatface
标题文字颜色:#121212
标题文字大小:75px(桌面)、50px(平板电脑)、30px(智能手机)
标题字母间距: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 帖子标题模块

divi 帖子标题模块

#4 双特征图像的堆叠效果

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

这是如何做到的。

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

divi 帖子标题模块

然后更新设计设置如下:

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

divi 帖子标题模块

现在让我们添加我们的第一个盒子阴影来创建我们的第一个堆叠层。

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:-46px
阴影颜色:#ffffff

divi 帖子标题模块

您可以看到,这也是划分标题和元文本的一种创造性方式。

现在保存您的设置并打开部分设置。 将特色图像作为动态内容添加到您的背景中。 然后添加渐变如下:

背景渐变左颜色:rgba(1,59,104,0.79)
背景渐变右颜色:rgba(1,59,104,0.79)
在背景图像上方放置渐变:是

这种额外的特色图片背景设计是一种独特的方式,可以为您的帖子标题提供独特的设计,该设计会随着每个新的特色图片而动态变化。

divi 帖子标题模块

接下来,添加一些自定义填充。

自定义填充(桌面):10vw 顶部,0px 底部
自定义填充(智能手机):0vw 顶部,0px 底部

divi 帖子标题模块

然后再添加一个盒子阴影继续叠加效果。

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:-92px
阴影颜色:#ffffff

divi 帖子标题模块

要完成设计,请打开行设置并更新以下内容:

使这一行全角:是
天沟宽度:1
自定义填充(桌面):0px 顶部,0px 底部,6% 左,6% 右
自定义填充(智能手机:0px 顶部,0px 底部,0% 左侧,0% 右侧

divi 帖子标题模块

现在查看最终设计。

divi 帖子标题模块

divi 帖子标题模块

最后的想法

通过这些帖子标题设计,您应该很好地掌握了 Divi 帖子标题模块和 Divi Builder 的功能。 只需进行一些设计调整,再加上特色图片动态内容的强大功能,您就可以为您的博客帖子创建无数独特的帖子标题样式。 如果有的话,我希望这些能激发您自己创建一些令人惊叹的帖子标题。

有关更多相关的设计灵感,请查看我们关于美丽且引人入胜的动态博客文章英雄部分的博客文章以及在 Divi 中设计破碎网格布局的秘诀。

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

干杯!