El bloque Barra de progreso te permite añadir barras de progreso animadas y visuales a cualquier página de SeedProd. Tanto si deseas destacar un objetivo de recaudación de fondos, mostrar niveles de habilidad, mostrar la finalización de una campaña o comunicar cualquier métrica basada en porcentajes, este bloque te permite presentar esa información de forma clara y atractiva.
Cada barra de progreso es totalmente personalizable: configura 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 prediseñadas y, a continuación, 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 bien en cualquier tamaño de pantalla.
Añadir el bloque Barra de progreso a tus páginas
Sigue estos pasos para añadir un bloque de barra de progreso a tu página 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: Introduzca la etiqueta que se muestra dentro de la parte rellenada 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 lo que representa el progreso.
- Porcentaje: Establezca el nivel de relleno de la barra utilizando el control deslizante (0-100). Este valor controla la cantidad de la barra que se rellena visualmente y representa el porcentaje de progreso que se muestra a los visitantes.
- Color: Establece el color de relleno de la barra. Este color se aplica a la parte rellena (progreso) de la barra, mientras que el color de fondo sin rellenar se establece por separado en la pestaña Avanzado.
Paso 2a: Elija un estilo de plantilla
En la pestaña Plantillas, puedes seleccionar entre estilos de barra de progreso prediseñados para cambiar rápidamente el aspecto general de tu barra.
- Plantillas de estilo: Elige entre 4 diseños de plantillas diferentes, cada uno con un estilo visual y un tratamiento de color únicos. Haz clic en cualquier plantilla para aplicarla al instante; siempre puedes volver a las pestañas Contenido y Avanzado para realizar más ajustes después de seleccionar un estilo.
Paso 3: Personalizar 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 mucho más.
Estilos:
- Tipografía: Establezca 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 parte sin rellenar (pista) de la barra de progreso, es decir, el fondo visible detrás de la sección rellenada. El valor predeterminado es un gris claro (
#F7F7F7). - Radio del borde: establece el redondeo de las esquinas tanto para la barra como para el relleno (0-25 píxeles). Aumenta este valor para crear una barra con forma de pastilla o totalmente redondeada.
- Sombra del texto: añade un efecto de sombra al texto de la etiqueta de la barra. Elige entre los tamaños preestablecidos (Ninguno, Muy fino, Pequeño, Mediano, Grande, Extragrande, 2X Extragrande) para añadir profundidad o hacer que la etiqueta sea más legible en contraste con el color de la barra.
- Sombra: Añade una sombra de cuadro al elemento de la barra de progreso general para darle una sensación de profundidad y separación del fondo de la página.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque de la 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 espacio interior dentro del bloque de la barra de progreso (superior, derecho, inferior, izquierdo). Esto crea un espacio entre la barra y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque de barra de progreso. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-progress|75).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque Barra de progreso en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque de la barra de progreso en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque de la barra de progreso en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elija entre varios efectos de animación que se reproducen cuando el bloque de la barra de progreso aparece en pantalla. Las opciones incluyen rebote, fundido de entrada, zoom, rotación de entrada y muchas más, ideales para llamar la atención sobre una métrica importante a medida que los visitantes se desplazan hacia abajo en su página.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Barra de progreso y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de barra de progreso a tu página! Las barras de progreso son una forma eficaz de comunicar de un vistazo el grado de finalización, los niveles de habilidad, los objetivos de recaudación de fondos o cualquier métrica basada en porcentajes. 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.