Inicio > Blog > Usando efectos parallax con imágenes en tu WordPress

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!

Suscribete a nuestra newsletter y podrás disfrutar de contenidos, promociones y descuentos exclusivos para suscriptores.
¿Te lo vas a perder?

Palabras relacionadas: ,

Artículos que podrían interesarte:

Comentarios

Aún no hay comentarios para "Usando efectos parallax con imágenes en tu WordPress"

Deja tu comentario

He leído y acepto la política de privacidad de mowomo.com
Consiento que se publique mi comentario con los datos que he facilitado (a excepción del email)

¿Qué hacemos con tus datos?
En mowomo te solicitamos tu nombre y email (el email no lo publicamos) para identificarte entre el resto de personas que comentan en el blog.

  • Responsable de los datos: WHITE SCREEN IDEAS WORKSHOP SL.
  • Finalidad de los datos: Gestionar los comentarios y evitar el spam.
  • Legitimación: Aceptación expresa de la política de privacidad.
  • Almacenamiento de los datos: Base de datos alojada en Comvive Servidores S.L. (UE)
  • Duración: Hasta que lo solicites.
  • Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.