Agregue una barra de progreso de lectura en WordPress (Elementor)
Reading Progress Bar es una extensión gratuita de Master Addons que agrega una barra delgada en la parte superior o inferior de la pantalla y la llena a medida que los visitantes se desplazan hacia abajo en la página. Lo cambias por página o publicas en Configuración de página de Elementor, luego configuras la posición, altura, color de la pista, color de relleno y velocidad de animación. Se adapta a artículos largos, tutoriales, documentación y páginas legales donde a los lectores les gusta saber cuánto queda.
Esta extensión rastrea el desplazamiento. Para mostrar un gol o una puntuación como una línea, círculo o indicador de abanico, utilice el Widget de bar de progres. Para obtener una lista de barras de habilidades, utilice Barras de progreso.
Enciéndalo por página, arriba o abajo
Abra la página o publique en Elementor, haga clic en el ícono de engranaje para Configuración de página (Configuración de publicaciones en publicaciones) y expanda el Barra de progreso de lectura sección. Encender Habilite la barra de progreso de lectura y conjunto Posición a arriba o abajo. La barra se fija al borde de la pantalla y se llena de 0 a 100% a medida que el visitante se desplaza desde la parte superior de la página hacia la parte inferior.
- La configuración se guarda por página, así que habilítela en publicaciones largas y déjela fuera de las páginas cortas. No hay ningún cambio en todo el sitio.
- Funciona en páginas y publicaciones creadas con Elementor, ya que el conmutador se activa en la configuración de página de Elementor.
- El progreso cubre toda la altura de la página, incluido el encabezado, los comentarios y el pie de página, no solo el texto del artículo.
- Para los usuarios que han iniciado sesión, la barra desciende por debajo de la barra de administración de WordPress.
Altura, Colores y Velocidad de Animación
Conjunto Altura de 0 a 100px (5px por defecto). Color de fondo colorea la pista vacía (blanca de forma predeterminada) y Color de relleno colorea el progreso (azul #007bff de forma predeterminada). Velocidad de animación establece con qué suavidad el relleno sigue al desplazamiento, de 0 a 1000 milisegundos, 50 de forma predeterminada.
- Puedes elegir colores globales de tu kit Elementor para la pista y el relleno.
- Se nota una barra de 3 a 6px sin cubrir el encabezado.
- Una velocidad de animación más baja se siente más directa, una más alta, más suave pero ligeramente retrasada.
Elementor Pro Progress Tracker frente a la barra de progreso de lectura
Elementor Pro tiene un widget Progress Tracker que hace un trabajo similar con más opciones. Así es como se comparan los dos.
| Característica | Rastreador de progreso Elementor Pro | Barra de progreso de lectura de complementos maestros |
|---|---|---|
| Precio | Necesita Elementor Pro | Gratis con complementos maestros |
| Cómo lo agregas | Un widget, generalmente colocado en un encabezado o plantilla de publicación única | Un interruptor en la configuración de página de cada página |
| Formas | Horizontal o circular | Barra horizontal |
| Pistas | Página completa, contenido de publicaciones o un selector CSS | Página completa |
| Etiqueta porcentual | Sí, opcional | prohibido |
| Colocación | Dondequiera que coloques el widget, con opciones de dirección | Fijado a la parte superior o inferior de la pantalla |
Elija Progress Tracker de Elementor Pro si lo necesita en cada publicación de una plantilla, un estilo circular o avance únicamente a través del artículo. Elija la barra de progreso de lectura para obtener una barra sencilla y gratuita en páginas seleccionadas. Emparejarlo con el gratis Tabla de contenidos widget en publicaciones largas.
Cómo agregar una barra de progreso de lectura en WordPress
Necesita Elementor y el complemento gratuito Master Addons, con la página o publicación editada en Elementor.
- Instalar y activar Addones maestros de WordPress.orgy verifique que la barra de progreso de lectura esté habilitada Complementos maestros, extensiones.
- Abra la publicación o página con Elementor.
- Haga clic en el icono de engranaje para abrir Configuración de página (Configuración de publicaciones en publicaciones).
- Expandir Barra de progreso de lectura y enciende Habilite la barra de progreso de lectura.
- Elija Arriba o Abajo, luego establezca Altura, Color de fondo, Color de relleno y Velocidad de animación.
- Actualice la página y desplácese por ella en el front-end para comprobar la barra.
Preguntas frecuentes para la barra de progreso de lectura
¿la barra de progreso de lectura es gratuita?
Sí. Es una extensión gratuita del complemento Master Addons en WordPress.org y funciona con Elementor gratuito. También se muestra en teléfonos y tabletas, fijado en el borde superior o inferior.
¿Puedo agregarlo a algunas páginas pero no a otras?
Sí, y esa es la única forma en que funciona. El interruptor está en la configuración de la página Elementor de cada página o publicación, así que enciéndalo para publicaciones largas y déjelo en otro lugar. No existe una configuración global para agregarlo a cada publicación a la vez.
¿Esto ralentizará mi sitio web?
No. Agrega un pequeño script en línea y algunas líneas de CSS en las páginas donde está habilitado, sin archivos ni imágenes adicionales.
¿Mede sólo el artículo o toda la página?
Toda la página. El relleno va desde la parte superior de la página hasta la parte inferior, por lo que los encabezados, comentarios y pies de página también cuentan. Progress Tracker de Elementor Pro solo puede rastrear el contenido de la publicación si lo necesita.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
