¿Cómo hacer Parallax con Gutenberg?

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Parallax con Gutenberg portada

El efecto Parallax es habitualmente usado en las páginas web para darlas cierto dinamismo. Es un efecto muy sencillo de hacer con Elementor y otros maquetadores. Vamos a ver como se hace con Gutenberg.

¿Qué es el efecto Parallax?

El efecto Parallax (paralaje en castellano) es un efecto por el que el fondo de la página se mueve a una velocidad diferente que el contenido. Esto nos permite añadir profundidad y movimiento al hacer scroll.

¿Cómo lo hacemos en Gutenberg?

Para conseguir este efecto en Gutenberg, vamos a usar el bloque Fondo (Cover si tienes Wordpress configurado en inglés).

En una entrada o página pulsamos el icono de añadir bloque y buscamos “Fondo”, seleccionando el bloque.

Bloque fondo

Subimos la foto que queremos usar de fondo pulsando en “Subir” (o en “Biblioteca de medios” si ya la tenemos en nuestro Wordpress).

Subimos la imagen para parallax

Queremos que la imagen ocupe todo el ancho de la pantalla, por lo que en las opciones de alineación seleccionamos “Ancho Completo”.

Ancho completo

Dentro de las opciones del bloque “Fondo” que hemos creado, activamos la opción “Fondo Fijo”. De esta forma ya

Para activar parallax marcamos fondo fijo

Opciones del bloque

Este bloque tiene tres opciones más para la foto que hemos usado:

  1. Con el “Minimun Height of Cover” podemos especificar la altura mínima de la imagen.
  2. En “Superposición” podemos seleccionar el color sólido (o degradado) que queremos superponer a la imagen.
  3. En “Opacidad” seleccionamos el nivel de opacidad que le vamos a dar al color superpuesto a la imagen. 0 es que no sobreponemos nada y 100 ocultaremos completamente la imagen.

Opciones adicionales del bloque cover

Resultado

Este es el resultado que obtenemos:

Ejemplo de efecto Parallax con Gutenberg

Como ves es muy sencillo y no hay que instalar nada.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

Deja un comentario