WordPress divi主题

如何在 Divi 中通过具有酷悬停效果的类别布局设计最近的帖子

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

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

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

google广告开户

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

看看这个!

抢先看

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

按类别最近的帖子

按类别最近的帖子

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

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

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

让我们来看看教程好吗?

WordPress divi主题

你需要什么开始

按类别最近的帖子

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 此外,最近帖子部分的功能取决于您网站上的实际博客帖子以及分配给它们的类别。 因此,如果您使用的是测试站点,请确保您设置了一些模拟博客文章。

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

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

创建一个 4 列行

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

按类别最近的帖子

创建博客模块 1

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

按类别最近的帖子

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

博客内容

更新博客内容选项如下:

  • 帖子类型:帖子
  • 帖子数:1
  • 包含的类别:新闻(或您自己的)
  • 使用帖子摘录:否
  • 摘录长度:120

按类别最近的帖子

fiverr建站WordPress程序员

元素选项

然后更新元素选项如下:

  • 显示类别:没有
  • 显示摘录:NO(桌面),YES(悬停和平板电脑)
  • 显示分页:否

按类别最近的帖子

博客设计

然后更新设计如下:

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

按类别最近的帖子

  • 最小高度:450px(桌面),自动(平板电脑)
  • 填充:顶部 5%,底部 5%,左侧 5%,右侧 5%
  • 盒子阴影:见截图
  • 动画风格:缩放

按类别最近的帖子

独立站选品工具

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

创建类别标签 1

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

按类别最近的帖子

文字内容

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

按类别最近的帖子

高质量外链购买

设计类别标签

在文本设计设置下,更新以下内容:

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

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

按类别最近的帖子

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

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

JasperAI 10000字免费额度试用

按类别最近的帖子

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

更新第 2 列中的模块

留在线框视图中,打开第 2 列中博客模块的设置,并更新以下内容:

  • 包含的类别:商业(或您自己的)
  • 背景颜色(悬停):#f64937

按类别最近的帖子

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

WordPress备份工具updrafplus
  • 正文:“业务”
  • 背景颜色:#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 设计。

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

干杯!

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