如何在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 的框陰影設計設置。 此常見問題頁面佈局只是您可以採用此設計的眾多示例之一。 但是整個過程非常簡單，應該是一種很好的技術，您可以將其保留在您的設計工具箱中以備將來使用。

我期待在評論中收到您的來信。

乾杯!