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

En este video vemos cómo mostrar una imagen con animación adentro de un texto con Divi.

WordPress es Mejor con Divi

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

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

text mask with background animation

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

text mask with background animation

  • Relleno: 0px arriba, 0px base.

text mask with background animation

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

text mask with background animation

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

text mask with background animation

Creando el texto

Para crear el texto que vamos a rellenar con la imagen insertamos un módulo de texto en la columna 1.

text mask with background animation

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.

text mask with background animation

Fondo del texto

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

  • Color de fondo: #ffffff (blanco).

text mask with background animation

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

text mask with background animation

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

text mask with background animation

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.

text mask with background animation

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.

text mask with background animation

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.

text mask with background animation

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

text mask with background animation

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%

text mask with background animation

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.

text mask with background animation

Y éste es el resultado.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Todas las Guías

los Módulos Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *