Barras de progreso
Los números lo dicen, pero las imágenes se venden. Cuando necesita mostrar experiencia, finalización de proyectos o objetivos de campaña, un porcentaje simple fracasa. Master Addons Progressbars Element convierte las estadísticas en imágenes claras y convincentes. Cree barras individuales o grupos completos para mostrar habilidades, objetivos de recaudación de fondos o hitos de proceso. Controle el valor, el color y el estilo de cada barra de forma independiente. Luego, diseñe las etiquetas y números para que coincidan con su sitio. Es la forma más sencilla de agregar credibilidad y claridad, demostrando el progreso con solo un vistazo.
Gestión de barras de progreso y control de valor individual
¿Necesitas una barra o diez? No hay problema. Comience con el repetidor de Barras de progreso y haga clic en Agregar elemento para crear tantas barras de progreso como necesite. Para cada barra, establezca un título claro (como “Diseño web”) y su valor porcentual exacto (como 87). Incluso puedes asignar un color de barra único a cada una directamente desde el panel de contenido. Reorganizar o eliminar barras en cualquier momento.
- Barras ilimitadas: agregue, elimine y reordene barras de progreso libremente con el botón + Agregar elemento.
- Personalización de barras individuales: establezca un título, un valor porcentual y un color de barra únicos para cada barra de la lista.
- Ajuste de valor en vivo: cambie el número de porcentaje en cualquier momento y el ancho de llenado de la barra se actualiza automáticamente.
Diseño de estructura y estilo de barra de progreso visual
Controle la altura de la barra de progreso para que sean atrevidas, gruesas, delgadas y sutiles. Establezca el color BG de la barra (la pista vacía) y el vibrante color de la barra activa (la parte de llenado). Utilice los controles Border Radius para crear barras rectangulares nítidas o medidores suaves con forma de píldora. Ajuste el espacio vertical entre barras en un grupo para garantizar un diseño limpio y fácil de leer.
- Sistema de doble color: configure de forma independiente el color de fondo y el color de relleno activo para lograr un contraste claro.
- Dimensiones de la barra: controle la altura de la barra y el radio del borde para obtener una forma y proporción perfectas.
- Espaciado inteligente: utilice el espaciado vertical para agregar espacio para respirar entre barras de progreso apiladas.
Preguntas frecuentes sobre barras de progreso
¿Puedo animar las barras para que se llenen cuando el usuario se desplaza hacia ellas?
Esta es una característica estándar y esperada para las barras de progreso. Normalmente, las barras serían estáticas en el editor pero se animarían desde el 0% hasta su valor establecido cuando aparezcan ante la vista del espectador en la página en vivo. Los complementos maestros ya tienen esta característica. Pero no hay ninguna opción para que cambies la animación.
¿cuál es el mejor uso para estas barras de progreso?
¡Son increíblemente versátiles! Los usos comunes incluyen:
- Habilidades y experiencia: en una página “Acerca de nosotros” o currículum.
- Estado del proyecto: Mostrando porcentaje de finalización de campañas u objetivos.
- Seguidores de recaudación de fondos: visualización de donaciones en función de un objetivo.
- Tablas de precios y funciones: resaltando los límites del plan (por ejemplo, “Almacenamiento: 80% usado”).
¿las barras de progreso responden en dispositivos móviles?
Sí. Las barras, su altura, espaciado y tipografía de texto deben reducirse adecuadamente en los dispositivos móviles. Puede utilizar el modo de edición responsiva de Elementor para ajustar la altura de la barra o los tamaños de fuente específicamente para dispositivos móviles si es necesario.
¿Puedo usar un degradado para el color de la barra activa en lugar de un color sólido?
No. En la actualidad no existe la opción de elegir un color degradado en lugar de un color sólido para Elementor, la barra de progreso. Si prefiere utilizar el color degradado, tenemos una solución para usted. Por favor envíenos un mensaje.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
