如何將圖像背景和框陰影選項與 Divi 結合使用

在這篇 Divi 帖子中，我們將向您展示如何組合圖像模塊的背景和陰影選項。 這篇文章旨在激發您的想像力，並向您展示新的 Divi 功能如何與現有功能配合使用，從而產生創造性的結果。 為了幫助您完成創作過程，我們創建了 4 種組合，我們將向您展示如何逐步重新創建。 讓我們來看看這些例子。

第一個例子

桌面

移動的

第二個例子

桌面

移動的

第三個例子

桌面

移動的

第四個例子

桌面

移動的

如何將圖像背景和框陰影選項與 Divi 結合使用

訂閱我們的 YouTube 頻道

第一個例子

既然我們已經向您展示了您可以從這篇文章中得到什麼，讓我們來看看如何在 Divi 中僅用幾個步驟而不需要額外的 CSS 代碼來重新創建以下示例：

添加兩列行

第 1 列背景顏色

將兩列行添加到標準部分並選擇“rgba(12,113,195,0.11)”作為第 1 列的背景顏色。

間距

然後，轉到“設計”選項卡。 將“200px”添加到第一列的頂部邊距，將“150px”添加到第一列的底部填充。

將圖像模塊添加到第一列（桌面和平板電腦）

漿紗

然後，將圖像模塊添加到您創建的行的第一列。 此圖像模塊僅適用於台式機和平板電腦。 您需要做的第一件事是將寬度更改為“94%”。

間距

然後，打開間距子類別，啟用“在圖像下方顯示空間”選項，將“-150px”添加到圖像的頂部邊距和“-110px”到圖像的左邊距。

盒子陰影

進一步向下滾動選項卡並將以下框陰影應用於圖像：

• 框陰影水平位置：80px
• 框陰影垂直位置：80px
• 框陰影模糊強度：0px
• 框陰影傳播強度：6px
• 陰影顏色：rgba(173,173,173,0.79)
• 框陰影位置：外陰影

能見度

最後，轉到高級選項卡並禁用移動設備上的圖像模塊。

克隆圖像模塊（電話）

我們用於圖像模塊桌面版和平板電腦版的大多數設置對於移動版也是相同的。 這就是為什麼我們要克隆圖像模塊並進行一些與移動屏幕匹配的其他更改。

更改框陰影

我們需要更改的第一件事是框陰影。 不要使用桌面設置，而是使用以下設置：

• 框陰影水平位置：33px
• 框陰影垂直位置：78px
• 框陰影模糊強度：0px
• 框陰影傳播強度：6px
• 陰影顏色：rgba(173,173,173,0.79)
• 框陰影位置：外陰影
  

能見度

我們需要做的下一件也是最後一件事情是更改第二個圖像模塊的可見性。 不要在手機上禁用它，而是在平板電腦和台式機上禁用它。

第二個例子

接下來，我們有第二個例子，它在桌面上看起來像這樣：

添加兩列行

行漸變背景

向您正在處理的部分添加一個新的兩列行，並為其使用以下漸變背景：

• 第一種顏色：rgba(237,240,0,0.55)
• 第二種顏色：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心
• 起始位置：50.8%
• 結束位置：50.8%

漿紗

轉到“設計”選項卡並啟用“使此行全寬”選項。

間距

最後，將“200px”的頂部填充添加到第二列。

將圖像模塊添加到第一列

間距

完成行設置後，繼續將圖像模塊添加到第一列。 打開“設計”選項卡中的“間距”子類別，並將“30px”添加到頂部、右側、底部和左側填充。

盒子陰影

向下滾動相同的選項卡並為 Box Shadow 子類別使用以下設置：

• 框陰影水平位置：0px
• 框陰影垂直位置：2px
• 框陰影模糊強度：56px
• 框陰影傳播強度：12px
• 陰影顏色：rgba(0,0,0,0.3)
• 框陰影位置：外陰影

克隆圖像模塊並放置在第二列

第二列中圖像模塊的設置相同。 繼續，克隆圖像模塊並將其放在第二列中。

第三個例子

繼續，我們將向您展示如何實現以下結果：

添加一列行

第 1 列背景顏色

添加一個單列行並選擇“rgba(193,145,163,0.6)”作為第一列的背景色。

添加圖像模塊

漸變背景圖像

然後，向列中添加一個圖像模塊並為其使用以下漸變背景：

• 第一種顏色：#e2e2e2
• 第二種顏色：rgba(255,255,255,0)
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：50%
• 結束位置：50%

邊界

轉到“設計”選項卡，並將以下設置應用於“邊框”子類別：

• 使用邊框：是
• 邊框顏色：#000000
• 邊框寬度：3px
• 邊框樣式：純色

漿紗

接下來，將以下寬度添加到圖像模塊：

• 台式機：85%
• 平板電腦和手機：100%

間距

然後，打開 Spacing 子類別並將以下填充和邊距應用於圖像模塊：

• 左邊距：80px（桌面），0px（平板和手機）
• 頂部、右側、底部和左側填充：30px

盒子陰影

最後，使用以下設置添加框陰影：

• 框陰影水平位置：0px
• 框陰影垂直位置：0px
• 框陰影模糊強度：0px
• 框陰影傳播強度：39px
• 陰影顏色：rgba(0,0,0,0.22)
• 框陰影位置：外陰影

第四個例子

最後; 我們將向您展示如何重新創建的最後一個示例如下所示：

添加兩列行

首先添加一個兩列的行。 與我們在本文中處理的先前示例不同，這一行不需要任何其他設置。

將圖像模塊添加到第一列

漸變背景

將圖像模塊添加到您剛剛創建的行的第一列，並為其使用以下漸變背景：

• 第一種顏色：rgba(255,255,255,0)
• 第二種顏色：rgba(92,0,158,0.46)
• 漸變類型：線性
• 梯度方向：138deg
• 起始位置：55%
• 結束位置：55%

間距

然後，轉到“設計”選項卡並為“間距”子類別使用以下設置：

• 在圖像下方顯示空間：是
• 右填充：30px
• 底部填充：30px

將第二個圖像模塊添加到第一列

背景顏色

繼續在上一個圖像模塊的正下方添加另一個圖像模塊，並使用“rgba(96,96,96,0.42)”作為其背景顏色。

間距

然後，轉到“設計”選項卡並對“間距”子類別使用以下設置：

• 在圖像下方顯示空間：是
• 上邊距：-250px（桌面）、-150（平板）、-100（手機）
• 右邊距：-150px（桌面），0px（平板和手機）
• 左邊距：150px
• 頂部填充：30px
• 左填充：30px

盒子陰影

最後，打開 Box Shadow 子類別並使用以下設置：

• 框陰影水平位置：0px
• 框陰影垂直位置：2px
• 框陰影模糊強度：0px
• 框陰影傳播強度：24px
• 陰影顏色：#e2e2e2
• 框陰影位置：外陰影

最後的想法

我們在這篇文章中分享的例子只是 Divi 的框陰影和背景選項可以走多遠的一小部分。 您可以使用圖像模塊創建獨特的設計，以增強您網站的整體外觀。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論。

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

精選圖片來自創意攤位/shutterstock.com