Widget de barras de habilidades de Elementor: múltiples barras de progreso en una lista
El widget Master Addons Progress Bars apila varias barras de habilidades horizontales en un widget. Es gratis. Agregue una barra para cada habilidad, servicio u objetivo, dale un título y un porcentaje del 1 al 100 y elija un color por barra si lo desea. Las barras se llenan desde cero cuando se desplazan hacia la vista, y el porcentaje se muestra dentro de cada barra. Úselo para habilidades en una página de acerca, estado del proyecto o resultados de encuestas. ¿Busca un solo círculo o calibre? Utilice el Barra de progreso widget con sus ajustes preestablecidos Círculo y Ventilador. Para una barra que se llena a medida que los visitantes se desplazan por una publicación, utilícela Barra de progreso de lectura.
Cómo agregar barras de habilidades en Elementor
Necesitas Elementor y el complemento gratuito Master Addons. Mira esto Documentos de barras de progreso.
- Compruebe que las barras de progreso estén activadas en Complementos maestros, widgets.
- En el editor Elementor, busque Barras de progreso y arrástrelo a la página.
- En Barras de estadísticas, edite las tres barras de muestra y haga clic en Agregar elemento para obtener más información.
- Establece un título y un porcentaje para cada barra, y un color de barra si quieres colores diferentes.
- En la pestaña Estilo, configure la pista y complete los colores, la altura de la barra, el espaciado y el radio.
- Diseñe los títulos y porcentajes, luego obtenga una vista previa de la página y desplácese hasta el widget.
Agregue tantas barras de habilidades como necesite
Los bares viven en el Barras de estadísticas repetidor en la pestaña Contenido. Haga clic en Agregar elemento para cada barra y luego configure Título de estadísticas (por ejemplo “Diseño Web”), el Valor porcentual de 1 a 100, y opcional Color de barra para esa barra. Arrastre elementos para reordenarlos. El campo de título acepta etiquetas dinámicas de Elementor.
- Cualquier número de barras en un widget.
- Cada barra tiene su propio título, porcentaje y color.
- Las barras sin color propio utilizan el color de barra activa de la pestaña Estilo.
Estilee las barras, títulos y porcentajes
El Barra de estadísticas la sección de estilo establece el color de la barra BG (la pista vacía), el color de la barra activa (el relleno), el espacio vertical entre barras (5 a 128 px), la altura de la barra (1 a 96 px) y el radio del borde de la barra de estadísticas para barras cuadradas o con forma de píldora. Título de estadísticas tiene alineación, color y tipografía, y Porcentaje de estadísticas tiene color y tipografía para el número dentro de la barra.
- Colores separados para la pista y el relleno.
- Radio de borde en px o % para barras redondeadas.
- La animación de relleno se reproduce una vez cuando el widget se desplaza hacia la vista; los valores más altos tardan más en completarse.
Barra de progreso Elementor frente a barras de progreso Master Addons
Elementor tiene un widget de barra de progreso gratuito que muestra una barra. Así es como se comparan los dos.
| Característica | Barra de progreso Elementor | Barras de progreso de complementos maestros |
|---|---|---|
| Barras por widget | Uno | Tantos como agregues |
| Color por barra | Un widget, un color | Sí, por elemento repetidor |
| Texto dentro de la barra | Sí, texto interior personalizado | Sólo porcentaje |
| Animar cuando se desplace a la vista | Sí | Sí |
| Etiquetas dinámicas | Sí | Sólo título |
| Costo | Gratis | Gratis |
Para una barra con texto interno personalizado, el propio widget de Elementor es suficiente. Para obtener una lista de habilidades, un widget de Barras de progreso las mantiene alineadas. Relacionado: Barra de progreso para círculos y calibres, Barra de progreso de lectura para desplazarse hacia el progreso, y Contrarrestar para números animados.
Preguntas frecuentes sobre barras de progreso
¿Las barras se animan cuando aparecen a la vista?
Sí. Cada barra se llena desde cero hasta su valor una vez que el widget ingresa a la ventana gráfica. El relleno tarda unos 20 milisegundos por punto porcentual, por lo que una barra del 90% tarda menos de dos segundos. No hay configuración para cambiar la velocidad o desactivar la animación.
¿el widget de Barras de progreso es gratuito?
Sí. Progress Bars es parte del complemento gratuito Master Addons con control de contenido y estilo. No existe una versión Pro de este widget.
¿las barras de progreso responden en dispositivos móviles?
Sí. Las barras ocupan todo el ancho de su columna, por lo que se reducen con la pantalla. La altura de la barra y el espaciado vertical no son controles sensibles, pero el título y el porcentaje de tipografía pueden usar tamaños de fuente más pequeños en tabletas y dispositivos móviles.
¿Puedo usar un degradado para el color de la barra activa en lugar de un color sólido?
No. Bar BG Color, Active Bar Color y el color propio de cada barra toman solo un color sólido. Si necesita un relleno degradado, contáctanos y podemos sugerir un fragmento de CSS.
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
