WordPress divi主题

如何使用部分分隔线高度悬停效果来显示 Divi 中的内容

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

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

Section Dividers 仍然是流行的 Divi 设计元素。 有许多分隔线样式可供选择,并提供有用的选项,可以轻松地将独特的过渡和背景添加到您的页面。

google广告开户

在本教程中,我们将稍微不同地使用部分分隔符。 Divi 允许您调整每个分隔器的高度和排列。 这使我们能够将分隔线放置在部分内的某些区域或内容之上。 通过使用分隔高度的悬停选项,我们可以添加独特的悬停效果来显示部分隐藏的内容。 这非常适合将注意力吸引到您希望访问者单击的特定号召性用语或按钮上。

让我们开始吧。

抢先看

分区分隔悬停效果

免费下载部分分隔线高度悬停效果

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

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

让我们来看看教程好吗?

订阅我们的 Youtube 频道

你需要什么开始

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

WordPress divi主题
  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 一些在设计中使用的模拟图像。 我将使用 Juice Shop Layout Pack 中的一些具有透明背景的图像。

之后,您就可以开始了!

在Divi中实现Section Divider Height Hover效果设计

创建节和行

首先,让我们创建一个包含两列行的常规部分。

分区分隔悬停效果

在添加模块之前,打开部分设置并更新以下内容:

背景渐变左颜色:#73ba57
背景渐变正确颜色:#2a4c23
宽度:80%
最大宽度:1080px
部分对齐:中心

分区分隔悬停效果

添加章节标题

要添加该部分的标题,请创建一个文本模块并使用以下 h2 标头更新正文内容:

<h2>The Juice</h2>

然后更新设计如下:

标题 2 字体:Lato
标题 2 文字大小:80px
标题 2 字母间距:-5px
边距:-50px 顶部,-40px 底部
Z指数:-1

自定义边距和 z 索引将允许文本位于我们将在下一步添加的图像后面。

fiverr建站WordPress程序员

添加图像

在第 1 列中标题的文本模块下,添加一个图像模块。 然后上传具有透明背景的图像。 我正在使用来自 Juice Shop Layout Pack 的 240 像素 x 300 像素的图像。

分区分隔悬停效果

将图像对齐调整到中心。

分区分隔悬停效果

在第 2 列中添加号召性用语

在第 2 列中,添加号召性用语模块。

独立站选品工具

分区分隔悬停效果

添加按钮链接 URL 以确保按钮显示。

分区分隔悬停效果

样式化 CTA 背景和标题文本

然后更新以下设计设置:

背景颜色:#ffffff
文字颜色:深色
标题字体:Lato
标题字体粗细:重
标题字体样式:TT
标题文字大小:18px

高质量外链购买

分区分隔悬停效果

样式化 CTA 按钮

更新按钮设计如下:

按钮文字颜色:#ffffff
按钮背景颜色:#73ba57
按钮边框宽度:0px

分区分隔悬停效果

样式化 CTA 边框

然后为模块添加边框,如下所示:

JasperAI 10000字免费额度试用

边框宽度:10px
边框颜色:rgba(115,186,87,0.15)

分区分隔悬停效果

添加分隔线高度悬停效果以显示号召性用语

现在是时候添加部分分隔符高度悬停效果来显示号召性用语了。 为此,我们必须首先创建我们的部分分隔线。

添加顶部分隔线

使用以下设置打开部分设置和顶部分隔线。

顶部分隔线样式:见截图
顶部分隔线颜色:#73ba57
顶部分隔线高度:70%(默认),0%(悬停)
顶部分隔板翻转:水平

WordPress备份工具updrafplus

请注意,分隔高度从默认高度 70% 开始,然后在悬停时变为 0% 高度。

添加底部分隔线

接下来使用以下设置将类似的底部分隔线添加到该部分。

顶部分隔线样式:见截图
顶部分隔线颜色:#73ba57
顶部分隔线高度:70%(默认),0%(悬停)
顶部分隔板翻转:水平
分隔线排列:在章节内容之上

这个底部分隔线也以 70% 的高度开始,在悬停时变为 0%。 但是,由于分隔线排列选项设置在内容的顶部,因此部分分隔线隐藏了第 1 列中号召性用语的底部。然后在悬停时,显示号召性用语的其余部分。

看看到目前为止的结果。

分区分隔悬停效果

为独特的过渡和设计添加盒子阴影悬停效果

对于悬停的独特过渡和设计,我们可以添加一个盒子阴影悬停效果,该效果将与分隔线高度悬停效果同时发生。 为此,将以下框阴影添加到该部分。

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:0px
盒子阴影传播强度:0px(默认),150px(悬停)
盒子阴影颜色:#73ba57

分区分隔悬停效果

减慢过渡时间

最后一步,让我们稍微放慢转换持续时间。

过渡时间:700ms

分区分隔悬停效果

最后结果

这是桌面上的最终结果。

分区分隔悬停效果

如果您不希望内容隐藏在平板电脑和手机显示屏上,您可以轻松地将这些设备的分隔线排列更改为“部分内容下方”。

分区分隔悬停效果

这是平板电脑和手机的最终设计。

分区分隔悬停效果

分区分隔悬停效果

在几秒钟内尝试其他部分分隔线样式以获得完全独特的设计

有了这个设置,您可以轻松地尝试不同的分隔线样式和组合!

分区分隔悬停效果

以下是我在免费下载中包含的更多内容。

分区分隔悬停效果

分区分隔悬停效果

分区分隔悬停效果

最后的想法

希望这篇文章能给您一些启发,让您了解如何创建一些独特的部分分隔符高度悬停效果来显示内容。 事实上,在悬停时调整分隔高度本身就是一个很好的设计元素。 而且,设计示例应该可以帮助您快速开始自己的探索和设计。

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

干杯!

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