阅读进度条是网站上的一种视觉指示器，用于显示读者在屏幕上滚动页面或文章的进度。它通常显示一条细长的进度条，随着读者滚动页面而逐渐填满。对于博客和内容丰富的网站来说，这是一个简单但有效的工具。
最近一项关于用户参与度的研究表明，视觉提示可以让内容更易于管理，从而将用户在页面上的停留时间增加 20%。同样，进度条可以帮助用户追踪他们的阅读历程，从而提升满意度并鼓励他们进行更多探索。
使用 Elementor，可以轻松地在 WordPress 中添加阅读进度条。因此，在本文中，我们将逐步介绍如何使用 Elementor 在 WordPress 中显示阅读进度条。
在 WordPress 中显示阅读器进度条的好处
在 WordPress 网站中添加阅读进度条有很多好处。这不仅可以提升用户体验，还能提升参与度。以下是 WordPress 添加阅读进度条的一些主要好处。
- 提高用户参与度
阅读进度条可以直观地显示读者阅读进度，从而激发阅读兴趣。这可以鼓励用户继续阅读，尤其是阅读长篇内容。快来看看如何提高网站用户参与度的一些小技巧吧。
- 增强导航清晰度
对于篇幅较长的文章或教程，进度条可以清晰地显示剩余内容量。这有助于用户判断他们是否有时间完成。
- 降低跳出率
进度条通过提供视觉提示，将内容分解成可追踪的旅程，使长篇文章看起来不那么令人难以理解。这可以显著降低跳出率。这里有一份关于如何在 WordPress 上降低跳出率的指南。
- 增强美感
精心设计的进度条能为您的网站增添现代感。您可以自定义阅读进度条的外观，使其与网站品牌形象相得益彰，打造更精致的外观。
- 支持移动可用性
在移动设备上，滚动浏览会让人感觉无休止，而进度条则能提供控制感和上下文信息。它能让用户确信自己正在浏览文章或页面。
如何使用 Elementor 在 WordPress 中显示阅读进度条
在本分步教程中，我们将指导您使用 Elementor 和免费版 HappyAddons 在 WordPress 网站上添加和自定义阅读进度条。但您可能会问——为什么要使用 HappyAddons ？它是什么？
实际上，HappyAddons 是 Elementor 的一个著名插件。它包含许多丰富的功能和小部件，可以弥补 Elementor 的局限性。阅读进度条就是其中之一。好消息是，阅读进度条功能完全免费使用。
添加阅读进度条的先决条件
确保插件已在您的网站上安装并激活。插件安装完成后，请按照以下教程中的步骤操作。
步骤01：启用阅读进度条功能
转到您的WordPress 仪表板并导航至HappyAddons > 功能。
进入“功能”页面后，找到“阅读进度条”选项。切换到“启用”即可启用该功能。
步骤 02：使用 Elementor 打开页面
现在，要配置阅读进度条功能，请使用 Elementor 打开一个页面。
步骤 03：转到 Elementor 的站点设置
单击Elementor 面板左上角的汉堡图标。
单击“站点设置”选项，转到“站点设置”选项。
通过滚动 Elementor 面板，找到阅读进度条并单击它。
切换以启用阅读进度条选项。
步骤04：配置阅读进度条选项
一旦启用了阅读进度条选项，您将获得许多配置该功能的选项。
# 选择进度条的显示位置
您可以选择在整个网站（即所有文章和页面）上显示进度条。或者，您也可以选择选择性地显示它。
如果您想在帖子和页面上显示它，请在“显示在”旁边的框中选择它们。
# 选择进度条类型
HappyAddons 允许你选择三种进度条类型——水平、垂直和圆形。选择其中任意一种，点击“类型”旁边的下拉选项。
您将看到选项。选择您想要的类型。在本教程中，我们将使用“水平”类型。
# 选择进度条的位置
您可以将进度条显示在顶部或底部。因此， 请 从 旁边的“位置”选项中选择要显示的位置。
当我们滚动页面时，您可以看到页面顶部出现一个进度条。
# 样式化进度条
从同一个 Elementor 面板，您可以自定义进度条功能的高度、进度条颜色、背景颜色和百分比工具提示。
希望您可以自己完成这个定制。
步骤05：预览进度条
完成后，请转到网站前端。滚动屏幕检查进度条是否正常工作。
因此，您可以使用 Elementor 和 HappyAddons 插件轻松地将阅读进度条添加到 WordPress。
垂直进度条的外观
以上我们向您展示了创建水平进度条的过程。同样，您也可以在网站上启用并显示垂直进度条。启用后，进度条的外观将类似于下方视频中所示的效果。
圆形进度条的外观
同样，按照相同的步骤，您可以在 WordPress 网站上显示圆形进度条，并配置其样式和设置。您可以观看下面附带的视频，查看它在前端的显示效果。圆形进度条显示在右上角。
评论0