使用 Divi 的行對齊和動畫設置創建滑入式 CTA

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。 本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Cleaning Company Layout Pack 使用 Divi 的行對齊和動畫設置創建滑入式 CTA。

為了幫助實現這一點，我們將首先刪除所有已經存在的動畫。 這樣，我們可以突出顯示滑入的號召性用語。

讓我們開始吧！

預覽

讓我們來看看我們將在這篇文章中處理的三個不同的例子：

上傳清潔公司登陸頁面

添加新頁面並切換到 Visual Builder

如前所述，我們將使用 Cleaning Company Layout Pack 來創建本教程，但您可以隨意將這種方法用於您正在構建的任何網站。 添加一個新頁面，輸入頁面標題並立即切換到 Visual Builder。

上傳清潔公司登陸頁面

完成後，您會在屏幕上看到三個選項。 您可以從頭開始構建，選擇預製佈局或克隆現有頁面。 選擇第二個選項。

搜索 Cleaning Company Layout Pack，選擇登錄頁面佈局並將其上傳到您的頁面。

刪除頁面上的所有動畫設置

找到頁面上的部分

將佈局上傳到您的頁面後，繼續並找到以下部分。

移除動畫

打開它的設置並刪除已經存在的動畫。

將樣式擴展到所有部分

為了節省時間，我們將把這個動畫風格擴展到頁面上的所有設計元素。 我們將通過右鍵單擊我們頁面上的部分開始，選擇“擴展動畫樣式”。 使其適用於整個頁面的所有部分，然後單擊“擴展”。

將樣式擴展到所有行

重複相同的步驟，但改為將其應用於整個頁面的所有行。

將樣式擴展到所有模塊

最後，讓它也適用於頁面上的所有模塊。

創建 CTA #1

添加新行

地點

讓我們開始創建第一個滑入式 CTA！ 在以下部分的底部添加一個新行：

列結構

為您剛剛添加的行選擇以下列結構：

行對齊

我們將向左推行以幫助創建滑入效果。

• 行對齊方式：左

漿紗

我們還將減少行的寬度。

• 使用自定義寬度：是
• 自定義寬度：500px

間距

為了擺脫不必要的空白，刪除行的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加號召性用語模塊

添加副本

我們現在可以添加我們的號召性用語模塊！ 添加一些選擇的內容。

添加鏈接

接下來添加指向 CTA 模塊的鏈接。 如果您還沒有要重定向到的鏈接，則只需輸入“#”即可。 如果不向此框中添加任何內容，您將無法看到該按鈕，因此請確保不要將其留空。

刪除背景顏色

CTA 模塊默認具有背景顏色。 繼續並在後台設置中將其刪除。

複製截面漸變

打開包含藍色漸變背景的部分。 在不更改任何內容的情況下，右鍵單擊並複制設置。

在 CTA 模塊中粘貼漸變

將此漸變背景粘貼到 CTA 模塊上。

標題文字設置

再次打開 CTA 模塊設置，轉到標題文本設置並進行一些更改以匹配佈局包：

• 標題字體：Ubuntu
• 標題字體粗細：粗體
• 標題文字大小：24px（桌面和平板電腦），16px（手機）
• 標題行高度：1.2em

正文設置

還要更改正文的正文字體粗細。

• 正文字體粗細：半粗體

按鈕設置

接下來更改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：18px
• 按鈕文字顏色：#557df3
• 按鈕背景顏色：#FFFFFF
• 按鈕邊框寬度：10px
• 按鈕邊框顏色：#FFFFFF
• 按鈕邊框半徑：0px
• 按鈕字體：Ubuntu
• 字體粗細：粗體

間距

也增加模塊的填充。

• 頂部填充：80px
• 底部填充：80px
• 左填充：50px
• 右填充：50px

邊界

然後，在邊框設置中添加一些右上角和右下角的邊框半徑。

• 右上角：100px
• 右下角：100px

盒子陰影

為了創造更多的深度，我們將添加一個微妙的框陰影。

• 框陰影模糊強度：71px
• 框陰影擴散強度：-5px

動畫片

最後但並非最不重要的一點是，為您的 CTA 模塊添加動畫效果。

• 動畫方向：右
• 動畫強度：100%
• 動畫開始不透明度：100%
• 動畫速度曲線：線性

創建 CTA #2

克隆 CTA #1 行並進行更改

克隆行

要創建第二個示例，請繼續克隆第一行。

拖到分區

向下滾動頁面並將副本放在此處：

刪除部分頂部填充

打開您將行放入的部分的設置並刪除頂部填充。

• 頂部填充：0px

移除部分左上邊界半徑

接下來轉到邊框設置並刪除左上角邊框半徑。

刪除 CTA 右上角邊框半徑

然後，打開 CTA 模塊並移除右上角的 border-radius 以允許部分和模塊混合。

更改動畫

對於這個滑入式 CTA，我們將使用不同的動畫。 也可以隨意使用其他動畫選項。

• 動畫方向：中心
• 動畫開始不透明度：100%
• 動畫速度曲線：線性

創建 CTA #3

克隆 CTA #1 行並進行更改

克隆行

為了創建最後一個示例，我們將再次克隆該行。

拖到分區

將副本放在以下部分：

更改行對齊方式

打開模塊的行設置，將對齊改為右對齊。

• 行對齊：右

刪除 CTA 漸變背景

刪除模塊的漸變背景。

改用背景色

請改用背景顏色。

• 背景顏色：#f2835a

更改按鈕文本顏色

要匹配背景顏色，請同時更改按鈕文本顏色。

• 按鈕文字顏色：#f2835a

刪除 CTA 邊框半徑

我們通過移除給定的所有邊界半徑將 CTA 模塊變成一個正方形。

更改動畫

接下來更改動畫設置。

• 動畫方向：下
• 動畫強度：100%
• 動畫開始不透明度：100%
• 動畫速度曲線：線性

刪除部分底部填充

最後但並非最不重要的一點是，我們將通過移除模塊所在部分的底部填充將模塊推到該部分的底部，我們就完成了！

• 底部填充：0px

預覽

讓我們最後看看我們創建的三個滑入式 CTA 示例。

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的 Cleaning Company Layout Pack 創建滑入式 CTA。 我們首先刪除了頁面上已經存在的動畫。 之後，我們創建了三個滑入式 CTA 以引起注意。 這篇博文是我們 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中放入一些東西。 如果您有任何問題或建議，請務必在下方評論區留言！