在 Divi 中为各种设计元素添加单边框阴影是一种微妙的方式，可以在不分散内容的情况下添加创意蓬勃发展。 在本教程中，我将向您展示如何在 Divi 的治疗常见问题页面布局中添加单边框阴影。 作为奖励提示，我还将向您展示如何将模糊图标组合为垂直居中的图形。 通过学习这些 Divi 设计技术，您可以将单面框阴影添加到您想要的任何模块或列中。
让我们开始吧。
抢先看
这是我们将使用单面框阴影构建的常见问题解答布局设计的先睹为快。
入门
首先，您需要创建一个新页面。 从您的 WordPress 仪表板中，导航到页面 > 添加新的。 然后给你的页面一个标题并部署可视化构建器。 选择“选择预制布局”选项。 从“从库加载”弹出窗口中，找到并选择 Therapist Layout Pack。 然后选择 Therapist FAQ Page Layout 并点击“Use this Layout”。
现在您可以开始设计了。
第 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 将阴影向左移动。 之后，您需要找到模糊强度和散布强度的正确平衡，以保持盒子阴影在左侧可见，而不会溢出到模块的顶部和底部。
保存设置。
现在，您的所有切换模块都已使用新设计进行了更新。
但是，我们希望右列中切换模块的框阴影位于右侧（而不是左侧）。 要更改此设置，请使用多选选择右列中的所有切换模块并打开元素设置。 然后将水平位置从 -30px 更改为 30px，如下所示：
盒子阴影水平位置：30px
然后保存设置。
这照顾了我们的切换模块及其独特的单边框阴影。 现在我们需要为我们的列添加类似的单边框阴影。
第 3 部分：向列添加单面框阴影
要为列添加单边框阴影，我们需要在行设置的高级选项卡下添加一些 CSS 片段。
打开行设置并单击高级选项卡。 在第 1 列主元素内，添加以下 CSS：
盒子阴影：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 列主元素：
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)
同样，此 CSS 与用于第 1 列的 CSS 之间的唯一区别是负水平位置。
第 4 部分：将模糊图标添加到第 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 的盒子阴影设计设置。 此常见问题解答页面布局只是您可以合并此设计的众多示例之一。 但是整个过程非常简单，应该是一种很好的技术，您可以将其保留在您的设计工具箱中以供将来的项目使用。
我期待在评论中收到您的来信。
干杯!
