如何在不使用外掛程式的情況下，在 Elementor 中建立並應用「捲動到頂端」按鈕

A "滾動到頂端"按鈕是任何長頁面的絕佳補充。它提供使用者快速返回頁首的方式，讓導覽更容易使用，也更人性化。本指南將教您如何在 Elementor 中建立「Scroll to Top」按鈕、 不需要外掛程式並應用於整個網站，以保持外觀和感覺的一致性。

在 Elementor 中設定全局按鈕範本

從建立新範本開始：

1. 在 WordPress 面板中，移至"範本"> "新增."

2. 選擇 「單頁」 作為範本類型。將它命名為"捲動到頂端按鈕“.

3. 按一下 "建立範本" 開啟 Elementor 編輯器。

4. 離開圖書館:按一下 "X右上角的 " 關閉範本庫。

新增和自訂按鈕：

1. 拖曳"按鈕"小工具從側邊欄移到範本中。

2. 將按鈕文字變更為「捲動到頂端」或使用向上的箭頭圖示。

3. 前往圖示庫，選擇向上箭頭 圖示.

4. 選擇不同的按鈕 類型 刪除 正文.

5. 前往"風格" 標籤，並設定背景顏色、字型和邊界半徑，使其符合您的網站風格。圓形按鈕搭配對比鮮明的顏色，可以很好地讓它保持可見。

變更按鈕的樣式

1. 使用圓角
   • 前往 風格 標籤。
   • 設定 邊界半徑 至 10%，以製作一個完美的圓形按鈕。
   • 修改 襯墊 值來調整元素內部的間距。這定義了內容與 元素的邊界.

2. 新增陰影效果
   • 在 盒影 設定（通常可在 樣式 > 邊框)，加入微妙的陰影來創造深度。使用類似設定：
   • 模糊：10px
   • 展開：0px
   • 顏色：選擇淺灰色或透明黑色，呈現柔軟的陰影。

3. 選擇對比鮮明的配色方案
   • 使用與網站背景形成對比的顏色。例如，如果您的背景是淺色的，請選擇藍色、橘色或綠色等大膽的顏色。
   • 至於圖示的顏色，請確保它是白色或其他能在按鈕背景中突顯出來的顏色。

4. 新增懸停效果
   • 在 懸停 下的設定 風格 選項卡，您可以：
     • 變更 背景色 在懸浮時會變成按鈕顏色的淺色或深色。
     • 懸停動畫 可讓您控制動畫和轉場的速度。

5. 新增脈衝動畫（可選）
   • 在 進階 標籤，前往 自訂 CSS (可於 Elementor Pro) 並加入脈衝動畫：
   • 更換 #yourButtonID 與您按鈕的 ID。這將使按鈕巧妙地變大或縮小，引起人們的注意。

@keyframes pulse { 0% { transform: scale(1); }50% { transform: scale(1.05); }100% { transform: scale(1); }}#yourButtonID { animation: pulse 2s infinite; }

此代碼新增了一個 跳動動畫效果 到指定的按鈕。按鈕平滑地稍微變大，然後在 2 秒內恢復到原始大小，如此不斷重複。此效果可吸引使用者注意按鈕，使其更為顯眼。

將按鈕固定到位：

1. 在"進階「標籤下的」定位、「 選擇 」固定式."

2. 將按鈕置於右下角有 20px 從兩側留出邊距，以便在使用者捲動時保持原樣。

3. 按一下 "發表“. 將顯示條件設定為"所有頁面。"這將確保每個頁面都顯示按鈕，提供一致的使用者體驗。

在頁面頂端加入錨點

1. 在 Elementor 中開啟頁面:
   • 前往 WordPress 面板，導覽到 頁數 或 職位, 並選取您要編輯的頁面。
   • 按一下 使用 Elementor 編輯 在 Elementor 編輯器中開啟頁面。

2. 選擇頂部元素:
   • 在頁面頂端附近選擇一個元素，當使用者按一下「捲動到頂端」按鈕時，您希望將使用者導向該元素。這通常是 標頭 部分，一個 名稱或 第一節 的頁面。
   • 按一下元素以選取它。

3. 前往「進階」標籤:
   • 選取頂端元素後，導覽到 進階 左側 Elementor 面板中的選項卡。
4. 設定 CSS ID:
   • 尋找 CSS ID 下的欄位 進階 標籤。
   • 輸入字元 最著名的 (或任何其他您喜歡的簡單字詞，例如 開始).

5. 儲存您的變更:
   • 設定 CSS ID 後，按一下 更新 來儲存頁面的變更。

重要注意事項：

• 請確定您輸入的 CSS ID 與「捲動到頂端」按鈕的 連結.例如，如果您將 CSS ID 設定為 最著名的, 按鈕的連結應該是 #top.

為按鈕新增錨點：

1. 在 Elementor 中開啟任何頁面，然後按一下頂端的元素（例如標題或區段）。
2. 設定按鈕連結。在 連結 欄位，輸入 #top (請務必包含 # 符號）。

3. 請繼續閱讀，看看結果。

總結

在 Elementor 中加入「Scroll to Top」按鈕是一種簡單直接的方式，可讓瀏覽者輕鬆回到頁首，改善較長頁面的使用者體驗。通過創建一個全局按鈕模板，您可以確保整個網站擁有一致的外觀。這個過程包括設計按鈕、設定自訂樣式（如圓角和陰影效果），以及選擇性地加入動畫（如增加可見度的脈衝效果）。

按鈕設計完成後，您可以使用「固定」定位將其固定到位，並透過顯示條件確保它出現在所有頁面上。此外，透過在每個頁面的頂端設定 CSS ID（例如「top」），並將按鈕連結到此錨點上 (#top)，使用者按一下按鈕就可以快速捲回頁面頂端。

常見問題

1.為什麼要加入「捲動到頂端」按鈕？

此按鈕可讓使用者免於不斷捲動，尤其是在長頁面上。它提供了快速回到頂端的方法，使網站更容易瀏覽。

2.我可以為按鈕加入更多動畫效果嗎？

當然！Elementor 的動態效果可讓您加入彈跳或滑動等動態效果，讓按鈕更加搶眼。

3.是否有外掛可以做到這一點？

是的，有幾個外掛程式提供「捲動到頂端」按鈕。但透過自訂程式碼加入這些按鈕，可避免使用額外的外掛程式，讓您的網站更快速。