Para crear un texto relleno con una imagen animada con Divi necesitamos los siguientes recursos:

• Cómo Instalar Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.
• Módulo Texto de Divi.
• Módulo Imagen de Divi.

¿Cómo Rellenar un Texto con una Imagen Animada con Divi?

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.

Cómo hacer un texto relleno con una imagen animada paso a paso

Añadir la fila

Dentro de una nueva sección regular vamos a añadir una fila con estructura de dos columnas.

Configurar los ajustes de la sección

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:

• Color de Fondo: #750046

• Relleno: 0px arriba, 0px base.

Configurar los ajustes de la fila

Una vez hechos estos ajustes en la sección, abrimos los ajustes de la fila y lo configuramos así:

• Espacio entre columnas: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 0px base

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%.

Configurar los ajustes de la columna 1

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:

• Color de fondo: #750046
• Desbordamiento horizontal: Oculto
• Desbordamiento vertical: Oculto

Creando el texto

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.

Fondo del texto

A continuación, agregamos un color de fondo blanco al módulo de texto.

• Color de fondo: #ffffff (blanco).

Diseño del texto

Le damos estilo al texto, en este caso así:

• Fuente: Rubik Mono One
• Estilo: TT (mayúsculas)
• Color: #000000 (negro).
• Tamaño: 25vw (escritorio), 50vw (tablet y teléfono)
• Altura: 0.8em
• Alineación: centrado

• Relleno: 8vw arriba, 8vw base

Modo de fusión

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.

• Modo de fusión: Pantalla.

Hasta ahora, los cuatro ingredientes clave para lograr este efecto de texto son los siguientes:

1. Color de fondo de la columna.
2. Fondo del módulo de texto Blanco.
3. Texto Negro.
4. Modo de fusión Pantalla.

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.

Agregar imagen 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í:

• Forzar ancho completo: Sí.
• Modo de fusión: Pantalla.

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.

Posición de la imagen

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.

• Position: Absoluto.
• Indice Z: -1

Efectos de desplazamiento de imágenes

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:

• Inicio: -1
• Medio: 0
• Final: 1

En la pestaña de movimiento horizontal:

• Inicio: -0.5
• Medio: 0
• Final: 0.5

En la pestaña de escala:

• Inicio: 110%
• Medio: 125%
• Final: 140%

Resultado

Conviene agregar más contenido o espacio arriba y abajo de la sección para poder verificar el resultado hasta ahora.

Fondo negro

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:

• Color de fondo: #000000 (negro).
• Color de texto: #ffffff (blanco).
• Modo: Múltiple.

Y éste es el resultado.