Las barras de progreso son un elemento efectivo en el diseño web que informa a tus visitantes de manera atractiva sobre el progreso de un proyecto o objetivo. Elementor, como uno de los plugins de construcción de páginas más populares para WordPress, te ofrece la posibilidad de integrar fácilmente barras de progreso en tus páginas web. Esta guía te llevará a través de los pasos individuales para crear y personalizar una barra de progreso en Elementor.
Conclusiones más importantes
- Las barras de progreso ofrecen una representación visual del progreso y los objetivos.
- Puedes personalizar los títulos, valores y colores individualmente.
- El texto interior puede mostrarse u ocultarse opcionalmente.
- Diferentes estilos y opciones de personalización están disponibles para adaptar la barra a tu diseño.
Guía paso a paso
Primero, abre tu página de WordPress y navega hasta el editor de Elementor. Allí, puedes agregar un nuevo elemento y seleccionar la barra de progreso.
Ahora estás listo para ingresar el título de tu barra de progreso. Piensa en un título adecuado, como "Objetivo de ventas". Esto le dará a tus visitantes una primera pista sobre de qué se trata.
En el siguiente paso, debes establecer el objetivo o el mensaje de éxito. Piensa en qué es exactamente lo que deseas mostrar y escríbelo en el campo correspondiente. Este paso ayuda a que tu barra de progreso sea más comprensible para los usuarios.
Luego, puedes establecer el color de la barra de progreso. Esto no es obligatorio, pero es una buena oportunidad para ajustar el diseño. Puedes elegir un tono que armonice con el resto de tu sitio web.
Luego ve a los porcentajes. Aquí puedes ajustar tu progreso, por ejemplo, al 40%. Recuerda que puedes establecer el valor máximo en 100% y el valor mínimo en 0%. Esta retroalimentación ayuda a que tus visitantes comprendan rápidamente el progreso.
El porcentaje puede mostrarse u ocultarse. A menudo se ve más atractivo cuando ocultas el texto, especialmente si prefieres un diseño limpio. Piensa en qué variante es la mejor para tu proyecto.
Si lo deseas, también puedes agregar un texto interno que contenga los números de porcentaje. Esta función es especialmente útil si deseas mostrar el progreso instantáneo. Si decides no incluir un texto interno, también puedes ocultar el número aquí.
Ahora, se trata del estilo de la barra de progreso. Puedes personalizar el color de la barra, el color de fondo del área no rellena y la altura de la barra individualmente. Elige un tono verde oscuro para el área rellena y un color de fondo neutro para un aspecto limpio.
Además, puedes redondear las esquinas de la barra de progreso para que la barra tenga una forma más atractiva. Recuerda que solo las esquinas del frente pueden ser redondeadas hasta que el progreso alcance el 100%.
Si deseas personalizar el texto interno, también puedes cambiar aquí el color y la tipografía. Es posible que decidas desactivar la fuente para enfocarte en el progreso.
Finalmente, llegas a las configuraciones avanzadas, donde puedes personalizar el color del texto y el estilo del título. Un título negro y en negrita con sombra opcional garantiza que tu título destaque.
Ahora guarda tus cambios y ve a tu página para ver el resultado. Tal vez decidas que es útil mostrar el porcentaje. Si no, la barra de progreso seguirá mostrándose de manera atractiva.
Tu barra de progreso ahora muestra el valor establecido, sin animaciones desde 0 hasta arriba. En su lugar, el progreso se visualiza de inmediato.
Si estás utilizando la versión Pro de Elementor, se te ofrecerán atributos dinámicos adicionales. Esta función es especialmente útil para personalizar barras de progreso basadas en datos externos o valores incluso basados en la base de datos.
Resumen
En esta guía has aprendido cómo puedes crear y personalizar una barra de progreso en Elementor. Puedes establecer títulos y progresos, elegir colores y realizar diversas personalizaciones para integrar una barra de progreso atractiva y efectiva.
Preguntas frecuentes
¿Cómo creo una barra de progreso en Elementor?Seleccionas la barra de progreso en Elementor y agregas tu título y valores de progreso.
¿Puedo cambiar los colores de la barra de progreso?Sí, puedes personalizar tanto el color de la barra de progreso como el color de fondo de manera individual.
¿Cuál es la ventaja de un texto interno en la barra de progreso?El texto interno muestra el progreso de forma más clara y ayuda a que la información sea comprensible de un vistazo.
¿Cómo guardo los cambios que hice?Después de realizar todas las personalizaciones, puedes guardar tus cambios para que se muestren en tu sitio web.
¿Existen funciones especiales en la versión Pro de Elementor?Sí, la versión Pro ofrece opciones avanzadas como atributos dinámicos que puedes utilizar para personalizar aún más tu barra de progreso.
