如何在 Divi 中使用酷悬停效果按类别布局设计最近的帖子

我们都习惯于在网站上看到最近的帖子。 它们通常是使用 WordPress 最近发布的小部件或插件生成的，以显示博客上最近发布的文章。 它们通常出现在博客页面、帖子底部、侧边栏或登陆页面的特色部分（类似这样）。

在本教程中，我们将向您展示如何按类别显示最近的帖子。 仅使用 Divi Builder（和一些博客模块），我们将创建一个部分，显示来自四个不同类别的最新帖子。 最近按类别分类的帖子将包括独特的类别标签、动画和悬停效果——所有这些都没有插件。

一探究竟！

抢先看

以下是我们将一起构建的按类别布局的近期帖子的设计和功能的快速浏览。

按类别布局免费下载最近的帖子

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

下载文件

免费下载

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

下载

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

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

让我们开始教程吧？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 此外，最近帖子部分的功能取决于您网站上的实际博客帖子，并为其分配了类别。 因此，如果您使用的是测试站点，请确保您设置了一些模拟博客文章。

之后，您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中按类别部分创建最近的帖子

创建一个 4 列的行

要在 Divi Builder 中开始工作，请创建一个 4 列的行。

创建博客模块 1

四列中的每一列都将包含一个单独的博客模块。 将第一个博客模块添加到第 1 列。

默认情况下，每个博客模块都会显示您网站上的最新帖子。 我们要做的就是为该特定博客模块选择一个特定类别。 然后我们将帖子数限制为 1，以便只显示一个帖子。 这将动态地为我们提供该类别的最新博客文章。

博客内容

更新博客内容选项如下：

• 帖子类型：帖子
• 帖子数：1
• 包含的类别：新闻（或您自己的一个）
• 使用帖子摘录：否
• 摘录长度：120

元素选项

然后更新元素选项如下：

• 显示分类： 没有
• 显示摘录：否（桌面），是（悬停和平板电脑）
• 显示分页：否

博客设计

然后更新设计如下：

• 背景颜色（桌面）：#ffffff
• 背景颜色（悬停）：#8ac829
• 标题字体粗细：半粗体
• 标题字体样式：TT
• 标题文字大小：24px
• 标题字母间距：1px
• 标题行高度：1.4em
• 正文颜色：#ffffff
• 元字体重量：轻
• 元字母间距：3px

• 最小高度：450px（桌面），自动（平板）
• 填充：顶部 5%，底部 5%，左侧 5%，右侧 5%
• 盒子阴影：见截图
• 动画风格：缩放

这负责我们第一个博客模块的设计。 现在我们需要创建我们的自定义类别标签。

创建类别标签 1

要创建标签，请在博客模块下添加一个新的文本模块，然后将其拖到博客模块上方。

文字内容

使用您为博客模块选择的类别名称更新正文内容。 在我的示例中，我将显示来自新闻类别的最新帖子，因此我将在正文内容中添加“新闻”一词。

设计类别标签

在文本设计设置下，更新以下内容：

• 背景颜色：#8ac829
• 文字字体粗细：超粗
• 文字文字颜色：#ffffff
• 文本对齐：居中
• 宽度：120px
• 边距：顶部 80 像素，底部 -80 像素
• 填充：顶部 10 像素，底部 10 像素
• 动画风格：淡入淡出
• 动画延迟：1000ms
• Z指数：1

由于我们使用负边距将标签放在博客卡片上，我们需要将 z 索引设置为 1，以便标签保持在博客模块上方。

现在我们完成了一篇文章，我们可以部署线框视图模式并将这些模块复制到其他列。

复制第 1 列中的文本和博客模块并将它们粘贴到第 2、3 和 4 列中，以便您在每一列中拥有完全相同的模块。

对于每个重复的博客模块，我们需要给它一个新的博客类别和悬停背景颜色。 对于每个重复的类别标签，我们需要更新类别名称以与为博客模块选择的类别相对应，然后更新背景颜色以匹配博客模块的悬停背景颜色。

更新第 2 列中的模块

保持在线框视图，打开第 2 列中博客模块的设置，并更新以下内容：

• 包含的类别：企业（或您自己的）
• 背景颜色（悬停）：#f64937

然后更新第 2 列中文本模块的设置，如下所示：

• 正文：“商业”
• 背景颜色：#f64937

更新第 3 列中的模块

然后打开第 3 列中博客模块的设置，并更新以下内容：

• 包含的类别：金钱（或您自己的）
• 背景颜色（悬停）：#6529c7

然后更新第 3 列中文本模块的设置，如下所示：

• 身体：“钱”
• 背景颜色：#6529c7

更新第 4 列中的模块

然后打开第 4 列中博客模块的设置，并更新以下内容：

• 包含的类别：教练（或您自己的）
• 背景颜色（悬停）：#f17809

然后更新第 4 列中文本模块的设置，如下所示：

• 身体：“教练”
• 背景颜色：#f17809

更新行设置

我们需要对行进行一些调整，包括设置高度和自定义装订线宽度。 更新以下行设置：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 宽度：94%
• 最大宽度：1400px
• 高度：540px（桌面），自动（平板）
• 填充：0px 顶部，0px 底部

我们将桌面上的行高设置为 540 像素，以便在将鼠标悬停在博客卡片上时防止行扩展和移动页面上的其他内容。 确保在平板电脑上将高度设置为自动，这样您就不会隐藏任何内容。

更新每列的设置

为了给最近的博客文章同时应用到两个模块的悬停效果，我们可以将悬停效果添加到包含构成博客文章的两个模块的列中。 打开每一列的设置并更新以下内容：

• 变换比例（悬停）：115%

然后将以下自定义 CSS 添加到仅平板电脑显示器上的主要元素：

transform: none !important

这个小片段将禁用移动设备的变换比例悬停效果。

现在，每当最近的帖子都设置有相应的类别标签和匹配的背景颜色时，会在将鼠标悬停在卡片上时显示。 此外，卡片会变大并在悬停时显示摘录。

更新部分设置

对于该部分，让我们给它一个新的背景渐变和一些填充。 打开部分设置并更新以下内容：

• 背景渐变左颜色：#6529c7
• 背景渐变右颜色：#f64937
• 梯度方向：270度
• 填充物：10vw 顶部，10vw 底部

最后结果

就是这样！ 让我们看看最终的结果。 此图像包含一个标题，可以轻松添加以完成设计。

这是动画和悬停效果。

最后的想法

一旦您跳出框框思考，按类别布局创建最近的帖子确实是一个简单的过程。 您真正需要做的就是为要显示的每个类别创建一个博客模块。 然后将该模块限制为仅显示某个类别的最新帖子。 之后，您就可以拥有 Divi 的力量来处理设计。

这种布局可以在您网站的任何地方使用，包括主题生成器模板。 因此，请随时使用可移植性选项将它们导入到任何需要它们的地方。 我希望它对你的下一个项目有用，或者至少给你一点灵感，让这些轮子转动以获得更好的 Divi 设计。

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

干杯!