18 Jul 2017
35 comentariosA la vista de que los últimos artículos que he publicado sobre diseño web en WordPress 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.
Escoge la disposición de columnas de ancho total (1/1) e inserta, por ejemplo, un módulo de texto.
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.
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:
- Fondo único. Seleccionas un único color para el fondo de la sección.
- Fondo degradado. Mezclas dos colores en forma de degradado (muy chulo).
- Fondo de imagen. Puedes insertar una imagen en el fondo de tu sección.
- Fondo de vídeo. Igual que en caso anterior, puedes incluir un vídeo como fondo.
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.
Una vez lo has seleccionado, guardas y sales.
Y aquí está el resultado.
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.
Y éste sería el resultado.
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.
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.
Queda muy bien, ¿verdad?
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).
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.
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 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.
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í.
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.
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.
Aquí puedes ver cómo queda una columna con dos módulos de texto cada uno de ellos con un fondo diferente.
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
Muy buen post Max,
Me ha gustado la posibilidad, que desconocía por completo, de añadir fondo degradado usando Divi.
Que pases una estupenda semana.
Raúl
Hola Raúl,
En realidad, esa opción tiene sólo unas semanas, desde una de las últimas actualizaciones.
Sabía que os iba a gustar este tutorial a aquellos que usáis Divi 😛
Gracias por pasarte. Un abrazo!
Hola. Y como puedes hacer con css que tu background tenga esa forma pontiaguda. Es decir, la parte final de tu background tenga una forma de flecha. Como la que muestras en la foto de este post.
Hola Germán,
¿A qué foto de todas las del post te refieres?
Saludos
Hola! Cómo se cambia el color de las COMBINACIONES DE COLORES que viene por defecto? Esta el verde, rosa, rojo... etc.. quiero poner ahi el color corporativo y no hay manera de encontrar cómo hacerlo. Gracias!!!
Hola Celicia 🙂
Lo tienes en la siguiente ruta:
Apariencia > Personalizar > Combinaciones de colores
Saludos!
Hola, ya, si... pero esos colores están predefinidos.. están esos y esos son los que están, no veo donde poner otro que no sean esas combinaciones de colores..
gracias por la respuesta!!
Hola Celicia,
Entonces lo que tienes que hacer es personalizar las diferentes opciones de tu plantilla en Apariencia > Personalizar (botones, enlaces, menús, etc).
Saludos!
Hola Max !
Excelente post.
La consulta que te hare esta fuera del tema de tu post pero quiero que me ayudes ¿Cómo puedo quitar el nombre de una pagina por defecto ejm en el tuyo en el menu dice servicios pero no quiero que esto aparezca en la pagina como titulo de la pagina, y la siguiente consulta es como haces para que tus ultimas entradas aparezcan en tres columnas como en el tuyo jejej?
Espero tu ayuda crack ✔
Muchísimas gracias.
Hola Joel,
Te respondo a las dos dudas:
1) El nombre de la página es una cosa y el texto que aparece en el menú es otra cosa. Puedes personalizarlo y editarlo a tu gusto desde las opciones de menú.
2) En Divi, el módulo blog permite colocar las entradas en fila y en formato parrilla (grid). Solo tienes que seleccionar la opción que prefieras.
Saludos!
Como puedo modificar el tamaño de cada sección??
El tamaño de las secciones, filas y módulos se modifica en los ajustes de cada uno de ellos.
Hola Max
Lo primero, muchas gracias por tu contenido.
Al insertar un vídeo como fondo en Divi no se ve en dispositivos móviles ¿Como podría hacer para poner vídeo en versión escritorio y una imagen en versión móvil?
Un saludo
Hola Dani,
Lo que puedes hacer es ocultar el modulo vídeo en la versión móvil y añadir otro con la imagen que esté oculto en la versión de escritorio.
Saludos
Saludos!
Tengo uin pequeño problema:
Por alguna razón no puedo seleccionar un color de fondo en mis secciones pero si estan activas las otras opciones, asi pues, lo que hago es seleccionar el mismo color en un degradado.
Tengo una plantilla de base de las que Divi proporciona, y he ido modificandola, supongo que habrá algo que inhabilite esta opción pero me gustaría saber como corregirlo, ¿podrias ayudarme a ello?
Hola Javier,
¿Qué plantilla es?
Divi, pero no recuerdo que diseño predefinido era.
Gracias, Max
¿Tienes la última versión de Divi? (hoy mismo se ha actualizado).
Pásame la URL de la web para verlo bien.
Efectivamente! al actualizar se han solucionado varios problemas que habia detectado.
Gracias!!
hola se puede poner de fondo un slider de imagenes y arriba otro tipo de contenido ??
Hola Ignacio,
Dame más detalles para entenderlo bien (o alguna web donde lo hayas visto).
Saludos
hola quiero poner en un divi de fondo en vez de una imagen estatica, una transicion como si fueran slider
Hola Ignacio,
En ese caso, te recomiendo hacerlo con un vídeo.
Saludos
Gran post Max!
Son infinitas las posibilidades que da el constructor DIVI.
Una herramienta fantástica.
Te permite jugar con todo tipo de diseños en los fondos.
Gracias por el tutorial.
Hola Max.
¿te ha ocurrido alguna vez que a la hora de jugar con los colores no puedas poner el código de colores del pantone?
Hola Alexis,
Claro, tienes que convertir los colores Pantone a hexadecimal o RGB para poner utilizarlos en una web 😉
Hola Max, gracias por tu esfuerzo. Quería hacerte una pregunta: ¿Se puede en divi hacer un menú lateral que muestre a la derecha el contenido seleccionado del menú? Gracias por adelantado...
Hola José,
Puedes poner el menú principal para que se abra en el lateral (menú deslizar en el personalizador) y personalizar el resto con CSS.
Saludos
Hola Max.
¿Quería consultarte como hacer en Divi para la página tenga ancho completo y que las columnas no se centren siempre al medio con márgenes a los costados? Ejemplo en el Demo de Divi Cafe en donde el contenido cubre toda la pantalla.
¡Saludos!
Hola Agustín,
Especifícame más, por favor. No te he entendido bien.
El ancho de la página puedes personalizarlo, igual que la alineación de las columnas.
Saludos
Excelente tutorial me sirvió de mucho e un proyecto despues de tanto buscar.
Hola!
En el caso de escoger la opción de insertar una imagen de fondo: ¿ cómo puedo modificar la transparencia, de manera tal que quede la imagen tenue?
Saludos
Hola Janly,
Además de la imagen, tienes que añadir un fondo degradado superpuesto a dicha imagen. Lo puedes hacer también desde las opciones de fondo.
Saludos
Hola Janly, cómo puedo degradar o poner una pantalla para que la imagen que uso como fondo se vea suficientemente clara para permitir que resalte el texto.... no logro encontrar cómo trabajando en un bloque de texto... ojalá puedas orientarme. Saludos.
Y como haria para un degradado de 3 o mas colores