如何使用 Divi 的列和轉換選項創建重疊列

在最新的 Divi 更新之一中，我們為構建器中的列添加了一些非常驚人的控件。 現在創建列重疊比以往任何時候都容易。 在本教程中，我們將向您展示如何使用 Divi 的列和轉換設置創建具有三個重疊列的推薦部分。

對於此設計，我們將使用三種顏色，豐富的橙色 #ff8300、暖黃色 #ffd400 和醒目的藍色漸變 #0c99c1。 您可以立即將這種重疊的列設計應用到網站項目中。

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

1.新建正則部分+三列行

您需要做的第一件事是創建一個包含三列行的常規部分。

調整截面間距

增加部分的頂部和底部填充。

• 頂部填充：4vw
• 底部填充：16vw

調整行的大小和間距

打開行設置並相應地更改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

之後，修改間距設置：

• 底部填充：0px
• 左填充：11vw
• 右填充：8vw

添加漸變背景

接下來添加漸變背景：

• 背景樣式：漸變
• 第一種顏色：白色#ffffff
• 第二種顏色：橙色#ff8300
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：35%
• 結束位置：35%

2. 樣式欄

在向列添加模塊之前，我們將分別更改每列的樣式、間距和變換設置。

第 1 欄

列樣式的第一步是圓角和框陰影：

• 邊框：所有圓角均為 20px
• 框陰影：第一個框陰影選項
• 框陰影垂直位置：0px
• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)
• 框陰影位置：外

* 在添加任何變換設置之前，我們將這些項目樣式複制並粘貼到第二和第三列。

再次打開第 1 列設置並轉到設計選項卡。 我們將使用變換設置使第一列與第二列重疊。 以防萬一你忘記了，x 軸是水平的，y 軸是垂直的。

• 變換翻譯：
  • 桌面：x 軸 = 3vw。 y 軸 = 14.2vw
  • 平板電腦和手機：x 軸 = -14vw。 y 軸 = 16vw
• 能見度：Z 指數 10

第 2 欄

進入第二列！ 轉到框陰影（您已在前面的步驟之一中添加）並增加框陰影模糊強度。

• 框陰影模糊強度：50px

繼續向第 2 列添加一些自定義間距值。

• 頂部填充：
  • 桌面 = 3vw
  • 平板電腦 + 手機 = 5vw
• 底部填充：
  • 桌面 = 5vw
  • 平板電腦 + 手機 = 7vw
• 左填充：
  • 桌面 = 2vw
  • 平板電腦 + 手機 = 4vw
• 右填充：
  • 桌面 = 2vw
  • 平板電腦 + 手機 = 4vw

是時候轉換第二列了！ 第二列保留在桌面的位置，但我們必須在較小的屏幕上應用一些自定義轉換設置。 繼續調整變換翻譯選項卡。 此外，我們將 Z 索引增加到 9。

• 變換翻譯：
  • 平板電腦和手機：x 軸 = 9vw。 y 軸 = 13vw
• 能見度：Z 指數 9

第 3 欄

進入第三列！ 增加已經存在的框陰影的框陰影模糊強度。

• 框陰影模糊強度：50px

接下來打開背景設置並添加藍色漸變背景。

• 背景：漸變
• 漸變色一：#0c99c1
• 漸變顏色二：rgba(5,0,78,0.72)
• 漸變類型：線性
• 梯度方向：220度
• 起始位置：0%
• 結束位置：100%

現在，讓我們添加間距。

• 頂部填充：
  • 桌面 = 3vw
  • 平板電腦 + 手機 = 10vw
• 底部填充：
  • 桌面 = 3vw
  • 平板電腦 + 手機 = 7vw
• 左填充：
  • 桌面 = 1.5vw
  • 平板電腦 + 手機 = 10vw
• 右填充：
  • 桌面 = 1.5vw
  • 平板電腦 + 手機 = 10vw

最後但並非最不重要的一點是，我們將通過更改變換轉換設置使第三列與第二列重疊。

• 變換翻譯：
  • 桌面：x 軸 = -10vw。 y 軸 = 14.2vw
  • 平板電腦：x 軸 = -14vw。 y 軸 = 9vw
  • 電話：x 軸 = -14vw。 y 軸 = 11vw
• 能見度：Z 指數 9

這是添加模塊之前我們的列的預覽。

3.將模塊添加到列並為其設置樣式

現在，讓我們將模塊添加到每一列！

第 1 欄

在第一列中，我們將插入一個圖像模塊和一個文本模塊。 首先添加圖像模塊。

1. 添加圖片模塊

插入客戶的照片並按如下方式設置樣式：

• 對齊方式：左
• 強制全角：是

還要為圖像添加底部邊框。

• 底部邊框顏色：黃色 #ffd400
• 底部邊框寬度：9px
• 邊框樣式：純色

2. 添加文本模塊

在圖像模塊正下方添加一個新的文本模塊並插入客戶的姓名和職位。

• 名稱：標題 4
• 位置：段落

添加內容後，我們將設置文本設置的樣式：

• 文字字體：Nunito Sans
• 文字字體粗細：常規
• 文本對齊：居中
• 文字顏色：黑色#000000
• 字體大小：
  • 桌面 = 0.8vw
  • 平板電腦 = 1.8vw
  • 電話 = 2.8vw

轉到標題文本設置並應用以下更改：

• 標題文字：H4
• 標題 4 字體：Poppins
• 標題 4 字體粗細：粗體
• 標題 4 文本顏色：黑色 #000000
• 標題 4 文字大小：
  • 桌面 = 1vw
  • 平板電腦 = 3vw
  • 電話 = 4vw

我們還將更改間距設置：

• 最高保證金：
  • 桌面 = 1.5vw
  • 平板電腦 = 3vw
  • 電話 = 7vw
• 底部邊距：
  • 桌面 = 1.5vw
  • 平板電腦 = 3vw
  • 電話 = 7vw

完成兩個模塊後，您的專欄應如下所示：

第 2 欄

在第 2 列中，我們需要一個文本、一個簡介和一個分隔模塊。 第一個文本模塊在列的右上角看起來像一個有角度的橫幅。 我們將使用變換選項來實現這種效果。

1. 添加文本模塊。

添加一個新的文本模塊並將“推薦”一詞添加到內容框中。

為模塊添加黃色背景。

• 背景顏色：黃色#ffd400

轉到設計選項卡並相應地更改文本和間距設置：

• 文字字體： Poppins
• 文字字體粗細：粗體
• 文本對齊：居中
• 文字顏色：白色#ffffff
• 文字大小：23px
• 右邊距：-50px
• 左邊距：-50px
• 頂部填充：15px
• 底部填充：15px

最後但並非最不重要的一點是，我們將按如下方式調整變換設置：

• 變換翻譯：
  • 桌面 = x 軸上的 17vw
  • 平板電腦 = x 軸上的 24vw，y 軸上的 1vw
  • 電話 = x 軸上的 20vw，y 軸上的 1vw
• 變換旋轉：第一個軸上 32 度

2. 添加 Blurb 模塊。

一旦你完成了第一個模塊，就該添加一個簡介模塊了。

簡介模塊是顯示客戶推薦的地方。 首先，單擊 + 圖標添加模塊並選擇模糊。

然後，插入內容，選擇一個圖標並設置圖標樣式如下：

• 使用圖標：是的，一顆星星
• 圖標顏色：黃色 #ffd400
• 圖標位置：左
• 使用圖標字體大小：是的，48px

繼續在 H4 級別設置標題文本的樣式

• 標題文字：H4
• 標題字體: Poppins
• 標題字體粗細：粗體
• 標題字體顏色：黑色#ffffff

• 標題文字大小：
  • 桌面 = 1.2vw
  • 平板電腦 = 2.3vw
  • 電話 = 3.3vw
• 標題行高度：
  • 桌面 = 2vw
  • 平板電腦 = 3.4vw
  • 電話 = 4.6vw

相應地設置正文文本設置的樣式：

• 正文字體：Nunito Sans
• 正文重量：半粗體
• 正文顏色：黑色 #000000
• 正文大小：
  • 桌面 = 0.7vw
  • 平板電腦 = 1.6vw
  • 電話 = 2.4vw
• 車身線高：
  • 桌面 = 1.6vw
  • 平板電腦 = 4vw
  • 電話 = 5vw

我們希望模糊的寬度小於其列，為此，我們將調整寬度、邊距和填充值。

首先，我們將調整模糊的寬度：

• 內容寬度：100%
• 寬度：
  • 桌面 = 58.4%
  • 平板電腦 + 手機 = 90%

然後，間距設置：

• 最高利潤率：3vw
• 底邊距：3vw
• 右邊距：-24vw
• 左填充：0px
• 右填充：4px

3. 添加分隔線

本專欄中我們需要的最後一個模塊是分隔器模塊。 將以下更改應用於分隔符：

• 見分頻器：是
• 分隔線顏色：黑色#oooooo
• 分隔線重量：1px

我們快到了！ 到目前為止，我們的結果是這樣的：

第 3 欄

進入第三列也是最後一列！ 我們使用此列來顯示號召性用語。 我們使用了三個模塊； 一個文本模塊、一個分隔模塊和一個按鈕模塊。

1. 添加文本模塊

我們將添加到此列的第一件事是文本模塊。

我們將在 H3 中添加一個標題，並在內容框中添加一些段落文本。

繼續並相應地設置文本設置的樣式：

• 文字字體：Nunito Sans
• 文字字體粗細：常規
• 文字字體顏色：白色#ffffff
• 文字字體大小：
  • 桌面 = 0.8vw
  • 平板電腦=- 2vw
  • 電話 = 2.6vw
• 文本行高度：
  • 桌面 = 1.5vw
  • 平板電腦 = 4vw
  • 電話 = 5vw

通過設置標題文本設置的樣式來完成文本模塊。

• 標題文字：H3
• 標題 3 字體：Poppins
• 標題 3 字體粗細：粗體
• 標題 3 文本顏色：白色 #ffffff
• 標題 3 文字大小：
  • 桌面 = 1.1vw
  • 平板電腦 = 3vw
  • 電話 = 4vw
• 標題 3 行高：
  • 桌面 = 1.5vw
  • 平板電腦 = 3vw
  • 電話 = 4.5vw

2. 添加分頻模塊

繼續向第 3 列添加分隔條模塊。要設置分隔條的樣式，我們將復制並粘貼第 2 列中的分隔條樣式。

打開分隔線設置並將顏色從黑色更改為白色。 添加一些頂部和底部填充。

• 分隔線顏色：白色#ffffff
• 頂部填充：40px
• 底部填充：20px

3. 添加按鈕模塊

到最後一個模塊，這是一個按鈕模塊。 添加一些您選擇的副本。

轉到設計選項卡並按如下所示設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：
  • 桌面 = 0.8vw
  • 平板電腦 = 2.4vw
  • 電話 = 3vw
• 按鈕文字顏色：白色#ffffff

• 按鈕背景顏色：漸變
• 漸變色一：黃色#ffd400
• 漸變色二：橙色#ff8300
• 漸變類型：線性
• 梯度方向：202deg。

• 按鈕邊框寬度：0px
• 按鈕字母間距：1px
• 按鈕字體：Nunito Sans
• 按鈕字體重量：重
• 按鈕字體樣式：TT

為了使按鈕在所有屏幕尺寸上看起來都不錯，我們將按如下方式調整按鈕的內邊距：

桌面

• 頂部填充：1vw
• 底部填充：1vw
• 右填充：3vw
• 左填充：3vw

藥片

• 頂部填充：2vw
• 底部填充：2vw
• 右填充：6vw
• 左填充：6vw

電話

• 頂部填充：3vw
• 底部填充：3vw
• 右填充：8vw
• 左填充：8vw

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

包起來

這個重疊的三列構建作為推薦看起來很棒，但我們相信您可以將它用於其他令人驚奇的事情。 我們希望這會激勵您在未來的項目中使用列變換和重疊選項。 如果您有任何問題或建議，請務必在下方評論區留言！