15+ Divi 的惊人博客帖子模板教程
已发表: 2022-01-23有很多方法可以设计和自定义您的 Divi 博客文章模板。 幸运的是，Elegant Themes 博客上有很多 Divi 博客文章模板教程可以帮助您入门。 在本文中，我们将看到超过 15 个令人惊叹的博客文章模板教程，您可以将它们与 Divi 主题生成器一起使用。 所有内容都包含有关为桌面和移动屏幕构建博客文章模板的分步说明。 许多包括 JSON 文件下载和视频说明。 有些包括CSS。
1. 设计博客文章模板
本教程展示了在 Divi Theme Builder 中开始构建博客文章模板所需了解的一切。 它包括博客文章模板的基础知识以及为什么需要它。 它还讨论了动态内容以及如何将其用于博客文章。
查看教程
2. 将粘性侧边栏 CTA 添加到博客文章模板
本教程重点介绍如何创建具有粘性的 CTA 并将其添加到博客文章模板的侧边栏中。 它显示了两个独立工作的不同侧边栏。 侧边栏与帖子一起滚动，直到它们到达它们的粘性位置，然后停留在那里直到帖子滚动到它们跟随帖子的位置。 此信息也适用于任何页面模板。 这包括CSS。
查看教程
3.动态创建用户体验友好的博客文章模板
这个展示了如何创建一个专注于用户体验的博客文章模板。 它展示了如何将动态元素融入设计中。 本教程中创建的模板没有干扰，使其简单易用。
查看教程
4. 在博客文章模板中设计 Divi 的评论模块
本教程重点介绍与博客文章模板完美配合的评论部分的样式。 它使用评论模块创建两个设计。 还包括一个带有社交媒体关注的人员模块。 背景是使用图形编辑器创建的，并且包括其创建方式的演练。
查看教程
5. 为您的博客文章模板设计一个动态作者框
在本教程中，您将学习如何使用动态内容为您的博客文章模板创建作者框。 在桌面上，作者框粘贴在侧边栏中。 内容被隐藏，作者的形象被淡化以创造一个干净的设计。 当他们将鼠标悬停在作者框上时，内容就会显示出来。 对于移动设备，作者框位于内容下方。 它包括 CSS。
查看教程
6. 创建一个双面侧边栏博客帖子模板
本教程展示了如何创建一个两边都有侧边栏的博客文章模板。 侧边栏保持干净，一侧是博客文章，另一侧是电子邮件选择。 侧边栏在移动设备上堆叠。 包括 CSS。
查看教程
7. 为您的博客帖子模板创建动态帖子信息栏
本教程展示了如何使用在用户滚动时保留在屏幕上的动态内容来创建信息栏。 内容包括当前帖子的标题和类别，以显示用户正在阅读的内容、评论数量和留下评论的链接，以及订阅时事通讯的按钮。 它包括 CSS。
查看教程
8. 在您的博客文章模板中包含全高固定侧边栏
本教程展示了如何创建一个在用户滚动时固定在桌面版本上的全高侧边栏。 侧边栏占据桌面屏幕的整个高度。 移动版将侧边栏放置在内容之后。 包括自定义 CSS。
查看教程
9. 创建分屏博客文章模板
本教程展示了如何创建一个博客帖子模板，其中一侧是特色图片，另一侧是帖子内容。 内容滚动时，带有标题和元数据的特色图像保持在原位。 对于移动设备，布局正常工作。 它包括 CSS。
查看教程
10.为您的博客文章模板创建一个粘性侧边栏
这个展示了如何使侧边栏变粘。 一旦它到达屏幕上的粘性位置，侧边栏就会保持原位，直到内容结束。 然后边栏会像往常一样随着帖子滚动。 它在移动设备上正常工作。 博客文章模板是从头开始构建的，包括重叠元素和自定义 CSS。
查看教程
11. 为您的博客文章模板创建评论切换
本教程展示了如何创建一个切换来折叠评论部分。 评论栏上的按钮打开评论以显示它们。 这对于改善带有大量评论的帖子的用户体验特别有帮助。 包括自定义 CSS。
查看教程
12. 在您的博客文章模板中包含全角特色图片
本教程展示了如何在桌面和移动设备上使您的特色图像全宽。 它展示了多种方法来实现这一点，包括动态部分、帖子标题模块、单独的图像和文本模块。 有些包括渐变叠加。
查看教程
13. 为不同的类别使用不同的博客文章模板
这个展示了如何使用 Divi Theme Builder 的设置为您网站上的不同类别设置不同的博客文章模板。 它还讨论了使用不同博客文章模板的优势以及如何从默认模板中排除一个类别。
查看教程
14. 为特定帖子分配不同的博客帖子模板
本教程展示了如何使用 Divi Theme Builder 的设置将博客文章模板分配给特定的博客文章。 它还讨论了这样做的好处，并提供了几个例子说明什么时候这样做最有意义。
查看教程
15. 将相关帖子添加到您的博客帖子模板
本教程展示了如何在您的博客文章模板中添加一个显示相关文章的部分。 这一篇还涵盖了博客文章模板所需的元素、其他元素的示例、相关文章的优势以及添加它们的最佳位置。 相关文章部分与博客文章正文重叠。
查看教程
16. 在主题生成器中使用发布内容模块
本教程深入介绍了如何使用发布内容模块。 它涵盖了模块的工作原理以及在 Divi Theme Builder 中设计博客文章模板时如何最好地使用该模块。 它还展示了如何将它与使用简码生成的 WooCommerce 页面一起使用，并建议何时不使用它。
查看教程
17. 在您的 Divi 博客帖子模板中添加全屏英雄
本教程展示了几种将全屏英雄部分添加到博客文章模板的方法。 这些方法包括全屏帖子标题模块、背景标题以及在英雄部分下添加元数据。 它还展示了如何在英雄图像上添加渐变。
查看教程
18. 在您的博客文章模板中包含元数据
这个展示了如何使用动态内容将元数据添加到您的博客文章模板中。 它讨论了什么是肉类数据，动态内容如何适用于肉类数据，以及为什么应该使用动态内容来显示元数据。 还涵盖了各种元数据显示选项。
查看教程
19. 在您的 Divi 博客帖子模板中包含帖子导航
本教程涵盖 Post Navigation 模块。 它涵盖了为什么应该使用帖子导航并显示将其添加到博客模板的最佳位置。 它展示了三种不同的方式来设置模块样式以创建文本链接、按钮和双面按钮。
查看教程
如何为 Divi 找到免费的博客文章模板
优雅的主题创建了许多与免费的 Divi 布局包相匹配的免费博客文章模板。 这些免费的 Divi 博客文章模板发布在 ET 博客中。 只需搜索“免费博客文章模板”、“免费 Divi 博客文章模板”或类似关键字。 您会发现许多免费的博客文章模板可供选择。
结束的想法
这是我们对 Divi 的 15 多个惊人的 Divi 博客文章模板教程的看法。 这 15 多个教程是学习设计和自定义 Divi 博客文章模板的多种方法的好方法。 他们还提供了使用 Divi Theme Builder 创建自己的想法。 其中有几个展示了如何使用 CSS。
我们希望收到你的来信。 您是否使用过这些 15+ 惊人的 Divi 博客文章模板教程中的任何一个？ 在评论中让我们知道您最喜欢哪个。