WordPress divi主题

如何在 Divi 中使用具有吸引力的工具提示来标记背景图像

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

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

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

google广告开户

在本教程中,我将向您展示如何使用可以作为有关您的产品的信息工具提示的信息来标记背景图像。 为此,我将使用 Fitness Gym Landing 页面来标记背景图像,其中包含有关质量健身的信息。

让我们开始吧。

先睹为快

这是我们将在本教程中构建的设计的一个偷偷摸摸的高峰。

工具提示

你需要什么

对于本教程,您将需要以下内容:

  • 迪维主题
  • Fitness Gym Layout Pack 中的 Fitness Gym 登录页面(可从 Divi Builder 获得)
  • 用于您的背景图像的图像,其大小正好为 320 像素 x 507 像素。 随意将它拖到您的桌面上,并在本教程中使用它。
    工具提示

准备预制布局

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

工具提示

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

工具提示

WordPress divi主题

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

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

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

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

第 1 列背景图像尺寸:实际尺寸
第一列背景图片位置:左中
第 1 列背景图像重复:无重复

工具提示

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

自定义宽度:700px
自定义填充:0px 顶部,0px 底部

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

工具提示

此时,我认为最好将第 1 列的特定高度设置为等于背景图像的高度。 这样我们就知道如果列的内容没有暴露整个图像,图像将保持可见。 为此,请转到高级选项卡并在第 1 列主元素中添加以下自定义 CSS:

fiverr建站WordPress程序员
height: 507px;

现在列的高度等于图像的高度,并且不依赖于我们添加到行的内容(或模块)。

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

有了我们的背景图像,我们就可以开始添加我们的简介,这些简介将被定位和设置为工具提示。 继续在第 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

(盒子阴影是一种在宣传内容后面添加背景颜色的创造性方式。默认情况下,盒子阴影是完全透明的,但在悬停时会显示出漂亮的蓝色。)

JasperAI 10000字免费额度试用

工具提示

现在去看看你的第一个简介的最终结果,以确保悬停效果和设计是正确的。

工具提示

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

自定义边距:0px 顶部,0px 底部,15px 左侧

WordPress备份工具updrafplus

工具提示

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

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

主要元素 CSS:

direction: rtl;

模糊图像 CSS:

padding-left: 15px;

工具提示

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

自定义边距:顶部 35px,底部 0px,左侧 0px

工具提示

我们还需要调整盒子阴影,使其来自左侧而不是右侧,如下所示:

盒子阴影水平位置:150px

工具提示

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

工具提示

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

然后按如下方式更新边距:

自定义边距:顶部 0 像素,左侧 100 像素

工具提示

现在查看设计的最终结果!

工具提示

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

工具提示

它是响应式的吗?

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

工具提示

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

width: 100%;

工具提示

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

最后的想法

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

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

干杯!