如何使用Elementor顯示WordPress中的閱讀進度欄

閱讀進度欄是網站上的視覺指示器，它顯示讀者在頁面或屏幕上帖子中滾動了多遠。這通常會顯示一個薄的條，隨著讀者的進步，滾動在頁面上。對於博客和內容豐富的網站來說，這是一個簡單但有效的工具。

最近對用戶參與度的研究表明，視覺提示可以通過使內容更易於管理，從而將在頁面上花費的時間最多增加20％ 。以同樣的方式，進度欄可以幫助用戶跟踪他們的閱讀旅程，這可以提高滿意度並鼓勵他們探索更多。

使用Elementor，很容易將閱讀進度欄添加到WordPress。因此，在本文中，我們將介紹如何在WordPress中與Elementor顯示閱讀進度欄的分步指南。

在WordPress中顯示讀者進度欄的好處

將閱讀進度欄添加到WordPress網站上可帶來一些好處。這不僅可以增強用戶體驗，還可以增強參與度。看看在下面的WordPress中添加閱讀進度欄的一些關鍵好處。

• 改善用戶參與度

閱讀進度欄可以使讀者通過視覺顯示他們在帖子中進步多遠，從而使讀者保持動力。這鼓勵用戶繼續閱讀，尤其是對於長形式的內容。請查看一些快速點如何改善網站上的用戶參與度。

• 增強導航清晰度

對於冗長的文章或教程，Progress Bar清楚地表明了剩下多少內容。這可以幫助用戶猜測他們是否有時間完成。

• 降低跳出率

通過提供一個視覺提示，將內容分解為可追踪的旅程，進度欄可能會使長篇小說看起來不那麼壓倒性。這可以顯著降低跳出率。這是有關如何降低WordPress的跳出率的指南。

• 增強美學吸引力

精心設計的進度欄為您的網站增加了現代吸引力。您可以自定義閱讀進度欄的外觀，以匹配您的網站的品牌，以創建拋光外觀。

• 支持移動可用性

在移動設備上，滾動會感到無窮無盡，進度欄提供了一種控制感和背景感。它可以使他們通過帖子或頁面取得進展。

如何使用Elementor顯示WordPress中的閱讀進度欄

在本步驟教程中，我們將指導您使用Elementor和Happyaddons的免費版本在WordPress網站上添加和自定義閱讀進度欄的過程。但是您可能會問 -為什麼Happyaddons ，這是什麼？

實際上，HappyAddons是Elementor插件的著名插件。它具有許多足智多謀的功能和小部件，以克服Elementor的局限性。閱讀進度欄是其中之一。好消息是，閱讀進度欄功能是完全免費使用的。

添加閱讀進度欄的先決條件

• Elementor
• Happyaddons

確保在您的網站上安裝並激活插件。在您的網站上準備就緒後，開始遵循下面的教程中解釋的步驟。

步驟01：啟用閱讀進度欄功能

轉到您的WordPress儀表板，並導航到HappyAddons>功能。

當您進入功能頁面時，請找到“閱讀進度欄”選項。切換以啟用該功能。

步驟02：使用Elementor打開頁面

現在，要配置閱讀進度欄功能，請使用Elementor打開頁面。

步驟03：轉到Elementor的網站設置

單擊Elementor面板左上角的漢堡圖標。

通過單擊“站點設置”選項。

通過滾動Elementor面板，找到閱讀進度欄並單擊它。

切換以啟用閱讀進度欄選項。

步驟04：配置閱讀進度欄選項

啟用了閱讀進度欄選項後，您將獲得許多配置該功能的選項。

＃選擇在哪裡顯示進度欄

您可以選擇在整個網站中顯示進度欄，這意味著在所有帖子和頁面上。或者，您可以選擇選擇性地顯示它。

如果要在帖子和頁面上都顯示它，請在旁邊顯示的框中選擇它們。

＃選擇進度條類型

HappyAddons允許您從三種類型的進度條中進行選擇 -水平，垂直和圓圈。因此，選擇其中的任何一個，單擊類型旁邊的下拉選項。

您會看到選項。選擇您想要的類型。對於本教程，我們將使用水平類型。

＃選擇進度欄的位置

您可以在頂部或底部顯示進度欄。因此，請選擇要在其旁邊的位置選項中顯示的位置。

當我們滾動頁面時，您可以看到頁面頂部出現一個進度欄。

＃風格進度欄

從同一Elementor面板中，您可以自定義Progress Bar功能的高度，進度條顏色，背景顏色和百分比工具提示。

希望您自己可以自定義。

步驟05：預覽進度欄

完成後，請轉到網站的前端。通過滾動您的屏幕來檢查進度條是否效果很好。

因此，您可以使用Elementor和HappyAddons插件輕鬆地將閱讀進度欄添加到WordPress。

垂直進度條的外觀

上面，我們向您展示了創建水平進度欄的過程。以同樣的方式，您可以在網站上啟用並顯示垂直進度條。啟用它後，進度條將看起來像下面隨附的視頻中所示的欄。

圓形進度欄的外觀

再次在這裡，按照相同的過程，您可以在WordPress站點上顯示Circle Progress Bar，並配置其風格化和設置。您可以從下面的視頻中觀看其前端的外觀。圓形進度條出現在右上角。

您還能使用Happyaddons做什麼？

一旦擁有Happyaddons，您不僅可以克服Elementor的缺點，而且還可以享受更多令人興奮的功能和小部件。看看Happyaddons插件還能做些什麼。

一個。使用主題構建器

HappyAddons的主題構建器使您可以自定義WordPress網站模板零件的各個方面，包括標題，頁腳，單頁，單帖子和檔案頁。好消息是，主題構建器功能是完全免費使用的，這是Elementor中的優質功能。檢查如何訪問HappyAddons主題構建器。

b。增強WooCommerce網站

HappyAddons Pro提供了一套強大的WooCommerce小部件，以增強您的電子商務商店的設計和功能。 HappyAddons提供的WooCommerce小部件是產品網格，產品旋轉木馬，產品類別網格，產品類別旋轉木馬，單產品，迷你購物車，購物車，結帳和運輸欄。

c。製作創意內容

HappyAddons提供了130多個小部件和兩個令人興奮的功能，使網站非常令人興奮。使用它們，您可以以一種非常有創造力的方式在您的網站上突出顯示有價值的信息，看起來既好又吸引用戶。

d。創建信息圖表/頁面

HappyAddons可以使用諸如條形圖，技能欄，交互式圖表和後網格之類的小部件來創建視覺吸引人的信息圖表式帖子和頁面。結果，您可以顯示具有可自定義顏色和標籤的銷售或調查結果的比較。了解如何使用Elementor創建信息圖網頁。

e。跨域複製糊

HappyAddons Pro中的跨域複製糊狀功能使您可以將小部件，部分或整個頁面從一個域複製，然後將它們粘貼到另一個域中，並保留所有樣式和設置。對於管理多個站點的開發人員或機構來說，這是一個節省時間。

除所有這些外，您還將擁有一個足智多謀的模板庫，實時聊天，全面的文檔和YouTube教程播放列表，以使您的網絡設計旅程與Happyaddons非常愉快。

最後的想法！

希望您喜歡這個教程。我們一直在我們網站上不斷編寫越來越多的基於教程的博客文章，以使您的無代碼Web設計旅程更加有用和高效。當您閱讀整個帖子時，您顯然對HappyAddons插件還能做些什麼有所了解。

如果您的網站上同時擁有Elementor和Happyaddons，則可以做真正的魔術。您可以在WordPress.org和其他評論網站上查看有關HappyAddons的評論，以探索我們的用戶滿意的程度。畢竟，如果您有任何疑問，可以在下面發表評論，也可以在我們的支持聊天框中敲響。