El bloque de Alerta te permite añadir cuadros de alerta llamativos y de colores a tus páginas de SeedProd. Este bloque te ayuda a comunicar mensajes importantes, anuncios, advertencias o notificaciones de éxito a tus visitantes de una manera visualmente destacada.
Los cuadros de alerta son perfectos para resaltar información crítica que requiere atención inmediata, como promociones especiales, actualizaciones importantes, notificaciones del sistema o anuncios urgentes. Con estilos y colores personalizables, puedes asegurarte de que tus mensajes destaquen y capten la atención de tus visitantes.
Añadir el Bloque de Alerta a tus Páginas
Sigue estos pasos para añadir un bloque de Alerta a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Alerta en la sección deseada de tu página.
El bloque de Alerta se encuentra en Diseño > Avanzado y se puede arrastrar a cualquier sección de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Alerta para abrir su configuración. En la pestaña Contenido, puedes personalizar el mensaje y la apariencia de tu alerta.
Alerta:
- Tipo: Elige entre estilos de alerta predefinidos: Info (azul, para información general), Éxito (verde, para confirmaciones positivas), Advertencia (amarillo/naranja, para precauciones) o Peligro (rojo, para alertas críticas). Cada tipo viene con colores apropiados para transmitir el tono de mensaje correcto.
- Botón de Cierre: Activa o desactiva un botón de cierre que permite a los visitantes descartar la alerta. Habilita esto para mensajes no críticos que los usuarios pueden querer ocultar.
- Título: Introduce el encabezado principal de tu mensaje de alerta. Debe ser conciso y captar la atención.
- Descripción: Añade texto detallado para explicar tu mensaje de alerta. Esto proporciona contexto e información adicional más allá del título.
- Alineación del Título: Establece la alineación horizontal del título de tu alerta (izquierda, centro o derecha).
- Alineación de la Descripción: Establece la alineación horizontal del texto de la descripción de tu alerta.
- Tamaño de Fuente del Título: Ajusta el tamaño del texto del título para asegurarte de que sea prominente y legible.
- Tamaño de Fuente de la Descripción: Controla el tamaño del texto de la descripción para una legibilidad óptima.
- Etiqueta del Título: Elige la etiqueta de encabezado HTML para tu título (h1, h2, h3, h4, h5 o h6). Esto afecta tanto al SEO como a la jerarquía visual.
- Mostrar Icono: Activa o desactiva la visualización de un icono junto a tu mensaje de alerta. Los iconos proporcionan señales visuales rápidas sobre el tipo de alerta.
- Icono: Selecciona un icono personalizado para mostrar con tu alerta. Elige un icono que coincida con el propósito de tu mensaje.
La pestaña Contenido te permite configurar el tipo de alerta, el contenido del mensaje, la alineación y la configuración del icono.
Paso 2a: Elegir un Estilo de Plantilla
En la pestaña Plantillas, puedes seleccionar entre estilos de alerta prediseñados para cambiar rápidamente la apariencia general de tu cuadro de alerta.
- Elige entre cuatro dise ilde{os de plantillas diferentes, cada uno con dise ilde{os ilde{unicos} y tratamientos visuales. Previsualiza cada estilo para encontrar el que mejor se adapte al dise ilde{o} de tu p ilde{a}gina.
La pesta ilde{a}a Plantillas proporciona cuatro estilos predise ilde{ados para personalizar r ilde{a}pidamente la apariencia de tu alerta.
Paso 3: Personaliza el Diseño
En la pesta ilde{a}a Avanzado, puedes personalizar la apariencia visual de tu bloque de Alerta:
Estilos:
- Tipograf ilde{a}a: Controla las propiedades de la fuente para el t ilde{tulo} de tu alerta, incluyendo familia de fuentes, peso y estilo.
- Tipograf ilde{a}a del Texto: Personaliza las propiedades de la fuente para el texto de descripci ilde{o}n de tu alerta.
- Color: Establece el color del texto del t ilde{tulo} de tu alerta.
- Color de Descripci ilde{o}n: Elige el color del texto de descripci ilde{o}n de tu alerta.
- Color de Cierre: Establece el color del bot ilde{o}n de cierre (icono X) que cierra la alerta.
- Fondo del T ilde{tulo}: A ilde{ade} un color de fondo espec ilde{i}ficamente para el ilde{a}rea del t ilde{tulo} de tu alerta.
- Color de Fondo: Establece el color de fondo general para toda la caja de alerta.
- Sombra del Texto: A ilde{ade} efectos de sombra a tu texto de alerta para dar profundidad y legibilidad. Elige entre Ninguna, Fina, Peque ilde{a}a, Mediana, Grande, Muy Grande, Extra Grande o Personalizada.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de alerta (Superior, Derecho, Inferior, Izquierdo). Esto determina cu ilde{a}nto espacio aparece entre la alerta y los elementos circundantes.
- Relleno: Ajusta el espaciado interior dentro de tu caja de alerta (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido y los bordes de la alerta.
Atributos:
- ID CSS: Muestra el identificador ilde{u}nico autogenerado para tu bloque de alerta. Esta ID es creada autom ilde{a}ticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos Personalizados: A ildeade} cualquier atributo HTML al elemento contenedor de la alerta. Introduce cada atributo en una nueva l ilde{i}nea usando el formato: nombre-atributo|valor (ej. role|alert).
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculta el bloque de alerta en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque de alerta en dispositivos tableta.
- Ocultar en M ilde{o}vil: Oculta el bloque de alerta en dispositivos m ilde{o}viles.
Efectos de Animación:
- Animaci ilde{o}n de Entrada: Elige entre varios efectos de animaci ilde{o}n que se reproducen cuando la alerta aparece en pantalla. Las opciones incluyen Rebote, Fundido de Entrada, Zoom de Entrada, Rotaci ilde{o}n de Entrada y muchas m ilde{a}s. Esto atrae la atenci ilde{o}n inmediata a tus mensajes importantes.
La pesta ilde{a}a Avanzado proporciona amplias opciones de estilo, incluyendo tipograf ilde{a}a, colores, espaciado y efectos de animaci ilde{o}n.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Alerta y personalizar su apariencia, aseg ilde{u}rate de guardar tu trabajo.
ext{¡Has a ilde{ade}do con ext{ ilde{e}xito} un bloque de Alerta a tu p ilde{a}gina! Este potente bloque te ayuda a entregar informaci ilde{o}n importante de manera efectiva y a captar la atenci ilde{o}n del visitante con mensajes llamativos y codificados por colores. Experimenta con diferentes tipos de alertas, estilos de plantillas y colores personalizados para crear alertas que se ajusten a tu marca y comuniquen tu mensaje claramente.