如何在Divi中为设计元素添加单面框阴影

在 Divi 中为各种设计元素添加单面框阴影是一种巧妙的方式，可以在不分散内容注意力的情况下添加创意蓬勃发展。 在本教程中，我将向您展示如何向 Divi 的 Therapy 常见问题页面布局添加单面框阴影。 作为额外提示，我还将向您展示如何将模糊图标​​组合为垂直居中的图形。 通过学习这些 Divi 设计技巧，您可以为您想要的任何模块或列添加单面框阴影。

让我们开始吧。

抢先看

这是我们将使用单面框阴影构建的常见问题布局设计的先睹为快。

入门

首先，您需要创建一个新页面。 从您的 WordPress 仪表板，导航到页面 > 添加新。 然后给你的页面一个标题并部署可视化构建器。 选择“选择预制布局”选项。 从从库弹出窗口中，找到并选择治疗师布局包。 然后选择治疗师常见问题页面布局并单击“使用此布局”。

现在您已准备好开始设计。

第 1 部分：组织布局

在这个预制布局中，我们将把注意力集中在包含多个切换模块内的模拟问题的第二部分。 首先，让我们将行的列布局更改为三列 (1/3 1/3 1/3)。

接下来，使用 Divi 的多选功能将第 2 列中的所有模块移至第 3 列。 为此，请按住 Command（或 Control）并单击第 2 列中的每个模块，直到所有模块都被选中。 然后将它们拖到第 3 列。

现在我们需要给我们的行多一点空间。 打开行设置并更新以下内容：

宽度：80%
天沟宽度：2
均衡柱高：是

第 2 部分：设计切换模块

要一次自定义本节中所有切换模块的设计，请使用多选功能选择每个切换模块。 全部选中后，打开任一切换模块的设置。

然后更新以下内容：

打开切换文本颜色：#ffffff
打开切换背景颜色：rgba(0,0,0,0)
关闭切换文本颜色：#ffffff
关闭切换背景颜色：rgba(0,0,0,0)

正文颜色：#ffffff

自定义填充：3vw 顶部，3vw 底部，2vw 左，2vw 右

现在我们可以通过如下更新框阴影选项在切换模块的左侧添加框阴影：

框阴影水平位置：-30px
框阴影垂直位置：0px
框阴影模糊强度：40px
框阴影传播强度：-35px
阴影颜色：rgba(0,0,0,0.4)

正确定位框阴影的技巧是通过将水平位置设置为 -30px 将阴影向左移动。 之后，您需要找到模糊强度和扩散强度的正确平衡，以保持左侧的框阴影可见，而不会溢出到模块的顶部和底部。

保存设置。

现在您的所有切换模块都已更新为新设计。

但是，我们希望右列中切换模块的框阴影位于右侧（而不是左侧）。 要更改此设置，请使用 Multiselect 选择右列中的所有切换模块并打开元素设置。 然后将水平位置从 -30px 更改为 30px，如下所示：

框阴影水平位置：30px

然后保存设置。

这通过其独特的单面框阴影来处理我们的切换模块。 现在我们需要为我们的列添加类似的单面框阴影。

第 3 部分：向列添加单面框阴影

要将单边框阴影添加到列，我们需要在行设置的高级选项卡下添加一些 CSS 片段。

打开行设置并单击高级选项卡。 在 Column 1 Main Element 中，添加以下 CSS：

box-shadow: 30px 0px 70px -45px rgba(0,0,0,0.4)

如果您不熟悉 CSS，您应该能够识别代码与 Divi 构建器中可用的框阴影模块设置的相似性。 在上面的代码中...

30px 是水平位置的值
0px 是垂直位置的值
70px 是模糊强度的值
-45px 是传播强度的值
rgba(0,0,0,0.4) 是阴影颜色

我为列框阴影提供了比切换模块更大的模糊强度，以创建稍微更大的深度。

为了向第 3 列添加左框阴影，您需要将以下 CSS 添加到第 3 列主元素：

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

同样，此 CSS 与用于第 1 列的 CSS 之间的唯一区别是负水平位置。

第 4 部分：将 Blurb 图标添加到第 2 列

现在我们的单面框阴影已经完成，我们有一个空的中间列，我们可以在其中组合一些模糊模块图标来创建一个简单的图形设计。 为此，首先添加一个模糊模块并删除标题和内容。 然后单击使用图标并选择以下聊天图标。

然后更新设计设置如下：

图标颜色：rgba(203,241,252,0.37)
图标字体大小：20vw
自定义边距：0px 底部

接下来，复制模糊模块以在下面创建一个额外的模块。

然后使用问号图标更新顶部简介并更新以下设计设置：

图标字体大小：9vw
宽度：40%
模块对齐：右
自定义保证金：-2vw

最后，复制您刚刚设计的问号模糊模块并将其粘贴到大聊天图标模糊模块下。 然后更新该模糊模块的设计设置，如下所示：

第 5 部分：垂直居中第 2 列中的模块

为了完成设计，我们需要将第 2 列中的模糊图标垂直居中，以便它们仍然是我们布局的居中设计元素。 为了实现这一点，我们将利用 Divi 对 flex 的使用。 因为我们选择均衡行的列高，所以我们可以使用一个简单的 CSS 片段将所有模块放在第 2 列中。您可以随时了解有关如何在方便时垂直对齐 Divi 中的内容的更多信息。 但是现在，打开行设置并单击高级选项卡。 然后在 Column 2 Main Element 中输入以下 css：

margin: auto

现在所有的模糊模块都将在第 2 列内垂直居中。

为了让眼睛看起来更轻松，请继续将位于第 1 列和第 2 列顶部的每个文本模块上的文本居中。然后向该部分添加背景渐变，如下所示：

背景渐变左颜色：#616ce1
背景渐变右颜色：#3846e0

就是这样。 现在设计已经完成。

查看最终结果。

并且，请注意在打开和关闭切换开关时框阴影如何扩展和收缩。

最后的想法

向模块和列添加单面框阴影可以以创造性的方式为您的内容提供深度。 诀窍是知道如何有效地调整 Divi 的框阴影设计设置。 此常见问题页面布局只是您可以采用此设计的众多示例之一。 但是整个过程非常简单，应该是一种很好的技术，您可以将其保留在您的设计工具箱中以备将来使用。

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

干杯!