A la vista de que los últimos artículos que he publicado sobre diseño web han funcionado genial y han gustado mucho en general, he decidido preparar este post en el que te voy a explicar cómo personalizar el fondo de las secciones, columnas y módulos si utilizas Divi como maquetador visual.

Por todos es sabido que Divi es un maquetador que te permite personalizar al máximo todos los elementos de un sitio web, pero con su última actualización este nivel de personalización ha ido más allá y los fondos son unos de sus grandes protagonistas.

¿Por qué?

Antes podíamos personalizar el color y el fondo de nuestros elementos, pero ahora Divi ha hecho esta tarea mucho más sencilla y además te ofrece diferentes opciones.

De modo que, si quieres aprender cómo personalizar el fondo de las secciones, columnas y módulos en Divi, te voy a enseñar a hacerlo paso a paso en este post.

 

Personalizar el fondo de las secciones en Divi


Lo primero que te voy a enseñar es cómo personalizar una sección en Divi del tipo que prefieras. Esto es válido para secciones estándares, de anchura completa, especiales y las que importes desde tu biblioteca.

Personalizar el fondo de las secciones en Divi

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Escoge la disposición de columnas de ancho total (1/1) e inserta, por ejemplo, un módulo de texto.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Dentro del módulo de texto, vamos a escribir lo que queramos (en mi caso el título de este post con tamaño de H1 o párrafo 1), céntralo, ponlo en negrita y guárdalo.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Para cambiar el fondo de toda la sección, tienes que ir a sus ajustes y en el apartado background encontrarás cuatro opciones para personalizar el fondo:

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

  1. Fondo único. Seleccionas un único color para el fondo de la sección.
  2. Fondo degradado. Mezclas dos colores en forma de degradado (muy chulo).
  3. Fondo de imagen. Puedes insertar una imagen en el fondo de tu sección.
  4. Fondo de vídeo. Igual que en caso anterior, puedes incluir un vídeo como fondo.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

 

Fondo de color único en Divi

Para añadir un fondo único, solo tienes que clicar en el botón + y seleccionar el color que quieras en la paleta de colores que aparece. En mi caso voy a añadir el azul de este blog.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Una vez lo has seleccionado, guardas y sales.

Y aquí está el resultado.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

 

Fondo degradado en Divi

El siguiente tipo de fondo que Divi te permite añadir en tus diseños es el degradado, es decir, la combinación de dos colores.

Para ello, voy a insertar otra sección de las mismas características y un módulo con el mismo texto.

En esta ocasión, para el fondo voy a añadir el azul principal de este blog y otro tono más claro que utilizado de forma complementaria.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Y éste sería el resultado.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

 

Fondo con imagen en Divi

Si lo que quieres es crear una sección que tenga una imagen de fondo (del tipo slide), Divi también te permite esa opción.

Para ello, solo tienes que seleccionar la imagen que quieras poner de fondo desde tu ordenador o tu biblioteca de WordPress.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

En este caso, he añadido una fila con tres columnas y he puesto un margen superior e inferior de 150px para ajustar un poco la imagen.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Queda muy bien, ¿verdad?

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

 

Fondo con vídeo en Divi

Añadir un vídeo en el fondo de una sección es muy similar al caso de la imagen. Para ello, tienes dos opciones:

  • Subir el vídeo a tu biblioteca de medios de WordPress. No te lo recomiendo porque los vídeos pesan mucho y, por lo tanto, consumen una gran cantidad de recursos.
  • Insertar el vídeo desde una URL, ya sea YouTube o Vimeo, por ejemplo (ésta es la opción que te recomiendo).

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

 

Personalizar el fondo de las columnas en Divi


Si lo que quieres es cambiar el fondo de tus columnas pero no del módulo entero, el proceso a seguir es muy similar, pero con algunas diferencias.

Para personalizar el fondo de una columna en Divi tienes las mismas cuatro opciones que acabamos de ver para las secciones.

Lo primero que debes hacer es ir a las opciones de la columna, como puedes ver en esta imagen.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Una vez dentro, en el apartado background puedes elegir entre una de las cuatro opciones que te he comentado en el epígrafe anterior: color único, degradado con dos colores, imagen y vídeo.

En ese caso, he optado por un fondo del color azul corporativo del blog y aquí puedes ver el resultado.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

 

Cómo personalizar el fondo de una columna con varios módulos

Si quieres personalizar el fondo de una columna que tiene varios módulos, puedes hacerlo desde los ajustes de la columna.

En mi ejemplo, voy a hacerlo con una columna que tiene tres módulos.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Si te vas a los ajustes de la columna, en el apartado background te aparece una opción para añadir un fondo en cada uno de los módulos, como puedes ver aquí.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Para este ejemplo, he añadido un fondo único en el primer módulo, un fondo degradado en el segundo y una imagen en el tercero.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Por supuesto, faltaría darle algo más de formato, ajustar los márgenes, reducir el ancho del canalón, etc, pero puedes ver cómo hacerlo.

 

Personalizar el fondo de los módulos en Divi


Por último, te voy a explicar cómo personalizar el fondo de los módulos en Divi, aunque el procedimiento es muy similar al de los casos anteriores.

Para ello, tienes que ir a los ajustes del módulo en cuestión y debajo del editor de contenido encontrarás las cuatro opciones para añadir un fondo personalizado.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Aquí puedes ver cómo queda una columna con dos módulos de texto cada uno de ellos con un fondo diferente.

Cómo personalizar el fondo de las secciones, columnas y módulos en Divi

Como en el caso anterior, faltaría personalizar el formato, pero todos esos detalles te los explico en el siguiente vídeo 😉

Espero que este tutorial te sea de gran utilidad para conocer el funcionamiento de Divi y para personalizar más aún los detalles de tu plantilla.

IMAGEN: Shutterstock

Pin It on Pinterest

Share This