Cómo mostrar la barra de progreso de lectura en WordPress con Elementor

Una barra de progreso de lectura es un indicador visual en un sitio web que muestra a los lectores hasta qué punto se han desplazado a través de la página o publicar en la pantalla. Esto generalmente muestra una barra delgada que se llena a medida que avanzan los lectores, desplazándose a través de la página. Es una herramienta simple pero efectiva para blogs y sitios web de contenido.

Un estudio reciente sobre la participación del usuario sugiere que las señales visuales pueden aumentar el tiempo dedicado a una página hasta un 20% al hacer que el contenido se sienta más manejable . De la misma manera, la barra de progreso puede ayudar a los usuarios a rastrear su viaje de lectura, lo que puede aumentar la satisfacción y alentarlos a explorar más.

Con Elementor, es fácil agregar una barra de progreso de lectura a WordPress. Entonces, en este artículo, cubriremos una guía paso a paso sobre cómo mostrar la barra de progreso de lectura en WordPress con Elementor.

Beneficios de mostrar la barra de progreso del lector en WordPress

Agregar una barra de progreso de lectura a un sitio de WordPress ofrece varios beneficios. Esto no solo mejora la experiencia del usuario sino también el compromiso. Eche un vistazo a algunos beneficios clave de agregar la barra de progreso de lectura en WordPress a continuación.

• Mejora la participación del usuario

Una barra de progreso de lectura puede mantener a los lectores motivados al mostrar visualmente cuán lejos han progresado a través de una publicación. Esto alienta a los usuarios a continuar leyendo, especialmente para el contenido de forma larga. Eche un vistazo a algunos puntos rápidos sobre cómo mejorar la participación del usuario en su sitio web.

• Mejora la claridad de la navegación

Para largos artículos o tutoriales, una barra de progreso proporciona una indicación clara de cuánto contenido queda. Esto ayuda a los usuarios a adivinar si tienen tiempo para terminar o no.

• Reduce las tasas de rebote

Al ofrecer una señal visual que desglosa el contenido en un viaje rastreable, una barra de progreso puede hacer que las publicaciones largas parezcan menos abrumadoras. Esto puede más bajas tasas de rebote. Aquí hay una guía sobre cómo reducir la tasa de rebote en WordPress.

• Mejora el atractivo estético

Una barra de progreso bien diseñada agrega un atractivo moderno a su sitio. Puede personalizar la apariencia de la barra de progreso de lectura para que coincida con la marca de su sitio para crear un aspecto pulido.

• Admite la usabilidad móvil

En los dispositivos móviles, donde el desplazamiento puede sentirse interminable, una barra de progreso proporciona una sensación de control y contexto. Asegura a los usuarios que están progresando a través de la publicación o la página.

Cómo mostrar la barra de progreso de lectura en WordPress con Elementor

En este tutorial paso a paso, lo guiaremos a través del proceso de agregar y personalizar una barra de progreso de lectura en su sitio de WordPress usando Elementor y la versión gratuita de HappyAddons. Pero puede preguntar: ¿por qué Happyaddons y qué es esto ?

En realidad, HappyAddons es un complemento bien conocido del complemento Elementor. Viene con muchas características y widgets ingeniosos para superar las limitaciones de Elementor. Lectura de la barra de progreso es uno de los. Y la buena noticia es que la característica de la barra de progreso de lectura es completamente gratuita.

Requisitos previos para agregar una barra de progreso de lectura

• Elemento
• Happyaddons

Asegúrese de que los complementos estén instalados y activados en su sitio. Una vez que estén listos en su sitio, comience a seguir los pasos explicados en el tutorial a continuación.

Paso 01: Habilite la función de la barra de progreso de lectura

Vaya a su tablero de WordPress y navegue a HappyAddons> características .

Cuando llegue a la página de características , ubique la opción de barra de progreso de lectura . Aligue para habilitar la función.

Paso 02: Abra una página con Elementor

Ahora, para configurar la función de la barra de progreso de lectura, abra una página con Elementor.

Paso 03: Vaya a la configuración del sitio de Elementor

Haga clic en el icono de la hamburguesa en la esquina superior izquierda del panel Elementor.

Vaya a la opción Configuración del sitio haciendo clic.

Al desplazar el panel Elementor, localice la barra de progreso de lectura y haga clic en él .

Aligue para habilitar la opción de barra de progreso de lectura .

Paso 04: Configure la opción Barra de progreso de lectura

Una vez que haya habilitado la opción Barra de progreso de lectura, obtendrá numerosas opciones para configurar la función.

# Seleccione dónde mostrar la barra de progreso

Puede optar por mostrar la barra de progreso en todo su sitio, lo que significa todas las publicaciones y páginas. O puede optar por mostrarlo selectivamente.

Si desea mostrarlo tanto en publicaciones como en páginas, seleccione en el cuadro junto a la visualización.

# Seleccione un tipo de barra de progreso

HappyAddons le permite elegir entre tres tipos de barras de progreso: horizontal, vertical y círculo . Por lo tanto, elija cualquiera de ellos, haga clic en la opción desplegable junto a escribir .

Verás las opciones. Elija un tipo que desee. Para el tutorial, iremos con el tipo horizontal.

# Seleccione una posición para la barra de progreso

Puede mostrar la barra de progreso en la parte superior o en la parte inferior. Por lo tanto, elija dónde desee mostrarlo desde la opción de posición al lado.

A medida que hemos desplazado la página, puede ver que aparece una barra de progreso en la parte superior de la página.

# Estilizar la barra de progreso

Desde el mismo panel Elementor, puede personalizar la altura, el color de la barra de progreso, el color de fondo y la información sobre porcentaje de herramientas de la función de la barra de progreso.

Espero que puedas hacer esta personalización tú mismo.

Paso 05: Vista previa de la barra de progreso

Una vez que haya terminado, vaya a la interfaz de su sitio. Compruebe si la barra de progreso funciona bien o no desplazando su pantalla.

Por lo tanto, puede agregar fácilmente la barra de progreso de lectura a WordPress utilizando los complementos Elementor y Happyaddons.

Cómo se ve la barra de progreso vertical

Arriba, le hemos mostrado el proceso de crear una barra de progreso horizontal. De la misma manera, puede habilitar y mostrar la barra de progreso vertical en su sitio. Una vez que lo habilite, la barra de progreso se verá como la que se muestra en el video adjunto a continuación.

Cómo se ve la barra de progreso del círculo

Aquí nuevamente, siguiendo el mismo proceso, puede mostrar la barra de progreso del círculo en su sitio de WordPress, configurando su estilización y configuración. Puede ver cómo se ve en la parte delantera desde el video adjunto a continuación. La barra de progreso del círculo aparece en la esquina superior derecha.

¿Qué más puedes hacer con Happyaddons?

Una vez que tenga HappyAddons, no solo puede superar las deficiencias de Elementor, sino también disfrutar de muchas características y widgets más emocionantes. Eche un vistazo a qué más puede hacer con el complemento Happyaddons.

a. Use un constructor de temas

El constructor de temas de HappyAddons le permite personalizar cada aspecto de las piezas de plantilla de su sitio de WordPress, incluidos encabezados, pies de página, páginas individuales, publicaciones individuales y páginas de archivo. La gran noticia es que la función de constructor de temas es completamente gratuita, que es una característica premium en Elementor. Compruebe cómo acceder a Happyaddons Theme Builder.

b. Mejorar los sitios de WooCommerce

HappyAddons Pro ofrece un poderoso conjunto de widgets de WooCommerce para mejorar el diseño y la funcionalidad de su tienda de comercio electrónico. WooCommerce Widgets que ofrece Happyaddons son la cuadrícula de productos, el carrusel de productos, la cuadrícula de categoría de productos, el carrusel de categoría de productos, el producto único, el mini carro, el carrito, el pago y la barra de envío.

do. Craft contenido creativo

HappyAddons ofrece más de 130 widgets y dos docenas de características emocionantes para que un sitio web sea muy emocionante. Utilizándolos, puede resaltar información valiosa en su sitio de una manera extremadamente creativa que se vea bien y atractiva para los usuarios.

d. Crear publicaciones/páginas infográficas

HappyAddons permite la creación de publicaciones y páginas de estilo infografía visualmente atractivos utilizando widgets como gráfico de barras, barra de habilidad, gráficos interactivos y post cuadrícula. Como resultado, puede mostrar comparaciones como ventas o resultados de encuestas con colores y etiquetas personalizables. Aprenda a crear una página web infográfica con Elementor.

mi. Copia de dominio cruzado

La función de copia de dominio cruzado en HappyAddons Pro le permite copiar widgets, secciones o páginas completas de un dominio y pegarlos a otro, retener todos los estilos y configuraciones. Este es un ahorro de tiempo para desarrolladores o agencias que administran múltiples sitios.

Además de todo esto, tendrá una biblioteca de plantillas ingeniosa, chat en vivo, documentación integral y una lista de reproducción de YouTube Tutorial para que su viaje de diseño web con Happyaddons sea extremadamente agradable.

¡Pensamientos finales!

Espero que hayas disfrutado de este tutorial. Hemos estado escribiendo constantemente más y más publicaciones de blog basadas en tutoriales en nuestro sitio web para que su viaje de diseño web sin código sea más útil y eficiente. Como ha leído toda la publicación, obviamente tiene una idea de qué más puede hacer con el complemento Happyaddons.

Si tiene Elementor y Happyaddons en su sitio, puede hacer magia real. Puede consultar las reseñas sobre HappyAddons en WordPress.org y otros sitios de revisión para explorar cuánto están satisfechos nuestros usuarios. Después de todo esto, si tiene alguna pregunta en mente, puede dejar un comentario a continuación o dar un golpe en nuestro cuadro de chat de soporte.