如何在 Divi 中使用引人入胜的工具提示标记背景图像

添加工具提示来标记背景图像是一种创造性的方式，可以让访问者了解有关您的产品或服务的宝贵信息。 基本思想是在图像上定位图标（或文本）特定位置（如带有精确定位的谷歌地图）。 如果您利用 Divi 的悬停效果，您可以在将鼠标悬停在图标上时显示其他文本以创建引人入胜的工具提示。

在本教程中，我将向您展示如何使用简介标记背景图像，这些简介将用作有关您产品的信息工具提示。 为此，我将使用 Fitness Gym Landing 页面来标记带有有关优质健身信息的背景图像。

让我们开始吧。

先睹为快

这是我们将在本教程中构建的设计的先睹为快。

你需要什么

对于本教程，您将需要以下内容：

• 迪维主题
• 健身馆布局包中的健身馆登陆页面（可从 Divi Builder 获得）
• 用于背景图片的图片，正好是 320 像素 x 507 像素。 随意将它拖到您的桌面上并将其用于本教程。
  

准备预制布局

首先，创建一个新页面，添加标题，然后部署 Visual Builder。 然后选择“选择预制布局”。 从加载库弹出窗口中，选择 Fitness Gym Landing Page 布局并单击“使用此布局”。

将布局加载到页面后，向下滚动到第四部分，两列行的右列标题为“特色节目”。 我们将在此行的左列中添加带有工具提示的背景图像。

使用内嵌编辑器将右栏中的标题文本更改为“Smart Fitness”。

添加背景图像并自定义行设置

对于这种设计，尺寸和间距至关重要，并且需要精确。 而且，这一切都始于我们背景图片的大小。 如前所述，我们用于背景的图像应该是 320 像素 x 507 像素。 由于 320px 宽度是移动设备的良好起点，这将使我们能够使设计对移动设备友好，而无需更改图像的大小。

打开行设置并将背景图像添加到第 1 列。然后更新以下内容：

第 1 列背景图像大小：实际大小
第 1 列背景图像位置：左中
第 1 列背景图像重复：无重复

接下来我们需要为行添加自定义宽度并取出顶部和底部间距。

自定义宽度：700px
自定义填充：0px 顶部，0px 底部

将宽度设置为 700px 将确保行在平板电脑断点之前不会在较小的屏幕尺寸上变小。

在这一点上，我认为继续将第 1 列的特定高度设置为与背景图像的高度相等是个好主意。 这样我们就知道如果列的内容没有暴露整个图像，图像将保持可见。 为此，请转到高级选项卡并在第 1 列主要元素中添加以下自定义 CSS：

height: 507px;

现在列的高度等于图像的高度，并且不取决于我们添加到行中的内容（或模块）。

使用 Blurbs 在背景图像上添加工具提示标签

背景图像到位后，我们可以开始添加我们的简介，这些简介将被定位和设置为工具提示。 继续向第 1 列添加一个简介模块并更新以下简介设置：

书名：《焦点》
内容：“成功的关键！”
使用图标：是
图标：见截图

保持标题和内容只有几个词很重要，因为我们希望能够在背景图像中容纳整个简介。

接下来，您将更新设计设置。 这是一种更高级的宣传语设计，因此有很多选项可以更改，还有一些悬停效果可以在悬停时显示宣传语的内容。 更新以下简介设计设置：

图标颜色：#edf000
圆圈图标：是
圆圈颜色：rgba(0,0,0,0)
显示圆形边框：是
圆形边框颜色（默认）：rgba(0,0,0,0)
圆形边框颜色（悬停）：#edf000
图像/图标放置：左
使用图标字体大小：是
图标字体大小：40px

继续调整设计设置如下：

标题字体粗细：粗体
标题文本颜色（默认）：rgba(0,0,0,0)
标题文本颜色（默认）：#edf000
正文文本颜色（默认）：rgba(0,0,0,0)
正文颜色（默认）：#ffffff

（请注意，默认文本颜色是完全透明的，以便在您将鼠标悬停在简介上之前隐藏它们。）

自定义边距：顶部 15px，底部 0px，左侧 90px
自定义填充：顶部 5px，底部 5px，右侧 5px

（自定义边距是您将模糊图标​​放置在图像上特定位置的方式。）

盒子阴影：见截图
框阴影水平位置：-154px
框阴影垂直位置：0px
阴影颜色（默认）：rgba(0,0,0,0)
阴影颜色（悬停）：#1e2441

（框阴影是一种在简介内容后面添加背景颜色的创造性方法。默认情况下，框阴影是完全透明的，但在悬停时会显示漂亮的蓝色。）

现在去检查你的第一个广告的最终结果，以确保悬停效果和设计是正确的。

接下来，我们可以复制 blurb 模块来创建我们的第二个工具提示标签。 复制简介后，您可以将内容更新为您想要的任何文本（保持简短）。 然后您需要做的就是使用不同的自定义边距定位工具提示，如下所示：

自定义边距：顶部 0px，底部 0px，左侧 15px

要创建第三个简介，您可以复制第二个简介。

对于第三个简介，我们将用完图像右侧的空间，因此我们真的没有太多空间来放置内容。 我们可以使用负边距将模糊扩展到图像之外，但这也会超出移动设备上 320 像素的屏幕尺寸。 因此，我们将引入一些小代码片段来翻转我们的简介内容，以便图标在右侧，文本在左侧。 为此，请打开模糊设置，然后在“高级”选项卡下添加以下自定义 CSS。

主要元素 CSS：

direction: rtl;

模糊图像 CSS：

padding-left: 15px;

如果您没有注意到，该图标现在位于右侧。 现在您需要做的就是使用以下自定义边距定位简介：

自定义边距：顶部 35px，底部 0px，左侧 0px

我们还需要调整框阴影，使其来自左侧而不是右侧，如下所示：

框阴影水平位置：150px

现在查看实时站点上的反向工具提示。

对于最后一个简介，复制列顶部的第一个简介并将其粘贴到第三个简介下方。

然后按如下方式更新保证金：

自定义边距：顶部 0px，左侧 100px

现在来看看设计的最终结果吧！

并查看那些工具提示悬停效果！

它是响应式的吗？

这种设计从一开始就考虑到了移动性。 图像的宽度为 320 像素，这是大多数小型智能手机的宽度。 因为我们使用像素长度单位来调整和定位所有内容，所以当我们调整浏览器大小时，设计（包括工具提示）不会四处移动。

但是，为了确保并最大化小手机屏幕上的图像宽度，您可能还需要做一件事。 默认情况下，您的行在移动设备上将具有 80% 的宽度，因此为了使其成为 100%，您可以将其作为自定义 CSS 添加到您的行的主要元素中，如下所示：

width: 100%;

您的自定义宽度 700 像素仍将作为桌面上的最大宽度，但现在在移动设备上将是 100%。

最后的想法

使用工具提示和悬停效果标记背景图像可以添加专业设计元素，让您的观众获得有用的信息。 而且我确信有多种方法可以将此概念用于其他用例。 但是，如果您计划将设计也保留在移动设备上，它确实会带来挑战。 诀窍是先考虑移动并提前计划。 我希望这可以为未来的项目提供灵感。 如果有的话，至少您知道如何创建带有图标或右侧的简介:)。

我期待在下面的评论中收到您的来信。

干杯!