WordPress divi主题

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

| 5月 13, 2022 | Divi主题使用教程 | 0 条评论

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

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

google广告开户

让我们开始吧!

抢先看

这是我们将在本教程中构建的设计的一个小偷窥。

可滚动的最近帖子

可滚动的最近帖子

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

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

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

让我们来看看教程好吗?

订阅我们的 Youtube 频道

WordPress divi主题

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

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

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

可滚动的最近帖子

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

可滚动的最近帖子

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

可滚动的最近帖子

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

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

设计标题部分

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

可滚动的最近帖子

fiverr建站WordPress程序员

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

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

可滚动的最近帖子

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

自定义填充:0px 底部

独立站选品工具

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

可滚动的最近帖子

然后更新以下文本设置:

对于内容,添加以下 h2 标题 html:

<h2>From our Blog</h2>

可滚动的最近帖子

高质量外链购买

然后更新以下文本设置:

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

可滚动的最近帖子

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

创建专业部分

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

JasperAI 10000字免费额度试用

继续并添加一个具有右侧栏列布局的专业部分,如下所示:

可滚动的最近帖子

然后将一列行添加到该部分。

可滚动的最近帖子

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

WordPress备份工具updrafplus

自定义部分设置

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

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

可滚动的最近帖子

自定义行设置

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

高度:640 像素
顶部边框宽度: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%

640px 最大高度与为相邻行提供的 640px 自定义高度相匹配。

可滚动的最近帖子

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

垂直溢出:滚动

可滚动的最近帖子

最后结果

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

可滚动的最近帖子

可滚动的最近帖子

可滚动的最近帖子

可滚动的最近帖子

奖励选项:将自定义 CSS 添加到设计滚动条(并非所有浏览器都支持)

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

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

CSS 类:自定义滚动

可滚动的最近帖子

然后打开页面设置模式并将以下自定义 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 解决方案可以提供更多跨浏览器解决方案。 如果您知道任何好的,请随时与我们分享。

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

干杯!