Cómo usar los efectos de desplazamiento de altura del divisor de sección para revelar contenido en Divi


Los divisores de sección continúan siendo un elemento de diseño Divi popular. Hay muchos estilos de divisores para elegir con opciones útiles que facilitan agregar transiciones y fondos únicos a su página.

En este tutorial, vamos a utilizar los divisores de sección de forma un poco diferente. Divi le permite ajustar la altura y la disposición de cada divisor. Esto nos permite colocar separadores sobre ciertas áreas o contenido dentro de la sección. Al usar la opción de desplazamiento para la altura del divisor, podemos agregar efectos de desplazamiento únicos que revelan contenido parcialmente oculto. Esto funciona muy bien para llamar la atención sobre una llamada a la acción o un botón en particular en el que desea que hagan clic los visitantes.

Empecemos.

Vistazo

efecto de desplazamiento del divisor de sección

Descargue GRATIS los efectos de desplazamiento de altura del divisor de sección

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 nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

(incrustar) https://www.youtube.com/watch?v=bKrLCRMeG9o (/ incrustar)

Suscríbase a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, necesitará tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Algunas imágenes simuladas para usar en el diseño. Usaré algunas imágenes con fondos transparentes de afuera Paquete de diseño de la tienda de jugos.

Después de eso, ¡estás listo para comenzar!

Implementación del diseño del efecto de desplazamiento de altura del divisor de sección en Divi

Crear la sección y la fila

Primero, creemos una sección regular con una fila de dos columnas.

efecto de desplazamiento del divisor de sección

Antes de agregar un módulo, abra la configuración de la sección y actualice lo siguiente:

Color de fondo izquierdo del degradado: # 73ba57
Gradiente de fondo Color correcto: # 2a4c23
Ancho: 80%
Ancho Máx .: 1080px
Alineación de sección: centro

efecto de desplazamiento del divisor de sección

Agregar el título de la sección

Para agregar el título de la sección, cree un módulo de texto y actualice el contenido del cuerpo con el siguiente encabezado h2:

The Juice

Luego actualice el diseño de la siguiente manera:

Título 2 Fuente: Lato
Encabezado 2 Tamaño del texto: 80 px
Encabezado 2 letras espaciadas: -5px
Margen: -50px arriba, -40px abajo
Índice Z: -1

El margen personalizado y el índice z permitirán que el texto se ubique detrás de la imagen que agregaremos en el siguiente paso.

Agregar la imagen

Debajo del módulo de texto con el título en la columna 1, agregue un módulo de imagen. Luego cargue una imagen que tenga un fondo transparente. Estoy usando una imagen del paquete de diseño de la tienda de jugos que es de 240 px por 300 px.

efecto de desplazamiento del divisor de sección

Ajustan la alineación de la imagen al centro.

efecto de desplazamiento del divisor de sección

Agregar un llamado a la acción en la columna 2

En la columna 2, agregue un módulo de llamada a la acción.

efecto de desplazamiento del divisor de sección

Agregue una URL de enlace de botón para asegurarse de que se muestra el botón.

efecto de desplazamiento del divisor de sección

Estilo del fondo de CTA y el texto del título

Luego actualice la siguiente configuración de diseño:

Color de fondo: #ffffff
Color del texto: oscuro
Fuente del título: Lato
Peso de la fuente del título: pesado
Estilo de fuente del título: TT
título Tamaño del texto: 18 px

efecto de desplazamiento del divisor de sección

Aplicar estilo al botón CTA

Actualice el diseño del botón de la siguiente manera:

Color del texto del botón: #ffffff
Color de fondo del botón: # 73ba57
Ancho del borde del botón: 0px

efecto de desplazamiento del divisor de sección

Diseñando el borde de CTA

Luego agregue un borde para enmarcar el módulo de la siguiente manera:

Ancho del borde: 10px
Color del borde: rgba (115,186,87,0.15)

efecto de desplazamiento del divisor de sección

Agregar el efecto Divider Height Hover para revelar el llamado a la acción

Ahora es el momento de agregar el efecto de desplazamiento de altura del divisor de sección para revelar el llamado a la acción. Para hacer esto, primero debemos crear nuestros divisores de sección.

Agregar el divisor superior

Abra la configuración de la sección y el divisor superior con la siguiente configuración.

Estilo divisor superior: ver captura de pantalla
Color del divisor superior: # 73ba57
Altura del divisor superior: 70% (predeterminado), 0% (pasar el mouse)
Tapa divisoria superior: horizontal

Observe que la altura del divisor comienza con una altura predeterminada del 70% y luego cambia a una altura del 0% al pasar el mouse.

Agregar el divisor inferior

A continuación, agregue un divisor inferior similar a la sección con la siguiente configuración.

Estilo divisor superior: ver captura de pantalla
Color del divisor superior: # 73ba57
Altura del divisor superior: 70% (predeterminado), 0% (pasar el mouse)
Tapa divisoria superior: horizontal
Disposición del divisor: sobre el contenido de la sección

Este divisor inferior también comienza con una altura del 70% que cambia a 0% al pasar el ratón. Sin embargo, dado que la opción de disposición del divisor se establece en la parte superior del contenido, el divisor de sección oculta la parte inferior de la llamada a la acción en la columna 1. Luego, al pasar el mouse, se revela el resto de la llamada a la acción.

Mira el resultado hasta ahora.

efecto de desplazamiento del divisor de sección

Agregar un efecto de cuadro Shadow Hover para una transición y diseño únicos

Para una transición y diseño únicos en el desplazamiento, podemos agregar un efecto de desplazamiento de sombra de cuadro que tendrá lugar simultáneamente con el efecto de desplazamiento de la altura del divisor. Para hacer esto, agregue la siguiente sombra de cuadro a la sección.

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 0px
Posición vertical de la sombra de la caja: 0px
Box Shadow Spread Strength: 0px (predeterminado), 150px (pasar el mouse)
Color de la sombra de la caja: # 73ba57

efecto de desplazamiento del divisor de sección

Retrasando la duración de la transición

Para un último paso, reduzcamos un poco la duración de la transición.

Duración de transición: 700 ms

efecto de desplazamiento del divisor de sección

Resultado final

Aquí está el resultado final en el escritorio.

efecto de desplazamiento del divisor de sección

Si no desea que el contenido se oculte en la pantalla de la tableta y el teléfono, puede cambiar fácilmente la disposición del divisor a "contenido de la sección debajo" para esos dispositivos.

efecto de desplazamiento del divisor de sección

Aquí está el diseño final en tableta y teléfono.

efecto de desplazamiento del divisor de sección

efecto de desplazamiento del divisor de sección

Experimentar con otros estilos de divisor de sección para diseños completamente únicos en segundos

Con esta configuración en su lugar, puede experimentar fácilmente con diferentes estilos y combinaciones de divisores.

efecto de desplazamiento del divisor de sección

Aquí hay algunos más que he incluido en la descarga gratuita.

efecto de desplazamiento del divisor de sección

efecto de desplazamiento del divisor de sección

efecto de desplazamiento del divisor de sección

Pensamientos finales

Afortunadamente, esta publicación le ha dado un poco de inspiración sobre cómo crear algunos efectos únicos de desplazamiento de altura del divisor de sección para revelar contenido. De hecho, ajustar la altura del divisor en el desplazamiento puede ser un gran elemento de diseño en sí mismo. Y, los ejemplos de diseño deberían ayudarlo a impulsar su propia exploración y diseños.

Espero tener noticias suyas en los comentarios.

¡Salud!