Las barras de habilidades, los objetivos de financiación y el estado del proyecto se leen mejor como una imagen que como un número enterrado en una oración. El Barra de progreso widget adentro Complementos maestros para Elementor le brinda una barra animada con un título y un porcentaje, además de un menú desplegable Ajustes preestablecidos de estilo que cambia entre una línea simple, una línea con una burbuja, un círculo completo y un medidor de semicírculo.
Estableces un título y un valor, eliges un ajuste preestablecido y luego coloreas la barra frontal, la barra posterior y el valor para que coincidan con tu marca. Esta guía cubre todas las configuraciones del widget.
Qué hace el widget de la barra de progreso #
El widget representa un indicador de progreso: un título, un valor porcentual y una barra que se llena hasta ese valor cuando se desplaza hacia la vista. El Preajustes de estilo el menú desplegable cambia de forma, por lo que el mismo valor puede mostrarse como una línea horizontal, una línea con una burbuja flotante, un círculo de rosquilla o un calibre de semicírculo.
Tiene tres pestañas. Contenido contiene el título y el valor. Estilo controla el ajuste preestablecido, los colores de las barras frontal y posterior, la burbuja, el título y el texto del valor. Avanzado lleva las opciones habituales de visibilidad y espaciado de Elementor.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Las etiquetas y porcentajes que deseas mostrar, como WordPress 60% o Java 85%.
Cómo agregar el widget de la barra de progreso #
En el editor Elementor, abra el Elementos panel y búsqueda Barra de progreso, o desplácese hasta la sección Complementos maestros (los widgets llevan una insignia MA violeta). Arrástrelo a su página y se cargará con una sola barra lista para editar.
Aviso: hay dos widgets similares. Barra de progreso es una sola barra (esta guía), y Barras de progreso apila varias barras dentro de un widget. Para algunas barras independientes en diferentes estilos, la única barra de progreso es la selección flexible.
Establezca el título y el valor #
Abre el Contenido pestaña. Sólo hay dos campos, lo que mantiene la configuración rápida.
- Título: la etiqueta encima de la barra, como WordPress o Design.
- Valoare: el porcentaje que llena la barra, de 0 a 100.
Dado que cada barra de progreso es una barra, crea un conjunto duplicando el widget. Haga clic derecho en él y elija Duplicar (o presione Ctrl/Cmd + D), luego cambie el título y el valor en cada copia. Así es como las barras de WordPress y Java anteriores terminaron una al lado de la otra.
Elija un preajuste de estilo #
Cambiar al Estilo pestaña y abre Estilos generales. El Preajustes de estilo dropdown es donde eliges la forma. El Línea Burbuja preset agrega una burbuja flotante que muestra el porcentaje y se desplaza al final del relleno.
- Preajustes de estilo: Línea, burbuja de línea, círculo y ventilador (un calibre de semicírculo).
- Color de burbuja: el color de la burbuja porcentual en el ajuste preestablecido de burbuja.
- Poziția de buje: empuja la burbuja a lo largo de la barra.
Ajustes preestablecidos de calibre circular y semicírculo #
El Círculo el ajuste preestablecido dibuja un donut completo con el porcentaje en el medio, lo que se adapta a un bloque de estadísticas compacto.
El Fanático el ajuste preestablecido dibuja un indicador de semicírculo, una buena opción para una clasificación estilo tablero o una apariencia de velocímetro.
Estilee las piezas de la barra #
El Estilo tab divide el widget en partes que puedes diseñar por sí solas: Estilos generales, Título, Barra frontal, Barra trasera, Valor, y Patrones (una opción profesional).
- Título: color y tipografía de la etiqueta.
- Barra frontal: el color y ancho de la pieza rellena.
- Barra trasera: el color de la pista vacía detrás de él.
- Valoare: color y tipografía para el texto porcentual.
Abierto Barra frontal para configurar el color y el ancho del relleno. Esto es lo que lleva el color de su marca a toda la barra o calibre.
Casos de uso comunes #
- Barras de habilidades en una página de acerca o currículum (WordPress 90%, Diseño 75%).
- Financiación o metros de portería mostrando lo reñida que es una campaña.
- Estadísticas circulares en un bloque de servicios o resultados.
- Medidores de medio círculo para puntuaciones, calificaciones o widgets del panel.
- Estado del proyecto barras en una página de cliente o cartera.
Consejos para trabajar con el widget Progress Bar #
- Duplicar y luego editar. Estila una barra como quieras, luego cópiala y cambia el título y el valor.
- Mantenga la escala honesta. El valor es un porcentaje, por lo que 60 significa 60 por ciento completo.
- Combina el contraste de las barras delantera y trasera. Una pista ligera detrás de un relleno de color de marca se lee claramente.
- Utilice la burbuja para obtener números exactos. El ajuste preestablecido de Line Bubble pone el porcentaje justo en el relleno.
- Elija la forma para el contexto. Líneas para listas de habilidades, círculos y fanáticos para estadísticas destacadas individuales.
Mira el vídeo tutorial #
¿prefieres seguirlo en la pantalla? El video tutorial a continuación recorre el elemento de la barra de progreso de principio a fin y muestra cómo funciona cada estilo preestablecido, color y valor en el editor Elementor.
Preguntas frecuentes #
¿cuál es el widget de la barra de progreso en los complementos maestros?
Es un widget Elementor que muestra un indicador de progreso animado con un título y un porcentaje. Un menú desplegable de ajustes preestablecidos de estilo cambia entre una línea, una línea con una burbuja, un círculo completo y un indicador de semicírculo, y coloreas cada parte del panel Elementor.
¿qué estilos de barra de progreso incluye el widget?
Cuatro ajustes preestablecidos: Línea, Burbuja de línea, Círculo y Ventilador. Line es una barra horizontal simple, Line Bubble agrega una burbuja porcentual flotante, Circle dibuja una rosquilla completa con el valor en el centro y Fan dibuja un medidor de semicírculo. El valor sigue siendo el mismo en todos ellos.
¿puedo hacer una barra de progreso circular o de calibre en Elementor?
Sí. Establezca ajustes preestablecidos de estilo en círculo para obtener una rosquilla completa con el porcentaje en el medio, o en ventilador para obtener un calibre de semicírculo. Ambos se animan al valor que establezca y se pueden colorear a través de las secciones Barra frontal y Barra posterior en la pestaña Estilo.
¿Cómo agrego varias barras de progreso?
Cada widget de la barra de progreso es una barra, así que duplique el widget y cambie el título y el valor de cada copia. Coloque las copias en columnas para obtener una fila de barras de habilidades. Para varias barras administradas dentro de un widget, utilice el widget Progressbars independiente.
¿se anima la barra de progreso?
Sí. La barra se llena hasta su valor cuando se desplaza hacia la vista, por lo que una lista de habilidades o un indicador se anima a medida que el visitante llega a ella. El efecto funciona igual en todos los ajustes preestablecidos de línea, círculo y ventilador.
Envolviendo #
El widget de la barra de progreso convierte un porcentaje simple en una línea, burbuja, círculo o indicador animados. Establezca un título y un valor, elija un ajuste preestablecido y luego coloree la barra frontal, la barra posterior y el valor para que coincidan con su diseño. Para widgets de estadísticas relacionados, consulte Widget de contador y el Widget de cuadro de información, navega por completo Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.
