WordPress divi主题

使用 Divi 在 Hover 上创建弹出服务描述

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

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

在悬停时创建弹出式服务描述可能是向用户提供额外信息并吸引用户的有效方式。 就像工具提示一样,这些弹出式描述将在悬停时显示有关您的服务的更多信息。 但是使用 Divi,您可以在 Divi 构建器中使用全套设计工具来创建令人惊叹的弹出式设计,而无需任何额外的自定义 CSS。

google广告开户

在本教程中,我们将向您展示在您的 Divi 网站上构建弹出式服务描述是多么容易。 诀窍是以这样一种方式放置您的模块,当您在悬停时调整行的宽度时,它们将彼此滑动并弹出。

让我们开始吧!

抢先看

divi弹出服务说明

divi弹出服务说明

divi弹出服务说明

divi弹出服务说明

免费下载布局

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

订阅我们的 Youtube 频道

WordPress divi主题

要将布局导入您的页面,只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们来看看教程好吗?

你需要什么开始

要开始,您需要具备以下条件:

  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 用于模拟内容的图像。 在本教程中,我们将使用投资公司布局包中的几个。

之后,您将有一个空白画布开始在 Divi 中进行设计。

使用 Divi 在 Hover 上创建弹出的服务描述

创建部分和行

首先,创建一个具有单列行的新常规部分。

divi弹出服务说明

在添加任何模块之前,请按如下方式更新行设置:

添加深色背景图像或深色背景颜色。 我正在使用 Investment Company Layout Pack 中的抽象背景图像。 但是如果你不想使用那个,你可以添加一个背景颜色#161c29。

divi弹出服务说明

  • 天沟宽度:1
  • 宽度:100%
  • 高度:320px(桌面),自动(平板电脑和手机)\
  • 内边距:0px 顶部,0px 底部

divi弹出服务说明

fiverr建站WordPress程序员

添加一个模糊模块

接下来将一个简介模块添加到您的行中。

divi弹出服务说明

并更新简介模块设置如下:

  • 标题:服务
  • 图标:见截图

也删除默认的正文内容。

divi弹出服务说明

独立站选品工具
  • 背景图像:添加大约 320 像素 x 215 像素的图像
  • 背景图像大小:适合
  • 背景图像位置:顶部中心

divi弹出服务说明

  • 背景渐变左颜色:rgba(31,72,192,0.61)
  • 背景渐变右颜色:#161c29
  • 起始位置:34%
  • 结束位置:71%
  • 在背景图像上方放置渐变:是

divi弹出服务说明

  • 图标颜色:#ffffff
  • 文字对齐:居中
  • 标题字体:Archivo
  • 标题文字颜色:#ffffff
  • 标题文字大小:38px
  • 标题字母间距:4px
  • 最大宽度:320px
  • 模块对齐:中心
  • 高度:320 像素

divi弹出服务说明

  • 内边距:68px 顶部
  • 圆角:10px
  • Z指数:1

添加 z 索引 1 值对于确保模糊模块保持在最终将堆叠在其后面的其他模块之上至关重要。

divi弹出服务说明

高质量外链购买

添加号召性用语模块

接下来,我们需要添加一个行动号召模块,该模块将位于简介模块的左侧。

divi弹出服务说明

这将是我们最终会在悬停时弹出的两个内容区域中的第一个。

现在我们需要取出默认背景颜色并更新设计设置如下:

  • 文本对齐:左
  • 标题字体:Archivo
  • 标题文字大小:22px
  • 宽度:320 像素
  • 模块对齐方式:左(桌面),居中(平板电脑和手机)
  • 高度:320px(桌面),自动(平板电脑和手机)
  • 边距:-320px(桌面),0px(平板电脑和手机)
  • 内边距:顶部 40 像素,左侧 40 像素,右侧 40 像素

divi弹出服务说明

JasperAI 10000字免费额度试用

复制号召性用语模块并将其向右对齐

要创建将出现在简介右侧的第二个内容块,我们可以部署线框视图模式并复制号召性用语模块。 然后打开副本的设置并将模块对齐更新到右侧。

divi弹出服务说明

到目前为止,设计应该是这样的。

divi弹出服务说明

创建按钮

我们需要添加到设计中的最后一个元素是按钮。 如果您愿意,您可以在任一号召性用语模块中添加一个按钮。 但是对于这个设计,我认为最好添加一个在我们行的底部仍然可见的按钮。

WordPress备份工具updrafplus

要创建按钮,请部署线框视图模块并直接在第二个调用操作模块下添加一个按钮模块,使其成为行/列中的最后一个模块。

divi弹出服务说明

打开按钮模块设置,然后切换桌面视图模式,以便您可以直观地编辑按钮。

添加按钮文本“了解更多”。

divi弹出服务说明

然后更新按钮样式如下:

  • 按钮对齐方式:居中
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#1f48c0
  • 按钮边框宽度:0px
  • 按钮边框半径:10px
  • 按钮字母间距:4px
  • 按钮字体:Archivo

divi弹出服务说明

现在我们需要做的就是定位我们的按钮。

  • 边距(桌面):-25px 顶部
  • 边距(平板电脑和手机):顶部 25 像素,底部 50 像素
  • Z指数:2

z 索引值为 2 将确保按钮保持在简介模块(其 z 索引为 1)上方。

divi弹出服务说明

创建弹出悬停效果

我们需要完成弹出服务描述的主要悬停效果涉及更改悬停时的行宽。 为此,我们需要默认为我们的行指定一个窄宽度。 这将导致模块相互堆叠并保持隐藏在简介模块后面。 然后我们将在悬停时扩大行的宽度,以暴露两个隐藏的行动号召模块。

打开行设置并更新宽度如下:

  • 最大宽度(桌面):320px
  • 最大宽度(悬停):1080px
  • 最大宽度(平板电脑和手机)1080px

divi弹出服务说明

divi弹出服务说明

最后,为行添加一个边框半径并将可见性溢出选项更新为可见,这样按钮就不会被隐藏。

  • 圆角:10px
  • 水平溢出:可见
  • 垂直溢出:可见

divi弹出服务说明

最后结果

查看到目前为止的弹出服务描述。

divi弹出服务说明

它在平板电脑和手机显示屏上。

divi弹出服务说明

divi弹出服务说明

更多设计选项可供尝试

既然我们已经有了基本的设置,那么尝试更多的设计选项总是很有趣。 以下是一些您可以尝试的弹出式服务描述建议。

添加部分背景颜色

如果需要,您可以在部分中添加与行的背景颜色/图像相匹配的背景颜色,以获得独特的弹出式设计。

转到行设置并更新以下内容:

  • 背景颜色:#161c29

divi弹出服务说明

然后查看结果。

divi弹出服务说明

仅使用两个模块

如果您想要仅使用两个模块的更紧凑的弹出窗口,您可以删除一个号召性用语模块,然后将简介模块向左对齐,以便在悬停时这两个模块可见。

为此,请部署线框视图模式。 然后直接删除blurb模块下的第一个号召性用语模块。

divi弹出服务说明

之后,使用左模块对齐更新简介模块。

  • 模块对齐方式:左(桌面),居中(平板)

divi弹出服务说明

最后,减小悬停时行的最大宽度以使其更紧凑。 打开行设置并更新以下内容:

  • 最大宽度(悬停):700px
  • 最大宽度(平板电脑):700px

divi弹出服务说明

这是最终结果。

divi弹出服务说明

这里是白色背景。

divi弹出服务说明

最后的想法

在悬停时创建弹出式服务描述是一种让访问者参与您的内容的独特方式。 此功能的工作方式很像一个包含 Divi 所有设计功能的精美且信息丰富的工具提示。 这很容易做到。 一旦您确定了模块的大小和位置,您需要做的就是在悬停时调整行的宽度。 随意尝试不同的模块和内容以获得更多应用程序。 如果有的话,我希望这能给你更多的灵感,让你用 Divi 做更多的事情。

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

干杯!