Si quieres resaltar alguna información importante o simplemente llamar la atención sobre alguna frase concreta, el bloque de aviso en línea debe ser tu elección.
Tabla de contenidos
Varios usos del bloque de aviso en línea
Los usos más frecuentes para este tipo de bloques son; a partir de un código de colores, y en función de la naturaleza del mensaje, crear un sistema de avisos.
Por ejemplo, para notas informativas un bloque con un fondo de color verde o también azul. Para algún mensaje que sea un aviso de cierta urgencia, puedes utilizar un color naranja. Y para mensajes de advertencia o de peligro, un fondo de color rojo. A continuación te pongo algunos ejemplos.
¿Cómo crear un bloque de «aviso en línea» con Atomic Blocks?
Igual que los otros bloques, incluso como los bloques de Gutenberg, hay 3 formas de añadirlo.
- Con el icono +
de la barra de herramientas superior. - Escribiendo / y el nombre del bloque, en este caso Notice, el que tiene el icono de la hoja de papel con una esquina doblada.
- La tercera forma es pulsando el icono
del bloque y buscando por el nombre.
Configuración del bloque «Aviso en línea»
Cuando tienes el bloque insertado se ve así:
Como puedes ver, en el apartado donde figura «Notice Title» tienes que poner el título de tu bloque, un texto que llame la atención.
En el recuadro blanco, insertas el texto propiamente del mensaje que quieres mostrar.
Tienes todas las opciones comunes de los bloques, eso es el centrado, y el formato de texto, ya sea negrita, cursiva, subrayado, tachado…
Opciones de bloque
Las opciones de configuración que te ofrece este bloque son la de ajustar el tamaño de letra tanto del título como la del texto. También puedes cambiar el color por separado del título y del texto del bloque.
Otra de las opciones interesantes es poder dar la posibilidad al usuario de poder cerrar el bloque cuando lo ha leído. Esto es posible gracias a la X típica de cierre de ventana que todos conocemos.
Opciones Responsive y Avanzadas
Gracias al plugin EditorsKit, puedes tener unas opciones responsive y avanzadas para móviles y tablets muy atractivas. Desde ocultar los bloques independientemente, sea escritorio, tablet o móvil, hasta el centrado en dispositivos móviles.
Por la parte de opciones avanzadas, además de añadir la clase CSS que tienen todos los bloques de Gutenberg, permite ver el bloque si el usuario está registrado o no.
Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!
Deja una respuesta