無代碼教程：如何在 Elementor 中創建滾動返回頂部按鈕

使用Essential Addons 5.0 ，您可以輕鬆地為網站訪問者提供靈活性，讓他們可以隨時使用交互式按鈕在您的網站上滾動回到頂部。 只需單擊一下即可創建引人注目的滾動到頂部按鈕並增強您網站的導航。 查看這個Elementor 教程，了解如何在不編碼的情況下創建滾動到頂部按鈕。

為什麼您需要網站上的滾動返回頂部按鈕

滾動返回頂部按鈕不是用於創建網站的基本或內置功能。 通過多年的數據研究，用戶體驗設計師發現擁有一個滾動到頂部按鈕可以改善網站用戶體驗。 因此，讓我們來看看您的網站需要滾動回頂部功能時的最佳用例。

當您的網站上有很長的頁面或帖子時，創建滾動返回頂部按鈕是一個不錯的選擇。 如果您的網站訪問者在您的長頁面和帖子中感到迷失，他們可以使用按鈕輕鬆滾動回頂部。

為了便於導航和改善您網站的用戶體驗，請滾動返回所需的頂部按鈕。 傳統的網站設計將導航欄放在頁面頂部。 通過創建滾動返回頂部按鈕，您可以更輕鬆地瀏覽您的網站並返回您想要的位置。

當您網站的訪問者想要返回頂部菜單欄時，他們必須使用筆記本電腦上的鼠標或鼠標墊。 但是通過一個簡單而有用的滾動到頂部按鈕，只有單擊一下網站訪問者才能立即到達您網站的頂部。

創建滾動返回頂部按鈕的 3 種方法

如果您瀏覽具有良好 UX 排名的網站，您會發現它們保持“滾動到頂部”按鈕不粘、響應迅速且外觀吸引人。 在您的 WordPress 網站上創建滾動返回頂部按鈕取決於您的專業水平和您手頭的資源。 在這裡，我們列出了創建滾動返回頂部按鈕的所有可能方法。

1. 從 Elementor 庫中獲取令人驚嘆的滾動到頂部小部件

使用Elementor庫創建滾動返回頂部按鈕是一個無代碼過程。 您所要做的就是獲得一個流行的 Elementor 庫，其中包含一個滾動返回頂部按鈕。 然後您所要做的就是在頁面上添加按鈕並使用它發佈網頁。

2.自定義圖標小部件變成滾動到頂部按鈕

使用現有的 Elementor 小部件，您可以使用簡單的 CSS 知識將它們變成滾動返回頂部按鈕。 在這種情況下，Elementor 的 Icon 小部件是變成滾動返回頂部按鈕的最佳小部件。 您應該對使用 Elementor 設計網站有深入的了解。

3.使用自定義編碼創建滾動返回頂部按鈕

當您熟悉編碼並具有開發網站的過去經驗時，無需使用任何 Elementor 庫或小部件依賴項，您就可以創建滾動返回頂部按鈕。 您必須寫下自定義編碼，然後將其添加到 WordPress 儀表板中的 function.php 文件中。

使用 Elementor 庫創建滾動到頂部按鈕的好處

在跳轉到創建滾動的 Elementor 教程之前，讓我們並排比較上述方法。

如果您以前沒有編碼經驗，那麼創建滾動返回頂部按鈕將是一個很大的麻煩。 您必須包括其他開發人員，並且在這種方法中，這將花費金錢和時間。 另一方面，當您將 Elementor 小部件轉換為 Scroll To Top 按鈕時，您無法隨意自定義它們。 在那裡你在定制時會遇到很多障礙。

考慮到以上幾點，在 Elementor 庫的幫助下設計滾動返回頂部按鈕更容易且省時。 您將準備好小部件或擴展程序，以便無需編碼即可立即創建令人驚嘆的滾動到頂部按鈕。 此外，使用 Elementor 網站構建器，您將在設計 Scroll back to top 外觀方面獲得最大的靈活性。 此外，您可以自己輕鬆地在您的網站上實現這一令人驚嘆的功能。 所以，讓 Elementor 庫創建 Scroll To Top 按鈕是各方面的最佳選擇。

分享 Elementor 教程以創建滾動返回頂部按鈕

是時候分享為您的 WordPress 網站創建交互式滾動到頂部按鈕的 Elementor 教程了。 在最好的Elementor 庫中，出於教程的目的，我們選擇了Elementor 的基本插件。 這個令人驚嘆的 Elementor 庫擁有80 多個小部件，並受到超過 100 萬活躍用戶的信任。

要在您的網站儀表板中安裝和激活Elementor 插件的基本插件，並開始逐步遵循此 Elementor 教程。 如果您正在尋找視頻教程，請查看此處。

第 1 步：從 Essential Addons Elementor 庫啟用“滾動到頂部”擴展

首先，從 WordPress 儀表板轉到 Essential Addons 面板，然後導航到Extensions選項卡。 由於基本插件滾動回頂部功能是一個擴展。 現在切換以立即啟用擴展程序。 啟用該功能後，不要忘記單擊“保存設置” 。

第 2 步：配置滾動返回頂部按鈕外觀

從您要在其中創建滾動返回頂部按鈕的網站在 Elementor 中打開頁面或帖子。 單擊“元素面板”左下角的齒輪或設置圖標以訪問“頁面設置” 。 然後，滾動找到“EA 滾動到頂部”選項，然後簡單地切換以激活它。 它是 Essential Addons 中的免費擴展。 因此，您無需升級到 PRO。

“滾動到頂部”擴展將在實時預覽中可見。 下圖顯示了“EA Scroll To Top”的默認佈局如下所示：

現在是時候自定義您的 Scroll To Top 按鈕的外觀了。 您可以輕鬆更改滾動到頂部按鈕的圖標、顏色、字體、邊框、懸停動畫等。 調整併打開所有可用的自定義項，並為您的網站創建一個時尚但互動的滾動到頂部按鈕

帶有滾動到頂部按鈕的網站的最終結果

在完成上述所有步驟並進行自定義之後，現在是時候與全世界分享帶有“滾動到頂部”按鈕的精彩頁面了。 為此，請單擊您臉部的“發布”按鈕。 滾動回到頂部按鈕將立即出現在您的網站上，就像這樣。

獎勵：滾動到頂部按鈕的高級功能，您只能通過基本插件獲得

這就是您可以使用 Essential Addons 擴展'Scroll To Top'輕鬆創建滾動回頂部按鈕的方式。 除了幫助您滾動網站頁面外，這裡還列出了此擴展程序的更多獨家功能。

️ 不僅適用於一頁或帖子，您還可以為整個站點全局啟用“滾動到頂部”按鈕。

️您還可以顯示分類地點的滾動返回頂部按鈕。 例如，僅頁面或僅帖子。

️ 此外，您將通過 Essential Addons 獲得廣泛的自定義選項。

只需按照此 Elementor 教程，您就可以將交互式滾動到頂部按鈕添加到您的網站帖子和頁面。 如果您遇到困難，那麼您可以隨時與專門的Essential Addons 支持團隊溝通。 要獲得這些易於理解的 Elementor 教程，請不要忘記訂閱我們的博客。