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

Autor: Max Camuñas

Fecha: 18/07/2017

A 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.

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

33 Comentarios

  1. Raul Santa Cruz Calzada

    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

    Responder
    • Max Camuñas

      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!

      Responder
  2. German

    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.

    Responder
    • Max Camuñas

      Hola Germán,

      ¿A qué foto de todas las del post te refieres?

      Saludos

      Responder
  3. cecilia

    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!!!

    Responder
    • Max Camuñas

      Hola Celicia 🙂

      Lo tienes en la siguiente ruta:

      Apariencia > Personalizar > Combinaciones de colores

      Saludos!

      Responder
  4. Cecilia

    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!!

    Responder
    • Max Camuñas

      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!

      Responder
  5. JOEL

    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.

    Responder
    • Max Camuñas

      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!

      Responder
  6. Carlos Mendoza

    Como puedo modificar el tamaño de cada sección??

    Responder
    • Max Camuñas

      El tamaño de las secciones, filas y módulos se modifica en los ajustes de cada uno de ellos.

      Responder
  7. Dani

    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

    Responder
    • Max Camuñas

      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

      Responder
  8. Javier

    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?

    Responder
      • Javier

        Divi, pero no recuerdo que diseño predefinido era.

        Gracias, Max

        Responder
        • Max Camuñas

          ¿Tienes la última versión de Divi? (hoy mismo se ha actualizado).

          Pásame la URL de la web para verlo bien.

          Responder
          • JAvier

            Efectivamente! al actualizar se han solucionado varios problemas que habia detectado.

            Gracias!!

  9. ignacio

    hola se puede poner de fondo un slider de imagenes y arriba otro tipo de contenido ??

    Responder
    • Max Camuñas

      Hola Ignacio,

      Dame más detalles para entenderlo bien (o alguna web donde lo hayas visto).

      Saludos

      Responder
      • Ignacio

        hola quiero poner en un divi de fondo en vez de una imagen estatica, una transicion como si fueran slider

        Responder
        • Max Camuñas

          Hola Ignacio,

          En ese caso, te recomiendo hacerlo con un vídeo.

          Saludos

          Responder
  10. Mikel

    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.

    Responder
  11. Alexis

    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?

    Responder
    • Max Camuñas

      Hola Alexis,

      Claro, tienes que convertir los colores Pantone a hexadecimal o RGB para poner utilizarlos en una web 😉

      Responder
  12. José vidal

    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…

    Responder
    • Max Camuñas

      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

      Responder
  13. Agustin

    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!

    Responder
    • Max Camuñas

      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

      Responder
  14. Orlando

    Excelente tutorial me sirvió de mucho e un proyecto despues de tanto buscar.

    Responder
  15. Janly

    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

    Responder
    • Max Camuñas

      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

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!