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.
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
espaciamiento
Elimine también el relleno superior e inferior predeterminado de todas las secciones.
- Relleno superior: 0px
- Relleno inferior: 0px
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:
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%
espaciamiento
Luego, elimine todo el relleno predeterminado superior e inferior.
- Relleno superior: 0px
- Relleno inferior: 0px
desbordamientos
Y ocultar los desbordamientos de la fila.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
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
Índice Z
También aumente el índice z de la columna.
- Índice Z: 12
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
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.
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
espaciamiento
También agregue un margen superior.
- Margen superior: 10vw
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.
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
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)
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.
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
- Fuente del botón: Abrir sin
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)
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.
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)
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)
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%
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
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%
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%)
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%
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.