Una sola barra de progreso cuenta una historia. Un conjunto apilado de ellos muestra un conjunto completo de habilidades, una línea de servicios o el estado de un proyecto sin que el lector trabaje para ello. El Widget de barras de progreso en Complementos maestros para Elementor está construido para ese caso. Agrupa varias barras animadas en un widget, por lo que agregas tantas como necesites y las peinas juntas o una a la vez.
Piense en ello como el compañero de múltiples barras del independiente Widget de bar de progres. En lugar de eliminar un widget separado para cada métrica, administras todo el grupo desde un panel. Cada barra obtiene su propio título, porcentaje y color, mientras que una pestaña Estilo compartida controla el aspecto del conjunto.
¿Prefieres mirar primero? Este breve tutorial recorre el widget de un extremo a otro, desde arrastrarlo hasta diseñar las barras:
Qué hace el widget Barras de progreso #
El widget representa una lista de barras horizontales que se animan desde cero hasta su valor establecido cuando se desplazan hacia la vista. Cada barra muestra un título a la izquierda, una etiqueta de porcentaje y un relleno de color que crece para coincidir con el número que ingresa.
La diferencia con el widget de barra única es la estructura. Aquí las barras viven dentro de un repetidor llamado Barras de estadísticas, entonces agregas, duplicas, reordenas y eliminas barras sin tocar el lienzo. Un widget, un conjunto de controles de estilo y cualquier cantidad de barras.
Antes de empezar #
- wordpress con elemento instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Una página abierta en el editor Elementor donde irán las barras.
Cómo agregar el widget Barras de progreso #
En el editor Elementor, abra el Elementos panel y búsqueda Barras de progreso, o desplácese hacia abajo hasta la sección Addons maestros. Mira los nombres aquí: hay dos widgets que dicen casi lo mismo. Barra de progreso es una sola barra, y Barras de progreso es el grupo. Arrastrar Barras de progreso en tu página.
Aparece con tres barras de muestra ya completadas, por lo que ve un resultado funcional de inmediato y edita desde allí en lugar de comenzar en blanco.
Edite cada barra en la pestaña Contenido #
Abre el Contenido tab y encontrarás el Barras de estadísticas repetidor. Cada fila es una barra. Haga clic en una fila para expandirla y obtendrá tres configuraciones:
- Titlu de state: la etiqueta que se muestra encima de la barra, como “Diseño web” o “WordPress”. Este campo toma etiquetas dinámicas de Elementor, por lo que puede extraer el título de un campo de publicación, meta de autor u otra fuente dinámica usando el ícono de etiqueta.
- Valoarea porcentuală: un número del 1 al 100 que establece hasta dónde se llena la barra y qué lee la etiqueta. Entrar
87y la barra se llena al 87 por ciento. - Color de barra: un color opcional para esta barra. Déjelo vacío para usar el color de barra activo global o configúrelo aquí para anular el color del grupo para una sola barra.
El color por barra es lo que hace que el grupo sea flexible. Mantenga cada barra en un color de marca o dé a cada métrica su propio tono para que sea fácil distinguirlas de un vistazo.
Añade barras ilimitadas #
Para agregar otra barra, haga clic Agregar artículo en la parte inferior del repetidor. Aparece una nueva barra con valores predeterminados que puedes cambiarle el nombre y configurar. No hay límite, así que cree tantos como el contenido necesite. El ícono de copia en cualquier fila duplica una barra con su configuración intacta y el ícono X elimina una.
La pestaña Contenido también tiene un Documentos de ayuda enlace para referencia rápida y a Enlace envolvente opción del gratis Enlace envolvente extensión que hace que se pueda hacer clic en todo el widget. Ese resulta útil cuando las barras se encuentran en una tarjeta que enlaza en algún lugar.
Estila cada barra de la pestaña Estilo #
Cambiar al Estilo pestaña para controlar cómo se ve todo el grupo. Estas configuraciones se aplican a cada barra a la vez, razón por la cual vale la pena conocer las anulaciones por barra en la pestaña Contenido. La pestaña Estilo se divide Barra de estadísticas, Título de estadísticas, Porcentaje de estadísticas, y Patrones.
Barra de estadísticas #
- Bar BG Color: el color de la pista vacía detrás de cada relleno.
- Color de barra activa: el color de relleno predeterminado para cualquier barra que no tenga su propio color de barra establecido en la pestaña Contenido.
- Espaciado vertical: el espacio entre barras apiladas.
- Altura de la barra: qué gruesas son las barras, en píxeles.
- Radio del borde de la barra de estadísticas: rodea las esquinas. Vincula los cuatro valores para un radio par o establece Arriba, Derecha, Abajo e Izquierda por separado.
Título de estadísticas #
Esta sección diseña la etiqueta encima de cada barra.
- Alineación: izquierda, centro o derecha para el texto del título.
- Color: el color del título.
- Tipografía: control total sobre la familia de fuentes, el tamaño, el peso, la transformación y el resto de opciones de tipo de Elementor.
Porcentaje de estadísticas #
La etiqueta de porcentaje tiene sus propios controles de color y tipografía, por lo que puedes hacer que el número esté en negrita y grande o mantenerlo en silencio. Debajo se encuentra el Patrones sección. Proviene de la extensión Patterns gratuita y agrega un patrón de fondo de color fijo detrás de todo el widget, no dentro de las barras.
El resultado en la página #
Publique o obtenga una vista previa de la página y las barras se animarán desde cero hasta sus valores establecidos cuando la sección ingrese a la ventana gráfica. El estilo se transmite a través de: colores de barra personalizados, color del título, tamaño porcentual, espaciado y altura, todos se muestran en la página en vivo.
Casos de uso comunes #
- Barras de habilidades en una página de acerca o currículum (diseño, desarrollo, marketing).
- Fortalezas del servicio en la página de una agencia, una barra por oferta.
- Estado del proyecto o campaña se muestra como porcentajes de finalización.
- Puntuaciones destacadas en un bloque de comparación, emparejado con a tabla comparativa.
- Destacados estadísticos junto a números animados del Widget de contador.
Consejos para trabajar con Barras de Progreso #
- Primero establezca el estilo del grupo y luego anule. Elija el color de la barra activa y la altura de la barra una vez, luego agregue un color por barra solo donde desee que se destaque una barra.
- Mantenga los porcentajes honestos. El número también es la etiqueta, por lo que una barra establecida en 76 dice “76%”. Haga coincidir el relleno con la cifra real.
- Sintonice la altura y el radio juntos. Una barra más alta con un radio coincidente se lee como una pastilla redondeada; una barra delgada con un radio grande puede parecer recortada.
- Utilice títulos dinámicos en plantillas. Cuando las barras se encuentran en una plantilla de publicación o archivo, conecte el título de estadísticas a una etiqueta dinámica para que cada entrada se etiquete a sí misma.
- Duplicar en lugar de reconstruir. El ícono de copia clona una barra con su color y tipografía, lo que supera la configuración de un nuevo elemento a mano.
Preguntas frecuentes #
¿cuál es el widget Barras de progreso en los complementos maestros?
Es un widget Elementor que agrupa varias barras de progreso animadas en un solo elemento. Agregas barras a través del repetidor de barras de estadísticas, das a cada una un título, porcentaje y color opcional, y estiliza todo el conjunto desde la pestaña Estilo. Es la versión de varias barras del widget único de la barra de progreso.
¿en qué se diferencian las barras de progreso del widget único de la barra de progreso?
El único widget de la barra de progreso muestra una barra por widget. El widget de Barras de progreso contiene un repetidor, por lo que agrega barras ilimitadas dentro de un widget y las administra juntas. Utilice el único para obtener una métrica independiente y las barras de progreso para un conjunto apilado.
¿Cuántas barras de progreso puedo agregar?
No hay límite. Haga clic en Agregar elemento en el repetidor de barras de estadísticas para agregar tantas barras como necesite. Cada nueva barra comienza con valores predeterminados que puede cambiar el nombre y ajustar, y puede duplicar o eliminar barras en cualquier momento.
¿Puede cada barra de progreso tener un color diferente?
Sí. Establezca el color de la barra activa en la pestaña Estilo como valor predeterminado del grupo, luego abra cualquier barra en la pestaña Contenido y use su campo Color de barra para anular esa barra. Deje el campo vacío para mantener una barra en el color del grupo.
¿se animan las barras de progreso?
Sí. Cada barra llena desde cero hasta su porcentaje establecido cuando el widget se desplaza hacia la vista en la página en vivo, a aproximadamente 20 milisegundos por punto porcentual. No hay configuración para cambiar la velocidad.
Envolviendo #
El widget Barras de progreso convierte una pila de métricas en un bloque animado y ordenado. Agregue barras en el repetidor de barras de estadísticas, establezca cada título y porcentaje, coloree individualmente o en grupo y dé forma a todo el conjunto desde la pestaña Estilo. Para una sola barra independiente, busque el Widget de bar de progres en cambio. Explora el completo Widgets y extensiones de complementos maestros para ver qué más puedes construir y ver el Página del widget de barras de progreso para demostraciones. El widget es gratuito y no tiene opciones exclusivas de Pro.
