Los divisores de sección son parte de una actualización de Divi largamente esperada que cambia la apariencia completa de cualquier sitio web. Dentro de la publicación de blog del anuncio de actualización de Divi , se incluyeron una tonelada de ejemplos de diseño y simplemente nos dejaron boquiabiertos.
Para ayudarlo a comenzar con estos nuevos divisores de sección, le mostraremos cómo recrear cada uno de estos ejemplos. No solo puede usarlos para su propio sitio web o próximo proyecto, sino que también lo ayudarán a comprender cómo funcionan los divisores de sección dentro de Divi.
Antes de que le mostremos todos los ejemplos y cómo recrearlos, hay algunas cosas que debe saber (y comprender) antes de comenzar:
- Comience siempre cada sección eligiendo un color de fondo
- Siempre puede agregar un fondo degradado encima de su color de fondo, pero el color de fondo debe estar allí
- La diferencia de color entre las secciones vecinas permite que un divisor inferior tome el color de la siguiente sección
- Del mismo modo, esta diferencia de color permite que un divisor superior tome el color de la sección anterior
- Estamos recreando los divisores de sección de cada ejemplo solamente
Veamos las cosas buenas
Echemos un vistazo rápido a los diferentes ejemplos que recrearemos. Después de cada exhibición de ejemplo, puede encontrar un botón que lo llevará a los pasos del tutorial de ese ejemplo específico.
Ejemplo 1
Recrear este ejemplo
Ejemplo #2
Recrear este ejemplo
Ejemplo #3
Recrear este ejemplo
Ejemplo #4
Recrear este ejemplo
Ejemplo #5
Recrear este ejemplo
Ejemplo #6
Recrear este ejemplo
Ejemplo #7
Recrear este ejemplo
Ejemplo #8
Recrear este ejemplo
Cómo recrear los ejemplos de divisores de sección con Divi
Suscríbete a nuestro canal de Youtube
Recrear el ejemplo n.º 1
Sección 1
Color de fondo
Hemos mencionado al comienzo de esta publicación que siempre debe comenzar eligiendo un color de fondo para su sección, incluso si va a agregar un fondo degradado encima. Para este ejemplo, utilice ‘#ff8790’.
Fondo degradado
Además del color de fondo, estamos agregando el siguiente hermoso fondo degradado:
- Primer color: #ff56f0
- Segundo color: #ffbe28
- Tipo de gradiente: lineal
- Dirección del gradiente: 28 grados
- Posición de inicio: 0%
- Posición final: 100%
Divisor superior
La primera sección en la que está trabajando contiene un divisor de sección superior e inferior. El estilo y la configuración del divisor son casi los mismos. Sin embargo, el divisor superior es mucho más sutil, lo que da una especie de efecto de reflejo. Para lograr exactamente el mismo divisor de la sección superior, use la siguiente configuración:
- Estilo de divisor: Buscar en la lista
- Color del divisor: rgba (255,255,255,0.13)
- Altura del divisor: 200px
Puede elegir usted mismo, dependiendo de los módulos y las filas que esté utilizando, si desea o no que el divisor aparezca debajo del contenido de la sección o encima de él.
Divisor inferior
El divisor inferior de este ejemplo contiene las siguientes configuraciones:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 149px
Sección 2
Color de fondo
Para crear una hermosa transición entre ambas secciones, sin tener que establecer un color para el divisor, agregaremos un color de fondo a la segunda sección de este ejemplo. Aunque puedes usar el color que quieras, hemos elegido el código de color blanco ‘#FFFFFF’ para enfatizar el contraste entre ambas secciones.
Recrear el Ejemplo #2
Sección 1
Color de fondo
Nuevamente, comience eligiendo un color de fondo para su primera sección. En este caso, estamos usando ‘#ff2a00’.
Fondo degradado
En la parte superior del color de fondo de su sección, agregue el siguiente fondo degradado:
- Primer color: #ff2a00
- Segundo color: #ffc9c9
- Tipo de gradiente: lineal
- Dirección del gradiente: 90 grados
- Posición de inicio: 0%
- Posición final: 100%
Divisor superior
Pase a la pestaña Diseño de su sección, abra la subcategoría Divisores y use el siguiente divisor de sección superior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 274px
- Repetición horizontal del divisor: 0.6x
Divisor inferior
El divisor inferior que estamos usando es casi el mismo. Una de las cosas que difieren es que este divisor debe voltearse horizontalmente. Use las siguientes configuraciones para lograr el mismo divisor inferior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: #ff2a00
- Altura del divisor: 277px
- Repetición horizontal del divisor: 0.7x
- Voltear el divisor: Horizontal
Sección 2
Color de fondo
Estamos, nuevamente, usando ‘#ff2a00’ como color de fondo para nuestra segunda sección.
Fondo degradado
Además de nuestro color de fondo, agreguemos un fondo degradado. Estamos haciendo coincidir el fondo degradado de la segunda sección con el color del divisor inferior que se usa en la sección anterior. Esto nos permitirá tener una transición suave. El fondo degradado exacto que se está utilizando es el siguiente:
- Primer color: #ff2a00
- Segundo color: #9b47ef
- Tipo de gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición de inicio: 0%
- Posición final: 87%
Divisor inferior
El siguiente y último divisor que necesitaremos para este ejemplo es el siguiente divisor inferior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 300px
- Repetición horizontal del divisor: 1x
- Disposición de los divisores: Debajo del contenido de la sección
Estamos colocando el divisor de sección debajo del contenido de la sección que se proporciona para que la maqueta de la computadora portátil se superponga con el divisor.
Recrear el Ejemplo #3
Sección 1
Color de fondo
Comience agregando el código de color blanco ‘#FFFFFF’ a la primera sección que contiene todo el contenido que está compartiendo.
Divisor inferior
El divisor inferior que agregará a esta sección debe coincidir perfectamente con la siguiente sección. Una cosa que te ayudará a hacer eso es mantener claro el color del divisor. Estas son las configuraciones que necesita para el divisor inferior de su primera sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 282px
- Repetición horizontal del divisor: 0x
- Voltear el divisor: Horizontal
- Disposición de los divisores: en la parte superior del contenido de la sección
Sección 2
Color de fondo
Estamos eligiendo el ‘#7d3bd2’ como el color de fondo de nuestra próxima sección. Este es el color que heredará el divisor inferior de la sección anterior.
Fondo degradado
Además de nuestro color de fondo, estamos agregando el siguiente fondo degradado:
- Primer color: #7125ce
- Segundo Color: #150044
- Tipo de gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición de inicio: 0%
- Posición final: 100%
Divisor superior
Pase a la pestaña Diseño de su sección, abra la subcategoría Divisores y use el siguiente divisor superior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: rgba (255,255,255,0.05)
- Altura del divisor: 337px
- Repetición horizontal del divisor: 0.75x
- Voltear el divisor: Horizontal
- Disposición de los divisores: Debajo del contenido de la sección
Divisor inferior
A continuación, estamos usando un divisor inferior que coincide con nuestro divisor superior con la siguiente configuración:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 337px
- Repetición horizontal del divisor: 0.75x
- Voltear el divisor: Horizontal
- Disposición de los divisores: Debajo del contenido de la sección
Seccion 3
Color de fondo
Para la última sección de este ejemplo, agregue ‘#474ab6’ como color de fondo.
Fondo degradado
Para que nuestro ejemplo se vea aún mejor, estamos usando el siguiente fondo degradado sobre el color de fondo:
- Primer color: #474ab6
- Segundo color: #9271f6
- Tipo de gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición de inicio: 0%
- Posición final: 100%
Divisor inferior
Por último, pero no menos importante, estamos aplicando el siguiente divisor inferior para esta sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 200px
- Repetición horizontal del divisor: 1x
- Voltear el divisor: Horizontal
- Disposición de los divisores: Debajo del contenido de la sección
Recrear el Ejemplo #4
Sección 1
Color de fondo
Agregue una nueva sección (con todas las filas y módulos que necesita) y agregue ‘#FFFFFF’ como color de fondo de esa sección.
Sección 2
Color de fondo
La siguiente sección disfrutará de ‘#24a5f6’ como color de fondo.
Fondo degradado
Con encima, el siguiente fondo degradado:
- Primer color: #00fff6
- Segundo Color: #5824f4
- Tipo de gradiente: lineal
- Dirección del gradiente: 167 grados
- Posición de inicio: 0%
- Posición final: 100%
Divisor superior
Pase a la pestaña Diseño, abra la subcategoría Divisores y agregue el siguiente divisor superior a su sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 204px
- Repetición horizontal del divisor: 1
Divisor inferior
Para el divisor inferior, estamos usando la siguiente configuración en su lugar:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 407px
- Repetición horizontal del divisor: 1x
- Voltear el divisor: Horizontal
Recree el Ejemplo #5
Sección 1
Color de fondo
La primera sección que estamos usando para este ejemplo contiene ‘#FFFFFF’ como color de fondo.
Divisor inferior
También estamos aplicando el divisor inferior ondulado a esta sección usando las siguientes configuraciones:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 192 px (escritorio), 140 px (tableta y teléfono)
- Repetición horizontal del divisor: 0x
Sección 2
Color de fondo
La segunda sección que estamos usando no incluye ningún divisor de sección. Lo único que deberá hacer es agregar ‘#00c9ed’ como color de fondo.
Seccion 3
Color de fondo
La última sección utiliza ‘#64bde0’ como color de fondo.
Fondo degradado
Además de eso, estamos combinando un fondo degradado con una imagen de fondo. Agregue el siguiente fondo degradado a su sección:
- Primer color: rgba(30,135,255,0.3)
- Segundo Color: #ffffff
- Tipo de gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición inicial: 39%
- Posición final: 100%
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Inmediatamente después de haber agregado el fondo degradado, agregue una imagen de fondo de su elección a su sección en combinación con las siguientes configuraciones:
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
- Repetición de la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: Normal
Divisor superior
Pase a la pestaña Diseño, abra la subcategoría Divisores y use el siguiente divisor superior para su sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 300 px (escritorio), 180 px (tableta y teléfono)
- Repetición horizontal del divisor: 0.9x
Divisor inferior
Para finalizar este ejemplo, use el siguiente divisor inferior para esta última sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: rgba (247,247,247,0.29)
- Altura del divisor: 300 px (escritorio), 180 px (tableta y teléfono)
- Repetición horizontal del divisor: 0.9x
Recree el Ejemplo #6
Sección 1
Color de fondo
Elija ‘#166dde’ como color de fondo para la primera sección de este ejemplo.
Fondo degradado
Luego, agregue el siguiente fondo degradado a esta sección también:
- Primer color: #1e87ff
- Segundo Color: #001f77
- Tipo de gradiente: lineal
- Dirección del gradiente: 216 grados
- Posición inicial: 42%
- Posición final: 100%
Divisor superior
El divisor superior que estamos usando para esta sección tiene la siguiente configuración:
- Estilo de divisor: Buscar en la lista
- Color del divisor: #FFFFFF
- Altura del divisor: 300 px (escritorio), 100 px (tableta y teléfono)
- Repetición horizontal del divisor: 1x
- Disposición de los divisores: Debajo del contenido de la sección
Divisor inferior
Y también contiene un divisor inferior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 300px
- Repetición horizontal del divisor: 0x
- Disposición de los divisores: en la parte superior del contenido de la sección
Sección 2
Color de fondo
La segunda sección contiene ‘#1e87ff’ como color de fondo.
Fondo degradado
En combinación con el siguiente fondo degradado sutil:
- Primer color: #1e87ff
- Segundo color: #1e4fff
- Tipo de gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición de inicio: 0%
- Posición final: 100%
Divisor inferior
Y por último pero no menos importante; estamos agregando un divisor inferior a esta segunda sección también para completar nuestro ejemplo:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 500 px (escritorio), 280 px (tableta), 200 px (teléfono)
Vuelva a crear el ejemplo n.º 7
Sección 1
Color de fondo
Agregue una nueva sección, agregue las filas y módulos necesarios y seleccione ‘#FFFFFF’ como color de fondo.
Divisor inferior
Pase a la pestaña Diseño de inmediato, abra la subcategoría Divisores y use el siguiente divisor inferior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 400 px (escritorio), 180 px (tableta), 120 px (teléfono)
- Repetición horizontal del divisor: 0x
- Disposición de los divisores: Debajo del contenido de la sección
Sección 2
Color de fondo
El color de fondo que aplique a su segunda sección se aplicará automáticamente al divisor inferior de su sección anterior ( si el color del divisor es claro). Estamos usando el código de color ‘#fcd21d’ como color de fondo de nuestra segunda sección.
Divisor inferior
Por último, agregue el siguiente divisor de la sección inferior a su segunda sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: #FFFFFF
- Altura del divisor: 700 px (escritorio), 140 px (tableta y teléfono)
- Repetición horizontal del divisor: 1x
- Disposición de los divisores: Debajo del contenido de la sección
Recree el Ejemplo #8
Sección 1
Color de fondo
Comience agregando ‘#fcfcfc’ como color de fondo de la primera sección.
Divisor inferior
Pase a la pestaña Diseño, abra la subcategoría Divisor y use el siguiente divisor inferior:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Claro
- Altura del divisor: 69 px (escritorio), 46 px (tableta), 38 px (teléfono)
Sección 2
Color de fondo
Termina este ejemplo, agrega ‘#770fff’ como el color de fondo de tu segunda sección.
Pensamientos finales
En esta publicación, hemos revisado algunos divisores de sección increíbles que puede agregar a cualquier tipo de sitio web. Recrear estos ejemplos le permite comprender rápidamente la forma en que funcionan los separadores de secciones y cómo puede usarlos para impresionar a los visitantes y obtener lo mejor del sitio web que está creando sin tener que usar ningún software de edición de fotos. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!