Los efectos de desplazamiento de Divi brindan un montón de nuevas posibilidades de diseño a los sitios web que crea. Las interacciones sutiles que elija agregar realmente pueden ayudar a elevar el aspecto general de su Sitio web. Todo mejora aún más en cuanto sincronizas los efectos de desplazamiento. En este tutorial, manejaremos específicamente la creación de una buena sección de héroe en colisión con columnas en el desplazamiento. El diseño de la sección del héroe fusiona dos columnas diferentes en el pergamino, lo que a su vez ayuda a enfatizar la copia. 

Resultado posible

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

Colisión de sección divi

Recrea el diseño de la sección de héroe

Añadir una nueva sección

Personalizar el color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.

  • Color de fondo: # f4f2f7
Configuración de la sección Divi

espaciamiento

Elimine también el relleno superior e inferior predeterminado de todas las secciones.

  • Relleno superior: 0px
  • Relleno inferior: 0px
Configuración de espaciado divi

Añadir una nueva linea

Estructura de la columna

Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:

Diseño de columnas divi

apresto

Sin agregar módulos todavía, abra los parámetros de línea y modifique los parámetros de dimensionamiento en consecuencia:

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1
  • Ecualizar alturas de columna: Sí
  • Ancho: 100%
  • Ancho máximo: 100%
Configuración de espaciado de línea Divi

espaciamiento

Luego, elimine todo el relleno predeterminado superior e inferior.

  • Relleno superior: 0px
  • Relleno inferior: 0px
Espaciado de línea Divi

desbordamientos

Y ocultar los desbordamientos de la fila.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto
Configuración de la línea de visibilidad Divi

Configuración de columna 1

espaciamiento

Luego abra la configuración en la columna 1 y agregue valores de relleno personalizados.

  • Acolchado superior: 15vw
  • Relleno inferior: 10vw
  • Relleno izquierdo: 5vw
  • Relleno derecho: 5vw
Configuración de espaciado de columna de fila divisoria

Índice Z

También aumente el índice z de la columna.

  • Índice Z: 12
Posición relativa divi

Configuración de columna 2

Imagen de fondo

Continúe abriendo la configuración en la columna 2 y cargue una imagen de fondo de su elección.

  • Tamaño de la imagen de fondo: Portada
  • Posición de la imagen de fondo: Centro
  • Repetir imagen de fondo: no repetir
  • Mezcla de imágenes de fondo: Normal
Fondo de la columna Divi

Agregue el módulo de texto # 1 a la columna 1

Añadir contenido H1

Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue cualquier contenido H1 de su elección.

Asistencia freelance divi

Configuraciones de texto H1

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

  • Fuente del título: Shadows in light
  • Peso de la fuente del título: negrita
  • Color del texto del encabezado: # 000000
  • Tamaño del texto del encabezado: 6vw (escritorio), 11vw (tableta), 13vw (teléfono)
  • Espaciado entre letras del encabezado: -2px
  • Altura de la línea de la cabeza: 1.2em
Configuración de fuente Divi

espaciamiento

También agregue un margen superior.

  • Margen superior: 10vw
Configuración de espaciado de texto

Agregue el módulo de texto # 2 a la columna 1

Agregar contenido

Inserte otro módulo de texto con el contenido descriptivo de su elección.

Agregar una columna de texto 1 divi

Configuraciones de texto

Cambie la configuración de texto del módulo de la siguiente manera:

  • Fuente de texto: Open Sans
  • Color del texto: # 1e1e1e
  • Tamaño del texto: 0.9vw (escritorio), 1.9vw (tableta), 3vw (teléfono)
  • Altura de la línea de texto: 2,4 em
Personalización de la fuente de texto Divi

espaciamiento

Y agregue valores de margen personalizados en diferentes tamaños de pantalla.

  • Margen superior: 4vw (escritorio), 8vw (tableta), 12vw (teléfono)
  • Margen inferior: 4vw (escritorio), 8vw (tableta), 12vw (teléfono)
Configuración de espaciado de texto Divi

Agregue un módulo de botones a la columna 1

Añadir una copia

El siguiente y último módulo que necesitamos en esta columna es un módulo de botones. Agregue una copia de su elección.

Agregar un módulo de botón divi

Configuraciones de botones

Modifique los parámetros de los botones del módulo de la siguiente manera:

  • Use estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Color de texto del botón: #ffffff
  • Color de fondo del botón: # 000000
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 100px
Botón de estilo personalizado divi
  • Fuente del botón: Abrir sin
Configuración de los parámetros del botón de fuente

espaciamiento

Y complete la configuración de los botones agregando valores de relleno personalizados en diferentes tamaños de pantalla.

  • Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno izquierdo: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
  • Relleno derecho: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
Espaciado de botones Divi

Agregue un módulo de texto a la columna 2

Agregar contenido

En la segunda columna, el único módulo que necesitaremos es un módulo de texto. Ingrese el contenido de su elección.

Columna de texto 2 divi

Configuraciones de texto

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

  • Fuente de texto: sombras en la luz
  • Color del texto: rgba (0,0,0,0,25)
  • Tamaño del texto: 9vw (escritorio), 14vw (tableta y teléfono)
  • Espaciado entre letras de texto: -3px
  • Altura de la línea de texto: 1em
  • Alineación de texto: centro (oficina), izquierda (tableta y teléfono)
Jane doe texto columna 2 divi

espaciamiento

También agregue valores de relleno personalizados.

  • Acolchado superior: 5vw (escritorio),
  • Acolchado inferior: 60vw (tableta y teléfono)
  • Acolchado izquierdo: 5vw (tableta y teléfono)
Espaciado de texto Divi

Aplicar animaciones de desplazamiento

Sección

Ascenso y descenso

Una vez que todos tus mods estén en su lugar, ¡es hora de aplicar los efectos de desplazamiento! Primero abra los parámetros de la sección y use el siguiente efecto de escala:

  • Active Sclaing de arriba a abajo
  • Escala inicial: 100% (hasta 49%)
  • Escala media:
    • Oficina: 70% (100%)
    • Tableta y teléfono: 100% (100%)
  • Escala final:
    • Oficina: 70%
    • Tableta y teléfono: 100%
Desplazamiento efecto animación divi

Columna 1

Movimiento horizontal

Continúe abriendo la configuración en la columna 1 y use el siguiente efecto de movimiento horizontal:

  • Activar movimiento horizontal: sí
  • Inicio de desplazamiento: 0
  • Compensación promedio:
    • Oficina: 0 (al 65%)
    • Tableta y teléfono: 0 (93%)
  • Desplazamiento final:
    • Despacho: 6
    • Tableta y teléfono: 0
Alineación horizontal Divi

Ascenso y descenso

También aplique un efecto de escalado hacia arriba y hacia abajo a la columna.

  • Habilitar escalado hacia arriba y hacia abajo: Sí
  • Escala inicial:
    • Oficina: 10%
    • Tableta y teléfono: 100%
  • Escala media:
    • Oficina: 90%
    • Tableta y teléfono: 100%
  • Escala final: 100%
sección de héroes que chocan con columnas

Columna 2

Movimiento horizontal

Luego abra los parámetros en la columna 2 y use los siguientes parámetros de movimiento horizontal:

  • Activar movimiento horizontal: sí
  • Inicio de desplazamiento: 0
  • Compensación promedio:
    • Oficina: 0 (al 53%)
    • Tableta y teléfono: 0 (56%)
  • Desplazamiento final:
    • Oficina: -6 (al 53%)
    • Tableta y teléfono: 0 (100%)
Divi de animación horizontal

Fundido de entrada y salida

Complete la configuración de la columna agregando un efecto de fundido de entrada y salida.

  • Activar fundido de entrada y salida: Sí
  • Opacidad inicial: 100% (al 47%)
  • Opacidad media:
    • Oficina: 0% (47%)
    • Tableta y teléfono: 100% (47%)
  • Fin de la opacidad:
    • Oficina: 0%
    • Tableta y teléfono: 100%
Divi de animación de movimiento

Consideraciones finales

En este artículo, le mostramos cómo usar creativamente los efectos de desplazamiento de Divi para crear una sección de héroe que colisione con las columnas. Tan pronto como visitantes desplazarse, las dos columnas diferentes y sus elementos comienzan a fusionarse. Esto, a su vez, te permitirá enfatizar aún más la copia.

Otros recursos

Aquí hay una lista de contenido que le permitirá hacer más con su tema de WordPress Dos.