如何在 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 提供