如何創造性地將行和列背景與 Divi 的新選項結合起來

在本 Divi 教程中，我們將向您展示如何組合行和列背景選項以創建令人驚嘆的結果。 通過選擇正確的組合和設置，您可以實現增強網站整體外觀的設計。 為了演示我們正在談論的內容，我們製作了一個示例，我們將幫助您逐步構建。 我們僅使用 Divi 內置選項創建了此結果，因此您無需添加任何其他 CSS。

結果

如果您一步一步地按照本教程進行操作，您將能夠獲得以下結果：

雖然我們使用了三個不同的行來實現這個結果，但看起來它們都是更大圖景的一部分。 讓我們開始吧！

切換到可視化生成器

創建一個新頁面並啟用 Divi Builder 並切換到 Visual Builder。

創建部分

我們需要做的第一件事是創建一個新的標準部分。 我們將創建並相互組合的所有行都將成為本節的一部分。 要在行上創建框陰影效果，我們將添加以下部分漸變背景：

• 第一種顏色：rgba(61,65,86,0.59)
• 第二種顏色：#f7f7f7
• 漸變類型：徑向
• 徑向：底部
• 起始位置：31%
• 結束位置：76%

添加一列行

我們需要做的下一件事是向該部分添加一列行。 這一行將代表我們最終結果的以下部分：

行和列設置

使行全寬

繼續並在“設計”選項卡中使行全寬。

行背景設置

然後，您可以返回“內容”選項卡並添加以下漸變背景：

• 第一種顏色：#3d4156
• 第二種顏色：rgba(114,81,114,0.91)
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：0%
• 結束位置：65%

上傳背景圖像（在本例中為圖案）並選擇“乘法”作為您的背景圖像混合。

列背景設置

接下來，向下滾動並將以下漸變背景設置分配給您的行列：

• 第一種顏色：rgba(255,255,255,0.15)
• 第二種顏色：rgba(214,44,104,0)
• 列漸變類型：線性
• 列梯度方向：161deg
• 列起始位置：43%
• 柱端位置：43%

間距

繼續向您的行添加以下填充：

• 頂部：20px
• 右：30px
• 左：30px

還有一些填充到您的列中：

• 頂部：200px
• 底部：200px

添加文本模塊

接下來我們要做的是向該行添加一個文本模塊，並對該文本模塊的文本子類別進行以下更改：

• 文字字體：Playfair Display
• 文字字體大小：77px（桌面）、64（平板）、51（手機）
• 文字顏色：#f7f7f7
• 文本行高：1.7（桌面），1em（平板電腦和手機）

添加分頻器模塊

繼續在您剛剛創建的文本模塊下方添加一個分隔線模塊，並在可見性子類別中啟用“顯示分隔線”選項。

向下滾動同一個選項卡並使用“rgba(114,57,114,0.91)”作為背景顏色。

轉到“設計”選項卡並選擇“#3d4156”作為分隔線顏色。

打開樣式子類別並使用“實體”作為您的分隔線樣式和“頂部”作為您的分隔線位置。

接下來，將以下設置分配給 Sizing 子類別：

• 分隔線重量：11px
• 高度：23px
• 寬度：0%
• 模塊對齊：左

最後但並非最不重要的一點是，向“自定義填充”選項添加“48%”的左填充。

添加三列行

我們將添加到該部分的下一行看起來像是前一行的擴展，儘管它們是分開製作的。

行和列設置

使行全寬

再次開始，使新行全寬。

行背景設置

然後，使用以下背景設置：

• 第一種顏色：rgba(114,81,114,0.91)
• 第二種顏色：#f7f7f7
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：9%
• 結束位置：100%

添加背景圖案並使用“乘法”作為背景圖像混合。

列背景設置

向下滾動選項卡並使用“#f7f7f7”作為每列的背景顏色。

間距

在間距子類別中，首先將“30px”分配給每列的頂部、底部、右側和左側填充。 然後，將以下填充添加到您行的桌面版本：

• 頂部：19px
• 右：200px
• 左：200px

平板電腦上的填充略有不同：

• 頂部：0px
• 右：70px
• 底部：0px
• 左：70px

手機上的填充如下：

• 頂部：0px
• 右：50px
• 底部：30px
• 左：50px

添加第一個文本模塊

繼續將文本模塊添加到行的第一列。 然後，對“設計”選項卡的“文本”子類別使用以下設置：

• 文字字體：Raleway
• 字體樣式：粗體和大寫
• 文字字體大小：23px
• 文字顏色：#3d4156
• 文本行高：1.7em
• 文字方向：居中

添加第二個文本模塊

在上一個文本模塊的正下方添加另一個文本模塊，並使用以下設置：

• 文字字體：Raleway
• 文字字體大小：12px
• 文字顏色：#3d4156
• 文本行高：1.7em
• 文本方向：左

克隆文本模塊並放置在其他列中

創建兩個文本模塊後，克隆它們並將它們也放置在剩餘的兩列中。

添加一列行

我們要添加的最後一列將與前一列重疊。 我們這樣做的原因是這樣我們可以組合不同的漸變背景。 儘管我們創建的三行是分開的，但它們會感覺像是一回事。 同時，我們還可以享受多個漸變背景，而不僅僅是一個。

行和列設置

使行全寬

對於最後一行，我們還需要啟用“使此行全寬”。

行背景設置

然後，向該行添加漸變背景：

• 第一種顏色：rgba(61,65,86,0)
• 第二種顏色：rgba(114,81,114,0.34)
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：45%
• 結束位置：91%

列背景設置

向下滾動同一選項卡並為該列使用以下漸變背景：

• 第一種顏色：rgba(239,239,239,0.15)
• 第二種顏色：rgba(214,44,104,0)
• 列漸變類型：線性
• 柱梯度方向：340deg
• 列起始位置：45%
• 柱端位置：45%
  

間距

我們需要做的最後一件事是添加一些填充和邊距。 首先將“-100%”添加到頂部邊距，然後繼續使用以下自定義填充：

• 頂部：14px
• 右：30px
• 左：30px

該列也需要一些填充； 頂部為“200px”，底部為“155px”。

結果

如果您按照我們在本文中提供的不同步驟進行操作，您應該能夠獲得以下結果：

最後的想法

使用新的 Divi 選項，許多新事物成為可能。 其中之一是結合行和列的背景以實現出色的設計。 如果您有任何問題或建議，請務必在下方評論區留言！

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

精選圖片由 medejaja/shutterstock.com 提供