使用 Divi 的新列過濾器設置創建令人驚嘆的混合效果

Divi 的新列過濾器設置可以以多種創造性方式使用。 在這篇文章中，我們將向您展示如何將一個主行背景圖像與列內容混合。 我們將為模塊添加不同的顏色漸變和列“屏幕”混合模式以創建令人驚嘆的效果。 我們希望這個設計能激發您在下一個 Divi 項目中使用列混合模式。 您也可以免費下載 JSON 文件！

讓我們開始吧！

預覽

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

桌面

移動的

免費下載列混合模式佈局

要了解免費的列混合模式佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加具有 3 列行的新部分

通過添加具有三列行的新部分來開始設計。

截面間距

打開部分設置並調整間距。

• 左右邊距：3vw
• 頂部和底部填充：84px

行設置

背景

在添加任何模塊之前，我們將修改行設置。 首先添加背景顏色。

• 背景顏色：中灰色#c4c4c4

然後，上傳背景圖像並使用混合模式將背景顏色與圖像混合。

• 背景圖像混合：相乘

漿紗

調整下一行的大小設置。

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

間距

也刪除默認的行填充。

• 頂部和底部填充：0px

盒子陰影

繼續向該行添加一個簡單的框陰影。

• 框陰影：第一個選項

能見度

在可見性選項卡中調整 Z 索引。

• Z 指數：1

樣式列 1

輸入第一列的設置。

過濾器

將屏幕混合模式應用於過濾器選項卡中的列。

• 混合模式：屏幕

懸停變換比例

進入變換選項組並修改懸停變換比例設置。

• 變換比例：x 軸和 y 軸均為 105%

能見度

進入列的可見性選項卡並調整溢出設置。

• 水平溢出：可見
• 垂直溢出：可見

過渡

移至過渡選項卡並調整過渡持續時間以創建平滑過渡。

• 轉換持續時間：500 毫秒

將文本模塊添加到第 1 列

每列包含三個文本模塊。 使用您選擇的一些 H2 內容將第一個文本模塊添加到第 1 列，並按如下方式調整設置。

背景

使用顏色漸變為背景設置樣式。

• 背景：漸變
• 漸變色一：#5498ff
• 漸變色二：#16fff3
• 梯度方向：235度
• 起始位置：37%

間距

接下來添加一些自定義間距值。

• 頂部和底部填充：6vw
• 左右填充：3vw

標題文字

輸入標題文本設置並相應地設置 H2 文本設置的樣式：

• 標題 2 字體粗細：超粗體
• 標題 2 字體樣式：TT
• 標題 2 文字顏色：黑色 #oooooo
• 標題 2 文字大小：
  • 台式機：5vw
  • 平板電腦：11vw
  • 電話：13vw
• 標題 2 行高：
  • 台式機：4.3vw
  • 平板電腦：9vw
  • 電話：10.5vw

過濾器

轉到過濾器設置並添加屏幕混合模式。

• 混合模式：屏幕

將第二個文本模塊添加到第 1 列

繼續將第二個文本模塊添加到第 1 列，其中包含您選擇的一些段落內容。

樣式文本模塊如下：

背景

添加白色背景色。

• 背景顏色：白色#fffffff

文本

進入設計選項卡並相應地調整文本：

• 文字字體：蒙特塞拉特
• 文本對齊：兩端對齊
• 文字顏色：深灰色 #333333
• 字體大小：
  • 台式機：0.8vw
  • 平板電腦：2vw
  • 電話：2.5vw
• 文字字母間距：-0.04vw
• 文本行高：
  • 台式機：2.7vw
  • 平板電腦：5.5vw
  • 電話：6vw

間距

調整間距設置以在文本周圍創建空白空間。

• 上下邊距：0.5vw
• 頂部和底部填充：
  • 台式機：5vw
  • 平板電腦 + 手機：15vw
• 左填充：5vw
• 右填充：
  • 台式機：5vw
  • 平板電腦 + 手機：25vw

過濾器

最後但並非最不重要的一點是，在過濾器選項卡中應用屏幕混合模式。

• 混合模式：屏幕

將第三個文本模塊添加到第 1 列

要完成列設計，請添加帶有一些 CTA 副本的第三個文本模塊。 我們將整個模塊用作按鈕。

樣式模塊如下：

添加鏈接

在鏈接設置中添加您選擇的鏈接。 只要有人點擊模塊上的任何地方，他們就會被重定向到其他地方。

背景

設置背景漸變樣式以匹配第一個文本模塊。

• 背景：漸變
• 背景漸變色一：#5498ff
• 背景漸變顏色二：#16fff3
• 梯度方向：235度

文本

進入設計選項卡並按如下方式設置文本樣式：

• 文字字體：蒙特塞拉特
• 文字字體粗細：重
• 文本字體樣式：下劃線
• 文本下劃線顏色：白色#ffffff
• 文字顏色：黑色#000000
• 字體大小：
  • 台式機：1.5vw
  • 平板電腦：3.3vw
  • 電話：4vw
• 文本行高：1em

間距

調整間距設置，使文本更適合模塊。

• 頂部和底部填充：
  • 台式機：2vw
  • 平板電腦：6vw
  • 電話：9vw
• 左填充：3vw

將第一列複製兩次

完成第一列後，打開行設置並刪除第二列和第三列。 然後，將第一列複製兩次。 當然，我們需要對第 2 列和第 3 列中的模塊進行一些更改。

第 2 列/文本模塊 1 背景

• 背景漸變色一：#c870ff
• 背景漸變顏色二：#ff355a

第 2 列/文本模塊 2 框陰影

• 方框陰影：第六個選項
• 框陰影模糊強度：20px
• 框陰影傳播強度：17px
• 框陰影顏色：rgba(225,33,255,0.06)

第 2 列/文本模塊 3 背景

調整第三個文本模塊的背景漸變以匹配第一個模塊。

• 背景漸變色一：#c870ff
• 背景漸變顏色二：#ff355a

第 3 列/文本模塊 1 背景

進入第三列！ 相應地更改文本模塊 1 的漸變背景：

• 背景漸變色一：#ff4800
• 背景漸變顏色二：#fc9a2a

第 2 列/文本模塊 3 背景

• 背景漸變色一：#ff4800
• 背景漸變顏色二：#fc9a2a

預覽

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

桌面

移動的

這是一個包裹

在這篇文章中，我們向您展示瞭如何使用 Divi 的列設置創建具有驚人混合效果的三列設計。 我們結合了模塊、列和行設置來實現您可以在您創建的任何網站上使用的精美結果。 我們希望本教程也能激發您創建自己的替代設計。 如果您有任何問題或建議，請務必在下方評論區留言！