Para crear un texto relleno con una imagen animada con Divi necesitamos los siguientes recursos:
Con las herramientas de Divi es muy fácil crear algo tan complejo como un texto que tenga dentro una imagen, y que esta imagen a su vez esté animada.
Es algo que puede resultar útil en grandes titulares ya que es un recurso que resulta muy atractivo y llama mucho la atención de quien visita el sitio web.
Vamos a verlo.
Dentro de una nueva sección regular vamos a añadir una fila con estructura de dos columnas.
Antes de agregar módulos, abrimos los ajustes de la sección y actualizamos el color de fondo y el relleno de la siguiente manera:
Una vez hechos estos ajustes en la sección, abrimos los ajustes de la fila y lo configuramos así:
Es importante establecer la separación entre columnas en 1 y el ancho en 100% porque usaremos la unidad de longitud vw para nuestro texto. Dado que la unidad de longitud de vw se basa en el ancho del navegador, es importante que los contenedores principales (sección y fila) tengan el mismo ancho que el navegador, que es 100%.
Nuestro texto con imagen se va a insertar en la columna de la izquierda (columna 1).
Necesitamos primero definirle un color de fondo a la columna para que los modos de fusión que agreguemos a la imagen y al texto se mezclen y revelen este color.
También necesitamos configurar el desbordamiento en Oculto para que cuando animemos la imagen no veamos la imagen saliendo por afuera de la columna.
Abrimos la configuración de la columna 1 y hacemos lo siguiente:
Para crear el texto que vamos a rellenar con la imagen insertamos un módulo de texto en la columna 1.
Luego agregamos una palabra al contenido del cuerpo. En este caso estamos usando una palabra de 4 letras para que se apile uniformemente para un diseño cuadrado.
A continuación, agregamos un color de fondo blanco al módulo de texto.
Le damos estilo al texto, en este caso así:
Para lograr que el texto se pueda rellenar agregamos el siguiente modo de fusión. Cuidado que en español está traducido como Guardado del módulo. Es un selector que encontramos al final de la sección Filtros o Filtrar del módulo de texto.
Hasta ahora, los cuatro ingredientes clave para lograr este efecto de texto son los siguientes:
Con el modo de fusión Pantalla, el texto negro se vuelve completamente transparente, dejando ver lo que hay detrás, que en este caso es un color de fondo.
Para agregar la imagen que va a rellenar el texto, insertamos un módulo de imagen y cargamos una imagen de aproximadamente 1700 px por 2500 px. El tamaño de la imagen es importante para que cubra toda la altura y el ancho de la columna.
Configuramos los ajustes de la imagen así:
Este modo de fusión de la imagen no es necesario para lograr el efecto de relleno de texto, pero combina la imagen con el color de fondo para que quede mejor con el diseño general.
A continuación, asignamos a la imagen una posición absoluta y un índice Z bajo para que quede detrás del módulo de texto.
Una vez que la imagen esté lista, vamos a la pestaña Avanzado y configuramos los Scroll Effects de la siguiente manera para generar la animación de la imagen:
En la pestaña de movimiento vertical:
En la pestaña de movimiento horizontal:
En la pestaña de escala:
Conviene agregar más contenido o espacio arriba y abajo de la sección para poder verificar el resultado hasta ahora.
Si deseas utilizar un fondo negro todo lo que necesitas hacer es actualizar las tres opciones clave que componen el efecto de máscara de texto.
Abrimos la configuración del módulo de texto y cambiamos lo siguiente:
Y éste es el resultado.
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…