WordPress divi主题

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

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

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

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

google广告开户

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

让我们开始吧!

抢先看

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

免费下载布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

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

然后单击导入按钮。

迪维通知框

WordPress divi主题

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

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

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

创建博客模块布局

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

创建行

向该部分添加一列行。

行宽

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

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

fiverr建站WordPress程序员

添加博客模块

在该行的列内,添加一个新的博客模块。

博客模块设置

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

在设计选项卡下,选择博客的网格布局。

独立站选品工具

在高级选项卡下,添加以下 CSS 类:

  • CSS 类:切换博客摘录

在下一步中,我们将使用这个类作为我们自定义 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;  
  }
}

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

JasperAI 10000字免费额度试用

结果

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

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

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

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

风格帖子标题

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

样式 阅读更多文本

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

WordPress备份工具updrafplus

样式分页

  • 分页字体粗细:粗体
  • 分页字体样式: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 网站的博客在设计和功能方面提供额外的提升。

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

干杯!

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