WordPress divi主题

如何使用 Divi 在悬停选项卡中展示功能

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

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

您是否正在寻找新的和创造性的方式来在您的网页上展示功能和/或产品? 如果是这样,请继续阅读,因为在这篇文章中,我们将向您展示如何仅使用 Divi 的内置选项在悬停选项卡中显示功能。 您使用这种方法的可能性是无穷无尽的,它们肯定会让您更深入地了解 Divi。 选项卡悬停效果只会出现在对悬停友好的桌面环境中。 当从较小的屏幕尺寸查看悬停选项卡时,功能将以其原始形式列出。

google广告开户

让我们开始吧!

预览

在我们深入教程之前,让我们看一下不同屏幕尺寸的结果。

桌面

悬停标签

移动的

悬停标签

让我们开始创作吧!

订阅我们的 Youtube 频道

添加新部分

渐变背景

添加新页面或打开现有页面并添加新部分。 打开部分设置并为部分添加渐变背景。 我们将使用渐变背景来覆盖悬停选项卡的左侧,如您在上面的打印屏幕中所见。

  • 颜色 1:#f2f2f2
  • 颜色2:#ffffff
  • 渐变方向:87度
  • 起始位置:20%
  • 结束位置:20%

悬停标签

间距

然后,通过在两个选项中添加“0px”来删除该部分的自定义顶部和底部填充。

WordPress divi主题
  • 顶部填充:0px
  • 底部填充:0px

悬停标签

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

悬停标签

背景颜色

尚未添加任何模块,打开行设置并更改背景颜色。

  • 背景颜色:#ffffff

悬停标签

行对齐

同时修改行对齐。

悬停标签

默认尺寸

并更改尺寸设置。

  • 使用自定义宽度:是
  • 单位:PX
  • 自定义宽度:400px
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

悬停标签

悬停大小

在悬停时修改大小设置中的自定义宽度选项。 这将允许该行在悬停时展开。

fiverr建站WordPress程序员

悬停标签

间距

然后,转到间距设置并删除默认的顶部和底部填充值。

  • 顶部填充:0px
  • 底部填充:0px

悬停标签

默认边框

在该行的右上角添加“20px”,并为该行添加一个左边框。

  • 左边框宽度:20px
  • 左边框颜色:#6d44ff

悬停标签

独立站选品工具

悬停边框

通过添加“0px”来删除悬停时的“20px”右上角圆角。

悬停标签

默认框阴影

最后但同样重要的是,添加一个微妙的盒子阴影。

  • 盒子阴影模糊强度:80px
  • 盒子阴影传播强度:-10px
  • 阴影颜色:rgba(0,0,0,0.11)

悬停标签

悬停框阴影

并在悬停时将阴影颜色修改为完全透明的颜色。

高质量外链购买
  • 阴影颜色:rgba(255,255,255,0)

悬停标签

将模糊模块添加到行

添加内容

现在我们已经完成了所有行设置的修改,我们可以继续在列中添加一个 Blurb 模块。 随意使用您选择的任何其他模块。 添加模块后,添加一些选择的内容。

悬停标签

选择图标

接下来选择您选择的图标。

悬停标签

JasperAI 10000字免费额度试用

图标设置

并在图标设置中更改图标的外观。

  • 图标颜色:#5323ff
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:54px

悬停标签

默认标题文本设置

接下来修改标题文本设置。

  • 标题字体:Poppins
  • 标题文本对齐方式:居中
  • 标题文字颜色:#5323ff
  • 标题文字大小:25px
  • 标题字母间距:-1px
  • 标题行高度:1em

悬停标签

悬停标题文本设置

并修改悬停时的标题行高度。

WordPress备份工具updrafplus

悬停标签

默认正文文本设置

然后,转到正文设置并进行一些更改。 这包括将文本大小更改为“0px”。 这将帮助我们使正文仅在悬停时出现。

  • 正文字体:Poppins
  • 正文字体粗细:Light
  • 正文文本对齐:居中
  • 正文文本颜色:#000000
  • 正文大小:0px(桌面),15px(平板电脑和手机)
  • 车身线高:2.2em

悬停标签

悬停正文文本设置

要确保在悬停时显示正文文本,请更改悬停时的文本大小。

悬停标签

默认间距

为了给模块一些喘息的空间,我们为模块添加了一些自定义的顶部和底部填充。

  • 上边距:80px
  • 底部填充:80px

悬停标签

悬停间距

我们将修改悬停时的间距设置。 在退出 Visual Builder 之前,您将无法看到最终结果,因为我们将悬停选项应用于行和 Blurb 模块。

  • 上边距:80px
  • 底部填充:80px
  • 左填充:20vw
  • 右填充:20vw

悬停标签

克隆行 3 次

完成第一行及其 Blurb 模块的修改后,您可以继续复制该行,最多可以复制任意多次。

悬停标签

更改行和模糊模块 #2

更改行间距

打开第一个副本并添加一些自定义左边距。 这将允许我们创建楼梯效果,您可以在这篇文章的预览中注意到。

悬停标签

更改行边框颜色

更改行的左边框颜色。

  • 左边框颜色:#00ffcc

悬停标签

更改模糊内容和图标

然后,打开 Blurb 模块并更改图标。

悬停标签

更改模糊模块图标颜色

连同图标颜色。

悬停标签

更改标题文本颜色

和标题文字颜色。

  • 标题文字颜色:#00eda6

悬停标签

更改行和模糊模块 #3

更改行间距

为第二个副本添加一些自定义左边距。

悬停标签

更改行边框颜色

更改左行边框颜色。

  • 左边框颜色:#afebff

悬停标签

更改模糊内容和图标

连同简介图标和内容。

悬停标签

更改模糊模块图标颜色

修改图标颜色。

悬停标签

更改标题文本颜色

标题文本颜色也是如此。

  • 标题文字颜色:#68d9ff

悬停标签

更改行和模糊模块 #4

更改行间距

到下一个也是最后一个副本! 向该行添加一些自定义左边距。

悬停标签

更改行边框颜色

更改行的左边框颜色。

  • 左边框颜色:#dd87cf

悬停标签

更改模糊内容和图标

打开行中的 Blurb Module 并更改模块的图标和内容。

悬停标签

更改模糊模块图标颜色

连同图标颜色。

悬停标签

更改标题文本颜色

标题文本颜色也是如此。

  • 标题文字颜色:#dd6aca

悬停标签

预览

现在我们已经完成了教程,让我们最后看看不同屏幕尺寸的结果。

桌面

悬停标签

移动的

悬停标签

最后的想法

在这篇文章中,我们向您展示了如何仅使用 Divi 的内置选项来创建悬停选项卡。 这种方法将帮助您以交互方式共享有关功能或产品的内容。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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