Cómo agregar una barra de progreso en tus publicaciones de WordPress (La forma fácil)

El contenido de formato largo es fantástico para el SEO y para aportar valor a tus lectores, pero hay un pequeño problema: a la gente le gusta saber en qué se está metiendo.

Cuando alguien llega a un tutorial de 3,000 palabras, quiere entender su compromiso de antemano. Las barras de progreso resuelven esto maravillosamente al mostrar a los lectores exactamente dónde se encuentran en tu contenido.

Las hemos estado usando en nuestro sitio de membresía de video de WPBeginner para mostrar cuánto del curso han completado los usuarios. De esta manera, los estudiantes pueden seguir fácilmente su progreso de aprendizaje y mantenerse motivados para terminar su capacitación.

¿La mejor parte? No necesitas ninguna habilidad de codificación ni plugins costosos para agregar barras de progreso a tu sitio de WordPress. En esta guía, te mostraremos exactamente cómo crearlas, paso a paso.

Cuándo agregar una barra de progreso a las publicaciones de WordPress

Hay varios escenarios en los que agregar una barra de progreso puede mejorar tus publicaciones de blog de WordPress. Aquí hay algunos ejemplos comunes:

• Estado del Proyecto: Si estás documentando un proyecto a largo plazo, una barra de progreso brinda a los lectores una actualización visual rápida de tu estado.
• Finalización del Curso: Los sitios de membresía a menudo los usan para ayudar a los estudiantes a rastrear cuánto han avanzado en un curso.
• Campañas de Recaudación de Fondos: Proporcionan una representación visual inmediata de cuán cerca estás de tu objetivo. Esto puede fomentar más donaciones.
• Contenido Educativo: Puedes usarlos para ilustrar hitos de aprendizaje o el nivel de dificultad de diferentes temas.
• Seguimiento de Fitness: Para sitios de salud, son excelentes para mostrar la intensidad del entrenamiento, el dominio de habilidades o los valores nutricionales.
• Resultados de la encuesta: En lugar de enumerar porcentajes aburridos, puedes representar datos o estadísticas con barras coloridas.

Con esto en mente, hemos ideado 2 formas sencillas de agregar una barra de progreso a tu sitio web de WordPress. Puedes usar los enlaces rápidos a continuación para saltar a tu método preferido:

Método 1: Agregar una barra de progreso con un constructor de páginas (más personalizable)

Este método es el mejor si estás diseñando una página de destino o una página de ventas personalizada. Si simplemente deseas insertar una barra de progreso en una publicación de blog estándar, entonces el Método 2 es la mejor opción.

Usaremos Thrive Architect. Es un potente constructor de páginas que ofrece muchas plantillas diferentes y una interfaz de arrastrar y soltar fácil de usar.

Sin embargo, ten en cuenta que este método implica cambiar tu tema. Si estás satisfecho con tu tema actual y no quieres cambiar, es posible que prefieras nuestro segundo método en su lugar.

Además, Thrive Architect no tiene versión gratuita. Dicho esto, puedes usar nuestro código de cupón de Thrive Themes para obtener hasta un 50% de descuento en tu primera compra.

Puedes obtener más información sobre la plataforma en nuestra reseña de Thrive Architect.

Paso 1: Instalar el Thrive Theme Builder

Para empezar, necesitarás configurar Thrive Architect. Comienza iniciando sesión en tu cuenta de Thrive Themes y descargando el plugin Thrive Product Manager.

Después de eso, descarga e instala el plugin Thrive Product Manager. Puedes consultar nuestra guía para principiantes sobre cómo instalar un plugin de WordPress para obtener instrucciones paso a paso.

En esta etapa, haz clic en Product Manager en tu área de administración de WordPress.

Una vez que hayas hecho esto, haz clic en el botón 'Iniciar sesión en mi cuenta' para conectar tu sitio.

Ahora deberías ver una lista de todos los productos disponibles de Thrive Themes dentro de tu cuenta.

Simplemente selecciona 'Thrive Architect' y marca la casilla 'Instalar producto'.

Después de eso, desplázate hacia abajo hasta la sección 'Thrive Theme Builder' y marca la casilla 'Instalar tema'.

Si bien Thrive Architect funciona con cualquier tema, recomendamos instalar el Theme Builder para obtener la mejor compatibilidad en este tutorial. A continuación, haz clic en el botón 'Instalar productos seleccionados'.

Ahora deberías ver que Thrive Product Manager está configurando los plugins Thrive Architect y Thrive Theme Builder.

Cuando eso termine, simplemente haz clic en ‘Ir al panel de control del Theme Builder’.

En este punto, puedes continuar y elegir un tema de WordPress.

También puedes hacer clic en el botón ‘Vista previa’ para ver cómo se ve el tema antes de hacer clic en ‘Elegir’.

Con tu tema configurado, ahora deberías llegar al asistente del Theme Builder.

Este asistente de incorporación te ayudará a subir tu propio logo, elegir colores de marca para añadir a tu tema y configurar las diferentes estructuras y plantillas de tu tema.

Simplemente completa la incorporación para poder pasar al siguiente paso.

Paso 2: Añadir una barra de progreso a tus publicaciones de WordPress

Ahora agreguemos una barra de progreso a tus publicaciones de WordPress. Para empezar, recomendamos crear una nueva publicación en el editor de bloques.

Escribe el título de tu nueva publicación. Después de eso, haz clic en el botón 'Lanzar Thrive Architect'.

Ahora, puedes usar Thrive Architect para crear el contenido de tu publicación de blog. Funciona de manera similar al editor de bloques.

Es decir, puedes simplemente hacer clic en el botón ‘+’ y arrastrar y soltar cualquier elemento que desees en la sección que dice ‘Haz clic aquí para añadir texto o arrastra y suelta un elemento desde el panel derecho’.

Aquí tienes un ejemplo de cómo añadimos un bloque de texto usando el editor:

El proceso para añadir una barra de progreso es prácticamente el mismo. Simplemente haz clic en el botón ‘+’ de nuevo y busca el bloque ‘Barra de progreso’.

Después de eso, solo agrégalo a tu publicación.

A continuación, aparecerá una ventana emergente pidiéndote que elijas un diseño de barra de progreso.

Hay docenas para elegir, y siempre puedes cambiarlo más tarde si es necesario.

Una vez que hayas tomado tu decisión, regresarás a la interfaz principal del editor.

Paso 3: Personaliza la barra de progreso

En esta etapa, deberías ver una barra lateral en el panel izquierdo con opciones de personalización para la barra de progreso.

Hay muchas configuraciones para elegir, y cubriremos las principales para mostrar cómo modificar la barra de progreso.

En el menú Opciones principales, puedes cambiar el diseño de la barra de progreso de uno simple a uno con Nodos. Los Nodos son íconos que muestran dónde te encuentras en el progreso. Hemos elegido ese tipo de diseño como ejemplo.

También puedes cambiar dónde colocar las etiquetas de la barra de progreso, la altura de la barra y el nivel actual de la barra de progreso.

Bajando por el panel, encontrarás opciones para cambiar las etiquetas de los Nodos.

Para modificarlas, haz clic en el ícono de lápiz 'Editar' junto a la etiqueta.

Ahora, simplemente escribe tu nueva etiqueta.

Una vez hecho, haz clic en el ícono 'Guardar'.

Lo genial de Thrive es que te permite personalizar todas las demás partes de la barra de progreso para que puedas diseñarla como quieras.

Para ver estas opciones de personalización en acción, puedes pasar el cursor sobre uno de los elementos de la barra de progreso y hacer clic en él.

Aquí, hemos seleccionado la parte de la barra de progreso que muestra el progreso incompleto.

Ahora, un nuevo conjunto de opciones ha aparecido en la barra lateral izquierda.

Si haces clic en el menú desplegable 'Estilizando actualmente' en la parte superior, puedes cambiar partes específicas de la barra, como las etiquetas de progreso, iconos, nodos y más.

Asegúrate de explorar cada parte para ver qué puedes personalizar.

Probemos algunos ejemplos. Para deshabilitar la animación de rayas de caramelo en la barra de fondo, selecciona 'Fondo de líneas agrupadas' en el menú Estilizando actualmente.

Luego, desactiva el botón 'Animación de rayas de caramelo'.

Si quieres cambiar los íconos dentro de los nodos de progreso, cambia a 'Iconos de progreso' en el menú desplegable Estilizando actualmente.

Después de eso, en el menú 'Estado' en la parte superior, selecciona 'Normal'.

Ahora deberías ver algunas configuraciones hechas para cambiar los íconos de la barra de progreso.

Aquí, haz clic en ‘Cambiar ícono’.

Thrive Architect tiene muchos íconos en su biblioteca para varias industrias. Dicho esto, asegúrate de que el ícono que elijas sea adecuado para una barra de progreso.

Una vez que hayas tomado tu decisión, simplemente haz clic en ‘Seleccionar’.

Para cambiar el estilo del ícono, simplemente haz clic en el botón ‘Cambiar estilo’.

Desde aquí, verás algunos diseños de íconos predeterminados entre los que puedes elegir.

Para cambiar la apariencia de la etiqueta de progreso, cambia a la opción ‘Etiqueta de progreso’ en el menú desplegable Estilizando actualmente.

Aquí, verás algunas opciones para personalizar el color de la etiqueta, resaltar, formato, etc.

Una vez que estés satisfecho con la apariencia de la barra de progreso, haz clic en ‘Guardar trabajo’ para almacenar tus cambios.

Asegúrate de previsualizar tu publicación de blog en móvil, escritorio y tableta para que todo se vea genial.

Así es como se ve la nuestra en nuestro sitio de demostración:

Alternativa: Agregar una barra de progreso circular

Thrive Architect también tiene un tipo diferente de barra de progreso en su colección de bloques llamado contador de relleno. El bloque Contador de Relleno se ve como una barra de progreso circular, lo cual es excelente para mostrar estadísticas.

Para agregarlo, simplemente haz clic en el botón ‘+’ en la barra lateral derecha y busca el elemento ‘Contador de Relleno’. Luego, arrástralo y suéltalo en cualquier lugar de la publicación.

Una vez que lo agregues, verás algunas opciones para personalizar el contador de relleno.

Principalmente, puedes cambiar el tamaño del contador de relleno, el porcentaje de relleno, los colores y si el valor del porcentaje debe coincidir visualmente con el valor presentado en el contador.

También puedes hacer clic en el número dentro del contador de relleno para cambiar su apariencia.

Siéntete libre de modificar sus colores, tipo de fuente, visibilidad en diferentes dispositivos y más.

Si deseas cambiar el texto debajo del porcentaje, simplemente haz clic en el texto en sí.

Después de eso, puedes escribir una descripción para el contador de relleno.

No olvides guardar tu trabajo cuando hayas terminado.

Alternativa: ¿No te gusta Thrive Architect? El constructor de páginas SeedProd también tiene un bloque de barra de progreso que puedes agregar a tu tema o páginas personalizadas.

Para obtener más información sobre cómo usar SeedProd, consulta nuestra guía sobre cómo crear un tema personalizado de WordPress.

Método 2: Usar un plugin gratuito de barra de progreso (rápido y fácil)

Este método es el mejor si no quieres usar un constructor de páginas y solo necesitas un plugin de barra de progreso de WordPress simple y gratuito.

Para esto, usaremos el plugin gratuito Ultimate Blocks, que agrega toneladas de bloques adicionales de Gutenberg a tu editor de WordPress.

Lo genial de este plugin es que el bloque de barra de progreso está disponible de forma gratuita. Dicho esto, puedes actualizar a la versión pro del plugin para obtener más bloques de Gutenberg y opciones de personalización.

Puedes obtener más información sobre el plugin en nuestra reseña de Ultimate Blocks.

Primero, instala y activa el plugin de WordPress en tu sitio web. Una vez hecho esto, puedes abrir el editor de bloques para crear una nueva publicación o editar una existente.

Ahora, haz clic en el botón ‘+’ en cualquier lugar de la página y selecciona el bloque ‘Barra de progreso’.

Ahora has agregado exitosamente un bloque de barra de progreso a tu publicación. Personalicemos este elemento de diseño de WordPress aún más para que se ajuste a tus necesidades.

Si miras la barra lateral de configuración del bloque a la derecha, verás algunas opciones de personalización. En la pestaña ‘General’, puedes cambiar la posición del porcentaje de la barra de progreso de la parte superior al interior o a la parte inferior de la barra.

También puedes deshabilitar o habilitar el diseño de ‘Raya’ y cambiar el valor del progreso actual.

A continuación, puedes personalizar la Configuración de números.

Aquí, hemos optado por no mostrar el porcentaje del número porque no nos parece útil para nuestro ejemplo.

Pero si eliges mostrarlo, entonces puedes cambiar el prefijo del número (un símbolo que aparece antes del número, como un signo de menos) y el sufijo del número (un símbolo que aparece después del número, como un signo de moneda).

Lo siguiente es Control Responsivo.

Dado que las barras de progreso pueden ocupar algo de espacio en tu publicación, es posible que desees ocultarla cuando la publicación se vea desde una pantalla más pequeña, como en dispositivos tablet o móviles.

¿Quieres hacer la barra de progreso más interactiva? Considera agregar una animación de entrada. Cuando habilitas esta función, la barra de progreso aparecerá con un efecto animado a medida que el espectador se desplaza hacia ella.

También puedes elegir un estilo de animación y establecer el período de retraso para que la barra de progreso aparezca en el momento adecuado.

Cambiemos a la pestaña ‘Estilo’, donde puedes personalizar el diseño de la barra de progreso.

En la parte superior, puedes cambiar el diseño de una línea a una barra de progreso circular o semicircircular. También puedes agregar un radio de borde al diseño de la barra para que se vea más circular en lugar de rectangular y afilada.

Aquí, hemos decidido mantener la barra de progreso lineal.

Pero así se ven las barras de progreso circulares y semicirculares:

Al desplazarse hacia abajo, puede cambiar el grosor de la barra de progreso para que destaque aún más.

También puede que desee cambiar el color de la barra de progreso, la barra de fondo y la etiqueta para que se adapten al diseño de su sitio web. Solo asegúrese de elegir un color que contraste bien con su fondo para que sea fácil de leer.

Otro elemento que puede cambiar es el relleno y margen de la barra de progreso.

Ambas configuraciones controlan esencialmente el espacio entre la barra de progreso y los otros bloques que la rodean.

Puede aumentar el valor de ambos si no desea que la barra de progreso esté demasiado cerca de los otros bloques de arriba o de abajo.

A continuación, puede que desee agregar una etiqueta o descripción a la barra de progreso para que los lectores obtengan más contexto de la imagen.

Encima de la barra de progreso, simplemente escriba algo de texto. También puede que desee cambiar la alineación y el estilo del texto utilizando la configuración en la barra de herramientas del bloque.

Una vez que esté satisfecho con el aspecto de la barra de progreso, simplemente haga clic en 'Publicar' o 'Actualizar' en el editor de bloques.

También puede que desee ver la publicación en dispositivos móviles, de escritorio y tabletas para asegurarse de que la barra de progreso se vea bien en todos los dispositivos.

¡Eso es todo! Ha agregado con éxito una barra de progreso a sus publicaciones de WordPress.

Así es como se ve nuestra barra de progreso en nuestro sitio web de demostración:

Preguntas frecuentes: Agregar barras de progreso en WordPress

Aquí hay algunas preguntas que nuestros lectores hacen con frecuencia sobre las barras de progreso:

1. ¿Cuándo debo usar una barra de progreso de lectura frente a una barra de progreso estática?

Recomendamos usar una barra de progreso de lectura cuando desee mantener a los lectores interesados en publicaciones largas. Se llena a medida que se desplazan, mostrando cuánto del artículo han leído.

Esto funciona bien para tutoriales, guías o publicaciones de blog donde desea reducir las tasas de rebote.

Una barra de progreso estática es mejor para seguir un objetivo fijo, como el progreso de una recaudación de fondos, la finalización de un proyecto o los niveles de habilidad. Estas barras no se mueven mientras el usuario se desplaza, sino que muestran un porcentaje o valor establecido, como “60% completo” o “$300 de $500 recaudados”.

Si tu objetivo es aumentar la participación mientras lees, opta por una barra basada en el desplazamiento. Si quieres mostrar progreso o logros, elige una estática.

2. ¿Cuáles son algunas de las mejores prácticas al usar barras de progreso?

Aquí tienes algunos consejos para hacer que tu barra de progreso sea más efectiva:

• Mantenlo simple – Una barra delgada y sutil funciona mejor y no distrae de tu contenido.
• Combina con tu marca – Personaliza el color y el tamaño para que se ajusten al estilo de tu sitio.
• Elige el lugar correcto – La mayoría de los lectores la esperan en la parte superior de la pantalla.
• Prueba en móvil – Algunas barras se ven torpes en pantallas pequeñas. Desactívala si es necesario.
• Opcional: Agrega tiempo de lectura – Ayuda a establecer expectativas sobre cuánto tiempo tomará la publicación.

Una barra de progreso limpia y bien ubicada puede mejorar la experiencia del usuario sin ralentizar las cosas.

3. ¿Agregar una barra de progreso ralentizará mi sitio?

La mayoría de los plugins modernos de barras de progreso son ligeros y no afectarán notablemente la velocidad de tu sitio.

Sin embargo, los plugins mal codificados o inflados pueden afectar el rendimiento, especialmente en dispositivos móviles. Para estar seguro:

• Usa plugins confiables con buenas reseñas.
• Prueba la velocidad de tu sitio después de instalar.
• Deshabilita la barra en dispositivos móviles si afecta el tiempo de carga.

Siempre y cuando seas cuidadoso con la elección de tus plugins, agregar una barra de progreso no dañará el SEO e incluso puede aumentar la participación.

Elementos de diseño adicionales para tu sitio de WordPress

¿Quieres agregar otros elementos visuales a tu sitio web de WordPress? Simplemente consulta estos artículos a continuación:

• Cómo agregar letras capitales en las entradas de WordPress
• Cómo agregar un widget de temporizador de cuenta regresiva en WordPress
• Cómo agregar un ticker de noticias en movimiento en WordPress
• Cómo añadir un fondo animado en WordPress
• Cómo mostrar una animación de contador de números en WordPress
• Formas de agregar efectos de Halloween a tu sitio de WordPress
• Cómo agregar testimonios rotatorios en WordPress
• Cómo agregar cuadros de características con íconos en WordPress
• Cómo agregar un video de YouTube como fondo de pantalla completa en WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo agregar una barra de progreso a tus publicaciones de WordPress. También puedes consultar nuestras selecciones expertas de los mejores constructores de temas de WordPress y nuestra guía sobre cómo editar un sitio web de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.