El bloque Barra de Progreso te permite añadir barras de progreso visuales y animadas a cualquier página de SeedProd. Ya sea que quieras destacar un objetivo de recaudación de fondos, mostrar niveles de habilidad, indicar la finalización de una campaña o comunicar cualquier métrica basada en porcentajes, este bloque facilita la presentación de esa información de una manera clara y atractiva.
Cada barra de progreso es totalmente personalizable: establece el texto de la etiqueta, el porcentaje de progreso y el color de la barra en la pestaña Contenido, elige entre cuatro plantillas de estilo predefinidas y luego ajusta la tipografía, el color de fondo, el radio del borde y los efectos de sombra en la pestaña Avanzado. El bloque también incluye controles de espaciado y visibilidad por dispositivo para que tus barras de progreso se vean geniales en todos los tamaños de pantalla.
Añadir el Bloque de Barra de Progreso a tus Páginas
Sigue estos pasos para añadir un bloque de Barra de Progreso a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Barra de Progreso en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Barra de Progreso para abrir su configuración. En la pestaña Contenido, la sección Barra de Progreso te permite establecer la etiqueta, el porcentaje y el color de relleno de la barra.
- Texto de la Barra: Introduce la etiqueta que se muestra dentro de la porción rellena de la barra de progreso (por ejemplo, “75% Completado”, “Objetivo de Financiación” o el nombre de una habilidad). Este texto se superpone al relleno de la barra para que los visitantes vean inmediatamente qué representa el progreso.
- Porcentaje: Establece el nivel de relleno de la barra usando el deslizador (0-100). Este valor controla cuánto de la barra está visualmente rellena y representa el porcentaje de progreso mostrado a los visitantes.
- Color: Establece el color de relleno de la barra. Este color se aplica a la porción rellena (de progreso) de la barra, mientras que el color de fondo sin rellenar se establece por separado en la pestaña Avanzado.
Paso 2a: Elegir un Estilo de Plantilla
En la pestaña Plantillas, puedes seleccionar entre estilos de barra de progreso prediseñados para cambiar rápidamente la apariencia general de tu barra.
- Plantillas de Estilo: Elige entre 4 diseños de plantilla diferentes, cada uno con un estilo visual y tratamiento de color únicos. Haz clic en cualquier plantilla para aplicarla al instante; siempre puedes volver a las pestañas Contenido y Avanzado para hacer ajustes adicionales después de seleccionar un estilo.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes ajustar la apariencia de tu barra de progreso con tipografía, colores, efectos de sombra y más.
Estilos:
- Tipografía: Establece la familia de fuentes, el tamaño, el grosor, la altura de línea, el espaciado entre letras y la transformación del texto para el texto de la etiqueta de la barra.
- Color de Fondo: Establece el color de la porción sin rellenar (la pista) de la barra de progreso: el fondo visible detrás de la sección rellena. Por defecto es un gris claro (
#F7F7F7). - Radio de borde: Establece el redondeo de las esquinas tanto para la pista de la barra como para el relleno (0–25px). Aumenta este valor para crear una barra en forma de píldora o completamente redondeada.
- Sombra del texto: Añade un efecto de sombra al texto de la etiqueta de la barra. Elige entre tamaños preestablecidos (Ninguno, Delgado, Pequeño, Mediano, Grande, Muy Grande, Extra Grande) para añadir profundidad o hacer que la etiqueta sea más legible sobre el color de la barra.
- Sombra: Añade una sombra de caja al elemento general de la barra de progreso para darle una sensación de profundidad y separación del fondo de la página.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Barra de Progreso (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre la barra y los elementos circundantes en la página.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de Barra de Progreso (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre la barra y los bordes del bloque.
Atributos:
- ID CSS: Muestra el identificador único autogenerado para tu bloque de Barra de Progreso. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-progress|75).
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de Barra de Progreso en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de Barra de Progreso en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de Barra de Progreso en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de Barra de Progreso entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más; son geniales para llamar la atención sobre una métrica importante a medida que los visitantes se desplazan por tu página.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Barra de Progreso y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Barra de Progreso a tu página! Las barras de progreso son una forma potente de comunicar la finalización, los niveles de habilidad, los objetivos de recaudación de fondos o cualquier métrica basada en porcentajes de un vistazo. Experimenta con diferentes estilos de plantilla, colores de relleno, valores de radio de borde y animaciones de entrada para crear barras de progreso que llamen la atención y refuercen el mensaje de tu página.