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 y hacerlas más impactantes.
Por ejemplo, las barras de progreso son excelentes para mostrar el estado de finalización de un proyecto.
Si tienes un blog que documenta proyectos a largo plazo, agregar barras de progreso puede dar a los lectores una actualización visual rápida sobre cuánto has avanzado.
También hemos utilizado barras de progreso en nuestro sitio web de membresía de video.
Esto es para ayudar a nuestros usuarios a ver cuánto han completado del curso.
Las campañas de recaudación de fondos en tu sitio de WordPress también pueden beneficiarse enormemente de las barras de progreso. Proporcionan una representación visual inmediata de lo cerca que estás de alcanzar tu meta, lo que puede fomentar más donaciones.
Para contenido educativo, las barras de progreso pueden ilustrar hitos de aprendizaje o la complejidad de diferentes temas. Esto puede ayudar a los lectores a ver el nivel de dificultad de varios temas que cubres en tus publicaciones de blog.
Si tu sitio web se enfoca en temas de fitness o salud, las barras de progreso se pueden usar para mostrar niveles de intensidad de entrenamiento, barras de habilidad, información nutricional o progreso hacia metas de salud.
Aparte de eso, agregar una barra de progreso a publicaciones sobre estadísticas o resultados de encuestas puede hacer que los datos sean más digeribles y atractivos. En lugar de simplemente enumerar porcentajes, puedes representar visualmente los datos con barras de progreso 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)
- Método 2: Usar un plugin gratuito de barra de progreso (rápido y fácil)
- Frequently Asked Questions: Adding Progress Bars in WordPress
Nota: ¿Estás buscando un tutorial de barra de progreso de lectura en su lugar? Si es así, nuestro artículo sobre cómo agregar una barra de progreso de lectura en las publicaciones de WordPress vale la pena leerlo.
Método 1: Agregar una barra de progreso con un constructor de páginas (más personalizable)
Una forma efectiva de agregar una barra de progreso a tu sitio de WordPress es usando un constructor de páginas con una función de barra de progreso integrada. Este enfoque asegura que tu barra de progreso se integre perfectamente con el diseño general de tu tema.
Para este método, usaremos Thrive Architect, un potente constructor de páginas que ofrece muchas plantillas de temas diferentes y una interfaz fácil de usar de arrastrar y soltar. Es una excelente opción tanto para principiantes como para usuarios experimentados que desean una forma sencilla de personalizar el diseño de su sitio web de WordPress.
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, puedes hacer clic en el botón 'Iniciar sesión en mi cuenta' para conectar tu sitio de WordPress con tu cuenta de Thrive Themes.
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, desplacémonos hacia abajo hasta la sección 'Thrive Theme Builder' y marquemos la casilla 'Instalar tema'. Tenemos que hacer esto porque Thrive Architect funciona mejor con un Thrive Theme.
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 añadamos una barra de progreso a tus publicaciones de WordPress. Para empezar, abre el editor de bloques para una publicación nueva o existente.
Luego, escribe el título de tu nueva publicación ahí. Después de eso, haz clic en el botón ‘Iniciar 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 de la barra de progreso para que se adapten al diseño de su sitio web.
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.
Sachiko Ishikawa
Hello! I have a question
How can I adjust the size (width) of the progress bar? I’m putting it on my sidebar menu, but unfortunately, it’s too wide…
Disculpas por los inconvenientes.