WordPress divi主题

如何使用 Divi 使隐藏行内容出现在悬停上(免费下载!)

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

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

在您的网站上添加微妙的交互可以真正提升访问者的整体用户体验。 让您的网站看起来更漂亮,同时仍然尊重用户友好性的一件事是让行内容出现在悬停时。 这是展示服务、产品、功能等的好方法。

google广告开户

在本教程中,我们将向您展示如何创建从 A 到 Z 的特定设计,但是一旦您掌握了该方法,您就可以使其适用于您正在处理的任何类型的网站。 在这篇博文的最后,我们还将分享这个设计的 JSON 文件,您可以免费下载并不受任何限制地使用。

让我们开始吧!

预览

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

桌面

隐藏行内容

移动的

隐藏行内容

让我们开始创作吧!

添加新部分

默认背景颜色

首先将新部分添加到新页面或现有页面并更改部分背景颜色。

  • 背景颜色:#e0e0e0

隐藏行内容

悬停背景颜色

在悬停时修改此背景颜色。

WordPress divi主题
  • 背景颜色:#000000

隐藏行内容

间距

转到设计选项卡并添加一些自定义间距值。 为了使本教程工作,我们将只使用视口单位。 这将有助于确保一切都保持原位,无论屏幕大小如何。

  • 最高边距:5vw
  • 底边距:5vw
  • 左边距:3vw
  • 右边距:3vw
  • 顶部填充:0px
  • 底部填充:0px

隐藏行内容

添加第 1 行

立柱结构

继续使用以下列结构添加新行:

隐藏行内容

渐变背景

尚未添加任何模块,打开行设置并添加渐变背景。

  • 颜色 1:#ff5b79
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:中心
  • 起始位置:15%
  • 结束位置:15%

隐藏行内容

浆纱

也对行的大小设置进行一些更改。

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

隐藏行内容

间距

并在间距设置中添加一些自定义填充值。

fiverr建站WordPress程序员
  • 顶部填充:9vw
  • 底部填充:9vw
  • 第 1 列左填充:5vw
  • 第 1 列右填充:5vw
  • 第 2 列左填充:5vw
  • 第 2 列右填充:5vw

隐藏行内容

将文本模块添加到第 1 列

添加内容

是时候开始添加模块了! 我们需要的第一个模块是第 1 列中的文本模块。添加 H3 内容和链接。

隐藏行内容

链接文本设置

然后,转到链接文本设置并对链接的外观进行一些更改。

  • 链接字体:Didact Gothic
  • 链接字体样式:下划线
  • 链接下划线样式:实心
  • 链接文本颜色:#ffffff
  • 链接文字大小:20px

隐藏行内容

独立站选品工具

标题文字设置

修改 H3 文本设置。

  • 标题 3 字体:Didact Gothic
  • 标题 3 文本颜色:#ffffff
  • 标题 3 文字大小:50px

隐藏行内容

能见度

最后但同样重要的是,禁用桌面上的模块。 我们只需要这个模块显示在较小的屏幕尺寸上。

隐藏行内容

将分隔模块添加到第 2 列

能见度

第 1 列中需要的第二个也是最后一个模块是分频器模块。 确保启用了“显示分隔线”选项。

高质量外链购买

隐藏行内容

颜色

然后,更改分隔线颜色。

隐藏行内容

间距

也向 Divider 模块添加一些自定义边距值。

  • 上边距:11vw(桌面),80px(平板),
  • 底边距:50px(平板电脑和手机)

隐藏行内容

JasperAI 10000字免费额度试用

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

添加内容

进入第二列! 添加一个带有一些 H4 内容选择的文本模块。

隐藏行内容

标题文字设置

然后,转到 H4 文本设置并进行一些更改。

  • 标题 4 字体:Didact Gothic
  • 标题 4 字体粗细:粗体
  • 标题 4 文本颜色:#ffffff
  • 标题 4 文字大小:2vw(桌面)、40px(平板电脑)、30px(手机)

隐藏行内容

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

添加内容

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

WordPress备份工具updrafplus

隐藏行内容

文字设置

接下来转到文本设置并进行一些更改。

  • 文字字体:Didact Gothic
  • 文字颜色:#ffffff
  • 文字大小:0.9vw(桌面),18px(平板电脑和手机)
  • 文本行高:2em

隐藏行内容

间距

也添加一些自定义边距值。

  • 最高边距:2vw
  • 右边距:15vw

隐藏行内容

添加第 2 行

立柱结构

修改完第一行及其所有模块后,您可以继续使用以下列结构添加新行:

隐藏行内容

浆纱

在不添加任何模块的情况下,打开行设置并对 Sizing 设置进行一些更改。

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

隐藏行内容

间距

删除行间距设置中的所有默认填充。

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

隐藏行内容

能见度

最后但同样重要的是,在平板电脑和手机上隐藏这一行。

隐藏行内容

将文本模块添加到列

添加内容

我们在这一行中唯一需要的模块是一个文本模块。 添加一些H3内容和一个链接。

隐藏行内容

默认背景颜色

然后,转到背景设置并为文本模块添加背景颜色。

  • 背景颜色:#e0e0e0

隐藏行内容

悬停背景颜色

在悬停时修改此背景颜色。

  • 背景颜色:rgba(255,255,255,0)

隐藏行内容

默认文本设置

接下来,转到文本设置并进行一些更改。

  • 链接字体:Didact Gothic
  • 链接字体样式:下划线
  • 链接下划线样式:实心
  • 链接文本颜色:#ffffff
  • 链接文字大小:0px
  • 链接字母间距:-1px

隐藏行内容

悬停链接文本设置

修改悬停时的链接文本大小。

隐藏行内容

默认标题文本设置

继续对 H3 文本设置进行一些更改。

  • 标题 3 字体:Didact Gothic
  • 标题 3 字体粗细:粗体
  • 标题 3 文本颜色:#000000
  • 标题 3 文字大小:12vw
  • 标题 3 字母间距:-0.8vw

隐藏行内容

悬停标题文本设置

修改悬停时的一些 H3 文本设置。

  • 标题 3 文本颜色:#ffffff
  • 标题 3 文字大小:4vw
  • 标题 3 字母间距:-0.2vw

隐藏行内容

间距

然后,转到间距设置并添加一些自定义边距和填充值。

  • 最高边距:-34.3vw
  • 底边距:-5vw
  • 顶部填充:10vw
  • 底部填充:10vw
  • 左填充:26.5vw

隐藏行内容

悬停间距

修改悬停时的间距值。

  • 最高边距:-34.1vw
  • 底边距:-5vw
  • 顶部填充:12vw
  • 底部填充:12vw
  • 左填充:11.5vw

隐藏行内容

过渡

增加文本模块的过渡持续时间。

  • 转换持续时间:400ms

隐藏行内容

克隆部分

完成第一部分后,继续复制整个部分,最多可以复制任意多次。 在本教程的下一部分中,我们将向您展示您需要对每个副本进行的更改。

行出现在悬停

更改部分悬停背景颜色

您需要修改的第一件事是部分悬停背景颜色。

  • 背景颜色:#ff5b79

行出现在悬停

更改第 1 行渐变背景

更改第 1 行渐变背景。

行出现在悬停

更改文本颜色和复制

连同文本颜色和所有副本。

  • 标题 3 文字颜色:#ff5b79

行出现在悬停

更改文本模块间距

最后但同样重要的是,更改第 2 行中文本模块的左侧填充。 您需要使用的左侧填充量取决于您使用的内容的长度。

行出现在悬停

免费下载布局

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

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

隐藏行内容

移动的

隐藏行内容

最后的想法

在这篇文章中,我们向您展示了如何在悬停时显示隐藏的行内容。 我们创建的结果仅使用 Divi 的内置选项。 我们还在教程末尾分享了 JSON 文件,希望它也能帮助您创建自己的替代设计。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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