Cómo diseñar una máscara de texto con animación de fondo en el desplazamiento en Divi
Publicado: 2020-08-16Los diseños de Text Mask son sorprendentemente fáciles de crear usando las opciones integradas de Divi. El constructor tiene todos los ingredientes para crear un efecto de máscara de texto, incluidas opciones para estilos de texto, fondos y modos de fusión. De hecho, hemos creado diseños de máscaras de texto usando modos de fusión antes. Pero, con los efectos de desplazamiento, podemos llevar los diseños de máscaras de texto a un nivel completamente nuevo.
En este tutorial, le mostraremos cómo diseñar una máscara de texto con animación de fondo en el desplazamiento en Divi. El diseño es único y el efecto de desplazamiento realmente lo hace cobrar vida.
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido a los diseños que crearemos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón Importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Diseñar una máscara de texto con animación de fondo en Divi
Añadir fila
Para comenzar, agregue una fila de dos columnas a la sección regular predeterminada.
Actualizar la configuración de la sección
Antes de agregar módulos, abra la configuración de la sección y actualice el color de fondo y el relleno de la siguiente manera:
- Color de fondo: # 750046
- Relleno: 0px arriba, 0px abajo
Actualizar la configuración de la fila
Una vez realizada la configuración de la sección, abra la configuración de la fila y actualice la siguiente configuración de diseño:
- Ancho de la canaleta: 1
- Ancho: 100%
- Ancho máximo: 100%
- Relleno: 0px arriba, 0px abajo
Es importante establecer el ancho de la canaleta en 1 y el ancho en 100% porque usaremos la unidad de longitud vw para nuestro texto al crear el diseño de la máscara de 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%.
Actualizar la configuración de la columna 1
Nuestra máscara de texto e imagen se agregarán a la columna de la izquierda (columna 1). Necesitamos agregar un color de fondo a la columna para que los modos de fusión que agreguemos a la imagen y al texto se mezclen / revelen este color. También necesitamos configurar el desbordamiento en oculto para que cuando animamos la imagen en el desplazamiento, no veamos la imagen desbordante fuera de la columna.
Abra la configuración de la columna 1 y actualice lo siguiente:
- Color de fondo: # 750046
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Crear la máscara de texto
Para crear la máscara de texto, agregue un módulo de texto a la columna 1.
El contenido del texto
Luego agregue la palabra "divi" al contenido del cuerpo. Estamos usando una palabra de 4 letras para que se apile uniformemente para un diseño cuadrado.
Fondo de texto
A continuación, agregue un color de fondo blanco al módulo de texto.
- Color de fondo: #ffffff
Diseño de texto
Luego, en la pestaña de diseño, actualice lo siguiente:
- Fuente de texto: Rubik Mono One
- Estilo de fuente de texto: TT
- Color del texto del texto: # 000000
- Texto Tamaño del texto: 25vw (escritorio), 50vw (tableta y teléfono)
- Altura de la línea de texto: 0.8em
- Alineación de texto: centro
- Acolchado: 8vw superior, 8vw inferior
Modo de fusión de texto
Para completar el diseño de la máscara de texto, agregue el siguiente modo de fusión:
- Modo de fusión: pantalla
Hasta ahora, los cuatro ingredientes clave para este efecto de máscara de texto son los siguientes:
- Fondo de columna
- Fondo de texto blanco
- Texto negro
- Modo de fusión de pantalla en el módulo de texto
El modo de mezcla de pantalla multiplica las capas y produce una versión más clara de la mezcla. Con el modo de fusión de pantalla, el texto negro se vuelve completamente transparente, revelando lo que hay detrás, que en este caso es un color de fondo.
Agregar imagen de fondo
Para agregar la imagen de fondo a la máscara de texto, cree un nuevo módulo de imagen y cargue una imagen de aproximadamente 1700 px por 2500 px. El tamaño de la imagen es importante para que la imagen cubra la altura y el ancho de la columna.
Diseño de imagen
Luego actualice la siguiente configuración de diseño:
- Forzar ancho completo: SÍ
- Modo de fusión: pantalla
Este modo de fusión no es necesario para el efecto de máscara de texto, pero combina la imagen con el color de fondo para que coincida mejor con el diseño.
Posición de la imagen
A continuación, asigne a la imagen una posición absoluta y actualice el índice Z para que quede detrás del módulo de texto.
- Posición: Absoluto
- Índice Z: -1
Efectos de desplazamiento de imágenes
Una vez que el diseño de la imagen esté listo, vaya a la pestaña avanzada y actualice las opciones del efecto de desplazamiento de la siguiente manera:
En la pestaña Movimiento vertical,
- Compensación inicial: -1 (al 0%)
- Desplazamiento medio: 0 (al 50%)
- Compensación final: 1 (al 100%)
En la pestaña Movimiento horizontal,
- Desplazamiento inicial: -0,5 (al 0%)
- Desplazamiento medio: 0 (al 50%)
- Desplazamiento final: 0,5 (al 100%)
En la pestaña Escalar hacia arriba y hacia abajo,
- Escala inicial: 110% (al 0%)
- Escala media: 125% (al 50%)
- Escala final: 140% (al 100%)
Resultado
Puede agregar un margen superior e inferior a la sección para que pueda verificar el resultado hasta ahora.
Crear el texto simulado
En la columna de la derecha, agregue un nuevo módulo de texto.
Actualice el contenido del cuerpo con lo siguiente:
<h2>Lorem Ipsum Dolor Sit Amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
Luego, actualice el anuncio de configuración de diseño de texto a continuación:
- Color del texto: claro
- Título 2 Fuente: Rubik
- Encabezado 2 Tamaño del texto: 4vw
- Acolchado (escritorio): 16vw arriba, 5vw a la izquierda, 5vw a la derecha
- Acolchado (tableta): 16vw arriba, 16vw abajo, 5vw izquierda, 5vw derecha
Resultado
Ajustes opcionales
Fondo negro / texto blanco
Si desea utilizar un fondo negro para la máscara de texto, todo lo que necesita hacer es actualizar las tres opciones clave que componen el efecto de máscara de texto.
Abra la configuración del módulo de texto y cambie lo siguiente:
- Color de fondo: # 000000 (negro)
- Color del texto del texto: #ffffff (blanco)
- Modo de fusión: multiplicar
Y aqui esta el resultado…
Imagen PNG giratoria
Y puede cambiar la imagen animada a una que tenga un fondo transparente (PNG) para obtener otro efecto genial. Aquí hay un ejemplo de una imagen PNG que usé con un efecto de desplazamiento giratorio agregado.
Resultados finales
Aquí hay otro vistazo a todos los diseños.
Pensamientos finales
Con suerte, estos diseños de máscara de texto con animación de fondo en el desplazamiento le darán la ventaja creativa que su sitio ha estado necesitando. Una vez que conozca los ingredientes básicos para crear el efecto de enmascaramiento de texto, no tendrá problemas para crear innumerables versiones de este diseño que se adapten a sus necesidades.
Espero tener noticias tuyas en los comentarios.
¡Salud!