Inblock Smooth Block es un plugin de WordPress que te permite añadir fácilmente microinteracciones elegantes a tus bloques de Gutenberg. Así puedes crear sitios web interactivos sin esfuerzo y sin escribir código.
Filosofía
- Ecodiseño: este plugin está concebido para ser lo más ligero posible: sin JavaScript en el front-end y sin carga de imágenes (se utilizan iconos Unicode en su lugar).
- Compatible con todos los temas: este plugin está diseñado para enriquecer los bloques de Gutenberg de forma aditiva y ser lo más compatible posible con los temas.
- Accesibilidad: diseñado para cumplir al máximo con los criterios de accesibilidad.
Descarga
- Última versión: Inblock-smooth-blocks v.0.8.1
Microinteracciones disponibles
Bloque de botón
En el bloque de botón, el efecto Animated Icons añade un icono animado al botón. Al pasar el cursor, el icono se desplaza ligeramente. La interacción es compatible con los distintos estilos de botón.
La opción Color permite cambiar el color del icono animado.
En el bloque de botón, el efecto Hover shadow muestra una sombra similar a un borde al pasar el cursor sobre el botón. La interacción es compatible con los distintos estilos de botón. Las opciones te permiten elegir el color y el grosor de la sombra añadida, así como escoger entre dos estilos visuales: border y rise.
Bloque de navegación
En el bloque de navegación, el efecto Smooth Rotation añade una animación de rotación al chevrón que indica los submenús cuando se pasa el cursor y aparece el submenú.
Bloque de grupo
El efecto Underline reveals añade un efecto de subrayado resaltado al pasar el cursor sobre los enlaces. El efecto se aplica a todos los enlaces contenidos en el bloque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Si la opción Keep underline está desactivada, el subrayado de los enlaces desaparece por defecto y solo aparece al pasar el cursor. La opción Color permite elegir el color que quieras para el subrayado.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Cómo utilizarlo
Desde el editor, cuando selecciones un bloque para el que haya una animación disponible, encontrarás un nuevo panel Inblock Effects en la pestaña Styles del bloque seleccionado. Desde este panel podrás activar, desactivar y configurar las animaciones disponibles.
Soporte
Si necesitas ayuda, tienes alguna pregunta o quieres hacernos llegar algún comentario, no dudes en ponerte en contacto con nosotros.
Descarga