在 Divi 中组织博客页面内容的 5 个技巧
已发表: 2019-12-21您的博客页面内容可以通过多种方式进行组织。 由于它是一个博客页面，因此大部分内容将由最近的博客文章的提要组成。 知道如何组织这些内容可以是打破单调并为更独特的博客页面设计打开大门的好方法。
在本教程中，我们将与您分享在 Divi 中组织博客页面内容的 5 个有用提示，这将帮助您了解以下内容：
- 如何创建两列布局
- 如何使用置顶帖
- 如何使用后偏移
- 如何使用多个博客模块为博客文章创建自定义布局
- 如何按类别显示最近的帖子
抢先看
以下是我们将在 Divi 中组织博客页面内容的一些方法。
使用两列布局
主要博客提要上方的特色帖子部分
主博客提要上方的全宽帖子滑块
使用多个博客模块进行独特的布局和设计
按类别展示最近的帖子
你需要什么开始
如果您还没有安装并激活 Divi 主题。
在本教程中，我将使用第二个主题生成器包类别页面模板。 如果您想继续使用它，请下载包并使用可移植性选项将 divi-theme-builder-pack-2-category-page-template.json 文件导入主题构建器。 
默认情况下，导入的模板将分配到“所有类别页面”。 打开模板设置并将其分配给博客。
现在您已准备好开始在模板中组织博客页面内容的过程。 首先，单击模板正文区域上的编辑图标。
现在您可以使用布局编辑器来修改布局。
在 Divi 中组织博客页面模板的 5 个技巧
在此模板中，我们有一个博客模块，该模块位于一列行中，用于显示当前页面的帖子（在桌面上的三列中）。 这是博客和存档页面模板的标准设置。 但是，我们不必保留此标准布局来显示帖子。 以下是在 Divi 中组织博客页面内容的一些有用提示。
#1 创建两列布局
如果将模块添加到一列行（就像在我们的模板中一样），博客模块（如果设置为网格布局）将以三列结构显示帖子。
如果您想更改布局以在两列布局中显示帖子，您可以执行以下操作。
首先，将行的列布局更改为三分之二三分之一布局。 这将在行左列的两列中显示博客文章。
接下来，打开第 1 列（包含博客模块的那个）的设置并将以下自定义 CSS 添加到主元素：
width: 100% !important;
这将导致列跨越行的整个宽度。
现在我们需要做的就是隐藏右侧的列。 打开第 2 列（空的）的设置并禁用该列在所有设备上的可见性。
现在，您可以根据需要在桌面上使用两列而不是三列来组织博客页面内容。
#2 使用置顶帖
如果您熟悉 WordPress，您可能已经知道这个。 在 Divi（或 WordPress）中创建的每个帖子都可以设置为粘性。 当您将帖子设为置顶时，该帖子将自动显示在博客页面上博客提要的最前面，甚至在最近发布的帖子之前。 这是展示您知道您的受众希望（或需要）看到的帖子的好方法。
要使帖子具有粘性，只需在 Divi 中编辑帖子并选中右侧栏中的“贴到博客顶部”选项。
在后端查看所有帖子时，您制作的每个帖子都会被标记为“粘性”。
现在，当您访问博客页面时，您可以看到置顶帖子已跳到博客帖子提要的前面。
注意：在博客模块中使用帖子偏移时，粘性帖子可能无法按预期工作。 例如，如果您将博客模块设置为显示 3 个帖子，帖子偏移量为 3，则您的置顶帖子仍将显示在 3 个帖子之前（以及除此之外）。
在你继续下一个技巧之前，我建议你去掉粘性帖子。
#3 使用帖子偏移将博客页面内容组织成单独的部分
每个博客模块都有一个选项来输入 Post Offest Number。 这告诉博客模块在显示博客提要之前跳过一定数量的最近的博客文章。 每当您想通过使用多个博客模块来显示您的帖子来稍微混淆博客页面的布局时，此选项就会派上用场。 这为您的布局设计提供了更大的灵活性，因为您可以以不同的方式设计每个博客模块。
使用 Post Offset 使用单独的博客模块展示最新的帖子
您可以在模板布局上组织博客页面内容的一种方法是在页面顶部添加特色博客文章部分。 这是一种您可以以独特的方式突出显示前三篇最新帖子的方式。 现在就去做吧。
向布局添加一个新的常规部分。
然后添加一列行。
复制模板附带的博客模块并将其粘贴到新行中。
更新博客设置如下：
- 帖子数：3
- 显示阅读更多按钮：否
- 显示分类： 没有
- 显示评论数：否
- 显示摘录：否
- 显示分页：否
我们将在页面的顶部显示三个最新的帖子。
现在我们需要向原始博客模块添加一个帖子偏移量，以便它跳过上面已经显示的前三个帖子。
打开原始博客模块的博客设置并更新以下内容：
- 后偏移数量：3
现在博客提要将从帖子 #4 开始。
要使页面顶部的特色部分脱颖而出，您可以添加背景渐变。
下面是一个示例。
在主博客提要上方添加全角帖子滑块
与上面的特色部分非常相似，我们还可以通过在博客页面顶部添加全角帖子滑块来组织博客帖子内容。 这是博客页面的流行设计，您可以将它与具有帖子偏移量的博客模块结合使用。
这是如何做到的。
首先，在布局中添加一个全角部分。
然后向该部分添加一个全宽后滑块模块。
然后更新以下设置：
- 当前页面的帖子：是
- 帖子数：3
然后更新帖子滑块的设计以匹配布局，如下所示：
- 标题字体：Lato
- 标题字体粗细：粗体
- 标题文字大小：40px
- 正文文字大小：16px
- 按钮文字大小：14px
- 按钮文字颜色：#ff0071
- 按钮背景颜色：#ffffff
- 按钮边框宽度：0px
- 按钮字体：Lato
- 按钮字体粗细：粗体
- 按钮字体样式：TT
确保博客模块显示主提要的帖子偏移量仍然设置为 3，以适应帖子滑块的 3 个帖子。
然后查看结果。
到目前为止看起来不错。
现在让我们通过下一个技巧进一步了解使用单独的博客模块的想法。
#4 添加多个博客模块，每个模块都有一个帖子
我们不必止步于向模板布局添加一个额外的博客模块。 事实上，我们可以根据需要使用尽可能多的博客模块。 我们甚至可以选择每个博客模块只显示一篇文章，以便为单个博客明信片提供独特的设计。 然后，使用帖子偏移量，我们可以创建一个完全独特的动态显示博客帖子的布局。
这是如何做到的。
首先，在包含主博客模块的行上方添加一个新的二分之一列行。
复制下面的原始博客模块并将其粘贴到新行的左列中。 然后更新以下内容：
- 帖子数：1
- 后偏移量：0
- 显示分页：否
接下来，复制您刚刚创建的博客模块并将副本粘贴到右栏中。
然后更新以下内容：
- 后偏移数：1
- 显示特色图片：否
- 显示评论数：否
- 显示摘录：否
确保将后偏移编号设置为 1，以便跳过左列中的第一个。
现在通过创建另一个博客模块并每次将帖子偏移量增加 1 来继续此过程。
复制右列中的博客模块。
然后将后偏移编号更改为 2。
再次复制博客模块并将帖子偏移量更改为 3。
现在您可以自由地单独定制每个博客模块的设计。 例如，您可以为每个添加不同的背景颜色。
这是结果。
如果您要保留下面的主要博客提要，请确保将帖子偏移量更新为 4，以容纳上一行中的 4 个帖子。
您还可以看到在我们的一些主题生成器类别页面模板中使用了相同的技术。 查看我们的教程，了解如何使用相同的概念创建类别页面模板。
#5 在博客页面上按类别显示最近的帖子
除了博客页面模板上的主要博客提要外，您还可以按类别显示最近的帖子。 这是通过稍微分解布局并同时突出显示不同类别来组织博客页面内容的好方法。
这是如何做到的。
首先，在包含主博客模块的行下添加一个新的单列行。
然后更新博客设置如下：
- 当前页面的帖子：否
- 帖子类型：帖子
- 帖子数：3
- 包含的类别：商业（或您自己的一个）
这将显示来自业务类别的三个最新帖子。
然后在博客模块上方添加一个带有相应类别标题的文本模块。
就像这样，您的博客页面上有一个特色类别部分 - 一种组织博客页面内容的好方法！
您甚至可以添加多个特色类别部分，每个部分都有独特的设计。
这些特色类别部分非常适合博客页面模板的底部。
最后的想法
这些提示应该可以帮助您以各种独特的方式组织博客页面内容。 而且，这些相同的技巧适用于使用博客模块显示内容的许多其他类型的模板（如类别/存档页面模板）。 随意探索这些技巧并在您的下一个项目中使用它们。
我期待在评论中收到您的来信。
干杯!