Los diseños de máscaras de texto son sorprendentemente fáciles de crear usando Divi y sus opciones integradas. El constructor tiene todos los ingredientes para crear un efecto de máscara de texto que incluye 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 anteriormente. 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 desplazamiento en Divi. El diseño es único y el efecto de desplazamiento realmente lo hace cobrar vida.
¡Empecemos!
Aquí hay un vistazo rápido a los diseños que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Diseñando 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 normal predeterminada.
Actualizar la configuración de la sección
Antes de agregar cualquier módulo, 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 configuración de fila
Una vez finalizada la configuración de la sección, abra la configuración de la fila y actualice la siguiente configuración de diseño:
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
- Relleno: 0px arriba, 0px abajo
Es importante establecer el ancho de medianil en 1 y el ancho en 100% porque vamos a usar 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 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 el texto mezclen/revelen este color. También debemos establecer el desbordamiento en oculto para que cuando animemos la imagen en el desplazamiento, no veamos la imagen desbordada 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
Creación de 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 apilen 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 del texto: Rubik Mono One
- Texto Estilo de fuente: TT
- Texto Color del texto: #000000
- Texto Tamaño del texto: 25vw (escritorio), 50vw (tableta y teléfono)
- Altura de línea de texto: 0,8 em
- Alineación de texto: centro
- Acolchado: 8vw arriba, 8vw abajo
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 la columna
- Fondo de texto blanco
- Texto negro
- Modo de fusión de pantalla en el módulo de texto
El modo de fusión 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 fusiona 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: Absoluta
- Índice Z: -1
Efectos de desplazamiento de imagen
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,
- Desplazamiento inicial: -1 (al 0 %)
- Compensación media: 0 (al 50 %)
- Compensación final: 1 (al 100 %)
En la pestaña Movimiento horizontal,
- Compensación inicial: -0.5 (al 0%)
- Compensación media: 0 (al 50 %)
- Compensación 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 el momento.
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:
|
01
02
|
<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> |
A continuación, actualice el anuncio de configuración de diseño de texto siguiente:
- Color del texto: Claro
- Encabezado 2 Fuente: Rubik
- Título 2 Tamaño del texto: 4vw
- Acolchado (escritorio): 16vw arriba, 5vw izquierda, 5vw 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)
- Texto Color 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 (un 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 escuchar de usted en los comentarios.
¡Salud!