如何使用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的评论，以探索我们的用户满意的程度。毕竟，如果您有任何疑问，可以在下面发表评论，也可以在我们的支持聊天框中敲响。