您是否正在寻找新的和创造性的方式来在您的网页上展示功能和/或产品? 如果是这样,请继续阅读,因为在这篇文章中,我们将向您展示如何仅使用 Divi 的内置选项在悬停选项卡中显示功能。 您使用这种方法的可能性是无穷无尽的,它们肯定会让您更深入地了解 Divi。 选项卡悬停效果只会出现在对悬停友好的桌面环境中。 当从较小的屏幕尺寸查看悬停选项卡时,功能将以其原始形式列出。
让我们开始吧!
预览
在我们深入教程之前,让我们看一下不同屏幕尺寸的结果。
桌面
移动的
让我们开始创作吧!
订阅我们的 Youtube 频道
添加新部分
渐变背景
添加新页面或打开现有页面并添加新部分。 打开部分设置并为部分添加渐变背景。 我们将使用渐变背景来覆盖悬停选项卡的左侧,如您在上面的打印屏幕中所见。
- 颜色 1:#f2f2f2
- 颜色2:#ffffff
- 渐变方向:87度
- 起始位置:20%
- 结束位置:20%
间距
然后,通过在两个选项中添加“0px”来删除该部分的自定义顶部和底部填充。
- 顶部填充:0px
- 底部填充:0px
添加新行
立柱结构
继续使用以下列结构向该部分添加新行:
背景颜色
尚未添加任何模块,打开行设置并更改背景颜色。
- 背景颜色:#ffffff
行对齐
同时修改行对齐。
默认尺寸
并更改尺寸设置。
- 使用自定义宽度:是
- 单位:PX
- 自定义宽度:400px
- 使用自定义装订线宽度:是
- 天沟宽度:1
悬停大小
在悬停时修改大小设置中的自定义宽度选项。 这将允许该行在悬停时展开。
间距
然后,转到间距设置并删除默认的顶部和底部填充值。
- 顶部填充:0px
- 底部填充:0px
默认边框
在该行的右上角添加“20px”,并为该行添加一个左边框。
- 左边框宽度:20px
- 左边框颜色:#6d44ff
悬停边框
通过添加“0px”来删除悬停时的“20px”右上角圆角。
默认框阴影
最后但同样重要的是,添加一个微妙的盒子阴影。
- 盒子阴影模糊强度:80px
- 盒子阴影传播强度:-10px
- 阴影颜色:rgba(0,0,0,0.11)
悬停框阴影
并在悬停时将阴影颜色修改为完全透明的颜色。
- 阴影颜色:rgba(255,255,255,0)
将模糊模块添加到行
添加内容
现在我们已经完成了所有行设置的修改,我们可以继续在列中添加一个 Blurb 模块。 随意使用您选择的任何其他模块。 添加模块后,添加一些选择的内容。
选择图标
接下来选择您选择的图标。
图标设置
并在图标设置中更改图标的外观。
- 图标颜色:#5323ff
- 图标位置:顶部
- 使用图标字体大小:是
- 图标字体大小:54px
默认标题文本设置
接下来修改标题文本设置。
- 标题字体:Poppins
- 标题文本对齐方式:居中
- 标题文字颜色:#5323ff
- 标题文字大小:25px
- 标题字母间距:-1px
- 标题行高度:1em
悬停标题文本设置
并修改悬停时的标题行高度。
默认正文文本设置
然后,转到正文设置并进行一些更改。 这包括将文本大小更改为“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 的内置选项来创建悬停选项卡。 这种方法将帮助您以交互方式共享有关功能或产品的内容。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!