Cómo combinar superposiciones con las opciones adhesivas de Divi para crear transiciones sin esfuerzo

A medida que la tecnología sigue evolucionando, el diseño también evoluciona. Más que nunca, puede encontrar sitios web que lo dejan asombrado y preguntándose cómo se han creado. Aunque los sitios web que tienen interacciones de desplazamiento no son para todos los tipos de negocios, saber cómo hacer un esfuerzo adicional es particularmente útil para dejar una buena impresión. Con Divi, muchas cosas ya son posibles sin tener que tocar una sola línea de código. El tutorial de hoy te ayuda a comprender Divi desde otra perspectiva. Le mostraremos cómo combinar las opciones pegajosas de Divi con otras configuraciones integradas para crear transiciones sin esfuerzo. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, 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!

1. Recrear la estructura del diseño

Agregar nueva sección

Espaciado

En la primera parte de este tutorial, nos centraremos en recrear la estructura de diseño dentro de Divi. Luego, en la segunda parte, dedicaremos tiempo a revisar todas las opciones adhesivas para lograr el efecto que puede notar en la vista previa de esta publicación. Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección, vaya a la pestaña de diseño y agregue algo de relleno en la parte inferior.

• Acolchado inferior: 100vh

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila, vaya a la pestaña de diseño y cambie la configuración de tamaño en consecuencia:

• Ancho: 90%
• Ancho máximo: 100%

Índice Z

Asigne un índice az a esta fila también.

• Índice Z: 1

Agregar módulo de imagen a la columna

Dejar el cuadro de imagen vacío

Es hora de agregar módulos, comenzando con un módulo de imagen. Deje el cuadro de contenido vacío.

Usar imagen de fondo en su lugar

Y use una imagen de fondo de su elección en su lugar.

• Tamaño de la imagen de fondo: Portada

Dimensionamiento

A continuación, cambie el ancho del módulo.

• Ancho: 100%

Espaciado

Luego, aplique un relleno personalizado superior e inferior a la configuración de espaciado.

• Acolchado superior: 40vh
• Acolchado inferior: 40vh

Agregar módulo de texto a la columna

Agregar contenido H2

Pasemos al siguiente módulo, que es un módulo de texto que contiene contenido H2 de su elección.

Configuración de texto H2

Cambie la configuración de texto H2 del módulo en consecuencia:

• Fuente del encabezado 2: Montserrat
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: #ffffff
• Tamaño del texto del encabezado 2:
  • Escritorio: 10vw
  • Tableta: 14vw
  • Teléfono: 15vw
• Espacio entre letras del encabezado 2: -0.5vw

Dimensionamiento

Asegúrese de que el módulo también sea "100%".

• Ancho: 100%

Posición

Y reposicione el módulo en la pestaña avanzada.

• Posición: Absoluto
• Ubicación: Centro

Agregar fila n. ° 2

Estructura de la columna

A la siguiente fila. Utilice la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila, vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 90%
• Ancho máximo: 100%

Índice Z

Asigne un índice az a esta fila también.

• Índice Z: 2

Espaciado de la columna 1

Complete la configuración de la fila abriendo la configuración de la primera columna y asignando algo de relleno a la izquierda y a la derecha.

• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Agregar módulo de texto a la columna 1

Agregar contenido H3

Ahora que la configuración de la fila está en su lugar, es hora de agregar módulos. Agregue un módulo de texto a la columna 1 con algún contenido H3 de su elección.

Configuración de texto H3

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H3 en consecuencia:

• Fuente del encabezado 3: Montserrat
• Estilo de fuente del título 3: subrayado
• Título 3 Color de subrayado: #ffffff
• Título 3 Estilo de subrayado: Sólido
• Color del texto del encabezado 3: #ffffff
• Tamaño del texto del encabezado 3:
  • Escritorio: 4vw
  • Tableta y teléfono: 10vw
• Encabezado 3 espaciado de letras: -3px

Espaciado

Agregue un poco de relleno derecho en tamaños de pantalla más pequeños.

• Relleno derecho: 20% (solo tableta y teléfono)

Agregar módulo de texto a la columna 2

Agregar contenido

Agregue otro módulo de texto a la columna 2 con algún contenido descriptivo de su elección.

Color de fondo

A continuación, cambie el color de fondo.

• Color de fondo: #ffffff

Configuración de texto

Luego, modifique la configuración del texto de la siguiente manera:

• Fuente de texto: Playfair Display
• Estilo de fuente de texto: cursiva
• Tamano del texto:
  • Escritorio: 1.6vw
  • Tableta: 3vw
  • Teléfono: 4vw
• Altura de la línea de texto: 1.5em

Espaciado

Aplique también algunos valores de relleno personalizados.

• Acolchado superior: 10vh
• Acolchado inferior: 10vh
• Acolchado izquierdo: 10%
• Acolchado derecho: 10%

Agregar módulo de botones a la columna 2

Agregar copia

El siguiente y último módulo que agregaremos es un módulo de botones a la columna 2. Agregue una copia de su elección.

Configuración de botones

Vaya a la pestaña de diseño del módulo y cambie la configuración de los botones de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón:
  • Escritorio: 1.2vw
  • Tableta: 2.5vw
  • Teléfono: 3.5vw
• Color del texto del botón: # 000000
• Color de fondo del botón: #ffffff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Fuente del botón: Montserrat

• Estilo de fuente del botón: subrayado
• Color de subrayado del botón: # 000000
• Estilo de subrayado del botón: sólido

Espaciado

Agregue también algunos valores de relleno personalizados.

• Acolchado superior: 20px
• Acolchado inferior: 20px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Posición

Y reposicione el módulo en la pestaña avanzada.

• Posición: Absoluto
• Ubicación: Abajo a la derecha

2. Aplicar efectos adhesivos

Módulo de imagen en la fila n. ° 1

Configuración adhesiva

Ahora que hemos construido las bases de nuestro diseño, es hora de comenzar a aplicar los efectos adhesivos personalizados. Abra el módulo de imagen en la fila n. ° 1 y coloque el módulo adhesivo de la siguiente manera:

• Posición adhesiva: adherirse a la parte superior
• Límite inferior pegajoso: sección
• Desplazamiento de elementos pegajosos circundantes: No

Tamaño pegajoso

Una vez que se han aplicado las configuraciones adhesivas, también podemos cambiar los estilos adhesivos de nuestro módulo. Lo primero que haremos es cambiar el ancho en un estado pegajoso.

• Ancho pegajoso: 80%

Espaciado pegajoso

A continuación, modificaremos el relleno adhesivo superior e inferior.

• Acolchado superior adhesivo: 50vh
• Acolchado inferior adhesivo: 50vh

Fondo degradado pegajoso

También aplicaremos un fondo degradado adhesivo a nuestro módulo.

• Color 1: # 00336b
• Color 2: rgba (41,196,169,0)
• Tipo de degradado: lineal
• Dirección del gradiente: 90 grados
• Colocar degradado sobre la imagen de fondo: Sí

Transición

Y para garantizar una transición sin problemas, aumentaremos la duración de la transición del módulo.

• Duración de la transición: 1500 ms

Columna 2 en la fila # 2

Configuración adhesiva de la columna 2

A continuación, también volveremos pegajosa la segunda columna de nuestra segunda fila.

• Posición adhesiva: adherirse a la parte superior
• Desplazamiento superior pegajoso: 150px
• Límite inferior pegajoso: sección
• Desplazamiento de elementos pegajosos circundantes: No
• Transición de estilos predeterminados y fijos: No

Módulo de texto en columna fija

Color de fondo pegajoso

Ahora que la columna 2 de la fila n. ° 2 se ha vuelto pegajosa, podemos aplicar algunos estilos pegajosos al Módulo de texto dentro de esta columna. Comience cambiando el color de fondo en un estado pegajoso.

• Color de fondo pegajoso: # 333333

Color de texto fijo

A continuación, modifique el color del texto en un estado pegajoso.

• Color de texto fijo: #ffffff

Transición

Y complete la configuración del módulo aumentando la duración de la transición en la pestaña avanzada. ¡Eso es todo!

• Duración de la transición: 1000 ms

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con las opciones pegajosas de Divi. Más específicamente, le mostramos cómo combinar superposiciones con las opciones pegajosas de Divi para crear transiciones sin esfuerzo. Una vez que obtenga el enfoque que se utilizó a lo largo de este tutorial, podrá crear un sinfín de variaciones diferentes. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.