如何在 Divi 中切换关于悬停的博客文章摘录

已发表: 2021-08-02

在悬停时切换博客文章摘录是一种保持博客文章紧凑网格布局的有效方法，而不会完全放弃这些摘录。 这个想法是最初隐藏摘录，然后在将鼠标悬停在网格内的帖子项目上时切换它们的可见性。 这允许用户在浏览器视口中查看更多帖子，同时为用户提供通过将鼠标悬停在帖子上来查看他们感兴趣的帖子摘录的选项。

在本教程中，我们将向您展示如何在 Divi 中悬停时切换博客文章摘录。 为此，我们将添加一些自定义 CSS 片段，这些片段将在悬停时切换博客模块帖子项目的摘录（不需要 JQuery）。 代码到位后，您可以使用 Divi 的内置设置随意设置博客模块的样式。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件
免费下载

免费下载

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

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

分区通知框

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

扩展角标签

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

  1. 如果您还没有安装并激活 Divi 主题。
  2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
  3. 选择“从头开始构建”选项。

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

如何在 Divi 中切换关于悬停的博客文章摘录

创建博客模块布局

首先，我们需要为我们的博客文章创建一个基本的布局。 对于此示例，我们将添加一个单列行，其中包含一个博客模块。

创建行

向该部分添加一列行。

行宽

在行设置模式中，更新以下设计设置以调整宽度。

  • 宽度：95%
  • 最大宽度：1200px

添加博客模块

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

博客模块设置

接下来，通过选择显示阅读更多按钮来更新博客模块内容设置。

在设计选项卡下，为博客选择网格布局。

在高级选项卡下，添加以下 CSS 类：

  • CSS 类：toggle-blog-excerpt

在下一步中，我们将使用此类作为自定义 CSS 代码的选择器。

使用代码模块添加自定义 CSS

此时，我们的博客文章有了一个基本的网格布局，并在博客模块中添加了一个自定义 CSS 类。 我们将使用这个 CSS 类选择器来定位这个特定的博客模块，并将悬停时的切换效果添加到帖子项目的帖子摘录部分。

要添加 CSS，我们将使用代码模块。 在博客模块下方添加一个新的代码模块。

粘贴后摘录切换效果所需的以下自定义 CSS。 确保将 CSS 包装在必要的样式标签中。 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

让我们在实时页面上查看到目前为止的结果。

结果

我们将在文章末尾更详细地介绍代码。 但是现在，让我们看看到目前为止的结果。

使用 Divi Builder 为博客模块添加其他样式

现在 CSS 已经到位，可以为我们的博客文章摘录提供切换效果，我们可以使用 Divi Builder 向博客模块添加任何其他样式。

对于此示例，我们将对样式进行最小的调整，但也可以随意探索您自己的样式。

样式帖子标题

  • 标题字体粗细：粗体
  • 标题文字颜色：#6d6a7e
  • 标题文字大小：20px
  • 标题行高度：1.3em

样式阅读更多文本

  • 阅读更多字体粗细：粗体
  • 阅读更多字体样式：TT
  • 阅读更多文字颜色：#6d6a7e
  • 阅读更多字母间距：1px
  • 阅读更多 线高：3.5em

样式分页

  • 分页字体粗细：粗体
  • 分页字体样式：TT
  • 分页文字颜色：#6d6a7e
  • 分页字母间距：1px

删除边框

  • 网格布局边框宽度：0px

悬停时的样式框阴影

  • 盒子阴影：见截图
  • 框阴影垂直位置：0px
  • 框阴影模糊强度：38px
  • 阴影颜色（桌面）：透明
  • 阴影颜色（悬停）：rgba(109,106,126,0.25)

最后结果

关于 CSS 代码

如果您对之前添加到代码模块中的自定义 CSS 的细分感兴趣，请看这里。

首先，我们需要将所有 CSS 包装在一个媒体查询中，该媒体查询只会将 CSS 应用于桌面浏览器。 

@media all and (min-width: 981px) {

}

其次，我们需要将持续时间为 500 毫秒的过渡添加到帖子内容/摘录，以便将鼠标悬停在帖子项目上时将发生的样式更改。

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

第三，我们需要确保在使用可视化构建器时帖子内容/摘录仍然可见，以便我们可以进行编辑。

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

第四，我们需要在页面加载时默认隐藏帖子内容/摘录。 为此，我们使用可见性：隐藏来隐藏内容。 然后我们添加 opacity:0 以便我们在将 opacity:1 添加到悬停状态时可以获得淡入和淡出的过渡效果。 当我们将 max-height:500px 添加到悬停状态时，我们还使用 max-height:0px 来获得滑动切换效果。

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

第五，当帖子项（.et_pb_post）处于悬停状态时，我们显示帖子内容/摘录。 为此，我们将可见性更改为可见，将不透明度更改为 1，将最大高度更改为 500 像素。

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

对于最后的片段，我们可以为所有帖子项目提供相同的最小高度，以获得更干净的垂直对齐的网格布局。

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

下面再看一下最终代码。 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

最后的想法

如本教程所示，添加一些 CSS 片段可以为您提供切换博客文章摘录所需的功能，并具有良好的悬停效果。 这种方法最好的部分是我们可以通过使用 Divi 的内置选项向博客模块添加我们想要的任何其他样式来构建此功能。 这将允许您为帖子项目添加更高级的样式，包括更多的悬停效果。 希望这将有助于为您的 Divi 网站的博客在设计和功能方面提供额外的提升。

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

干杯!