¿Quieres saber cómo revelar contenido al pasar el cursor sobre el separador de secciones en Divi ?
Los separadores de secciones siguen 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, usaremos los divisores de sección de manera un poco diferente. Divi le permite ajustar la altura y el diseño de cada divisor. Esto nos permite colocar separadores sobre ciertas áreas o el contenido de la sección
Al utilizar la opción de desplazamiento para la altura del separador, podemos agregar efectos de desplazamiento únicos que revelan una contenido parcialmente oculto. Esto funciona muy bien para llamar la atención sobre un llamado a la acción o un botón en particular en el que desea que la gente haga clic. visitantes hacer clic.
vista
¡¡¡Descarga DIVI ahora!!!
Crear una nueva página con Divi Builder
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Diseñando el efecto de desplazamiento del divisor de sección en Divi
Creando la sección y la línea
Cree una sección regular con una fila de dos columnas.
Antes de agregar un módulo, abra la configuración de la sección y actualice lo siguiente:
Gradiente de fondo (izquierda): #73ba57
Gradiente de fondo (derecha): #2a4c23
Ancho: 80%
Ancho máximo: 1px
Alineación de la sección: Centro
Añadir título de sección
Para agregar el título de la sección, cree un módulo de texto e inserte el siguiente texto:
<h2>The Juice</h2>
A continuación, actualice el diseño de la siguiente manera:
Fuente: Lato
Tamaño del texto: 80px
Espaciado entre letras: -5px
Margen: -50px (superior), -40px (inferior)
Índice Z: -1
El margen personalizado y el índice z permitirán que el texto permanezca detrás de la imagen que agregaremos en el siguiente paso.
Añadir imagen
Debajo del módulo Texto con el título en la columna 1, agregue un módulo Imagen. Luego cargue una imagen con un fondo transparente. Usamos una imagen del paquete de diseño. Juice Shop 240 píxeles por 300 píxeles.
El ajuste de la alineación de la imagen en el centro.
Agregue un módulo de "Llamado a la acción" en la columna 2
En la columna 2, agregue un módulo de llamada a la acción.
Agregue una URL de enlace de botón para asegurarse de que se muestre el botón.
Fondo de CTA y estilo de texto de título
A continuación, actualice la siguiente configuración de diseño:
Fondo: #ffffff
Color del texto: oscuro
Fuente del título: Lato
Peso de la fuente del título: Pesado
Estilo de fuente: TT
Tamaño del texto del título: 18px
Personaliza el botón CTA
Actualice el diseño del botón de la siguiente manera:
- Usar estilos personalizados para el botón: SÍ
- Color del texto del botón: #ffffff
- Color de fondo del botón: #73ba57
- Ancho del borde: 0px
Personalizar el borde del módulo 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)
Se agregó el efecto de desplazamiento al divisor para revelar el módulo "Llamado a la acción".
Ahora es el momento de agregar el efecto de desplazamiento al divisor de sección para revelar el módulo "Llamado a la acción". Para hacer esto, primero necesitamos crear nuestros divisores de sección.
Lea también: Divi: cómo revelar contenido al pasar el cursor sobre las pestañas
Agregar el separador superior
Abra los parámetros de sección y el separador superior con los siguientes parámetros.
Estilo de divisor superior: ver captura de pantalla
Color del divisor superior: #73ba57
Altura del divisor: 70 % (predeterminado), 0 % (desplazamiento)
Tapa del divisor superior: horizontal
Tenga en cuenta que la altura del separador comienza con una altura predeterminada del 70 %, luego cambia a una altura del 0 % al pasar el mouse por encima.
Divisor inferior agregado
Luego agregue un separador inferior similar a la sección con los siguientes parámetros.
- Estilo de divisor inferior: ver captura de pantalla
- Color del divisor inferior: #73ba57
- Altura del divisor: 70 % (predeterminado), 0 % (desplazamiento)
- Voltear el divisor: Horizontal
- Disposición: en la parte superior del contenido de la sección
Este divisor inferior también comienza con una altura del 70 % que cae al 0 % al pasar el mouse por encima. Sin embargo, dado que la opción de disposición del divisor se establece sobre el contenido, el divisor de sección oculta la parte inferior del módulo "Llamado a la acción" en la columna 1. Luego, al pasar el mouse, se revela el resto del módulo.
Mira el resultado hasta ahora.
¡¡¡Descarga DIVI ahora!!!
Se agregó el efecto de desplazamiento de la sombra del cuadro para una transición y un diseño únicos
Para una transición y un diseño únicos al pasar el mouse, podemos agregar un efecto de desplazamiento de sombra de cuadro que tendrá lugar simultáneamente con el efecto de desplazamiento del divisor. Para hacer esto, agregue la siguiente sombra de cuadro a la sección.
- Sombra de caja: ver captura de pantalla
- Posición Horizontal: 0px
- Posición Vertical: 0px
- Fuerza de propagación de la sombra del cuadro: 0px (predeterminado), 150px (hover)
- Color de sombra: #73ba57
Reduzca la duración de la transición.
Para un último paso, reduzcamos la duración de la transición.
Duración de la transición: 700ms
Resultado final
Ahora que hemos seguido todos los pasos, veamos el resultado final.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Esperamos que este artículo le haya dado algo de inspiración para crear efectos de desplazamiento de divisor de sección únicos para revelar contenido.
De hecho, ajustar el divisor flotante puede ser un gran elemento de diseño por sí solo. Además, los diseños de muestra deberían ayudarlo a comenzar su propia exploración y diseños.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
