Hoy vamos a ver cómo crear con Divi un efecto de desplazamiento dinámico donde los elementos de la página avanzan a diferentes velocidades e incluso algunos elementos permanecen fijos en la pantalla.
En la captura de pantalla de arriba se puede apreciar una página con diversos elementos (imágenes y un módulo Anuncio) distribuidos de forma libre en la página.
El objetivo es lograr que, el hacer scroll, estos elementos se desplacen de manera independiente a distintas velocidades.
Lo primero que hay que hacer es crear la página.
En este punto puede ser mejor utilizar la plantilla Blank Page para eliminar el encabezado y el pie de página globales del sitio web y poder así diseñar la página completa.
Una vez puesto un título y seleccionada la plantilla Blank Page hacemos clic en Usar Divi Builder para comenzar a diseñar.
Cuando carga el editor agrego una fila con estructura de 3 columnas que nos va a permitir organizar los diferentes elementos que va a contener la página.
Vamos a los ajustes de la fila y configuramos lo siguiente.
En Tamaño:
En Separación:
Y comenzamos añadiendo un módulo Imagen con una primera foto (la paleta) en la columna 1.
En Tamaño definimos:
En Filtros definimos un difuminado para hacer que la imagen parezca más lejos.
Y dentro de Transformar vamos a la pestaña Desplazamiento y asignamos:
La herramienta de desplazamiento nos permite ubicar fácilmente el elemento en la posición exacta en la que lo necesitamos.
Para continuar voy a insertar una segunda imagen (el helado palito) también en la columna 1. En este caso voy a utilizar la herramienta de posición para fijarla en la pantalla.
En Tamaño definimos:
Pestaña Avanzado sección Puesto:
La herramienta de posición de Divi (puesto) nos permite fijar un elemento en uno de los 9 puntos de la pantalla y luego aplicarle un desfase (vertical y horizontal) para conseguir la ubicación exacta.
Añadimos una imagen más a la columna 1 (aros).
En Tamaño definimos:
En Transformar configuramos el siguiente Desplazamiento:
Ahora voy a la columna 3 para insertar una imagen más (anillos).
En Tamaño definimos:
En Filtros definimos un difuminado para hacer que la imagen parezca más lejos.
Y dentro de Transformar vamos a la pestaña Desplazamiento y asignamos:
Debajo de la imagen anterior agregamos una más (chocolate).
En Tamaño definimos:
Pestaña Avanzado sección Puesto:
Y última imagen de la columna 3 (regalo).
En Tamaño definimos:
Y dentro de Transformar vamos a la pestaña Desplazamiento y asignamos:
Con lo que hecho hasta ahora conseguimos una página con 4 elementos que se desplazan al hacer scroll y otros 2 que se quedan siempre fijos.
Además los diferentes tamaños y difuminados que asignamos a las imágenes dan la sensación de que algunas de ellas están más lejos y otras más cerca.
Ahora agrego un módulo Anuncio en la columna 2. Este módulo va a estar fijo en el centro de la pantalla.
Fondo:
Texto:
Texto del título:
Cuerpo del texto:
Dentro de Cuerpo del texto vamos a la pestaña Enlace:
Tamaño:
Separación:
Borde:
Sombra de la caja:
Pestaña Avanzado sección Puesto:
Para asegurarnos de que el módulo Anuncio quede siempre por encima de los demás elementos de la página vamos a los ajustes de la Fila y después a los ajustes de la Columna 2.
En Indice Z indicamos: 10
Ahora voy a agregar dos secciones más a la página. Una arriba de la actual y otra debajo.
Para ir terminando vamos a agregar una sección arriba y otra abajo de un color pleno y que cubran toda la altura de la pantalla.
Para logra ésto vamos a los ajustes de la nueva sección y en Tamaño y seteamos:
Hacemos los mismo con la sección inferior.
Por último aplicamos a la sección superior un Indice Z más alto y a la sección inferior un Indice Z más bajo para que se sitúen una por encima y la otra por debajo de la sección central.
Esto que voy a hacer ahora es importante para reforzar la sensación de desplazamiento dinámico.
Voy a aplicar un efecto de scroll a las 4 imágenes que se desplazan para hacer que su desplazamiento sea un poco más rápido que las secciones azules.
Para eso seleccionamos los cuatro módulos de imagen con la selección múltiple de Divi (manteniendo presionada la tecla Ctrl o Cmd).
Dentro de los ajustes vamos a Scroll Effects y activamos el efecto Vertical Motion. Y guardamos los cambios sin más.
Para mejorar aún más la sensación de desplazamiento dinámico vamos a añadirle a la sección central un fondo con una imagen transparente que contiene unos puntos de colores.
Aplicamos al fondo la opción Usar efecto de paralaje y como método Paralaje verdadero.
Así es como queda el fondo. Esos puntos de colores son parte de una imagen transparente que aplicamos como fondo de la sección.
Al tener efecto paralaje los puntos se desplazan a una velocidad diferente del resto de los elementos.
El resultado final es el siguiente.
Una pantalla de bienvenida con fondo azul y al bajar se levanta el telón y deja ver el contenido.
El modulo central permanece fijo flotando sobre las imágenes que van pasando y los puntos del fondo, a distintas velocidades.
Y por último se cierra con otro fondo azul pero dejando a la vista el módulo central y las imágenes flotantes.
Espero que te hayan gustado. Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi.
Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…