Cómo combinar superposiciones con las opciones pegajosas 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 encontrarse con 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 todo tipo 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 entender Divi desde otra perspectiva. Le mostraremos cómo combinar las opciones adhesivas 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 el diseño 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 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!

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 inferior.

  • Acolchado inferior: 100vh

Añadir Fila #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 la 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 z a esta fila también.

  • Índice Z: 1

Agregar módulo de imagen a la columna

Dejar 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.

Utilice una 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

Cambia el ancho del módulo a continuación.

  • Ancho: 100%

Espaciado

Luego, aplique un relleno superior e inferior personalizado 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 algo de contenido H2 de su elección.

Configuración de texto H2

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

  • Título 2 Fuente: Montserrat
  • Encabezado 2 Alineación de texto: Centro
  • Título 2 Color del texto: #ffffff
  • Título 2 Tamaño del texto:

    • Escritorio: 10vw
    • Tableta: 14vw
    • Teléfono: 15vw
  • Encabezado 2 Espaciado entre letras: -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: Absoluta
  • Ubicación: Centro

Añadir Fila #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 la 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 del canalón: 1
  • Ancho: 90%
  • Ancho máximo: 100%

Índice Z

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

  • Índice Z: 2

Columna 1 Espaciado

Complete la configuración de la fila abriendo la configuración de la primera columna y asignando un margen izquierdo y derecho.

  • Relleno izquierdo: 5%
  • Relleno 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

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

  • Título 3 Fuente: Montserrat
  • Título 3 Estilo de fuente: Subrayado
  • Color de subrayado del título 3: #ffffff
  • Título 3 Estilo de subrayado: Sólido
  • Título 3 Color del texto: #ffffff
  • Título 3 Tamaño del texto:

    • Escritorio: 4vw
    • Tableta y teléfono: 10vw
  • Encabezado 3 Espaciado entre letras: -3px

Espaciado

Agregue algo de relleno a la derecha 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

Cambia el color de fondo a continuación.

  • Color de fondo: #ffffff

Configuración de texto

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

  • Fuente de texto: Pantalla Playfair
  • Estilo de fuente de texto: cursiva
  • Tamano del texto:

    • Escritorio: 1.6vw
    • Tableta: 3vw
    • Teléfono: 4vw
  • Altura de línea de texto: 1,5 em

Espaciado

Aplique también algunos valores de relleno personalizados.

  • Acolchado superior: 10vh
  • Acolchado inferior: 10vh
  • Relleno izquierdo: 10%
  • Relleno 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 botón a la columna 2. Agregue alguna copia de su elección.

Configuración de botones

Pase a la pestaña de diseño del módulo y cambie la configuración del botón 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.

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

Posición

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

  • Posición: Absoluta
  • Ubicación: abajo a la derecha

2. Aplicar efectos pegajosos

Módulo de imagen en la fila #1

Configuraciones adhesivas

Ahora que hemos construido la base 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 gire el módulo como sigue:

  • Posición pegajosa: Stick to Top
  • Límite pegajoso inferior: Sección
  • Desplazamiento de los 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 será cambiar el ancho en un estado pegajoso.

  • Ancho pegajoso: 80%

Espaciado pegajoso

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

  • Acolchado superior pegajoso: 50vh
  • Acolchado inferior pegajoso: 50vh

Fondo degradado pegajoso

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

  • Color 1: #00336b
  • Color 2: rgba(41.196.169,0)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 90 grados
  • Coloque el 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: 1500ms

Columna 2 en Fila #2

Configuración fija de la columna 2

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

  • Posición pegajosa: Stick to Top
  • Desplazamiento superior fijo: 150 px
  • Límite pegajoso inferior: Sección
  • Desplazamiento de los elementos pegajosos circundantes: No
  • Estilos predeterminados y fijos de transición: No

Módulo de texto en columna pegajosa

Color de fondo adhesivo

Ahora que la columna 2 de la fila n.° 2 se ha convertido en fija, podemos aplicar algunos estilos fijos al módulo de texto dentro de esta columna. Comience cambiando el color de fondo en un estado fijo.

  • Color de fondo adhesivo: #333333

Color de texto fijo

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

  • 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: 1000ms

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 adhesivas 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 infinitas variaciones diferentes. ¡También pudo descargar el archivo JSON de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.