Uso del Constructor de Degradados de Divi
Cómo añadir y editar degradados en tus diseños de Divi.
Los degradados son una excelente manera de añadir interés y profundidad a tus páginas web. Pueden crearse con dos o más colores y varios niveles de transparencia, y combinarse con efectos de patrones para crear visuales impresionantes para tu sitio web.
Añadir un degradado de fondo
Vamos a utilizar uno de los paquetes de diseño de Divi para demostrar cómo añadir degradados a una sección.
Haz clic en el icono de engranaje de cualquier sección en el constructor visual.
-
Desplázate hacia abajo hasta localizar la sección de fondo.
-
Haz clic en la pestaña de degradado de fondo.
-
Haz clic en el botón Añadir degradado de fondo para añadir un degradado.
Cómo configurar los colores del Constructor de Degradados de Divi
- Haz clic en el primer punto de color para añadir tu primer color.Los colores pueden añadirse mediante el selector de color.
- Repite el proceso para configurar el segundo punto de color para tu degradado.
Cómo usar más de dos colores
Una vez añadido, haz clic y mantén presionado para deslizar el punto de color a cualquier lugar dentro del control deslizante del degradado.
Cuando se utilizan dos o más puntos de color, los colores pueden ajustarse para crear degradados más complejos.
Además, puedes hacer clic derecho en cada punto de color para hacer cosas como buscar y reemplazar un color o eliminarlo.
Cómo superponer puntos de degradado
Ejemplo: Si deseas una línea marcada entre tus puntos de color, puedes hacer clic o clic derecho en cualquier punto de color para deslizarlo sobre otro.
Esto añade una división marcada de color en el degradado. Esto puede ser útil para crear un efecto de fondo con rayas para tus degradados.
En este ejemplo, se utilizan tres puntos de color. El punto de color más a la izquierda se coloca directamente sobre el del medio.
Esto le da al degradado un color sólido para el primer 33 % del degradado, y luego usa el segundo y tercer punto de color para crear un efecto de degradado suavemente mezclado.
Colocar un degradado sobre una imagen de fondo en el Constructor de Degradados de Divi
Como se ve en la captura anterior, aunque la opción esté activada, la imagen de fondo que hemos aplicado no se muestra.
Esto se debe a que necesitas ajustar la transparencia de tus puntos de color. Puedes ajustar la transparencia de uno o de todos tus puntos de color para cambiar el efecto.
Para ajustar la transparencia:
Haz clic en un punto de color en el control deslizante del degradado.
-
Ajusta la transparencia del punto modificando las opciones del control de transparencia.
Tipos de degradados en el Constructor de Degradados de Divi
-
Lineal
-
Circular
-
Elíptico
-
Cónico
Degradado lineal
Para la opción lineal, puedes elegir la dirección de tu degradado. 180 grados es la posición predeterminada, pero puede ajustarse como desees.
Ejemplo: Cambiar la dirección a 90 grados mostrará el degradado de forma horizontal.
Puedes hacer clic y arrastrar el control deslizante de dirección del degradado para ajustar la dirección o escribir un valor específico en el campo.
Degradado circular
Puedes definir la posición para tu degradado circular usando el menú desplegable asociado.
En la imagen de abajo, hemos aplicado la posición superior izquierda. Sin embargo, puedes elegir entre varias opciones:
-
Centro
-
Arriba
-
Arriba a la derecha
-
Derecha
-
Abajo a la derecha
-
Abajo
-
Abajo a la izquierda
-
Izquierda
Cada configuración tiene un aspecto único, por lo que te recomendamos tomar tu tiempo con cada posición para determinar cuál funciona mejor con tu diseño.
Degradado elíptico
Degradado cónico
Degradados repetidos con el Constructor de Degradados de Divi
El aspecto variará según el tipo de degradado que elijas. Repetir el degradado añade un elemento de diseño interesante a tu fondo. Cuantos más puntos de color uses, más drástico será el cambio.
Patrones repetidos y efectos interesantes
Cuando se seleccionan ciertos tipos de degradado, se muestra una opción adicional para las unidades del degradado. Los tipos lineal, circular y elíptico permiten a los usuarios crear degradados de fondo impresionantes que añaden dimensión a sus diseños.
Unidades del Constructor de Degradados de Divi
Afectan el patrón creado por las opciones de repetición. Al implementar unidades de degradado, considera cómo cambiará tu diseño según la unidad seleccionada.
En nuestro ejemplo, usamos la unidad de porcentaje para el degradado. Nuestros puntos de color están configurados en 0, 2 y 10. La opacidad en los tres puntos está establecida en 70 % o 0.7.
Hemos elegido el tipo de degradado circular, configurado la posición en la parte superior izquierda y activado la repetición del degradado.
Al aplicar los ajustes del ejemplo de unidad en porcentaje, nuestro diseño cambia al seleccionar diferentes unidades.
Mejores prácticas para usar el Constructor de Degradados de Divi
A continuación, detallamos algunas mejores prácticas para sacar el máximo provecho al Constructor de Degradados de Divi.
Enfócate en familias de colores
Un buen ejemplo de uso de familias de colores en tus degradados se encuentra en el paquete de diseño de Detective Privado de Divi. Como puedes ver, este diseño utiliza colores dentro de la misma familia para crear un diseño llamativo con colores similares.
Los colores análogos son tus aliados
Marcas como BP, Red Bull y MasterCard usan colores análogos en su identidad visual. Como se mencionó antes, usar el sistema dinámico de colores mágicos de Divi es una gran manera de elegir colores para tus degradados.
Además, Adobe Color es una excelente fuente. Puede generar paletas de colores basadas en armonías análogas, monocromáticas, complementarias y otras. También hay temas de colores predefinidos disponibles. Como plus, Adobe Color es gratuito.
Los colores análogos no tienen que aplicarse solo a los colores usados en elementos. Puedes expandir su uso eligiendo imágenes para tu diseño que también incorporen esos principios.
Por ejemplo, mira el paquete de diseño de Artículos de Cuero de Divi. Las imágenes usadas en los diseños son un perfecto ejemplo de escoger imágenes que caen dentro del rango de colores análogos.
Varía los tipos de degradados
Por ejemplo, evita usar el mismo fondo degradado en cada página. Cambios sutiles crean un diseño más dinámico que mantiene interesados a los visitantes.
Si usas un degradado lineal en la sección principal, varía usando un degradado circular o cónico en otra sección de la misma página.
Lo mismo aplica para usar fondos degradados en elementos como botones. Usa fondos degradados para tus llamadas a la acción (CTA) y fondos de sección. Un gran ejemplo de esto está en el paquete de diseño de Marketing Digital de Divi.
Evita el uso excesivo de colores
Limitar los colores en un degradado puede hacer que se vea opaco y poco agradable. Intenta usar un tercer color de la misma familia. Esto añadirá profundidad y un elemento interesante a tu degradado.
Mira el paquete de diseño de Yoga en Línea de Divi como ejemplo. Aunque visualmente impresionante, el diseño limita el uso de colores a 4.
Los degradados usados en la página contienen dos colores apagados, permitiendo que el texto resalte. Se usan dos colores adicionales a lo largo de la página para dar toques de color sin ser abrumadores.
Sigue buenos principios de experiencia de usuario
Considera colocar texto y botones apilados a un lado de la sección donde se use el degradado. Si usas texto claro, coloca un color oscuro debajo.
El paquete de diseño de Destilería de Whisky de Divi es un gran ejemplo de equilibrar un fondo degradado con una superposición de texto.
Usar un fondo degradado oscuro con texto claro da como resultado un diseño llamativo y efectivo.
Haz que tus degradados sean únicos
Consulta nuestra publicación en el blog sobre Cómo combinar el Constructor de Degradados de Divi, Máscaras y Patrones para un excelente ejemplo de cómo combinar estos elementos y crear diseños impresionantes.
Continúa aprendiendo
-
18 degradados pastel gratuitos creados con el Constructor de Degradados de Divi
-
Cómo usar la opción de repetición de degradados de Divi para crear patrones de fondo personalizados
-
Cómo usar el Constructor de Degradados de Divi para mezclar múltiples colores de degradado sin esfuerzo
-
Crear nuevos degradados usando múltiples puntos de color y nuevas opciones de degradado
Popular Articles
Guía de Negocio para Resellers y Partners
En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...Ver una Demo de Scoreapps para Resellers
En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:Proporciona acceso a tus Aplicaciones
Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
Related Articles
Uso de las Opciones de Espaciado en Divi
Es fácil personalizar el espaciado en secciones, filas y módulos con las Opciones de Espaciado de Divi. El espaciado es un elemento importante en el diseño web. Ayuda a organizar tu contenido y mantener las cosas claras y equilibradas. Con Divi, es ...Uso de las Opciones de Tamaño en Divi
Las Opciones de Tamaño de Divi facilitan el ajuste del tamaño de secciones, filas, columnas y módulos en Divi. Las Opciones de Tamaño de Divi hacen que ajustar el tamaño de secciones, filas, columnas y módulos sea sencillo. El tamaño es una parte ...El sistema de gestión de colores de Divi
Cómo usar las opciones avanzadas de color de Divi. El sistema de gestión de colores de Divi ha evolucionado a lo largo de los años para convertirse en uno de los sistemas de color más robustos en el universo de WordPress. El sistema de colores de ...Uso de las Opciones de Sombra de Caja en Divi
Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...El Bloque de Diseño Divi
El Bloque de Diseño Divi te permite cargar diseños de Divi directamente dentro del editor Gutenberg. El Bloque de Diseño Divi El bloque de diseño Divi es un bloque de Gutenberg que te permite insertar o crear diseños de Divi desde cero directamente ...