WordPress divi主题

如何使用 Divi 显示悬停时的列内容(免费下载!)

| 5月 14, 2022 | Divi主题使用教程 | 0 条评论

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

在最近的一篇 Divi 帖子中,我们向您展示了如何使隐藏的行内容出现在悬停时。 今天,我们将向您展示如何使用相同类型的方法来显示列内容。 我们将处理的方法类似,允许您创建在桌面上具有良好悬停效果的各种设计,但也适用于没有悬停选项的较小屏幕尺寸。

google广告开户

我们希望本教程能激发您为您构建的网站创建各种交互式设计! 在文章的最后,您将能够下载 JSON 文件并根据您的需要对其进行调整。

让我们开始吧!

预览

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

桌面

正如您在下面的 GIF 中看到的那样,我们有一个平滑的悬停过渡,可以在悬停时显示列内容。

显示列内容

移动的

另一方面,在较小的屏幕尺寸上,无需悬停即可显示列内容。

显示列内容

让我们开始重建吧!

订阅我们的 Youtube 频道

WordPress divi主题

添加新的常规部分

间距

打开一个新的或现有的页面并向其中添加一个常规部分。 打开部分设置并在间距设置中添加一些顶部和底部自定义填充。

  • 顶部填充:10vw
  • 底部填充:15vw

显示列内容

添加新行

立柱结构

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

显示列内容

浆纱

在不添加任何模块的情况下,打开行设置并对大小设置进行一些更改。 这些设置将允许行占据屏幕的整个宽度,并且还有助于消除列之间的所有空间。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

显示列内容

间距

接下来进入行间距设置。 在这里,我们将通过添加自定义填充值来替换我们在上一步中删除的空间。

  • 左填充:8vw
  • 右填充:8vw
  • 第 1 列右填充:2vw
  • 第 2 列左填充:1vw
  • 第 2 列右填充:1vw
  • 第 3 列左填充:2vw

显示列内容

将文本模块 #1 添加到第 1 列

添加内容

是时候开始添加模块了! 从第 1 列中的文本模块开始。添加一些选择的 H3 内容。

显示列内容

fiverr建站WordPress程序员

H3 文字设置

然后,进入标题文字设置,对H3内容的外观做一些改动。

  • 标题 3 字体:Didact Gothic
  • 标题 3 字体粗细:粗体
  • 标题 3 文本对齐:居中
  • 标题 3 文字颜色:#3567ff
  • 标题 3 文字大小:1.2vw(桌面),20px(平板电脑和手机)

显示列内容

间距

接下来将一些自定义间距值添加到文本模块。

  • 底边距:4vw
  • 顶部填充:4vw
  • 底部填充:4vw

显示列内容

盒子阴影

并给模块一个微妙的盒子阴影。

独立站选品工具
  • 盒子阴影垂直位置:36px
  • 盒子阴影模糊强度:60px
  • 阴影颜色:rgba(0,0,0,0.06)

显示列内容

将文本模块 #2 添加到第 1 列

添加内容

继续在前一个文本模块的正下方添加另一个文本模块。 添加一些选择的段落内容。

显示列内容

文字设置

然后,转到设计选项卡并对文本设置进行一些更改。

  • 文字字体:Open Sans
  • 文字大小:0.8vw(桌面),14px(平板电脑和手机)
  • 文字字母间距:-0.05vw
  • 文字行高:2.2em
  • 文本方向:两端对齐
  • 文字颜色:深色

显示列内容

高质量外链购买

显示列内容

间距

也可以在间距设置中使用自定义边距和填充值。

  • 底边距:3vw
  • 顶部填充:2vw
  • 底部填充:2vw
  • 左填充:4vw
  • 右填充:4vw

显示列内容

边界

并使用以下设置为模块添加左右边框:

  • 右边框宽度:1px
  • 右边框颜色:#e5e5e5

显示列内容

JasperAI 10000字免费额度试用

将按钮模块添加到第 1 列

添加副本

第一列中我们需要的下一个模块是按钮模块。 添加一些您选择的副本。

显示列内容

结盟

然后,转到设计选项卡并将按钮对齐方式更改为居中。

显示列内容

按钮设置

继续打开按钮设置并更改按钮的外观,使其与我们要实现的整体设计相匹配。

WordPress备份工具updrafplus
  • 为按钮使用自定义样式:是
  • 按钮文字大小:1vw(桌面),15px(平板电脑和手机)
  • 按钮文字颜色:#000000
  • 按钮边框宽度:1px
  • 按钮边框颜色:#dddddd
  • 按钮边框半径:0px
  • 按钮字母间距:-0.05vw
  • 字体粗细:粗体
  • 字体样式:大写

显示列内容

显示列内容

间距

也可以使用 Button Module 的间距值。

  • 底边距:100px(平板电脑和手机)
  • 顶部填充:0.8vw(桌面),10px(平板电脑和手机)
  • 底部填充:0.8vw(桌面),10px(平板电脑和手机)
  • 左填充:3.5vw(桌面),50px(平板电脑和手机)
  • 右填充:3.5vw(桌面),50px(平板电脑和手机)

显示列内容

将第 1 列中的模块克隆两次并在剩余列中放置重复项

将三个不同的模块添加到第 1 列后,您可以继续将每个模块克隆两次。 将副本放在剩余的两列中,以在每一列中实现相同的设计。

显示列内容

更改第 2 列中文本模块 #1 的文本颜色

打开第 2 列中的第一个文本模块并更改文本颜色。

  • 标题 3 文字颜色:#6d28c1

显示列内容

更改第 3 列中文本模块 #1 的文本颜色

对第三列中的第一个文本模块执行相同的操作。

  • 标题 3 文字颜色:#15668e

显示列内容

将叠加文本模块添加到第 1 列

添加内容

现在我们已经拥有了我们需要的所有列内容,我们可以添加重叠元素,在悬停之前隐藏内容。 为此,我们将使用另一个文本模块。 继续并在第一列中添加另一个。 确保这是该列中的最后一个模块。 添加一些您选择的内容。

显示列内容

渐变背景

继续向模块添加渐变背景。

  • 颜色1:#6a30ff
  • 颜色2:#3567ff
  • 渐变方向:124度

显示列内容

文字设置

接下来更改文本设置。

  • 文字字体:Didact Gothic
  • 文字颜色:#ffffff
  • 文字大小:2vw
  • 文本方向:中心

显示列内容

间距

并通过添加一些自定义填充值从模块中创建一个形状。 我们还添加了一些负上边距来创建此模块和列内容之间的重叠。 您隐藏在文本模块后面的内容将无法点击。 这就是为什么保持号召性用语(例如我们示例中的按钮)在没有悬停的情况下可见的原因很重要。

  • 最高边距:-38vw
  • 顶部填充:15vw
  • 底部填充:15vw

显示列内容

边界

接下来为文本模块添加一些圆角。

显示列内容

盒子阴影

以及一个微妙的盒子阴影。

  • 盒子阴影模糊强度:40px
  • 阴影颜色:rgba(0,0,0,0.16)

显示列内容

默认过滤器

然后,转到过滤器设置并确保默认不透明度为“100%”。

显示列内容

悬停过滤器

将悬停时的不透明度更改为“0%”。 这将使模块消失,并允许显示所有列内容。

显示列内容

自定义 CSS

为确保文本模块位于所有列内容之上,请在文本模块的高级选项卡中添加两行 CSS 代码。

z-index: 99;
position: relative

显示列内容

能见度

并将整个模块隐藏在平板电脑和手机上。 如本文开头所述,我们在较小的屏幕尺寸上显示所有列内容,以确保访问者的用户体验良好。

显示列内容

克隆覆盖文本模块两次并在剩余列中放置重复项

修改完覆盖文本模块后,继续克隆它两次。 将每个重复项放在剩余的两列中。

显示列内容

更改第 2 列中叠加文本模块的渐变背景

更改第一个副本的渐变背景颜色。

  • 颜色 1:#d530ff
  • 颜色 2:#6d28c1

显示列内容

更改第 3 列中叠加文本模块的渐变背景

对第二个副本也做同样的事情。

  • 颜色一:#41ff30
  • 颜色 2:#15668e

显示列内容

免费下载该部分

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

预览

桌面

显示列内容

移动的

显示列内容

最后的想法

在这篇文章中,我们向您展示了如何在悬停时显示列内容。 您可以将此方法用于您创建的任何类型的网站,以添加额外的交互级别。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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