如何在向下滾動頁面時構建粘性 CTA 菜單

傳統上，當頁面加載時，粘性菜單在頁面的頂部（或底部）可見。 但是，在用戶向下滾動頁面時構建粘性 CTA 菜單可以是一種創造性且有效的方法，可以讓那些重要的 CTA 始終可點擊。 在某些方面，它是兩全其美的。 它允許 CTA 保持其在原始設計中的主要位置。 而且，它使 CTA（按鈕）的縮小版本在用戶熟悉的粘性菜單結構中可見。

在本教程中，我們將向您展示如何在 Divi 中向下滾動頁面時構建粘性 CTA 菜單。 通過添加一種直觀但獨特的方式來吸引訪問者採取行動，這對桌面和移動用戶來說非常有用。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

https://youtu.be/kpjbG8frPTQ

訂閱我們的 YouTube 頻道

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

如何在 Divi 中滾動頁面時構建粘性 CTA 菜單

構建 CTA #1

為了開始構建我們的第一個 CTA，我們將使用一個帶有自定義 CTA 按鈕的模糊模塊，當用戶滾動時，該按鈕將停留在頁面的頂部和底部。

首先，在常規部分中創建一個新的單列行。

添加模糊

在行的列內，添加一個模糊模塊。

打開模糊設置並添加您選擇的圖像而不是默認圖標。 我正在使用 Cryptocurrency Layout Pack 中的圖像。

在設計選項卡下，更新文本樣式如下：

• 標題標題級別：H2
• 標題字體：Titillium Web
• 標題字體粗細：半粗體
• 標題文本對齊：居中
• 標題文字大小：36px（桌面），28px（手機）
• 標題行高度：1.5em
• 車身線高：2em

為 CTA 按鈕添加行

在包含我們剛剛創建的模糊的行下，添加一個新的單列行。

為了使粘滯按鈕的功能正確排列，使行設置正確很重要。

打開行設置並更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：1400px（桌面），100%（平板）

添加號召性用語按鈕

在新行內，添加一個號召性用語模塊。 更新內容如下：

• 我們只需要這個模塊中的按鈕元素，這樣我們就可以擺脫標題和正文文本。
• 確保添加按鈕鏈接 URL（'#' 現在就可以了），以便在設計佈局時該按鈕可見。 您以後可以隨時更新。
• 禁用“使用背景顏色”選項。

（注意：您將無法在白色背景上看到白色按鈕，但在下一步中會發生變化）

在設計選項卡下，更新以下按鈕樣式：

• 按鈕文字大小：14px（桌面），11px（手機）
• 按鈕文字顏色：#1b1f50
• 按鈕背景顏色：#09d5fe
• 按鈕邊框寬度：0px
• 按鈕字母間距：2px
• 按鈕字體：Titillium Web
• 按鈕字體粗細：粗體
• 按鈕字體樣式：TT
• 按鈕填充：頂部 1em，底部 1em

繼續更新設計如下：

• 寬度：33.33%
• 模塊對齊：居中
• 填充：0px 頂部，0px 底部

按鈕的 33.33% 寬度將允許按鈕在處於粘性位置時正好佔據瀏覽器窗口的 1/3。 將此與其他兩個按鈕（每個按鈕的寬度相同 33.33%）結合起來，將提供一個完整的 CTA 按鈕菜單欄。

在高級選項卡下，將以下自定義 CSS 片段添加到促銷說明（它有我們不需要的不必要的間距）：

display:none;

然後添加另一個片段促銷按鈕：

display:block;

使按鈕具有粘性

為了使按鈕具有粘性，我們將使用粘性位置選項來粘貼按鈕以及瀏覽器窗口的頂部和底部。 我們還將為默認的 Divi 固定標頭添加一個偏移量。

更新以下內容：

• 粘性位置：粘在頂部和底部
• 粘性頂部偏移：54px（桌面），0px（平板電腦）
• 從周圍的粘性元素偏移：否

設置好粘性位置後，我們現在可以定位處於粘性狀態的按鈕樣式。 在這種情況下，我們希望將按鈕移到左側，以便稍後為其他粘性按鈕騰出空間。

在粘性狀態下更新以下變換樣式：

• Transform Translate X 軸（粘性）：-100%

一旦它粘在頁面的頂部或底部，這將移動按鈕的距離等於按鈕的確切寬度（即 33.33%）。

構建 CTA #2

現在我們有一個部分完成了一個有效的粘性 CTA 按鈕，我們可以復制上一部分並對按鈕進行細微的調整。

首先，複製該部分。

在新部分中打開 Call to Action 模塊的設置並更新轉換選項，如下所示：

• Transform Translate X 軸（粘性）：0px

這實際上只是將它恢復到默認狀態，因為我們不想移動這個按鈕，因為它需要保持在中心。

構建 CTA #3

要構建第三個 CTA 部分，請複制上一部分。

然後在新部分中打開 Call to Action 模塊的設置並更新轉換選項，如下所示：

• 變換 平移 X 軸（粘性）：100%

一旦它粘在頁面的頂部或底部，這會將按鈕向右移動等於按鈕的確切寬度（33.33%）的距離。

更新按鈕文本和顏色

要完善設計，請更新 CTA 按鈕文本和顏色以匹配您的網站設計。 以下是此示例的設置：

對於 CTA #2…

• 按鈕文本：查看我們的計劃
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#1b1f50

對於 CTA #3…

• 按鈕文字：與我們聊天
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#4328b7

在頂部和底部添加臨時邊距以測試功能

在普通網站上，這些 CTA 將位於頁面中間的某個位置，因此有額外的空間可以上下滾動頁面。 現在，我們可以在頁面的頂部和底部添加一些臨時邊距。

在頂部添加 90vh 頂部邊距。

在底部，添加 90vh 底部邊距。

最後結果

現在讓我們看看最終的結果。

最後的想法

本教程向您展示了一種將那些重要的 CTA 放在最前沿的創造性方法，以便用戶可以隨時單擊它們。 它還添加了一種微妙的微交互，可以在不分散頁面主要內容的情況下吸引更多注意力。 希望這將有助於讓這些創意源源不斷，以便您可以嘗試更多設計以使其變得更好。

我期待在評論中收到您的來信。

乾杯!