El bloque Alerta te permite añadir llamativos cuadros de alerta en color 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 alertas a tus páginas
Sigue estos pasos para añadir un bloque de alerta a tu página 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 Alerta se encuentra en Diseño > Avanzado y se puede arrastrar a cualquier sección de la página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque Alerta para abrir su configuración. En la pestaña Contenido, puedes personalizar el mensaje y la apariencia de la alerta.
Alerta:
- Tipo: Elija entre estilos de alerta predefinidos: Información (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 los colores apropiados para transmitir el tono adecuado del mensaje.
- Botón Descartar: Actívelo para mostrar u ocultar un botón de cierre que permite a los visitantes descartar la alerta. Habilítelo para mensajes no críticos que los usuarios puedan querer ocultar.
- Título: Introduzca el título principal de su mensaje de alerta. Debe ser conciso y llamativo.
- Descripción: Añada texto detallado para explicar su mensaje de alerta. Esto proporciona contexto e información adicional más allá del título.
- Alineación del título: Establezca la alineación horizontal del título de la alerta (izquierda, centro o derecha).
- Descripción Alinear: Establezca la alineación horizontal del texto de la descripción de la alerta.
- Tamaño de la fuente del título: Ajuste el tamaño del texto del título para garantizar que sea visible y legible.
- Tamaño de la fuente de la descripción: controle el tamaño del texto de la descripción para una legibilidad óptima.
- Etiqueta de 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: Active o desactive esta opción para mostrar u ocultar un icono junto al mensaje de alerta. Los iconos proporcionan indicaciones visuales rápidas sobre el tipo de alerta.
- Icono: Seleccione un icono personalizado para mostrar con su alerta. Elija un icono que se ajuste al propósito de su mensaje.
La pestaña Contenido le permite configurar el tipo de alerta, el contenido del mensaje, la alineación y la configuración de los iconos.
Paso 2a: Elija un estilo de plantilla
En la pestaña Plantillas, puede seleccionar entre estilos de alerta prediseñados para cambiar rápidamente el aspecto general de su cuadro de alerta.
- Elige entre cuatro diseños de plantilla diferentes, cada uno con diseños y tratamientos visuales únicos. Previsualiza cada estilo para encontrar el que mejor se adapte al diseño de tu página.
La pestaña Plantillas ofrece cuatro estilos prediseñados para personalizar rápidamente el aspecto de tu alerta.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puede personalizar la apariencia visual de su bloque de alerta:
Estilos:
- Tipografía: controla las propiedades de la fuente del título de la alerta, incluyendo la familia tipográfica, el grosor y el estilo.
- Tipografía del texto: personaliza las propiedades de la fuente para el texto de la descripción de la alerta.
- Color: Establezca el color del texto del título de la alerta.
- Descripción Color: Elija el color para el texto de la descripción de la alerta.
- Color de descartar: Establece el color del botón de descartar (icono X) que cierra la alerta.
- Fondo del título: Añade un color de fondo específico para el área del título de tu alerta.
- Color de fondo: Establece el color de fondo general para todo el cuadro de alerta.
- Sombra del texto: añade efectos de sombra al texto de la alerta para darle profundidad y facilitar su lectura. Elige entre Ninguna, Muy fina, Pequeña, Mediana, Grande, Muy grande, 2 veces más grande o Personalizada.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque de alerta (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre la alerta y los elementos circundantes.
- Relleno: Ajusta el espacio interior del cuadro de alerta (superior, derecho, inferior, izquierdo). Esto crea un espacio entre el contenido y los bordes de la alerta.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque de alerta. 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ñada cualquier atributo HTML al elemento contenedor de la alerta. Introduzca cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, role|alert).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de alertas en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque de alertas en dispositivos tableta.
- Ocultar en dispositivos móviles: Ocultar el bloque de alertas en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elija entre varios efectos de animación que se reproducen cuando la alerta aparece en pantalla. Las opciones incluyen Rebotar, Aparecer gradualmente, Acercar, Girar y muchas más. Esto atrae inmediatamente la atención hacia sus mensajes importantes.
La pestaña Avanzado ofrece amplias opciones de estilo, incluyendo tipografía, colores, espaciado y efectos de animación.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Alerta y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de alerta a tu página! Este potente bloque te ayuda a transmitir información importante de forma eficaz y a captar la atención de los visitantes con mensajes llamativos y codificados por colores. Prueba diferentes tipos de alertas, estilos de plantillas y colores personalizados para crear alertas que se adapten a tu marca y comuniquen tu mensaje con claridad.