WordPress divi主题

如何使用 Divi 在页面上的任何位置放置悬停工具提示

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

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

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 在页面的任何位置创建和放置悬停工具提示。 这是与访问者共享辅助信息的好方法,无需立即将其直接包含在页面上。

让我们开始吧!

预览

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

桌面

悬停工具提示

移动的

悬停工具提示

免费下载悬停工具提示布局

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

使用 Dog Walker 主页布局创建新页面

添加新页面

您需要做的第一件事是创建一个新页面: 页面 > 添加新的. 继续给你的页面一个标题,发布页面并切换到 Visual Builder。

悬停工具提示

上传 Dog Walker 登陆页面

接下来将登录页面布局上传到您的页面。 尽管我们将使用此布局包来了解悬停工具提示技术,但您可以将此方法应用于您正在处理的任何类型的布局。

WordPress divi主题

悬停工具提示

创建悬停工具提示设计

在部分底部添加新行

列结构(决定您需要多少个工具提示)

上传着陆页布局后,就可以开始创建悬停工具提示了。 我们会将它们添加到页面上的特定位置,但您可以使用转换转换选项将它们放置在任何位置。 在您的页面上找到以下部分并在其底部添加一个三列行:

悬停工具提示

行最大宽度

为了确保工具提示设计出现在正确的位置,我们将使用与它上方的行相同的行最大宽度。 转到行的大小设置并相应地调整最大宽度:

悬停工具提示

间距

为了减少行容器占用的空间,我们将删除间距设置中的默认顶部和底部填充。

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

悬停工具提示

溢出

我们还确保行的溢出在高级选项卡中可见。

  • 水平溢出:可见
  • 垂直溢出:可见

悬停工具提示

将工具提示文本模块添加到第 1 列

将内容添加到内容框

问号跨度

是时候开始创建第一个工具提示设计了! 我们将使用文本模块。 我们将在内容框内添加一个 span(用于工具提示图标)和一个 div(用于工具提示内容)。 这将使我们能够更自由地单独设置悬停工具提示图标和工具提示内容的样式。 首先添加跨度并为其分配“问号”类。

fiverr建站WordPress程序员

悬停工具提示

工具提示区

继续使用“工具提示内容”类将 div 添加到内容框。 在此 div 中添加您选择的工具提示内容。

悬停工具提示

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文字字体:Open Sans
  • 文字颜色:#ffffff

悬停工具提示

独立站选品工具

H3 文字设置

修改 H3 文本设置。

  • 标题 3 字体:Amatic SC
  • 标题 3 文本颜色:#ffffff
  • 标题 3 文字大小:30px

悬停工具提示

浆纱

我们还在使用模块的宽度和高度来创建悬停效果。

  • 宽度:300 像素
  • 高度:42px

悬停工具提示

间距

也添加一些顶部填充。

高质量外链购买

悬停工具提示

默认可见性

现在,在默认状态下,我们希望隐藏工具提示图标下方的所有内容。 这就是我们将在高级选项卡中隐藏溢出的原因。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

悬停工具提示

悬停可见性

然而,在悬停时,我们希望一切都显示出来。 我们将通过在悬停时显示溢出来做到这一点。

  • 水平溢出:可见
  • 垂直溢出:可见

悬停工具提示

JasperAI 10000字免费额度试用

在文本模块下方添加代码模块

现在我们已经为模块设置了样式,我们仍然需要使用我们分配给它的 CSS 类来设置内容框内的 span 和 div 的样式。 在工具提示文本模块的正下方添加一个代码模块。

悬停工具提示

将 CSS 代码添加到文本模块中的样式 div

添加以下 CSS 代码行以设置文本模块不同部分的样式:

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

悬停工具提示

克隆工具提示文本模块两次并放置在剩余的列中

完成第一列后,您可以克隆工具提示文本模块两次,并将重复项放在该行的剩余两列中。

WordPress备份工具updrafplus

悬停工具提示

更改工具提示内容

确保更改每个副本的工具提示内容。

悬停工具提示

更改工具提示位置(使用变换翻译)

工具提示 #1

最后但并非最不重要的一点是,我们需要将工具提示重新定位在页面上任何我们想要的位置。 要获得与本文预览中显示的完全相同的结果,请打开第一个工具提示文本模块并应用以下变换转换值:

  • 右:-450px(台式机)、-2000px(平板电脑)、-1900px(手机)

悬停工具提示

工具提示 #2

移动到第二列中的工具提示文本模块并更改转换转换值,如下所示:

  • 右:-400px(台式机)、-1300px(平板电脑)、-1250px(手机)

悬停工具提示

工具提示 #3

对第 3 列中的工具提示文本模块执行相同的操作,您就完成了!

  • 右:-500px(桌面),-600px(平板电脑和手机)

悬停工具提示

预览

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

桌面

悬停工具提示

移动的

悬停工具提示

最后的想法

在这篇文章中,我们向您展示了如何在页面上的任何位置创建和放置悬停工具提示,而无需额外的插件。 这是添加其他信息而不直接将其包含在您的页面上的好方法。 这个用例教程是我们正在进行的 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何疑问,请确保在下面的评论部分中留下问题!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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