WordPress divi主题

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

| 5月 15, 2022 | Divi主题使用教程 | 0 条评论

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

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

google广告开户

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

让我们开始吧!

预览

在深入了解本教程及其不同示例之前,让我们先看看结果。

示例 #1

滑动背景

示例 #2

滑动背景

示例#3

滑动背景

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

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

滑动背景

重新创建示例 #1

滑动背景

WordPress divi主题

按钮框阴影颜色

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

滑动背景

部分设置

默认背景颜色

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

  • 背景颜色:#2a2a2a

滑动背景

悬停背景颜色

更改背景悬停。

  • 背景颜色:#ffffff

滑动背景

默认框阴影

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

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

滑动背景

悬停框阴影

改变盒子阴影的水平位置。 添加任何选择的值。

  • 盒子阴影水平位置:800px

滑动背景

fiverr建站WordPress程序员

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

  • 盒子阴影垂直位置:650px

滑动背景

过渡

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

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

滑动背景

重新创建示例 #2

滑动背景

独立站选品工具

修改第一个文本模块

悬停文本设置

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

滑动背景

悬停边框

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

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

滑动背景

默认框阴影

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

高质量外链购买
  • 盒子阴影水平位置:0px
  • 盒子阴影垂直位置:0px
  • 阴影颜色:rgba(255,137,159,0.82)
  • 盒子阴影位置:内阴影

滑动背景

悬停框阴影

更改悬停时的水平位置。

  • 盒子阴影水平位置:520px

滑动背景

过渡

最后但同样重要的是,增加高级选项卡中的过渡持续时间以创建平滑过渡。

  • 过渡时间:700ms
  • 过渡速度曲线:轻松

滑动背景

JasperAI 10000字免费额度试用

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

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

滑动背景

滑动背景

修改第二个文本模块

文字设置

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

滑动背景

WordPress备份工具updrafplus

悬停边框

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

  • 边框颜色: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 设计计划的一部分,我们每周都会尝试在您的工具箱中添加一些额外的东西。 我们希望本教程能激发您以独特和创造性的方式使用盒子阴影。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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