如何使用 Divi 的背景圖案和蒙版選項創建獨特的 CTA

Divi 的新背景圖案和蒙版選項使您可以輕鬆地在您的網站上創建引人注目且獨特的號召性用語 (CTA) 部分。 您可以將圖像、漸變、圖案和蒙版與許多自定義選項相結合，以創建獨一無二的背景設計，從而吸引訪問者的注意力。

在本教程中，我們將向您展示如何使用 Divi 的新背景圖案和蒙版選項創建獨特的 CTA 部分。

讓我們開始吧！

搶先看

這是我們將在本教程中設計的 CTA 部分的預覽。

你需要什麼開始

在我們開始之前，安裝並激活 Divi 主題，並確保您的網站上有最新版本的 Divi。

讓我們跳進去。

如何使用 Divi 的背景圖案和蒙版選項創建獨特的 CTA

使用預製佈局創建新頁面

對於我們的教程，我們將使用 Divi 庫中的預製佈局。 對於這個設計，我們將使用冰淇淋店佈局包中的冰淇淋店登陸頁面。

創建一個新頁面，添加一個標題，然後選擇使用 Divi Builder 選項。

在本示例中，我們將使用 Divi 庫中的預製佈局，因此選擇瀏覽佈局。

搜索並選擇冰淇淋店登陸頁面佈局。

選擇使用此佈局將佈局添加到您的頁面。

現在我們已準備好構建我們的設計。

修改背景圖案和蒙版的佈局

我們將從此佈局修改月份 CTA 部分的風格。 讓我們對背景圖案和蒙版設計的佈局進行一些更改。

行設置

打開行設置，然後選擇設計。

在 Sizing 下，均衡列高。

• 均衡柱高：是

在“間距”下，移除頂部填充以將圓錐體帶到截面的頂部。

• 頂部填充：0px

第 1 列設置

在行設置的內容選項卡下，選擇列 1 設置。 在背景下，刪除橙色背景。

第 2 列設置

現在，選擇第 2 列設置。 原始設計有一些我們不需要的間距，所以讓我們擺脫它。 在設計下，導航到間距並刪除頂部填充。

然後選擇 Advanced 並將以下自定義 CSS 添加到 Main Element，以便我們的“本月風味”文本垂直居中。

margin:auto;

部分設置

打開部分設置。 在設計下，選擇填充。 調整部分填充，使頂部圓錐與頁面的最頂部對齊。

• 填充：0px

向 CTA 部分添加背景圖案和蒙版

現在我們的佈局已經修改，我們可以添加我們的背景圖案和蒙版。 Divi 的新選項為背景圖案和蒙版提供了無窮無盡的選項，這意味著您只需單擊幾下即可為 CTA 部分創建獨特的設計。 跟隨學習如何使用這些設置設計一個引人注目的背景。

背景顏色、圖案和蒙版設置

導航到部分背景設置。

在顏色選項卡下，添加橙色背景

• 顏色：#FFA256

在圖案選項卡下，設置圖案形狀和顏色。

• 形狀：五彩紙屑
• 顏色：#FF7D14

現在讓我們添加掩碼。 選擇遮罩選項卡，然後添加如下設置：

• 形狀：角點
• 面具顏色：#FFFFFF
• 蒙版變換：水平
• 蒙版縱橫比：橫向
• 面罩尺寸：封面

設計調整

現在我們的背景已經到位，讓我們對設計進行一些最後的調整。

打開“購買”按鈕設置並更改“設計”選項卡下的對齊方式。

• 按鈕對齊方式：左

更改“購買”按鈕的懸停狀態背景顏色，使其在橙色背景中突出。

• 懸停時的按鈕背景：#FF7D14

我們還將調整行佈局，在橙色背景和右側的“本月風味”部分之間添加更多空間。 將佈局從 1:1 更改為 3:2。

現在桌面設計已經完成，您已經學會瞭如何使用 Divi 的背景圖案和蒙版選項創建一個獨特的 CTA 部分！

使 CTA 部分具有響應性

當在手機或平板電腦上查看我們的 CTA 部分時，第 2 列中的內容會堆疊在第 1 列下方。這可能會導致我們的設計出現一些可讀性問題。 讓我們使用 Divi 的內置響應設置進行一些調整，以優化我們的內容和小屏幕設計。

由於我們希望文本出現在按鈕之前，因此將“本月亮點”文本複製到“七月橙巧克力”文本模塊。 確保您僅將此文本添加到手機和平板電腦版本。

• 將“橙色巧克力”文本更改為 H3。

接下來，我們將對文本進行一些更改，使其在此背景中脫穎而出。 轉到設計選項卡並進行以下更改：

• H2（手機和平板電腦）文本顏色：#000000
• H2（手機和平板電腦）文字大小：30px
• H3（手機和平板電腦）文本顏色：#000000
• H4（手機和平板電腦）文字顏色：#000000

現在轉到原始“本月風味”文本模塊的設置並更改可見性，使其僅在桌面設備上可見。 這將使原始文本模塊隱藏在較小的設備上。 本月風味文本將出現在按鈕上方，頁面上的其他文本。

• 禁用：手機和平板電腦

接下來，打開行設置，然後打開第 1 列設置。 刪除左右填充。

• 右填充：0px
• 左填充：0px

轉到部分設置，然後是背景，然後編輯蒙版設置

• 蒙版變換：反轉
• 蒙版縱橫比：縱向

現在，由於 Divi 的背景圖案和蒙版選項，您已經創建了一個具有獨特背景的完全響應式 CTA 部分。

最後結果

讓我們來看看最終的結果。

最後的想法

借助 Divi 強大的背景圖案和蒙版選項，設計獨特且引人注目的號召性用語部分非常容易。 通過嘗試不同的顏色、圖案、面具和設置組合來釋放您的創造力。 它易於設計，您只需單擊幾下即可調整設置，直到找到完美的外觀。 最重要的是，它內置在 Divi 中！ 不再需要在另一個程序中設計背景圖形。 您可以將背景設置應用於其他部分、行和模塊，以獲得更獨特的設計。 如果您想了解有關 Divi 的背景圖案和蒙版功能的更多信息，請查看我們的教程，了解帶有背景蒙版和圖案的英雄部分，並了解如何將 Divi 的漸變生成器與背景蒙版和圖案相結合。

您如何在您的網站上使用 Divi 的背景圖案和蒙版選項？ 讓我們知道您在下面的評論中創建了什麼！