临猗企业网站建设：如何创造性地利用Divi中的行盒阴影

临猗企业网站建设最近的Divi更新之一是期待已久的：将框阴影集成到节、行和模块中。在这篇文章中，我们将关注行框阴影如何改善您网站的整体外观和感觉。

为了说明深度框阴影可以为您的网站带来，我们已经创建了一个例子，我们将向您展示如何逐步重新创建。

结果

台式机

我们将向您展示如何在桌面上重新创建如下布局：

移动式

就像这样在手机上：

如何创造性地利用Divi中的行盒阴影

订阅我们的YOUTUBE频道

标头格式

您必须做的第一件事是选择正确的头格式。去你的WordPress仪表板>定制>标头&导航>标头格式>并选择“居中”作为标题样式.

主菜单栏

回到标题和导航>主菜单栏>并进行以下调整：

· 隐藏Logo图像：启用

· 菜单高度：211

· 徽标最高高度：30

· 文本大小：16

· 字母间距：2

· 字体：拉托灯

· 字体样式：大写

· 文本颜色：#FFFFFF

· 活动链接颜色：#FFFFFF

· 背景颜色：RGBA(255，255，255，0)

· 下拉菜单背景颜色：RGBA(255，255，255，0)

第一组

一旦您在主题定制器中进行了更改，就该开始布局了。创建一个新页面，启用DiviBuilder并切换到VisualBuilder。然后，向页面添加第一个标准部分。

剖面梯度背景

本节将需要以下梯度背景：

· 第一颜色：#ea2e7d

· 第二颜色：#edd 900

· 梯度型：线性

· 梯度方向：110度

· 起始位置：0%

· 结束位置：100%

间距

继续到“设计”选项卡。在间隔子类别中，顶部填充使用“100 px”，底部填充使用“200 px”。

单列排

行梯度背景

继续向该节添加一列行，并使用以下渐变背景：

· 第一颜色：RGBA(255，255，255，0)

· 第二颜色：#ea2e7d

· 梯度类型：径向

· 径向：中心

· 起始位置：56%

· 结束位置：100%

柱梯度背景

向下滚动，并对该行的列使用以下渐变背景：

· 第一颜色：RGBA(237，217，0，0.77)

· 第二颜色：RGBA(255，255，255，0)

· 柱梯度类型：线性

· 柱梯度方向：180度

· 列起始位置：0

· 柱端位置：100

上浆

转到“设计”选项卡，对“尺寸”子类别进行以下更改：

· 使用自定义宽度：是

· 定制宽度：27%

间距

然后，使用“20 px”作为行的上、右、下和左自定义填充。

文本模块

完成行设置后，添加文本模块，并为文本子类别使用以下设置：

· 文本字体：Arvo

· 文本字体大小：98 px

· 文本颜色：#FFFFFF

· 文字间距：32 px

· 文本行高：1.4em

· 文本定位：中心

第二组

在第一节的正下方添加另一节。本节将包含布局中存在的所有其他行。

剖面梯度背景

首先，本节使用以下梯度背景：

· 第一颜色：RGBA(255，255，255，0)

· 第二颜色：#592851

· 梯度型：线性

· 梯度方向：180度

· 起始位置：80%

· 结束位置：80%

间距

接下来，转到“设计”选项卡，将“100 px”添加到底部填充。

前两列排

行背景色

将前两列行添加到这个新部分，并使用‘#DDDD’作为背景色。

第1栏梯度背景

第一列需要以下梯度背景：

· 第一颜色：#6ac922

· 第二颜色：#b6c1b2

· 第1列梯度类型：线性

· 第1栏梯度方向：136度

· 第1栏起始位置：23%

· 第1栏末端位置：100%

第2栏背景颜色

向下滚动并使用‘#DDDDDD’作为列2的背景颜色。

上浆

继续到“设计”选项卡，并为“尺寸”子类别使用以下设置：

· 使用自定义宽度：启用

· 使用自定义水槽宽度：是

· 排水沟宽度：1

间距

间隔子类别将需要以下填充和页边距：

· 上、右、下、左填充物：0 px

· 最高保证金：-150便士

· 第1栏顶部填充：235 px(桌面)，0 px(平板和电话)

· 第1栏底部填充：235 px(桌面)，0 px(平板和电话)

· 第2栏顶部填充物：150 px

· 第2栏底部填充物：150 px

盒影

打开Box Shadow子类别并使用以下设置：

· 框影水平位置：-3 px

· 盒影垂直位置：-18 px

· 盒影模糊强度：77 px

· 盒影扩展强度：23 px

· 阴影颜色：RGBA(0，0，0，0.3)

第一文本模块

然后，将第一个文本模块添加到第二列，并为文本子类别使用以下设置：

· 文本字体：Arvo

· 文本字体大小：34 px

· 文本颜色：#7a7a7a

· 文本定位：中心

第二文本模块

在临猗企业网站建设添加另一个文本模块，但使用以下设置：

· 文本字体：拉托灯

· 文本定位：中心

打开“大小”子类别，使用“75%”的宽度并选择中心模块对齐。

最后，添加一个‘50 px’的最高边距。

第二列

行背景色

向该部分添加另一个两列行，并选择‘#b99bc1’作为其背景色。

第1栏背景颜色

向下滚动并选择“#DDDDDD”作为第1列的背景颜色。

上浆

移至“设计”选项卡，并将下列设置应用于“尺寸”子类别：

· 使用自定义水槽宽度：是

· 排水沟宽度：1

间距

接下来，使用以下填充：

· 上、右、下、左填充物：0 px

· 第1栏顶部填充：150 px(桌面)，0 px(平板和电话)

· 第1栏底部填充：50 px(桌面)，0 px(平板和电话)

· 第2栏顶部填充物：150 px

· 第2栏底部填充物：150 px

盒影

打开Box Shadow子类别并使用以下设置：

· 方框阴影水平位置：-4PX

· 盒影垂直位置：24 px

· 盒影模糊强度：77 px

· 盒影扩展强度：23 px

· 阴影颜色：RGBA(0，0，0，0.3)

· 盒影位置：外阴影

第一列中的第一图像模块

继续向第一列添加图像模块。上传图像后，将下列设置应用于间隔子类别：

· 在图像下面显示空间：是的

· 最高利润率：-500 px(桌面)，0 px(平板电脑和手机)

· 右边框：-50 px(桌面)，0 px(平板电脑和手机)

· 左边沿：200 px(桌面)，0 px(平板电脑和电话)

打开Box Shadow子类别并使用以下框阴影：

· 方框阴影水平位置：2PX

· 盒影垂直位置：2PX

· 盒影模糊强度：0 px

· 盒影扩展强度：30 px

· 阴影颜色：RGBA(255，255，255，0.68)

· 盒影位置：外阴影

第一列中的第二图像列

向同一列中添加另一个图像模块，并使用以下边距：

· 最高利润率：-50 px(桌面)，0 px(平板电脑和手机)

· 右距：100 px(桌面)，0 px(平板电脑和电话)

· 底限：30 px

· 左边框：100 px(桌面)，0 px(平板电脑和电话)

然后，向下滚动并使用以下框影：

· 方框阴影水平位置：2PX

· 盒影垂直位置：2PX

· 盒影模糊强度：0 px

· 盒影扩展强度：30 px

· 阴影颜色：RGBA(255，255，255，0.68)

· 盒影位置：外阴影

克隆文本模块&放在第二列中

最后，克隆上一行的两个文本模块，并将它们放在此行的第二列中。你只需要改变一件事：文字的颜色。打开每个文本模块的设置，并将文本颜色更改为“#FFFFFFF”。

结果

台式机

这篇文章中的所有步骤将导致桌面上的下列结果：

移动式

在移动平台上的结果如下：

最后思想

在临猗企业网站建设这篇文章中，我们向您展示了如何创造性地使用行上的框影。我们已经创建了一个五颜六色的例子，您可以清楚地注意到深度框阴影给一个布局。如果您有任何问题或建议，请确保在下面的评论部分留下评论！