如何使用 Divi 在華麗的 CTA 部分強調您的粘性按鈕

當 Divi 粘性選項功能發佈時，我們博客上的發布帖子附有現場演示，向您展示了此新功能的多功能性。 為了幫助您更好地理解粘性選項並開始在您的設計中使用它們，我們將向您展示如何在本教程中重新創建一個現場演示設計。 我們正在重新創建的設計側重於強調您的粘性按鈕。 這是一個基於文本的 CTA 部分，可讓您以漂亮的方式突出您的號召性用語。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載 CTA 部分佈局

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

下載文件

免費下載

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

下載

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

1. 構建元素結構

添加新部分

背景顏色

首先向您正在處理的頁面添加一個新部分。 這可以是新頁面或現有頁面，但我們建議將其添加到已經包含一些內容的頁面，這樣就有足夠的滾動空間讓您真正看到栩栩如生的效果。 打開部分設置並應用您選擇的背景顏色。

• 背景顏色：#00965a

漿紗

移至該部分的設計選項卡並應用最大高度。 這個最大高度將幫助我們確保該部分的高度是有限的。

• 最大高度：100vh

溢出

由於我們稍後將在本教程中應用一些滾動效果，因此我們還需要隱藏部分的溢出以確保沒有任何內容超出部分容器。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加新行

列結構

部分設置到位後，使用以下列結構添加新行：

漿紗

尚未添加任何模塊，打開行設置並應用一些自定義大小設置。 這些大小設置將允許行容器佔據整行的寬度，從而為我們的設計提供全屏效果。

• 寬度：100%
• 最大寬度：無

第 2 列設置

間距

接下來打開第 2 列設置並在不同的屏幕尺寸上應用一些自定義填充值。

• 底部填充：60px
• 左填充：
  • 平板電腦和手機：5%
• 右填充：
  • 台式機：10vw
  • 平板電腦和手機：5%

將文本模塊添加到第 1 列

添加內容

是時候添加模塊了，從第 1 列中的文本模塊開始。添加一些您選擇的內容。 要創建與本文預覽中完全相同的設計，請插入一些有助於增強 CTA 的相關詞，我們將在本教程後面的第 2 列中放置這些詞。 確保將每個單詞也放在自己的行中。

文字設置

轉到模塊的設計選項卡並更改文本設置。 您會注意到我們使用視口寬度作為我們的文本大小單位。 使用視口寬度單位將幫助我們在所有屏幕尺寸上保持文本響應。

• 文字字體：Work Sans
• 文字字體粗細：粗體
• 文字顏色：#000000
• 文字大小：10vw
• 文本行高：0.2em

將文本模塊添加到第 2 列

添加內容

進入第二列。 在那裡，添加一個帶有一些您選擇的號召性用語副本的文本模塊。

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：Work Sans
• 文字顏色：#ffffff
• 文字大小：56px
• 文本行高：1.2em

漿紗

也為文本模塊分配最大寬度。

• 最大寬度：400px

將按鈕模塊添加到第 2 列

添加副本

我們設計中需要的下一個也是最後一個模塊是第 2 列中的按鈕模塊。添加一些您選擇的副本。

按鈕設置

轉到模塊的設計選項卡並相應地設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：16px
• 按鈕文字顏色：#000000
• 按鈕背景顏色：
  • 默認值：#ffffff
  • 懸停：rgba(255,255,255,0.7)
• 按鈕邊框寬度：5px
• 按鈕邊框顏色：rgba(0,0,0,0)

• 按鈕邊框半徑：5px
• 按鈕字體：Work Sans
• 顯示按鈕圖標：否

2. 應用滾動和粘性效果

將垂直運動添加到第 1 列中的文本模塊

現在我們的設計基礎已經建立，是時候應用滾動和粘性效果了！ 打開第 1 列中的文本模塊並應用一些響應式垂直運動。

• 啟用垂直運動：是
• 起始偏移：
  • 桌面：10
  • 平板和手機：0
• 中間偏移：0
• 結束偏移：
  • 桌面：-10
  • 平板和手機：0
• 運動效果觸發器：元素頂部

向第 2 列添加粘性效果

接下來，我們將打開第 2 列設置並在桌面上應用粘性效果。 由於較小屏幕尺寸上的列和模塊放置在彼此下方，而不是彼此相鄰，因此我們將在較小屏幕尺寸上將粘性設置恢復為“不粘貼”。

• 粘性位置：
  • 桌面：堅持到頂部
  • 平板電腦和手機：請勿粘貼
• 粘性頂部偏移：80px
• 底部粘性限制：部分
• 從周圍的粘性元素偏移：是
• 過渡默認和粘性樣式：是

將粘性樣式添加到第 2 列中的按鈕

既然第 2 列已變為粘性，我們將能夠將粘性樣式應用於列本身和列內的模塊。 然而，我們將進行的唯一粘性更改集中在按鈕上。 打開模塊，轉到按鈕設置並反轉文本和按鈕顏色。 就是這樣！ 保存佈局並退出視覺構建器後，您可以在網站上實時觀看精美的設計。

• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何重新創建在粘性選項功能更新帖子中用作演示的設計之一。 此設計側重於通過在啟用粘滯狀態後更改樣式來突出顯示粘滯按鈕。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。