如何在 Divi 中设计可滚动的最近帖子小部件区域

Divi 的侧边栏模块是一个非常有用的工具，可以将自定义小部件区域集成到您的设计中。 这允许您在 Divi 布局中显示任何 WordPress 小部件。 在本教程中，我将向您展示如何在 Divi 中创建可滚动的最近帖子小部件区域。 我将设计一个“来自我们的博客”部分，将最近的帖子小部件区域放在博客模块的右侧。 这将非常适合在主页或登录页面上展示您最近的一些博客文章。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的一个小先睹为快。

免费下载可滚动的最近帖子布局

要了解本教程中可滚动的近期帖子布局设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

订阅我们的 YouTube 频道

创建最近的帖子小部件区域

由于我们将在我们的 Divi 布局中添加一个最近的帖子小部件，我们需要做的第一件事是创建一个新的小部件区域（带有最近的帖子小部件）以与 Divi 的侧边栏模块一起使用。

要创建最近的帖子小部件区域，请导航到外观 > 小部件。 然后通过为小部件区域命名（如果需要，可以称之为“最近的帖子”）并单击“创建”按钮来创建一个新的小部件区域。 刷新页面以查看可用的新小部件区域。

在页面左侧打开 WordPress 附带的“最近的帖子”小部件的切换开关。 然后从列表中选择“最近的帖子”小部件区域并单击添加小部件将小部件添加到小部件区域。

然后打开最近的帖子小部件区域并使用标题更新最近的帖子小部件。 将要显示的帖子数量设置为大量，以便我们在设计完成时有足够的帖子滚动浏览。

现在我们已经有了我们的小部件区域，我们可以开始我们的 Divi 设计。

使用可滚动的最近帖子小部件区域创建“来自我们的博客”部分

设计标题部分

用一列行创建一个新的常规部分。

在添加模块之前，请使用以下内容更新该部分：

背景颜色：#333333
自定义填充：底部 0px

然后通过更新行设置取出行的底部填充：

自定义填充：底部 0px

然后向该行添加一个文本模块。

然后更新以下文本设置：

对于内容，添加以下 h2 标题 html：

<h2>From our Blog</h2>

然后更新以下文本设置：

标题 2 字体：Roboto
标题 2 字体样式：TT
标题 2 文本颜色：#ffffff
标题 2 文字大小：40px
标题 2 字母间距：2px

这负责我们布局的标题。 现在是使用专业部分创建布局的其余部分的时候了。

创建专业部分

为布局的其余部分使用单独的专业部分将允许我们在可滚动小部件区域的右侧有一个专用的侧边栏。 此外，它还允许我们在与侧边栏区域分开的部分左侧调整行的大小和样式。

继续添加一个带有右侧栏列布局的专业部分，如下所示：

然后向该部分添加一列行。

在添加模块之前，让我们更新我们的部分和行设置。

自定义部分设置

打开专业部分的设置并更新以下内容：

背景颜色：#333333
天沟宽度：2
自定义填充：0px 顶部
第 2 列自定义填充：顶部 0px，底部 0px

自定义行设置

接下来打开行设置并更新以下内容：

高度：640px
顶部边框宽度：8px
顶部边框颜色：#444444
底部边框宽度：8px
底部边框颜色：#444444

自定义 640 像素高度与我们将添加到专业部分侧边栏的可滚动最近帖子小部件区域的高度相匹配。 这将确保两者具有相同的高度，以获得更美观的设计。

添加博客模块

在左侧的一列行中，添加一个博客模块。

然后更新博客模块设置如下：

帖子数：2

布局：网格
标题字体：Roboto
元字体：Roboto
元字体重量：轻
元字体样式：TT
分页字体：Roboto
分页字体样式：TT
分页文字颜色：#ffffff
分页文字大小：18px
分页字母间距：2px

添加可滚动的最近帖子小部件区域

最后，是时候将可滚动的近期帖子添加到我们的布局中了。 为此，请将侧边栏模块添加到右侧专业部分的侧边栏区域。

然后通过从内容选项卡下的小部件区域下拉列表中选择您之前创建的“最近的帖子”小部件区域。

然后更新 Title 和 Body 文本设计如下：

标题字体：Roboto
标题字体样式：TT
标题文字颜色：#ffffff
标题字母间距：2px
正文字体：Roboto
正文字体样式：下划线

接下来，隐藏边框分隔符，如下所示：

显示边框分隔符：否

然后给侧边栏模块一个最大高度和自定义填充如下：

最大高度：640px
自定义填充：顶部 30 像素，底部 30 像素，右侧 5%

640 像素的最大高度与相邻行的 640 像素自定义高度相匹配。

现在我们已经为侧边栏模块提供了 640 像素的最大高度，我们需要将垂直溢出设置为滚动以获得我们的可滚动功能。 为此，请转到“高级”选项卡并更新以下内容：

垂直溢出：滚动

最后结果

就是这样！ 现在让我们看看最终的结果。

额外选项：将自定义 CSS 添加到设计滚动条（并非所有浏览器都支持）

如果您想要跨浏览器支持，在 WordPress 中设计滚动条样式会有点痛苦。 因此，在大多数情况下，您会希望将其保留为浏览器的默认样式并收工。 但是如果您确实想自定义滚动条以匹配您的页面设计，您可以添加一些自定义 CSS。 不幸的是，浏览器支持仅限于支持 ::webkit 前缀 CSS 属性的浏览器（基本上只有 Safari 和 Chrome）。 这是如何做到的。

打开专业部分的设置并添加以下 CSS 类：

CSS 类：cust-scroll

然后打开页面设置模式并将以下自定义 CSS 添加到页面。

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

这会将滚动条的宽度更改为 8px 并调整轨道和手柄的颜色。 随意尝试更多的设计和颜色。

如果您想知道，其他浏览器的后备将是浏览器滚动条的默认样式。

最后的想法

每当您想让用户选择在有限空间内查看更多内容时，向内容添加垂直滚动确实会派上用场。 可滚动的最近帖子小部件区域是垂直滚动如何真正发挥作用的一个很好的例子。 当然，您可以用文本模块替换本教程中使用的侧边栏模块，并为您想要的任何内容添加垂直滚动。 相同的定制将适用于任何模块。

关于滚动条的样式，我确信还有其他插件或 Javascript 解决方案可以提供更多跨浏览器的解决方案。 如果您知道任何好的，请随时与我们分享。

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

干杯!