如何使用框阴影作为悬停时的滑动背景

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用框阴影作为悬停时的滑动背景。 我们将处理在 Personal Stylist Layout Pack 主页上看起来令人惊叹的三个不同示例，但您拥有的可能性确实是无穷无尽的。 我们将仅使用 Divi 的内置选项逐步重新创建每个滑动背景。

让我们开始吧！

预览

在深入研究本教程及其不同示例之前，让我们先看看结果。

示例#1

示例#2

示例#3

将个人造型师布局包主页上传到新页面

首先向您的网站添加一个新页面并上传 Personal Stylist 主页布局。 尽管我们将使用此布局来完成上面显示的所有三个示例，但您可以将此方法用于您正在处理的任何类型的布局或网站。

重新创建示例 #1

按钮框阴影颜色

让我们开始重新创建第一个示例！ 此示例可帮助您突出显示英雄部分。 您需要做的第一件事是打开您可以在第一列中找到的按钮模块并更改框阴影颜色。 我们这样做是为了确保颜色与我们将在悬停时添加的粉红色框阴影相得益彰。

部分设置

默认背景颜色

继续打开部分设置。 确保默认背景颜色保持不变。

• 背景颜色：#2a2a2a

悬停背景颜色

更改背景悬停。

• 背景颜色：#ffffff

默认框阴影

继续向该部分添加默认框阴影。

• 框阴影水平位置：0px
• 框阴影垂直位置：0px
• 阴影颜色：rgba(255,137,159,0.82)
• 框阴影位置：内阴影

悬停框阴影

更改框阴影的水平位置。 添加任何选择值。

• 框阴影水平位置：800px

如果您希望滑动效果从上到下出现，您可以改为围绕框阴影的垂直位置进行更改。

• 框阴影垂直位置：650px

过渡

最后但并非最不重要的是，减少高级选项卡中的过渡持续时间以在背景颜色和框阴影滑动背景之间创建快速过渡。

• 转换持续时间：200ms
• 过渡速度曲线：轻松

重新创建示例 #2

修改第一个文本模块

悬停文本设置

继续下一个例子！ 打开您可以在第一列中找到的文本模块，并在悬停时更改文本颜色。

• 文字颜色：浅

悬停边框

继续更改设计选项卡中悬停时的边框颜色。

• 边框颜色：rgba(255,137,159,0.82)

默认框阴影

然后，转到框阴影设置并添加默认框阴影。

• 框阴影水平位置：0px
• 框阴影垂直位置：0px
• 阴影颜色：rgba(255,137,159,0.82)
• 框阴影位置：内阴影

悬停框阴影

更改悬停时的水平位置。

• 框阴影水平位置：520px

过渡

最后但并非最不重要的是，在高级选项卡中增加过渡持续时间以创建平滑过渡。

• 转换持续时间：700ms
• 过渡速度曲线：轻松

将模块样式复制并粘贴到第三个文本模块

我们也为第三个文本模块使用相同的模块样式。 为了节省时间，我们只需复制第一个文本模块的模块样式并将它们粘贴到第三个文本模块上。

修改第二个文本模块

文字设置

然而，第二个文本模块略有不同。 打开模块并转到文本设置。 您唯一需要做的就是在悬停时更改文本颜色。

• 文字颜色：浅

悬停边框

继续转到边框设置并更改悬停时的边框颜色。

• 边框颜色：rgba(255,137,159,0.82)

默认框阴影

是时候添加滑动背景了！ 首先使用以下设置添加默认框阴影：

• 框阴影水平位置：0px
• 框阴影垂直位置：0px
• 阴影颜色：rgba(255,137,159,0.82)
• 框阴影位置：内阴影

悬停框阴影

在悬停时更改框阴影的垂直位置。

• 框阴影垂直位置：500px

过渡

最后但并非最不重要的是，也增加此文本模块的过渡持续时间。

• 转换持续时间：700ms
• 过渡速度曲线：轻松

重新创建示例 #3

更改行设置

浆纱

继续下一个也是最后一个例子！ 首先打开行设置并对大小设置进行一些更改。

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

间距

继续向该行添加一些自定义填充。

• 左填充：10vw
• 右填充：10vw
• 第 2 列左填充：15vw（台式机）、0vw（平板电脑和手机）

默认框阴影

然后，向该行添加默认框阴影。

• 框阴影水平位置：0px
• 框阴影垂直位置：0px
• 阴影颜色：#ff899f
• 框阴影位置：内阴影

悬停框阴影

更改悬停时的水平位置。

• 框阴影水平位置：50px

过渡

我们还在高级选项卡中更改了过渡持续时间和过渡延迟。

• 转换持续时间：1000ms
• 转换延迟：700ms
• 过渡速度曲线：轻松

更改部分设置

删除尺寸

完成修改行设置后，继续并打开部分设置。 移至设计选项卡并通过右键单击并单击重置来重置宽度。

删除边框

对边框宽度也做同样的事情。

默认框阴影

继续添加默认框阴影。

• 框阴影水平位置：0px
• 框阴影垂直位置：0px
• 阴影颜色：#2a2a2a
• 框阴影位置：内阴影

悬停框阴影

在悬停时更改框阴影的水平位置。

• 框阴影水平位置：60px

过渡

要完成设计，请在高级选项卡中增加过渡持续时间。

• 转换持续时间：1000ms

预览

现在我们已经完成了所有步骤，让我们最后看看我们一步一步重新创建的三个不同的示例。

示例#1

示例#2

示例#3

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项将框阴影用作滑动背景。 本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的工具箱中添加一些额外的东西。 我们希望本教程能激发您以独特和创造性的方式使用框阴影。 如果您有任何问题或建议，请务必在下方评论区留言！