WordPress divi主题

在 Divi 中组织博客页面内容的 5 个技巧

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

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

您的博客页面内容可以通过多种方式进行组织。 由于它是一个博客页面,因此大部分内容将包含最近博客文章的提要。 知道如何组织这些内容可能是打破单调并为更独特的博客页面设计打开大门的好方法。

google广告开户

在本教程中,我们将与您分享在 Divi 中组织博客页面内容的 5 个有用技巧,这些技巧将帮助您学习以下内容:

  1. 如何创建两列布局
  2. 如何使用置顶帖
  3. 如何使用后偏移
  4. 如何使用多个博客模块为博客文章创建自定义布局
  5. 如何按类别显示最近的帖子

抢先看

以下是我们将在 Divi 中组织博客页面内容的一些方法。

使用两列布局

在 Divi 中组织博客页面内容

主博客提要上方的特色帖子部分

在 Divi 中组织博客页面内容

主博客提要上方的全角帖子滑块

在 Divi 中组织博客页面内容

使用多个博客模块实现独特的布局和设计

在 Divi 中组织博客页面内容

按类别显示最近的帖子

在 Divi 中组织博客页面内容

你需要什么开始

如果您还没有,请安装并激活 Divi 主题。

对于本教程,我将使用 Second Theme Builder Pack 类别页面模板。 如果您想使用它来跟随,请下载包并使用可移植性选项将 divi-theme-builder-pack-2-category-page-template.json 文件导入主题构建器。
在 Divi 中组织博客页面内容

WordPress divi主题

默认情况下,导入的模板将分配给“所有类别页面”。 打开模板设置并将其分配给博客。

在 Divi 中组织博客页面内容

在 Divi 中组织博客页面内容

现在您已准备好开始在模板中组织博客页面内容的过程。 要开始使用,请单击模板正文区域上的编辑图标。

在 Divi 中组织博客页面内容

现在您可以使用布局编辑器来修改布局。

在 Divi 中组织博客页面内容

在 Divi 中组织博客页面模板的 5 个技巧

在这个模板中,我们有一个博客模块,它位于一列行中,显示当前页面的帖子(桌面上的三列)。 这是博客和存档页面模板的标准设置。 但是,我们不必保留此标准布局来显示帖子。 以下是在 Divi 中组织博客页面内容的一些有用提示。

#1 创建一个两列布局

博客模块(如果设置为网格布局)如果将模块添加到一列行中(就像在我们的模板中一样),则会以三列结构显示帖子。

在 Divi 中组织博客页面内容

fiverr建站WordPress程序员

如果您想更改布局以在两列布局中显示帖子,您可以执行以下操作。

首先,将行的列布局更改为三分之二三分之一布局。 这将在行的左列中的两列中显示博客文章。

在 Divi 中组织博客页面内容

接下来,打开第 1 列(包含博客模块的列)的设置,并将以下自定义 CSS 添加到主元素:

width: 100% !important;

在 Divi 中组织博客页面内容

独立站选品工具

这将导致列跨越行的整个宽度。

现在我们需要做的就是隐藏右侧的列。 打开第 2 列(空的)的设置并禁用该列在所有设备上的可见性。

在 Divi 中组织博客页面内容

现在,您可以根据需要在桌面上使用两列而不是三列来组织博客页面内容。

在 Divi 中组织博客页面内容

高质量外链购买

#2 使用置顶帖

如果你熟悉 WordPress,你可能已经知道这个了。 在 Divi(或 WordPress)中创建的每个帖子都可以设置为粘性。 当您将帖子设为置顶时,该帖子将自动显示在博客页面上博客订阅源的最前面,甚至在最近发布的帖子之前。 这是展示您知道您的观众希望(或需要)看到的帖子的好方法。

要使帖子具有粘性,只需在 Divi 中编辑帖子并选中右侧边栏中的“粘贴到博客顶部”选项。

在 Divi 中组织博客页面内容

在后端查看所有帖子时,您制作的每个帖子都会被标记为“置顶”。

在 Divi 中组织博客页面内容

JasperAI 10000字免费额度试用

现在,当您访问博客页面时,您可以看到置顶帖子已跳转到博客帖子提要的前面。

在 Divi 中组织博客页面内容

注意:在博客模块中使用帖子偏移时,置顶帖子可能无法按预期工作。 例如,如果您将博客模块设置为显示 3 个帖子偏移量为 3 的帖子,则您的置顶帖子仍将显示在 3 个帖子之前(以及除此之外)。

在您继续下一个提示之前,我建议您摆脱粘性帖子。

#3 使用帖子偏移量将博客页面内容组织成单独的部分

每个博客模块都可以选择输入 Post Offest Number。 这告诉博客模块在显示博客提要之前跳过一定数量的最近博客文章。 每当您想通过使用多个博客模块来显示您的帖子来稍微混合博客页面的布局时,此选项就会派上用场。 这为您的布局设计提供了更大的灵活性,因为您可以以不同的方式设计每个博客模块。

WordPress备份工具updrafplus

使用 Post Offset 提供带有单独博客模块的最新帖子

在模板布局上组织博客页面内容的一种方法是在页面顶部添加特色博客文章部分。 这是一种您可以以独特的方式突出显示前三个最新帖子的方法。 现在来做这件事。

在布局中添加一个新的常规部分。

在 Divi 中组织博客页面内容

然后添加一列行。

在 Divi 中组织博客页面内容

复制模板附带的博客模块并将其粘贴到新行中。

在 Divi 中组织博客页面内容

更新博客设置如下:

  • 帖子数:3
  • 显示阅读更多按钮:否
  • 显示类别:没有
  • 显示评论数:否
  • 显示摘录:否
  • 显示分页:否

在 Divi 中组织博客页面内容

我们将在页面顶部显示三个最近的帖子。

现在我们需要向原始博客模块添加一个帖子偏移量,以便它跳过上面已经显示的前三个帖子。

打开原始博客模块的博客设置并更新以下内容:

现在博客提要将从帖子 #4 开始。

在 Divi 中组织博客页面内容

要使页面顶部的特色部分脱颖而出,您可以添加背景渐变。

这是一个看起来像的例子。

在 Divi 中组织博客页面内容

在主博客提要上方添加全角帖子滑块

与上面的特色部分非常相似,我们还可以通过在博客页面顶部添加全角帖子滑块来组织博客帖子内容。 这是博客页面的流行设计,您可以将它与具有帖子偏移量的博客模块结合使用。

这是如何做到的。

首先,在布局中添加一个全角部分。

在 Divi 中组织博客页面内容

然后在该部分添加一个全角帖子滑块模块。

在 Divi 中组织博客页面内容

然后更新以下设置:

  • 当前页面的帖子:是
  • 帖子数:3

在 Divi 中组织博客页面内容

然后更新帖子滑块的设计以匹配布局,如下所示:

  • 标题字体:Lato
  • 标题字体粗细:粗体
  • 标题文字大小:40px
  • 正文大小:16px
  • 按钮文字大小:14px
  • 按钮文字颜色:#ff0071
  • 按钮背景颜色:#ffffff
  • 按钮边框宽度:0px
  • 按钮字体:Lato
  • 按钮字体粗细:粗体
  • 按钮字体样式:TT

在 Divi 中组织博客页面内容

确保博客模块显示主提要的帖子偏移量仍设置为 3 以容纳帖子滑块的 3 个帖子。

然后查看结果。

在 Divi 中组织博客页面内容

到目前为止看起来不错。

现在,让我们通过下一个技巧进一步了解使用单独的博客模块的想法。

#4 添加多个博客模块,每个模块都有一个帖子

我们不必仅仅在模板布局中添加一个额外的博客模块。 事实上,我们可以根据需要使用尽可能多的博客模块。 我们甚至可以选择每个博客模块只显示一篇文章,以便为单个博客帖子卡片提供独特的设计。 然后,使用帖子偏移量,我们可以创建一个完全独特的动态显示博客帖子的布局。

这是如何做到的。

首先,在包含主博客模块的行上方添加一个新的半列半列行。

在 Divi 中组织博客页面内容

复制下面的原始博客模块并将其粘贴到新行的左列中。 然后更新以下内容:

  • 帖子数:1
  • 后偏移数:0
  • 显示分页:否

在 Divi 中组织博客页面内容

接下来,复制您刚刚创建的博客模块并将副本粘贴到右侧列中。

然后更新以下内容:

  • 后偏移数:1
  • 显示特色图片:否
  • 显示评论数:否
  • 显示摘录:否

在 Divi 中组织博客页面内容

确保将后偏移量设置为 1,以便跳过左列中的第一个。

现在通过创建另一个博客模块并每次将帖子偏移量增加 1 来继续此过程。

复制右栏中的博客模块。

在 Divi 中组织博客页面内容

然后将后偏移数更改为 2。

在 Divi 中组织博客页面内容

再次复制博客模块并将帖子偏移量更改为 3。

在 Divi 中组织博客页面内容

现在您可以自由地单独定制每个博客模块的设计。 例如,您可以为每个添加不同的背景颜色。

这是结果。

在 Divi 中组织博客页面内容

如果您要保留下面的主要博客提要,请确保将帖子偏移量更新为 4,以适应上面一行中的 4 个帖子。

在 Divi 中组织博客页面内容

您还可以在我们的一些 Theme Builder 类别页面模板中看到同样的技术。 查看我们的教程,了解如何使用相同的概念创建类别页面模板。

#5 在博客页面上按类别显示最近的帖子

除了博客页面模板上的主要博客提要外,您还可以按类别显示您最近的帖子。 这是通过稍微分解布局并同时突出显示不同类别来组织博客页面内容的好方法。

这是如何做到的。

首先,在包含主博客模块的行下添加一个新的单列行。

在 Divi 中组织博客页面内容

然后更新博客设置如下:

  • 当前页面的帖子:否
  • 帖子类型:帖子
  • 帖子数:3
  • 包含的类别:商业(或您自己的一个)

在 Divi 中组织博客页面内容

这将显示来自业务类别的三个最新帖子。

然后在博客模块上方添加一个带有相应类别标题的文本模块。

在 Divi 中组织博客页面内容

就像这样,您的博客页面上有一个特色类别部分 – 一种组织博客页面内容的好方法!

您甚至可以添加多个特色类别部分,每个部分都有独特的设计。

在 Divi 中组织博客页面内容

这些特色类别部分非常适合博客页面模板的底部。

在 Divi 中组织博客页面内容

最后的想法

这些提示应该可以帮助您以各种独特的方式组织博客页面内容。 而且,这些相同的技巧适用于许多使用博客模块显示内容的其他类型的模板(如类别/存档页面模板)。 随意探索这些技巧并在您的下一个项目中使用它们。

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

干杯!

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