Los divisores de sección siguen siendo un elemento de diseño popular en Divi. Existen muchos estilos de separadores, incluidas algunas opciones útiles que facilitan la adición de transiciones y fondos únicos a su página.
En este tutorial, usaremos los divisores de sección de manera un poco diferente. Divi te permite ajustar la altura y el diseño de cada divisor. Esto nos permite colocar separadores sobre ciertas áreas o contenido de la sección. Al usar la opción de desplazamiento para la altura del divisor, 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.
Vamos a empezar.
Resultado de la muestra
Lo que necesitas para empezar
Para comenzar, necesita lo siguiente:
- Le Tema divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Algunas imágenes ficticias para usar en el diseño. Voy a utilizar algunas imágenes con fondos transparentes del 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 la altura del divisor de sección en Divi
Creando la sección y la línea
Comencemos creando 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 izquierdo: #73ba57
Gradiente de fondo derecho: #2a4c23
Ancho: 80%
Ancho máximo: 1080px
Alineación de la sección: Centro
Pero también puedes elegir el esquema de color que más te guste según tu imagen. mi esquema de color es: # fff200 - # e09900 en degradado.
Añadir título de 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:
El jugo
Luego actualice el dibujo de la siguiente manera:
Título 2 Fuente: Lato
Encabezado Tamaño del texto 2: 80px
Título 2 Espacio entre letras: -5px
Margen: -50px en la parte superior, -40px en la parte inferior
Í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.
Añadir imagen
Debajo del módulo de texto con el título en la columna 1, agregue un módulo de imagen. Luego sube una imagen con fondo transparente. Estoy usando una imagen de paquete de diseño de tienda de jugos de 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 una llamada al módulo de 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 título
Luego actualice los siguientes parámetros de diseño:
Color de fondo: #ffffff
Color del texto:
Título de la fuente: Lato
Título peso política: pesado
Título Tipo de letra: TT
Título Tamaño del texto: 18px
Estiliza el 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: # e09900
Ancho del borde del botón: 0 px
Estilizando 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 (224,145,0,0.25)
Se agregó 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 altura de división de sección para revelar la llamada a la acción. Para hacer esto, primero necesitamos crear nuestros divisores de sección.
Agregar el separador superior
Abra los parámetros de sección y el separador superior con los siguientes parámetros.
Estilo del divisor superior: ver captura de pantalla Color del divisor superior: # 73ba57 Altura del divisor superior: 70% (predeterminado), 0% (suspendido)
Divisor superior abatible: horizontal
Tenga en cuenta que la altura del separador comienza con una altura predeterminada de 70%, y luego se mueve a una altura de 0% en el rollover.
Adición del divisor inferior
Luego agregue un separador inferior similar a la sección con los siguientes parámetros.
Estilo del divisor superior: ver captura de pantalla Color del divisor superior: # 73ba57 Altura del divisor superior: 70% (predeterminado), 0% (suspendido)
Divisor superior abatible: horizontal
Diseño del divisor: en la parte superior de la sección Contenido
Este separador de fondo también comienza con una altura del 70% que cambia a 0% al pasar el mouse. Sin embargo, debido a que la opción de diseño del separador se establece en la parte superior del contenido, el separador de sección oculta la parte inferior de la llamada a la acción en la columna 1. Luego, al pasar el mouse, el resto de l se revela el llamado a la acción.
Mira el resultado hasta ahora.
Se agregó un efecto de desplazamiento de sombra de caja para una transición y un diseño únicos
Para lograr un diseño y una transición de desplazamiento únicos, 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 sombra del siguiente cuadro a la sección.
Box Shadow: ver captura de pantalla
Cuadro Sombra Posición horizontal: 0px
Box Shadow Posición vertical: 0px
Box Shadow Spread Force: 0px (predeterminado), 150px (pasar el mouse)
Color de sombra de caja: #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
Aquí está el resultado final en el escritorio.
Según lo que hemos hecho anteriormente, podrá personalizar la pantalla en dispositivos móviles y tabletas.
Consideraciones finales
Espero que este tutorial te haya servido de inspiración para crear efectos de desplazamiento de altura de divisor de sección únicos para revelar contenido. De hecho, ajustar la altura del divisor flotante puede ser un elemento de diseño notable. Y las muestras de diseño deberían ayudarlo a comenzar su propia exploración y sus propios diseños.
Espero saber de ti en los comentarios.
A vuestra salud !
