Usando efectos parallax con imágenes en tu WordPress

A todos nos gusta usar imágenes en nuestros artículos. De hecho, deberíamos de usar varias imágenes según la longitud del mismo. Pero, ¿y si le diéramos efectos a esas imágenes? Estaríamos hablando ya de marcar diferencia de estilo simplemente usando imágenes. Bueno, mowomo bloques os trae la solución de la mano de un bloque para el editor de Gutenberg.

Hablando de mowomo bloques

mowomo bloques no es más que un plugin completamente gratuito que nos permitirá crear, entre otras cosas, imágenes con diversos efectos y plantillas. Para usarlo, solo necesitaríamos seguir los siguientes pasos:

• Nos dirigimos al panel de administración de nuestro WordPress.
• Pulsamos en la opción de «plugins» dentro del menú lateral.
• Hacemos click en «añadir nuevo».
• En «buscar plugins» introduciremos las palabras «mowomo bloques».
• Pulsaremos en instalar y luego en activar, dentro de la tarjeta del plugin.
• Creamos una nueva entrada y ya estaremos preparados para usar nuestro bloque de imagen optimizada.

Creando imágenes con parallax

Empecemos buscando entre nuestros bloques el siguiente: imagen optimizada. Este bloque tiene diversas configuraciones, entre ellas, las siguientes:

• Botón de efecto parallax situado justo arriba del bloque. Este botón activará/desactivará el efecto de parallax de la imagen.
• Botón de cambiar imagen situado justo arriba del bloque. Simplemente cambia la imagen del bloque.
• Animaciones de transición en la pestaña de «animaciones» del inspector. Cualquiera de las opciones hará que la imagen, al verse en la pantalla del post, entre con una animación de salida.
• Plantillas de estilos que añaden un texto por encima a la imagen, respaldado por un fondo de color negro translúcido. Lo podremos encontrar en la pestaña «plantillas» del inspector.
• Con el efecto de parallax activo, tendremos en el inspector la pestaña de «estilos», que nos permitirá ajustar la altura de la imagen a la que queramos. De no estar el efecto de parallax activo, la imagen se ajustará a sus dimensiones naturales.

Ejemplos de uso

Ahora veamos algunos ejemplos de lo que podemos hacer con el bloque «Imagen optimizada» de mowomo bloques.

Imagen con transición

Efecto de parallax suave y transición

Bueno, ya lo habéis visto. ¿Qué hacéis que no estáis corriendo a descargar y activar el plugin? Déjanos un comentario con tu opinión sobre el plugin si te gusta y no dudes en preguntarnos lo que sea sobre el mismo. ¡Hasta otra!