如何在 Divi 中创造性地使用行框阴影
已发表: 2017-11-03人们期待已久的最新 Divi 更新之一； 将框阴影集成到部分、行和模块中。 在这篇文章中，我们将重点介绍行框阴影如何改善您网站的整体外观。
为了说明深度框阴影可以为您的网站带来的效果，我们创建了一个示例，我们将向您展示如何逐步重新创建。
结果
桌面
我们将向您展示如何重新创建的布局在桌面上看起来像这样：
移动的
在手机上是这样的：
如何在 Divi 中创造性地使用行框阴影
订阅我们的 YouTube 频道
标题格式
您要做的第一件事是选择正确的标题格式。 转到您的WordPress 仪表板 > 自定义 > 标题和导航 > 标题格式 > 并选择“居中”作为标题样式。 
主菜单栏
返回标题和导航 > 主菜单栏 > 并进行以下调整：
- 隐藏徽标图像：启用
- 菜单高度：211
- 标志最大高度：30
- 文字大小：16
- 字母间距：2
- 字体: Lato Light
- 字体样式：大写
- 文字颜色：#FFFFFF
- 活动链接颜色：#FFFFFF
- 背景颜色：rgba(255,255,255,0)
- 下拉菜单背景颜色：rgba(255,255,255,0)
第一节
在主题定制器中进行更改后，就可以开始布局了。 创建一个新页面，启用 Divi Builder 并切换到 Visual Builder。 然后，向页面添加第一个标准部分。
部分渐变背景
本节将需要以下渐变背景：
- 第一种颜色：#ea2e7d
- 第二种颜色：#edd900
- 渐变类型：线性
- 梯度方向：110deg
- 起始位置：0%
- 结束位置：100%
间距
移至“设计”选项卡。 在间距子类别中，顶部填充使用“100px”，底部填充使用“200px”。
一列行
行渐变背景
继续向该部分添加一列行并使用以下渐变背景：
- 第一种颜色：rgba(255,255,255,0)
- 第二种颜色：#ea2e7d
- 渐变类型：径向
- 径向：中心
- 起始位置：56%
- 结束位置：100%
列渐变背景
向下滚动并为该行的列使用以下渐变背景：
- 第一种颜色：rgba(237,217,0,0.77)
- 第二种颜色：rgba(255,255,255,0)
- 列渐变类型：线性
- 柱梯度方向：180度
- 列起始位置：0
- 列结束位置：100
浆纱
转到“设计”选项卡，并对“大小调整”子类别进行以下更改：
- 使用自定义宽度：是
- 自定义宽度：27%
间距
然后，为行的顶部、右侧、底部和左侧自定义填充使用“20px”。
文本模块
完成行设置后，添加一个文本模块并为文本子类别使用以下设置：
- 文字字体：Arvo
- 文字字体大小：98px
- 文字颜色：#FFFFFF
- 文字字母间距：32px
- 文本行高：1.4em
- 文字方向：居中
第二节
在第一部分正下方添加另一部分。 此部分将包含布局中存在的所有其他行。
部分渐变背景
首先，本节使用以下渐变背景：
- 第一种颜色：rgba(255,255,255,0)
- 第二种颜色：#592851
- 渐变类型：线性
- 梯度方向：180度
- 起始位置：80%
- 结束位置：80%
间距
接下来，转到“设计”选项卡并将“100px”添加到底部填充。
前两列行
行背景颜色
将前两列行添加到此新部分并使用“#dddddd”作为背景颜色。
第 1 列渐变背景
第一列将需要以下渐变背景：
- 第一种颜色：#6ac922
- 第二种颜色：#b6c1b2
- 第 1 列渐变类型：线性
- 第 1 列梯度方向：136deg
- 第 1 列起始位置：23%
- 第 1 列结束位置：100%
第 2 列背景颜色
向下滚动并使用“#dddddd”作为第 2 列的背景颜色。
浆纱
转到“设计”选项卡，并为“尺寸”子类别使用以下设置：
- 使用自定义宽度：启用
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
间距子类别将需要以下填充和边距：
- 顶部、右侧、底部和左侧填充：0px
- 上边距：-150px
- 第 1 列顶部填充：235px（桌面），0px（平板电脑和手机）
- 第 1 列底部填充：235px（桌面），0px（平板电脑和手机）
- 第 2 列顶部填充：150px
- 第 2 列底部填充：150px
盒子阴影
打开 Box Shadow 子类别并使用以下设置：
- 框阴影水平位置：-3px
- 框阴影垂直位置：-18px
- 框阴影模糊强度：77px
- 框阴影传播强度：23px
- 阴影颜色：rgba(0,0,0,0.3)
第一个文本模块
然后，将第一个文本模块添加到第二列，并对文本子类别使用以下设置：
- 文字字体：Arvo
- 文字字体大小：34px
- 文字颜色：#7a7a7a
- 文字方向：居中
第二个文本模块
添加另一个文本模块，但使用以下设置：
- 文字字体：Lato Light
- 文字方向：居中
打开 Sizing 子类别，使用“75%”的宽度并选择中心模块对齐。
最后，添加“50px”的顶部边距。
第二个两列行
行背景颜色
向该部分添加另一个两列行并选择“#b99bc1”作为其背景颜色。
第 1 列背景颜色
向下滚动并为第 1 列背景颜色选择“#dddddd”。
浆纱
转到“设计”选项卡，并将以下设置应用于“大小调整”子类别：
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
接下来，使用以下填充：
- 顶部、右侧、底部和左侧填充：0px
- 第 1 列顶部填充：150 像素（桌面）、0 像素（平板电脑和手机）
- 第 1 列底部填充：50px（桌面），0px（平板电脑和手机）
- 第 2 列顶部填充：150px
- 第 2 列底部填充：150px
盒子阴影
打开 Box Shadow 子类别并使用以下设置：
- 框阴影水平位置：-4px
- 框阴影垂直位置：24px
- 框阴影模糊强度：77px
- 框阴影传播强度：23px
- 阴影颜色：rgba(0,0,0,0.3)
- 框阴影位置：外阴影
第一列中的第一个图像模块
继续向第一列添加图像模块。 上传图像后，将以下设置应用于间距子类别：
- 在图像下方显示空间：是
- 上边距：-500px（桌面），0px（平板和手机）
- 右边距：-50px（桌面），0px（平板和手机）
- 左边距：200px（桌面），0px（平板和手机）
打开 Box Shadow 子类别并使用以下框阴影：
- 框阴影水平位置：2px
- 框阴影垂直位置：2px
- 框阴影模糊强度：0px
- 框阴影传播强度：30px
- 阴影颜色：rgba(255,255,255,0.68)
- 框阴影位置：外阴影
第一列中的第二个图像列
将另一个图像模块添加到同一列并使用以下边距：
- 上边距：-50px（桌面），0px（平板和手机）
- 右边距：100px（桌面），0px（平板和手机）
- 下边距：30px
- 左边距：100px（桌面），0px（平板和手机）
然后，向下滚动并使用以下框阴影：
- 框阴影水平位置：2px
- 框阴影垂直位置：2px
- 框阴影模糊强度：0px
- 框阴影传播强度：30px
- 阴影颜色：rgba(255,255,255,0.68)
- 框阴影位置：外阴影
克隆文本模块并放置在第二列
最后，克隆前一行的两个文本模块并将它们放置在该行的第二列中。 你只需要改变一件事； 文本颜色。 打开每个文本模块的设置并将文本颜色更改为“#FFFFFF”。
结果
桌面
本文中的所有步骤将导致桌面上的以下结果：
移动的
移动端的结果如下：
最后的想法
在这篇文章中，我们向您展示了如何在行上创造性地使用框阴影。 我们创建了一个丰富多彩的示例，您可以在其中清楚地注意到布局的深度框阴影。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！
请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！
特色图片由 Dmitry Guzhanin/shutterstock.com 提供