WordPress divi主题

如何使用 Divi 的主题生成器设计博客文章模板(免费下载)

by | May 8, 2022 | Divi主题使用教程 | 0 comments

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

博客文章模板可能是您可以添加到博客网站的最重要的模板。 它提供了一种结构和设计,可以“神奇地”应用于前端的所有博客文章,而博主只需要担心在后端写文章。 通过简化创建过程以将您的帖子快速发布到网络上,这大大节省了时间。 使用 Divi 主题生成器,您不必满足于一个看起来像网络上所有其他博客帖子的无聊帖子模板。 您可以创建无数真实的设计(视觉上),并在整个模板中轻松添加静态和动态内容的不同组合。

google广告开户

在这篇文章中,我们将介绍使用 Divi Theme Builder 构建博客文章模板所需了解的所有内容。 我们将涵盖很多内容,但我想您会惊讶于这些模板在您眼前栩栩如生。

现在让我们开始吧!

抢先看

下面是我们将在本教程中创建的博客文章模板的快速浏览。

您可能已经从我们的数字营销布局包中注意到了这种设计的相似性。 创建此帖子模板以匹配布局,以便您可以将其与数字营销布局包结合使用。

享受!

免费下载博客文章模板

要掌握本教程中的模板,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将模板布局导入您的网站,您需要转到 Divi 主题生成器并使用可移植性选项将 .json 文件导入主题生成器。

divi类别页面模板

WordPress divi主题

divi类别页面模板

什么是博客文章模板,为什么需要一个?

博客文章模板是一个站点范围的模板,用于您网站上的所有(或部分)单个博客文章。 它是使用动态内容构建的预设计模板,因此任何新的或现有的帖子都将自动继承分配模板的布局和设计。

使用博客文章模板有几个令人信服的理由。 使用博客文章模板的主要原因是为了简化博客过程。 拥有已经为您的帖子设计的现成模板可以大大加快创建过程,因为无需动态设计帖子的元素,让博主有更多时间去做他们最擅长的事情——编写内容。 但这还不是全部! 博客帖子模板可以在帖子中加入额外的元素(如评论、分享按钮和电子邮件选项),以提高用户参与度和转化率。

使用 Divi Theme Builder,创建博客文章模板非常容易。 在 Divi 中构建博客文章模板的秘诀是了解要使用的模块以及如何有效地将动态内容元素合并到模板中。

在我们开始一起构建博客文章模板之前,让我们先回顾一下可用于构建博客文章模板的一些工具。

博客文章模板的构建块

博客帖子模板可以根据博客的需要而有所不同。 但通常,博客文章模板将包含以下结构:

  • 标题 – 帖子的顶部区域,通常包括帖子标题、特色图片和帖子元数据(类别、标签、作者、发布日期等)
  • 帖子内容——文章的主要内容。
  • 相关文章——读者可能感兴趣的其他文章的链接。
  • 评论 – 供用户添加和回复关于帖子的评论的部分。
  • 号召性用语——通常是电子邮件选择表单、社交分享图标或某种促销优惠。

Divi 模块和动态内容

可以使用 Divi 模块中固有的 Divi 内置动态内容功能在 Divi 主题生成器中创建博客帖子模板。 有一些专门为帖子构建的 Divi 模块。 但是,大多数 Divi 模块都能够提取与帖子相关的可用动态内容。 以下是在 Divi 中设计博客文章模板时可用的一些选项的细分。

  • 为帖子模板构建的 Divi 模块
    • 帖子导航模块 – 有助于提供上一篇和下一篇文章的导航链接。
    • 帖子滑块模块 – 有助于提供按最新或按类别组织的帖子库。
    • 帖子标题模块 – 有助于在一个方便的模块中显示带有特色图像的帖子标题。
    • 帖子内容模块 – 用于显示帖子内容的帖子模板的必要模块。 帖子内容模块还包括可用作站点范围帖子内容的默认设计的设计选项。
  • 所有 Divi 模块中可用的帖子模板的动态内容元素
    • 帖子/存档标题
    • 后摘录
    • 当前日期
    • 网站标语
    • 作者简介
    • 帖子作者
    • 发布链接
    • 帖子类别
    • 发表评论数
    • 发布日期
    • 自定义字段

现在您已经对可用的工具有了很好的了解,让我们开始了解如何从头开始在 Divi 中构建博客文章模板。

你需要什么开始

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。
  2. 确保您至少创建了一些博客文章,以便查看我们将构建的博客文章模板的结果。 确保在每个帖子中包含尽可能多的内容(即特色图片、类别等),这样您就可以拥有一个真实帖子的好例子。

之后,您就可以开始在 Divi 中为您的博客文章构建新模板了。

fiverr建站WordPress程序员

如何在 Divi Theme Builder 中构建博客文章模板

订阅我们的 Youtube 频道

与所有模板一样,在 Divi Theme Builder 中创建了一个博客文章模板,这将允许您使用 Divi Builder 的强大功能从头开始完全构建模板。

创建新模板

从 WordPress 仪表板,导航到 Divi > Theme Builder。 然后点击“添加新模板”的空白方块。

独立站选品工具

将模板分配给所有博客文章

添加新模板后,将弹出模板设置框,允许您将模板分配给整个网站的页面和/或帖子。 由于我们要为站点范围内的所有博客文章创建博客文章模板,因此选择“所有文章”并单击创建模板按钮。

创建自定义正文区域布局

接下来,单击模板的“添加自定义正文”区域为帖子模板创建一个新的正文区域。 然后选择“构建自定义主体”。

选择“从头开始构建”选项开始构建过程。

高质量外链购买

为帖子模板构建自定义正文布局

启动模板布局编辑器后,您可以使用 Divi Builder 从头开始​​构建博客文章模板的整个主体。

首先,将一列行添加到默认常规部分。

然后,在添加模块之前,使用背景设计和一些填充更新部分设置,如下所示:

JasperAI 10000字免费额度试用
  • 背景渐变左颜色:#8624e1
  • 背景渐变正确颜色:#3607a6
  • 渐变方向:130度
  • 起始位置:25%
  • 背景图片:插入图片
  • 使用视差效果:是
  • 填充:7vw 顶部,7vw 底部

使用文本模块将帖子标题标题创建为动态内容

在单列行内,添加一个文本模块。

然后在将鼠标悬停在正文内容区域上时单击动态内容图标。

WordPress备份工具updrafplus

从列表中选择帖子/存档标题元素。

然后,单击 Post/Archive Title 元素上的齿轮图标,并使用 h1 标签更新前后输入区域,如下所示:

前:

<h1>

后:

</h1>

现在使用以下设计设置设计标题:

  • 文字字体:Roboto
  • 文字文字大小:16px
  • 文字行高:1.8em
  • 文字对齐:居中
  • 标题字体:Roboto
  • 标题字体粗细:粗体
  • 标题文字大小:60px(桌面)、40px(平板电脑)、32px(手机)
  • 标题行高度:1.2em

使用图像模块添加特色图像作为动态内容

标题部分到位后,让我们为帖子模板添加特色图片。 为此,请添加另一个具有三分之二三分之一列布局的常规部分。

然后在左列添加一个图像模块。

然后为图片添加特色图片动态内容元素。

设计图像模块

跳转到设计选项卡并自定义图像,如下所示:

  • 图像对齐:居中
  • 边距:-9vw(台式机),0vw(平板电脑)
  • 圆角:8px
  • 盒子阴影:见截图
  • 盒子阴影垂直位置:16px
  • 盒子阴影模糊强度:96px
  • 盒子阴影传播强度:-24px

将帖子作者和作者简介作为动态内容添加到 Blurb 模块

接下来,我们将使用博客模块添加博文作者和博文作者简介。 因此,继续在右栏中添加一个博客模块。

在简介设置中,将鼠标悬停在标题输入框上,然后单击动态内容图标。 然后为 Title 内容添加 Post Author 动态内容元素。

接下来,打开 Post Author 设置并更新之前的输入,如下所示:

对于简介模块的正文内容,单击动态内容图标并从列表中选择“作者简介”动态内容元素。

对于简介模块的图像,添加“发布作者个人资料图片”作为动态内容。

设计后作者和生物模糊模块

现在优化图像的设计如下:

  • 图像/图标位置:左
  • 图像圆角:50%
  • 标题字体:Roboto
  • 标题字体粗细:粗体
  • 标题行高:1.3em
  • 正文字体:Lato
  • 车身线高:1.4em
  • 图片宽度:50px

将帖子类别作为动态内容添加到 Blurb 模块

在刚刚创建的 Author and Author Bio Module 下,在其下添加另一个简介模块,并为 Title 选择 Post Categories 动态内容元素。

然后使用图标更新简介,如下所示:

  • 使用图标:是
  • 图标:见截图

设计帖子类别模糊模块

更新设计设置如下:

  • 图标颜色:#dddddd
  • 图像/图标位置:左
  • 使用图标字体大小:是
  • 图标字体大小:20px
  • 标题字体:Roboto
  • 标题字体粗细:中
  • 标题文字颜色:#f92c8b
  • 标题文字大小:16px
  • 标题行高度:20px
  • 内边距:左 16 像素

将评论计数作为动态内容添加到 Blurb 模块

要为博客文章模板添加文章评论计数,请复制刚刚创建的简介模块。

然后使用 Post Comment Count 动态内容元素更新 Title 内容。

由于评论计数只显示一个数字,因此我们需要在数字后添加一些附加文本来补充该数字。 为此,请打开 Post Comment Count 设置并更新以下内容:

之后:评论

然后更新图标如下:

  • 使用图标:是
  • 图标:见截图

将发布日期作为动态内容添加到 Blurb 模块

对于最后一段元数据,复制带有评论计数的简介模块。 然后使用“发布日期”动态内容元素更新标题内容。

提示:您始终可以打开 Post Publish Date 动态元素的设置来更改日期显示的格式。

然后更新图标如下:

  • 使用图标:是
  • 图标:见截图

添加带有内容设计设置的帖子内容模块

有了帖子标题、特色图片、帖子作者和元数据,我们就可以准备好帖子的主要内容了。

添加具有单列布局的新行。

然后将帖子内容模块添加到该行。

这个帖子内容模块是显示帖子主要内容的地方。 此外,我们可以更新设计设置,以便为使用默认编辑器输入的所有帖子内容建立默认设计。 我们可以像更新任何其他模块一样更新发布内容模块的设置。 我们可以在更新模块时查看模块提供的模拟内容。

打开帖子内容模块设置并更新以下图像设置:

  • 图片圆角:8px
  • 图像框阴影:见截图
  • 盒子阴影垂直位置:16px
  • 盒子阴影模糊强度:96px
  • 盒子阴影传播强度:-24px

接下来我们需要设置设计…

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