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.
Subimos la foto que queremos usar de fondo pulsando en “Subir” (o en “Biblioteca de medios” si ya la tenemos en nuestro Wordpress).
Queremos que la imagen ocupe todo el ancho de la pantalla, por lo que en las opciones de alineación seleccionamos “Ancho Completo”.
Dentro de las opciones del bloque “Fondo” que hemos creado, activamos la opción “Fondo Fijo”. De esta forma ya
Opciones del bloque
Este bloque tiene tres opciones más para la foto que hemos usado:
- Con el “Minimun Height of Cover” podemos especificar la altura mínima de la imagen.
- En “Superposición” podemos seleccionar el color sólido (o degradado) que queremos superponer a la imagen.
- 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.
Resultado
Este es el resultado que obtenemos:
Ejemplo de efecto Parallax con Gutenberg
Como ves es muy sencillo y no hay que instalar nada.
Cargando...
