Diseñar con fondos degradados en Divi
Presentación del tutorial Divi
Últimamente los chicos de Divi no paran de lanzar actualizaciones de su producto. Muchas de ellas son auténticos regalos para los diseñadores. Particularmente me parece fantástico que faciliten la labor de los creadores que son más profanos en el desarrollo de código CSS. Aprenderemos a Diseñar con fondos degradados en Divi.
Así que, ante tanta y buena actualización en esta ocasión proponemos un ejercicio de diseño de secciones utilizando como hemos dicho antes los fondos degradados que incorpora Divi. Crearemos tres secciones con distintos módulos donde el fondo de cada sección cobrará especial importancia.
Aquí puedes ver cómo deben quedar nuestras secciones una vez finalicemos el tutorial.
Y esta es la estructura que hemos capturado desde el escritorio de wordpress donde puedes ver la composición de las tres secciones.
Una vez superados los preliminares vamos al lío.
Primera sección
Creamos una nueva página o entrada. Activamos Usar el constructor Divi y en la fila que nos crea por defecto (insertar columnas) añadimos dos columnas. La estructura que vamos a usar es 1/3 y 2/3.
Primer módulo: llamada a la acción
En la columna de la izquierda (1/3) agregamos un módulo de llamada a la accion (CTA).
Pocos van a ser los ajustes que configuraremos en este módulo. Sólo queremos el título, así que en la configuración del módulo, pestaña contenido, añadimos un título y dejamos contenido de texto y botón sin rellenar.
Sin salir de la pestaña contenido, en Fondo, desactivamos Usar color de fondo.
En esta pestaña no hay más que hacer. Pulsamos la pestaña Diseño y ajustamos los estilos del texto: Ponemos el color de texto a oscuro, orientación del texto: centrado. En el apartado Título Texto, marcamos mayúscula y tamaño: 30 px. Si quieres ponerle un botón (en la pestaña contenido) aquí puedes ajustar su estilo. Nosotros no hemos puesto botón.
También podemos añadir espacio si consideramos que es necesario. Yo he puesto un relleno superior del 10% (en espaciado), para que no esté tan arriba el texto.
Segundo módulo: la imagen
El módulo que vamos a incorporar en la columna de la derecha (2/3) es uno tipo imagen. De manera que clicamos en la segunda columna y seleccionamos un módulo de imagen. No es necesario ningún ajuste, simplemente importa la imagen y listo. Si quieres usar la misma imagen que yo, pulsa aquí para descargarla.
No vamos a ajustar nada en la fila, la dejamos tal cual. Así que vamos directamente a configurar nuestro fondo degradado en la sección.
Configurar el fondo degradado parea la primera sección
Abrimos los ajustes de la sección pulsando las tres líneas horizontales en el panel azul (sección estándar) y, en la primera pestaña, contenido (1), bajamos hasta donde pone Fondo y pulsamos en la segunda pestañita (2) dentro de los paneles de fondo. Hacemos click en el signo + para crear el nuevo degradado (3).
Se desplegarán entonces las opciones posibles para este fondo degradado. Configuramos de la siguiente manera:
Elegimos los colores. A nosotros nos ha gustado un amarillo (#ffd05b) como primer color y un azul suave como segundo color (rgba(12,113,195,0.34) ). Tu pon los colores que creas conveniente.
Tipo de gradiente: linear
Dirección de gradiente: 167 grados
Y en posición inicial y final lo ponemos en 55%. La posición inicial determina la ubicación vertical del primer color cuanto más alto sea el valor más abajo estará el primer color en la sección. Respecto al segundo color, si el valor es superior al primero, se creará una fusión entre ambos colores. Más distancia (mayor valor), mayor difuminado. Prueba. En el vídeo lo verás más claro.
Y así habremos terminado esta sección. Tal vez quieras mantener la disposición de dos columnas en tablets. Si es así, puedes ver como hacerlo en un tutorial reciente. Pulsa aquí para verlo. También deberías ajustar un poco el espaciado si te decides por esta opción.
Segunda sección
Para esta segunda sección vamos a necesitar dos columnas que ocuparán cada una la mitad del ancho disponible. Por lo tanto creamos un nueva sección estándar y elegimos la estructura 1/2 – 1/2.
Los módulos
En la primera columna, la de la izquierda, insertamos un módulo de imagen e importamos nuestra imagen. Si quieres usar la nuestra pulsa aquí para descargarla. Poco más que hacer en este módulo. Dependiendo de si estas usando sidebars o por simple preferencia, puedes ajustar el tamaño de la imagen en la pestaña diseño. Nosotros la hemos configurado al 65% porque nos parecía muy grande. Ajustes > tamaño > 65% y en el panel que aparece pon la alineación al centro.
En la columna de la izquierda añadimos un módulo CTA (llamada a la acción). Configuramos algunas opciones, como el título, botón y texto como harías normalmente. Juega si quieres con los espacios para posicionar el contenido del módulo a tu gusto. En el vídeo tutorial te damos alguna idea.
Configurar el fondo degradado parea la segunda sección
Ahora vamos a crear el fondo degradado y lo vamos a hacer en la fila en lugar de la sección. De manera que abrimos los ajustes de la fila, y en fondo de la columna 1 añadimos nuestro fondo degradado igual que hemos hecho antes en la primera sección. Estos son los ajustes que nosotros hemos utilizado.
Primer color: morado (#8300e9)
Segundo color: totalmente transparente, así que da igual el color que elijas (rgba(41,196,169,0)).
Tipo de degradado: radial
En dirección ponemos centrada, pero experimenta para ver las demás opciones.
Posición inicial: 50%. Cuanto menor sea el valor aquí, más pequeño será el círculo que se crea.
Posición final: 52% (un poquito más que la posición inicial para que difumine lo justo para eliminar el efecto diente de sierra.
Con esto hemos terminado la segunda sección.
Tercera sección
La tercera sección la vamos a terminar rápido. La vamos a generar a partir de la segunda. Así que duplicamos la segunda sección. A continuación invertimos la posición de los módulos. O sea, arrastramos la imagen hacia la derecha y el módulo cta a la izquierda. En el módulo imagen cambiamos la ilustración (aquí la que hemos usado) y ajustamos tamaño si es necesario.
Abrimos la configuración de la fila y borramos el fondo de la columna 1 haciendo clic en el icono de la papelera que aparece en la parte superior derecha. Vamos ahora al fondo de la columna 2, que ahora contiene el módulo imagen y añadimos el fondo degradado con estos ajustes:
Primer color: tomate(#ce491c)
Segundo color: totalmente transparente, así que da igual el color que elijas (#a0a0a0).
Tipo de degradado: lineal
Dirección: 154 grados
Posición inicial: 60%.
Posición final: 61% (un poquito más que la posición inicial para que difumine lo justo para eliminar el efecto diente de sierra.
Puede que necesites ajustar el tamaño de la fila y canalón de ancho. Experimenta sin miedo.
Y por si se te ha escapado algo, aquí puedes ver la versión en vídeo del tutorial. Si te ha gustado ¡Comparte!
