Los divisores de sección siguen siendo un elemento de diseño popular de Divi. 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 divisores 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 los visitantes hagan clic.
Empecemos.
Descargue los efectos de desplazamiento de altura del divisor de sección GRATIS
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 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.
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
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!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Suscríbete a nuestro canal de Youtube
Lo que necesitas para empezar
Para comenzar, necesitará tener lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Algunas imágenes simuladas para usar en el diseño. Usaré algunas imágenes con fondos transparentes de nuestro paquete de diseño de tienda de jugos .
Después de eso, ¡estás listo para comenzar!
Implementando el diseño del efecto de desplazamiento de la altura del divisor de sección en Divi
Crear la sección y la fila
Primero, creemos una sección normal con una fila de dos columnas.
Antes de agregar un módulo, abra la configuración de la sección y actualice lo siguiente:
Degradado de fondo Color izquierdo: #73ba57
Degradado de fondo Color derecho: #2a4c23
Ancho: 80%
Ancho máximo: 1080px
Alineación de sección: Centro
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:
|
01
|
<h2>The Juice</h2> |
Luego actualice el diseño de la siguiente manera:
Encabezado 2 Fuente: Lato
Encabezado 2 Tamaño del texto: 80 px
Encabezado 2 Espaciado entre letras: -5 px
Margen: -50 px arriba, -40 px abajo
Índice Z: -1
El margen personalizado y el índice z permitirán que el texto se coloque 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 mide 240 px por 300 px.
Ajuste la alineación de la imagen al centro.
Agregar una llamada 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.
Diseñar el fondo de la 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: Heavy Estilo de fuente del título:
Título
TT Tamaño del texto: 18 px
Estilo del 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
Diseñar el borde de la 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)
Agregar el efecto de desplazamiento de la altura del divisor para revelar la llamada a la acción
Ahora es el momento de agregar el efecto de desplazamiento de la altura del divisor de sección para revelar la llamada a la acción. Para hacer esto, primero debemos crear nuestros separadores 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 del divisor superior: vea la captura de pantalla
Color del divisor superior: #73ba57
Altura del divisor superior: 70 % (predeterminado), 0 % (desplazamiento)
Volteo del divisor 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 por encima.
Agregar el divisor inferior
A continuación, agregue un divisor inferior similar a la sección con la siguiente configuración.
Estilo del divisor superior: vea la captura de pantalla
Color del divisor superior: #73ba57
Altura del divisor superior: 70 % (predeterminado), 0 % (desplazamiento)
Volteo del divisor superior: Disposición del divisor horizontal
: En la parte superior del contenido de la sección
Este divisor inferior también comienza con una altura del 70 % que cambia al 0 % al pasar el mouse por encima. 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.
Agregar un efecto de desplazamiento de sombra de 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 de altura del divisor. Para hacer esto, agregue la siguiente sombra de cuadro a la sección.
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: 0px
Posición vertical de sombra de cuadro: 0px
Intensidad de propagación de sombra de cuadro: 0px (predeterminado), 150px (al pasar el cursor)
Color de sombra de cuadro: #73ba57
Disminución de la duración de la transición
Como último paso, disminuyamos un poco la duración de la transición.
Duración de la transición: 700ms
Resultado final
Aquí está el resultado final en el escritorio.
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.
Aquí está el diseño final en tableta y teléfono.
Experimentación con otros estilos de divisores 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!
Aquí hay algunos más que he incluido en la descarga gratuita.
Pensamientos finales
Con suerte, esta publicación le ha dado un poco de inspiración sobre cómo crear algunos efectos de desplazamiento de altura de división de sección únicos para revelar contenido. De hecho, ajustar la altura del divisor al pasar el mouse puede ser un gran elemento de diseño por sí mismo. Y los ejemplos de diseño deberían ayudarlo a impulsar su propia exploración y diseños.
Espero escuchar de usted en los comentarios.
¡Salud!