WordPress divi主题

使用 Divi 将文本模块转换为 Hover 上的唯一人物描述

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

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

寻找一种创造性的方式来为图像添加描述? 使用 Divi 的内置悬停选项,现在比以往任何时候都更容易。 您可以在您的网站上将此方法用于各种目的,从推荐书到团队成员描述等等。 在本教程中,我们将介绍 4 个不同的示例,它们将帮助您实现令人惊叹的网页设计。 我们仅使用 Divi 的内置选项创建所有四个示例。

google广告开户

让我们开始吧!

预览

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

桌面

人物描述

移动的

人物描述

一般步骤

添加新部分

为了使本教程更易于理解,我们将从一些常规步骤开始。 之后,我们将处理每个示例所特有的步骤。 首先将新的常规部分添加到新页面或现有页面。

人物描述

添加行

立柱结构

继续并选择以下列结构(您也可以使其与其他列结构一起使用):

人物描述

WordPress divi主题

第 1 列背景图像

在不添加任何模块的情况下,打开行设置并将背景图像添加到第一列。

  • 第 1 列背景图像重复:无重复

人物描述

浆纱

继续更改行的大小设置。

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

人物描述

间距

然后添加一些自定义填充值。

  • 上边距:150px
  • 底部填充:150px

人物描述

将文本模块添加到第 1 列

添加内容

为了在悬停时显示描述,我们将为四个示例中的每一个使用一个文本模块。 继续将此文本模块添加到您已添加背景图像的同一列中。

人物描述

默认文本设置

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

  • 文字颜色:rgba(255,255,255,0)
  • 文字大小:0.7vw(桌面),12px(平板电脑和手机)
  • 文本方向:对齐

人物描述

fiverr建站WordPress程序员

悬停文本设置

更改悬停时的文本颜色。

人物描述

默认标题文本设置

更改 H3 文本设置。

  • 标题 3 字体粗细:超粗体
  • 标题 3 字体样式:大写
  • 标题 3 文本颜色:rgba(255,255,255,0)
  • 标题 3 文字大小:2.5vw(桌面)、40px(平板电脑)、30px(手机)
  • 标题 3 行高:2.2em

人物描述

悬停标题文本设置

并在悬停时应用不同的 H3 文本颜色。

独立站选品工具
  • 标题 3 文本颜色:#000000

人物描述

克隆行 3 次

现在我们已经完成了所有一般步骤,我们可以继续克隆我们创建的行三次,这将允许我们为四个示例中的每一个创建一行。 确保在每个示例的开头,您移动到下一行。

人物描述

示例 #1

人物描述

更改文本模块

默认背景颜色

让我们从第一个例子开始吧! 打开第一列中的文本模块并添加背景颜色。

高质量外链购买
  • 背景颜色:rgba(255,255,255,0)

人物描述

悬停背景颜色

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

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

人物描述

默认间距

接下来添加一些自定义边距和填充。

  • 上边距:-500px
  • 底边距:500px
  • 上边距:250px
  • 底部填充:250px
  • 左填充:70px
  • 右内边距:70px

人物描述

JasperAI 10000字免费额度试用

悬停间距

更改悬停时的值。

  • 上边距:0px
  • 下边距:0px
  • 上边距:100px
  • 底部填充:100px

人物描述

过渡

最后,通过在高级选项卡中增加过渡持续时间来创建平滑过渡。

  • 转换持续时间:1000ms

人物描述

示例 #2

人物描述

WordPress备份工具updrafplus

更改文本模块

默认背景颜色

继续下一个例子! 打开第一列中的文本模块并添加背景颜色。

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

人物描述

悬停背景颜色

更改悬停时的背景颜色。

  • 背景颜色:rgba(226,246,255,0.85)

人物描述

默认间距

接下来添加一些自定义边距和填充值。

  • 上边距:100px
  • 下边距:100px
  • 上边距:150px
  • 底部填充:150px
  • 左填充:70px
  • 右内边距:70px

人物描述

悬停间距

在悬停时更改这些值。

  • 上边距:200px
  • 底边距:-200px
  • 左边距:50px
  • 上边距:100px
  • 底部填充:100px

人物描述

默认边框

继续向文本模块添加边框。

  • 左边框宽度:0px
  • 左边框颜色:#ffffff

人物描述

悬停边框

并更改悬停时的边框宽度。

人物描述

过渡

最后但并非最不重要的一点是,增加过渡持续时间以实现平稳过渡。

  • 转换持续时间:500ms

人物描述

示例#3

人物描述

克隆文本模块

继续第三个例子! 对于此示例,我们需要为较小的屏幕尺寸创建单独的版本。 克隆第一列中的文本模块。

人物描述

添加第 1 列渐变背景

然后,打开行设置并使用以下设置为第一列添加渐变背景:

  • 颜色1:rgba(43,135,218,0)
  • 颜色2:#ffffff
  • 第 1 列渐变类型:径向
  • 第 1 列径向方向:中心
  • 第 1 列起始位置:59%
  • 第 1 列结束位置:59%
  • 第 1 列在背景图像上方放置渐变:是

人物描述

更改文本模块 #1

渐变背景

打开第 1 列中的第一个文本模块。这将是显示在桌面上的描述。 添加渐变背景。

  • 颜色1:rgba(239,239,239,0.65)
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:中心
  • 起始位置:70%
  • 结束位置:71%

人物描述

默认间距

然后,添加一些自定义边距和填充值。

  • 最高边距:6vw
  • 底边距:6vw
  • 顶部填充:9vw
  • 底部填充:9vw
  • 左填充:2vw
  • 右填充:2vw

人物描述

悬停间距

更改悬停时的边距值。

  • 左边距:15vw
  • 右边距:-15vw

人物描述

能见度

并禁用平板电脑和手机上的模块。

人物描述

过渡

也增加过渡持续时间。

  • 转换持续时间:500ms

人物描述

更改文本模块 #2

渐变背景

第 1 列中的第二个模块是将出现在较小屏幕尺寸上的描述。 首先添加渐变背景。

  • 颜色1:rgba(239,239,239,0.65)
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:中心
  • 起始位置:70%
  • 结束位置:71%

人物描述

默认间距

接下来添加一些自定义边距和填充值。

  • 上边距:95px
  • 下边距:95px
  • 上边距:170px
  • 底部填充:170px
  • 左填充:20px
  • 右内边距:20px

人物描述

悬停间距

更改悬停时的边距值。

  • 上边距:250px
  • 底边距:-200px

人物描述

能见度

并禁用桌面上的模块。

人物描述

更改两个文本模块的文本方向

最后但并非最不重要的一点是,确保同时更改两个模块的文本方向以达到预期的结果。

人物描述

示例 #4

人物描述

更改文本模块

默认背景颜色

到第四个也是最后一个例子! 在第 1 列的文本模块中添加以下背景颜色:

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

人物描述

悬停背景颜色

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

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

人物描述

默认间距

接下来转到间距设置并在那里添加一些自定义边距和填充值。

  • 左边距:-200px
  • 右边距:200px
  • 上边距:250px
  • 底部填充:250px
  • 左填充:70px
  • 右内边距:70px

人物描述

悬停间距

在悬停时修改这些值。

  • 左边距:0px
  • 右边距:0px
  • 上边距:300px
  • 底部填充:300px

人物描述

过渡

最后但并非最不重要的一点是,增加过渡持续时间以实现平稳过渡。

  • 转换持续时间:1200ms

人物描述

预览

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

桌面

人物描述

移动的

人物描述

最后的想法

在这篇文章中,我们向您展示了如何创造性地使用 Divi 的悬停选项来展示悬停时的人物描述。 通过这四个示例,您可以将任何推荐或团队成员描述转换为页面上的交互式设计元素。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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