Webflow：如何在選單外製作 CTA 按鈕？

已發表: 2024-11-27

建立有效的號召性用語 (CTA) 按鈕是網頁設計中最重要的元素之一。 CTA 按鈕會提示訪客採取特定操作，例如註冊電子報、進行購買或聯絡您的企業。雖然許多網站在導覽選單內都設有 CTA 按鈕，但將 CTA 按鈕放在選單外部可以幫助其更加突出並帶來更多轉換。在本文中，我們將引導您完成如何在 Webflow 中的選單外部設計和放置 CTA 按鈕的步驟。

為什麼將 CTA 按鈕放置在選單之外？

搜尋引擎優化

將 CTA 按鈕放置在主導航選單之外可以使其對訪客更加可見。當策略性地放置在高流量區域（例如標題或頁面頂部）時，此按鈕可以快速吸引使用者的注意力。目標是讓 CTA 更易於存取並確保立即引起注意，而無需用戶瀏覽網站。

將 CTA 按鈕放置在選單之外的優點包括：

  • 提高可見性：透過將其放置在顯著位置，例如標題中或浮動在側面，使用者可以輕鬆發現它。
  • 提高轉換率：突出的 CTA 更有可能被點擊，從而提高轉換率。
  • 改進的使用者體驗：它為使用者提供了一種直觀的方式來快速採取行動，而無需瀏覽不同的部分。

在 Webflow 的選單外部製作 CTA 按鈕的步驟

Webflow 提供了一個使用者友善的介面，無需編寫任何程式碼即可建立網站。請依照以下步驟在 Webflow 專案的選單外部新增 CTA 按鈕：

1. 設定您的 Webflow 項目

在開始之前，請確保您已設定 Webflow 項目並且位於設計器視圖中。

  • 步驟1.1 ：開啟您的Webflow項目並前往您要新增CTA按鈕的頁面。
  • 步驟 1.2 ：在設計器模式下，確保您的頁面佈局已準備就緒，導航選單就位（或您想要新增按鈕的任何位置）。

2. 建立新的 CTA 按鈕

要在選單外建立新的 CTA 按鈕，您需要將其策略性地放置在頁面上。

  • 步驟 2.1 ：從左側面板中，將Button元素從「新增面板」拖曳到畫布上。
  • 步驟 2.2 ：自訂按鈕文字以符合您希望使用者執行的操作（例如，「開始」、「註冊」、「了解更多」）。
  • 步驟 2.3 ：根據您的設計偏好設定按鈕的樣式。您可以調整字體、大小、顏色、背景和邊框半徑以符合您的品牌美感。

3. 將 CTA 按鈕放置在選單之外

現在您已經有了按鈕，是時候將其放置在選單之外了。有幾種方法可以做到這一點，具體取決於您希望按鈕出現的位置。

選項 1：浮動 CTA 按鈕

浮動 CTA 按鈕是提高可見度的熱門選擇。即使用戶滾動，它也會粘在頁面的側面或底部。

  • 步驟 3.1 ：選擇您建立的按鈕，然後到右側「樣式」面板中的Position設定。
  • 步驟3.2 ：將位置設定為Fixed 。這可確保當使用者捲動時按鈕保持在螢幕上的適當位置。
  • 步驟 3.3 ：透過設定Top 、 Right 、 Bottom或Left值來調整位置，將按鈕放置在螢幕上您想要的位置（例如，右下角或左上角）。
  • 步驟 3.4 ：新增 z-index 值以確保按鈕顯示在其他元素（例如選單）之上。您可以將 z-index 設定為更高的值，例如10或100 ，以確保它位於頂部。

選項 2：位於標題部分

如果您希望 CTA 按鈕位於選單外更傳統的固定位置，則可以將其放置在標題部分中。

  • 步驟 3.1 ：前往Navigator面板並找到標題部分。
  • 步驟 3.2 ：建立一個新的Div Block作為 CTA 按鈕的容器。這將有助於相對於其他元素定位按鈕。
  • 步驟3.3 ：將按鈕拖曳到Div Block容器中。
  • 步驟 3.4 ：使用樣式面板中的Margin或Padding設定將按鈕移至標題內的所需位置（例如，在主選單外部但仍與標題對齊）。

選項 3：黏性導覽列上的 CTA 按鈕

另一種選擇是將 CTA 按鈕放置在黏性導覽列上。這意味著按鈕將跟隨使用者向下捲動頁面，但它將保留在主選單之外。

  • Position 3.1 ：選擇導覽列元素並在樣式面板中設定為Sticky 。
  • 步驟 3.2 ：在您希望顯示按鈕的選單項目旁邊新增一個新的Div Block 。
  • 步驟 3.3 ：將按鈕放置在該Div Block內，並使用邊距或填滿調整其位置。

4. 使按鈕具有互動性

網站

按鈕定位後，您可以添加互動以使其更具吸引力。

  • 步驟 4.1 ：選擇按鈕並前往 Webflow 中的Interactions面板。
  • 步驟4.2 ：新增懸停交互，例如當使用者懸停在按鈕上時更改背景顏色或稍微縮放按鈕。
  • 步驟 4.3 ：為按鈕設定連結。您可以將其連結到另一個頁面或外部 URL，或設定開啟模式或表單等操作。

5. 預覽和發布

設定 CTA 按鈕後，預覽它在頁面上的行為非常重要。

  • 步驟 5.1 ：點擊右上角的Preview按鈕以查看該按鈕在頁面上的外觀和行為。
  • 步驟 5.2 ：測試其在不同螢幕尺寸上的反應能力，以確保其位置正確。
  • 步驟 5.3 ：對結果感到滿意後，按一下Publish以使按鈕在您的網站上生效。

選單外 CTA 按鈕的最佳實踐

雖然將 CTA 按鈕放在選單之外可能非常有效，但必須遵循一些最佳實踐以確保其正常工作：

  1. 保持簡單：不要用太多的 CTA 按鈕讓頁面變得擁擠。專注於一項主要行動以獲得最佳結果。
  2. 確保良好的可見性：確保按鈕與背景形成鮮明對比，以吸引使用者的注意。
  3. 策略性定位：將按鈕放置在使用者可能注意到的區域，例如右上角或浮動在側面。
  4. 在不同裝置上進行測試：確保您的 CTA 按鈕在行動裝置、平板電腦和桌面裝置上看起來很棒。

結論

在 Webflow 的選單外部添加 CTA 按鈕可能是提高可見性和促進轉換的強大策略。透過執行上述步驟，您可以輕鬆建立並放置一個 CTA 按鈕，使其從頁面的其餘內容中脫穎而出。無論您選擇浮動按鈕、黏性導覽列還是傳統的標題位置，關鍵是要確保您的 CTA 放置在使用者會注意到並鼓勵他們採取行動的位置。透過 Webflow 直覺的設計工具，實現這一目標比以往更簡單！