Divi , el popular tema de WordPress, es conocido por sus módulos versátiles que permiten a los diseñadores y desarrolladores de sitios web crear diseños impresionantes sin esfuerzo. Entre su impresionante arsenal de módulos, Divi Divider Module se destaca como una herramienta única que permite a los usuarios crear divisores cautivadores. En esta publicación de blog, profundizaremos en el cautivador mundo de los divisores degradados y exploraremos cómo puede aprovechar el módulo Divi Divider para mejorar sus diseños. Analizaremos más de cerca cómo funcionan los divisores de degradado y le brindaremos ejemplos inspiradores para encender su creatividad.
Avance
Aquí hay una vista previa de cómo se verá nuestro diseño degradado al final.
Cómo crear divisores de degradado con el módulo divisor de Divi
Existen varios métodos para construir un divisor utilizando el módulo divisor de Divi. De forma predeterminada, el módulo muestra una línea como divisor. Sin embargo, es posible desactivar esta línea y utilizar la configuración de Fondo del módulo para generar un divisor que se puede personalizar usando varias opciones de Fondo, como colores, degradados, imágenes y más. En lugar de mostrar el divisor real, nos concentraremos en diseñar el contenedor del divisor para producir un divisor con un estilo único.
Ocultar divisor
El procedimiento es sencillo. Primero agregue un módulo divisor a su diseño y luego, debajo de la pestaña de contenido, oculte el divisor.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahora
Fondo divisor
A continuación, elija el tipo de fondo que desea utilizar en el menú de configuración de Fondo en la pestaña Contenido. Nos concentraremos en las opciones de Degradado de fondo en esta publicación.
Agregar tamaño y espaciado
Para construir un divisor elegante en casi cualquier tamaño o forma, use las opciones de Tamaño y Espaciado en la pestaña Diseño para ajustar la altura y el ancho del contenedor del divisor. Para generar el tamaño deseado, utilice ancho y alto, ancho máximo y alto máximo, alineación del módulo y relleno superior e inferior.
Agregar radio de borde
Para darle más estilo a la forma, agregue opciones de borde como Radio de borde. Las esquinas se pueden ajustar de forma conjunta o por separado para crear formas fascinantes. Para un diseño especial, puede agregar adicionalmente Ancho de borde, Estilos, etc.
Divisor de gradiente
Utilizaremos la página de inicio del paquete de diseño Home Baker gratuito incluido en Divi para nuestro primer divisor de degradado. La obra de arte de este paquete de diseño presenta degradados de color marrón y contornos oscuros y potentes. Replicaremos esto con nuestro degradado usando la paleta de colores del paquete de diseño. Usaremos el módulo divisor que ya está presente en la sección de héroe para nuestra primera ilustración. Este es sencillo, pero tiene un gran impacto visual. Aquí está el diseño antes de agregar el módulo divisor como referencia.
Visibilidad
Elija No para Mostrar divisor en las opciones de visibilidad del módulo divisor.
- Mostrar divisor: No
Degradado
Seleccione la pestaña Degradado de fondo desplazándose hacia abajo hasta Fondo. Agregaremos cinco paradas de degradado para este. Se utilizarán los valores predeterminados para los demás parámetros de gradiente. Los parámetros para cada parada de gradiente se enumeran a continuación.
- Primera parada de degradado: 0px, #dcc087
- Segunda parada de degradado: 16px, #e6b060
- Tercera parada de degradado: 22px, #f19d33
- Cuarta parada de degradado: 31px, #f49826
- Quinta parada de degradado: 48px, #3b261e
Se deben utilizar píxeles como unidad de degradado. Los tonos que estábamos buscando ya están disponibles. Todo lo que queda por hacer es optimizar el tamaño.
- Unidad de gradiente: píxeles
Dimensionamiento
Luego elija la pestaña Diseño. Ponga 100% para el Ancho en Tamaño. Los tres tamaños de dispositivos deben tener la Altura establecida en 40 px. El cierre modular guardará su configuración.
- Ancho: 100%
- Alto: 40px
Vista previa final
Ahora aquí tenemos una vista previa final de nuestro diseño de degradado en acción.
Pensamientos finales
Esto concluye nuestra discusión sobre el uso del módulo divisor de Divi para crear divisores de degradado. Para crear divisores de degradado personalizados, utilice la opción de degradado en el módulo divisor. Podemos crear divisores de degradado en una variedad de tamaños y formas utilizando las opciones de tamaño, espaciado y esquina del borde. Podemos diseñar divisores de gradiente distintivos que se destacarán entre la multitud con solo unas pocas opciones básicas.
