Crear un efecto de texto recortado es una forma divertida de darle vida a tu contenido. La idea es dar la ilusión de que el texto se corta por 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.
Aquí hay un vistazo rápido al diseño 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.
Parte 1: Diseño de la sección
En esta primera parte, vamos a diseñar el fondo de la sección para el diseño de nuestra sección.
Color de fondo
Para comenzar, agregue un color de fondo a la sección predeterminada de la siguiente manera:
- Fondo degradado Color izquierdo: #29c4a9
- Fondo degradado Color derecho: #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
- Voltear el 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 sacarlo al añadir 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 cuadro para espacio inferior adicional
Para obtener algo de 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:
- Sombra de caja: ver captura de pantalla
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 100 px
- Color de sombra: #2b87da
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: Creando el Efecto de Texto Cortante
En la siguiente parte, vamos a crear el efecto de texto recortado. Vamos a apilar dos filas una encima de la otra, cada una con un módulo de texto que contiene 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 de que el texto está cortado.
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 del canalón: 1
- Relleno: 0px arriba, 0px abajo
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 de texto de la siguiente manera:
- Fuente de texto: B612 Mono
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: TT
- Texto Color del texto: #ffffff
- Texto Tamaño del texto: 150 px (escritorio), 100 px (tableta), 60 px (teléfono)
- Espaciado entre letras de texto: 0,1 em
- 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: -75 px inferior (escritorio), -50 px (tableta), -30 px (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 toda la fila para crear la fila inferior.
Actualizar 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: -75 px arriba (escritorio), -50 px arriba (tableta), -30 px arriba (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 en 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Í
- Compensación inicial: 0 (al 0 %)
- Compensación media: 0 (al 50 %)
- Compensación final: -0,02 (al 75 %)
En la pestaña Movimiento horizontal…
- Habilitar movimiento horizontal: SÍ
- Compensación inicial: 0 (al 0 %)
- Compensación media: 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 recortado está completo!
Parte 3: Crear el divisor móvil
Con nuestro efecto de texto cortante completo, podemos agregar un elemento divertido adicional: ¡una pequeña división voladora que corta el texto! Para crear esto, vamos a utilizar un módulo divisor que se mueve por el centro de la página de la sección en el lugar exacto en el que se divide el módulo de texto.
Aquí está 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 del divisor
Luego seleccione NO para mostrar el divisor. En su lugar, dale al divisor un color de fondo de la siguiente manera:
- Degradado de fondo Color izquierdo: transparente
- Degradado de fondo Color derecho: #29c4a9
Escala de transformación
Luego actualice la altura y muévala hacia la izquierda usando la opción de transformación y traducción.
- Altura: 4px
- Transformar Traducir Eje X: -100%
Efecto de desplazamiento
Ahora agregue el efecto de desplazamiento para mover el divisor a la derecha.
Debajo de la pestaña de movimiento horizontal…
- Habilitar movimiento horizontal: SÍ
- Compensación inicial: -18 (al 25 %)
- Compensación media: 0 (al 50 %)
- Compensación final: 13 (al 75 %)
Configuración de fila
Para asegurarnos de que el divisor «corta» el 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: Absoluta
- Ubicación: centro izquierda
- Índice Z: 9
Ahora el divisor viajará de izquierda a derecha cortando el medio 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 código HTML en el área del cuerpo:
|
01
02
|
<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:
- Texto Color del texto: #ffffff
- Color del texto del enlace: #121212
- Tamaño del texto del enlace: 20px
Configuración de fila
Abra la configuración de la fila principal y actualice lo siguiente:
- Ancho del canalón: 1
- Ancho máximo: 400px
- Posición: Absoluta
- Ubicación: centro inferior
- Desplazamiento vertical: 20 px (computadora de escritorio y tableta), -25 px (teléfono)
Resultado final
Aquí esta el resultado final.
Pensamientos finales
Para este diseño, es importante mantener el texto en una sola línea en todos los dispositivos para que esté limitado a la cantidad de texto que se recortará. Pero, esta técnica de efecto de desplazamiento recortado se puede aplicar a más que solo texto. ¡También puedes cortar fácilmente las imágenes!
Espero escuchar de usted en los comentarios.
¡Salud!