Cómo crear un efecto de desplazamiento de texto con barra en Divi

Crear un efecto de texto cortante es una forma divertida de darle vida a su contenido. La idea es dar la ilusión de que el texto se reduce a la mitad y se separa a medida que el usuario se desplaza hacia abajo en la página. En este tutorial, le mostraremos lo fácil que es construir este diseño en Divi.

Empecemos.

Vistazo

Aquí hay un vistazo rápido al diseño 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.

Descarga los archivos

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.

DESCARGAR

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:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Diseño de la sección

En esta primera parte, vamos a diseñar el fondo de la sección para nuestro diseño de sección.

Color de fondo

Para comenzar, agregue un color de fondo a la sección predeterminada de la siguiente manera:

• Color de fondo degradado a la izquierda: # 29c4a9
• Color de fondo degradado a la derecha: # 2b87da

Divisor

Debajo de la pestaña de diseño, agregue un divisor superior de la siguiente manera:

• Estilo de divisor superior: ver captura de pantalla
• Color del divisor: blanco
• Flip divisor: vertical

Espaciado

Para ayudar a probar los efectos de desplazamiento para el diseño, agreguemos un margen temporal en la parte superior e inferior de la sección. Siempre podemos eliminarlo al agregar la sección a otra página. También necesitamos agregar la misma cantidad de relleno en la parte superior e inferior.

• Margen: 80vh arriba, 80vh abajo
• Relleno: 200 px arriba, 200 px abajo

Sombra de caja para espacio adicional en la parte inferior

Para obtener un color / espacio de diseño adicional en la parte inferior de la sección sin comprometer el espacio real de la sección, podemos agregar una sombra de cuadro de la siguiente manera:

• Box Shadow: ver captura de pantalla
• Posición horizontal de la sombra del cuadro: 0px
• Posición vertical de la sombra del cuadro: 100px
• Color de sombra: # 2b87da

Visibilidad oculta

Luego configure el desbordamiento en oculto para que nuestros efectos de desplazamiento no se vuelvan visibles cuando se mueva fuera de la sección.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Parte 2: Creación del efecto de texto de corte

En la siguiente parte, crearemos el efecto de texto de barra. Vamos a apilar dos filas una encima de la otra, cada una con un módulo de texto que tiene el mismo contenido de texto. Luego, usando un margen negativo, empujaremos el texto superior hacia abajo, ocultando la mitad inferior del texto. Luego usaremos un margen negativo para empujar el texto inferior hacia arriba, ocultando la mitad superior del texto. Una vez hecho esto, podemos mover la fila / columna superior usando el efecto de desplazamiento para crear la ilusión del texto que se está recortando.

Agregar fila para la mitad superior del texto

Primero, agreguemos una fila de una columna.

Luego actualice la configuración de la fila de la siguiente manera:

• Ancho de la canaleta: 1
• Relleno: 0px arriba, 0px abajo

Visibilidad de columna oculta

A continuación, abra la configuración de la columna y actualice el desbordamiento a oculto:

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar módulo de texto

En la columna agregue un nuevo módulo de texto.

Contenido del texto

En el área del cuerpo del contenido, agregue la palabra "Barra oblicua".

Diseño de texto

Vaya a la pestaña de diseño y actualice el estilo del texto de la siguiente manera:

• Fuente de texto: B612 Mono
• Peso de la fuente del texto: negrita
• Estilo de fuente de texto: TT
• Color del texto del texto: #ffffff
• Texto Tamaño del texto: 150 px (escritorio), 100 px (tableta), 60 px (teléfono)
• Espaciado de letras de texto: 0.1em
• Alineación de texto: centro

Margen de texto

Aquí debemos asegurarnos y agregar un margen inferior que sea exactamente la mitad del tamaño del texto.

• Margen: -75px inferior (escritorio), -50px (tableta), -30px (teléfono)

Agregar fila para la mitad inferior del texto

Fila duplicada

Una vez que la primera fila con el texto esté en su lugar, duplique la fila completa para crear la fila inferior.

Actualizar el margen del módulo de texto

Luego actualice el margen del módulo de texto en la fila duplicada con un margen superior negativo en lugar de un margen inferior para ocultar la mitad superior del texto.

• Margen: -75px superior (escritorio), -50px superior (tableta), -30px superior (teléfono)

Agregar efectos de desplazamiento a la columna de la fila superior

A continuación, estamos listos para agregar el efecto de desplazamiento a la columna de la fila superior. No podemos agregar el efecto de desplazamiento al módulo de texto porque el texto se ocultaría debido al valor oculto de desbordamiento de la columna que oculta la parte inferior del texto.

Abra la configuración de la columna para la fila superior y actualice lo siguiente:

Debajo de la pestaña de movimiento vertical…

• Habilitar movimiento vertical: SÍ
• Desplazamiento inicial: 0 (al 0%)
• Desplazamiento medio: 0 (al 50%)
• Compensación final: -.02 (al 75%)

En la pestaña Movimiento horizontal ...

• Habilitar movimiento horizontal: SÍ
• Desplazamiento inicial: 0 (al 0%)
• Desplazamiento medio: 0 (al 50%)
• Compensación final: 0,2 (al 75%)

En la pestaña Rotación ...

• Habilitar rotación: SÍ
• Rotación inicial: 0 (al 0%)
• Rotación media: 0 (al 50%)
• Rotación final: 1 grado (al 75%)

¡Ahora nuestro efecto de texto de corte está completo!

Parte 3: Creación del divisor móvil

Con nuestro efecto de texto de corte completo, podemos agregar un elemento divertido adicional: ¡un pequeño divisor volador que atraviesa el texto! Para crear esto, usaremos un módulo divisor que se mueve por el centro de la página de la sección en el lugar exacto donde se divide el módulo de texto.

He aquí cómo hacerlo.

Añadir fila

Agregue una fila de una columna debajo de la segunda fila.

Agregar módulo divisor

En la columna, agregue un nuevo módulo divisor.

Fondo divisor

Luego seleccione NO para mostrar el divisor. En su lugar, dé al divisor un color de fondo de la siguiente manera:

• Gradiente de fondo Color a la izquierda: transparente
• Gradiente de fondo Color derecho: # 29c4a9

Transformar escala

Luego actualice la altura y muévala hacia la izquierda usando la opción de traducción de transformación.

• Alto: 4px
• Transformar trasladar eje X: -100%

Efecto de desplazamiento

Ahora agregue el efecto de desplazamiento para mover el divisor hacia la derecha.

Debajo de la pestaña de movimiento horizontal ...

• Habilitar movimiento horizontal: SÍ
• Compensación inicial: -18 (al 25%)
• Desplazamiento medio: 0 (al 50%)
• Compensación final: 13 (al 75%)

Configuración de filas

Para asegurarnos de que el divisor "barra" a través del centro del texto, necesitamos actualizar la configuración de la fila de la siguiente manera:

• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 0px abajo
• Posición: Absoluto
• Ubicación: centro izquierda
• Índice Z: 9

Ahora el divisor se desplazará de izquierda a derecha pasando por la mitad del texto.

Parte 4: Agregar el texto del cuerpo

Para esta última parte, vamos a agregar un bloque de texto para completar el diseño.

Añadir fila

Agregue una nueva fila de una columna debajo de la fila con el divisor.

Agregar módulo de texto

Luego agregue un nuevo módulo de texto a la fila.

Contenido del texto

Luego pegue el siguiente HTML en el área del cuerpo:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

Diseño de texto

En la pestaña de diseño, actualice lo siguiente:

• Color del texto del texto: #ffffff
• Color del texto del enlace: # 121212
• Tamaño del texto del enlace: 20px

Configuración de filas

Abra la configuración de la fila principal y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho máximo: 400px
• Posición: Absoluto
• Ubicación: centro inferior
• Desplazamiento vertical: 20px (escritorio y tableta), -25px (teléfono)

Resultado final

Aquí esta el resultado final.

Pensamientos finales

Para este diseño, es importante mantener el texto en una línea en todos los dispositivos para que esté limitado a la cantidad de texto que se cortará. Pero esta técnica de efecto de desplazamiento de barra se puede aplicar a más que solo texto. ¡También puedes cortar fácilmente las imágenes!

Espero tener noticias tuyas en los comentarios.

¡Salud!