Agregar un degradado a su sitio web es una excelente manera de integrar el color y agregar un fondo interesante a su página. Los degradados en colores pastel se ven especialmente impresionantes en el diseño web, ya que usan colores más claros para crear mezclas sutiles, mejorando la página sin ser demasiado abrumadores. Con el nuevo generador de degradados de Divi , diseñar un hermoso degradado es más fácil que nunca. Con una potente funcionalidad y amplias opciones de personalización, puede crear diseños personalizados únicos y agregarlos a cualquier elemento. En esta publicación, puede obtener 18 degradados de pastel GRATIS creados con el generador de degradados de Divi. Además, le mostraremos cómo implementar estos gradientes en su sitio web con algunas instrucciones paso a paso.
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Aquí hay una vista previa de los gradientes gratuitos.
Descarga Los 18 Gradientes Pastel GRATIS
Para poner sus manos en los degradados pastel gratuitos, primero deberá descargarlos 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.
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!
Puede importar este diseño a su sitio web navegando a la Biblioteca Divi. Haga clic en el botón Importar y exportar en la parte superior, luego seleccione la pestaña de importación. Seleccione el archivo que descargó, luego haga clic en importar. El diseño ahora estará disponible en su Biblioteca Divi.
Puede agregar el diseño a su página eligiendo un diseño prefabricado y usando el diseño de la pestaña «Sus diseños guardados».
Cómo agregar degradados pastel a su diseño
Crear una nueva página
Comencemos usando un diseño prefabricado de la biblioteca Divi. Para este diseño, utilizaremos la página de inicio de telesalud del paquete de diseño de telesalud para mostrar nuestros gradientes.
Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.
Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.
Busque y seleccione el diseño de la página de inicio de telesalud.
Seleccione Usar este diseño para agregar el diseño a su página.
Ahora estamos listos para construir nuestro diseño.
Agregar los degradados pastel
Si está siguiendo el tutorial, abra el paquete de diseño para este tutorial en otra pestaña para acceder fácilmente a los degradados prefabricados. Copiaremos los estilos de degradado de fondo de este diseño al diseño de telesalud.
Abra la configuración del módulo para el degradado que desea usar en su diseño y copie el fondo.
Puede copiar el fondo haciendo clic derecho sobre la sección Fondo en la configuración del módulo o haciendo clic en los tres puntos al lado de Fondo y seleccionando Copiar fondo.
Si bien copiar y pegar el fondo de nuestro diseño es la forma más fácil de recrear la apariencia en su propio diseño, estos son los ajustes para el degradado que estamos usando en este tutorial:
- Colores degradados:
- 5%: #eaeff2
- 24%: #bfe4ff
- 55%: #cecef
- 77%: #dfd1f9
- 93%: #e6e3f5
- 100%: #eaeff2
- Tipo de gradiente: Elíptico
- Posición del degradado: abajo a la derecha
Ahora abramos el diseño de Telesalud y agreguemos los gradientes de fondo. Puede pegar el degradado de fondo en un módulo, sección o fila haciendo clic en los tres puntos o haciendo clic con el botón derecho en la configuración de la sección y seleccionando Pegar fondo. También puede pegar el fondo con el método abreviado de teclado Ctrl + Alt + V mientras se desplaza sobre el módulo.
Comience agregando el fondo degradado a la sección «Reinventar la rueda».
Para la sección «Algunas cosas son más fáciles desde el sofá», establezca la posición del gradiente de fondo en la parte superior derecha para que se mezcle con la sección anterior.
- Posición del degradado: arriba a la derecha
A continuación, agregue el degradado de fondo a cada uno de los módulos publicitarios circulares que rodean la imagen.
Necesitamos ajustar el texto y el color del ícono para estos anuncios publicitarios para que se destaquen contra el degradado de fondo.
- Color de texto H4: #000000
- Invertir imagen/icono: 100 %
A continuación, agregue el degradado de fondo a la fila «Conviértase en miembro hoy» y los módulos de testimonios en la siguiente sección.
Finalmente, agregue el degradado de fondo al pie de página, ¡y listo!
Resultado final
Ahora echemos un vistazo al diseño final con los degradados de fondo pastel.
Pensamientos finales
El generador de gradientes de Divi facilita el diseño de hermosos gradientes para agregar a su sitio web. Con infinitas posibilidades de diseño, puede crear fondos únicos con solo unos pocos clics. ¡Puedes usar los 18 degradados de pastel GRATIS en nuestro diseño para comenzar! Si desea obtener más información sobre el generador de gradientes de Divi, consulte nuestro tutorial para combinar gradientes de fondo con máscaras y patrones . ¿Ya probaste el nuevo generador de gradientes de Divi? ¡Háganos saber lo que piensa en los comentarios!