Personalizar el color de fondo en Divi

Divi tiene un problema con la opción para personalizar el color de fondo. Y es que aunque se ha reportado el error en varias ocasiones, parece que sigue sin corregirse.

Actualmente he podido comprobarlo en la versión de Divi 3.21.4, y con la solución que os comento se puede salir del paso si es algo que necesitas con urgencia.

También te puede interesar:
Modificar altura del slider Divi
Cómo añadir un botón a un menú en WordPress
10 Plugins para administrar Roles WordPress y capacidades
Crear Cursos Online con Thrive Apprentice [+Webinar]

Configurar el color de fondo en Divi

La forma más fácil para configurar el color de fondo en Divi es desde Apariencia > Personalizar, y después en Ajustes generales > Fondo. Ahí podemos seleccionar el color de fondo que queramos, pero tendremos un pequeño problema. Si os fijáis en la imagen de abajo, el color de fondo que he seleccionado solo se ve por debajo del footer. Esto es porque la cabecera (header) y el contenido principal (main-content) tienen definido el color blanco, y al estar sobre éste, pues no se aprecia.

Vamos a ver cómo solucionarlo para que nuestro color de fondo sea visible tanto en el header como en el main-content.

Cambiar el color de fondo en el header de Divi

Para cambiar el color de fondo en el header tenemos que añadir el siguiente código CSS en nuestro tema:

#main-header {
background-color: #dae5b7 !important;
}

Tu tendrás que cambiar el código #dae5b7 por el color que tu quieras.

Cambiar el color de fondo en el contenido principal

Para cambiar el color de fondo en el main-content tenemos que añadir el siguiente código CSS en nuestro tema:

#main-content {
background-color: #dae5b7 !important;
}

Código CSS para cambiar el color de fondo al header y al main-content

En el caso de queramos cambiar el color en toda la web, podemos hacer el código CSS para que aplique el color de una sola vez a las dos zonas.

#main-header, #main-content {
background-color: #dae5b7 !important;
}

Dónde colocar el código CSS en WordPress

Hay dos sitios donde podemos colocar nuestro código CSS en WordPress.

Desde Apariencia > Personalizar y después en CSS adicional. Aquí, en las nuevas versiones de WordPress ya te valida el código CSS y te avisa de si lo has escrito con alguna errata. Si tiene errores, te recomienda no salvar los cambios porque podrías romper el sitio y dejarlo sin funcionamiento.

El otro sitio donde puedes incluirlo es en tu tema hijo o child theme. Si aún no tienes un tema hijo te recomiendo que te crees uno si vas a realizar más personalizaciones de este tipo. Aquí tienes un tutorial de cómo crear un tema hijo para WordPress.

Si usas Divi, tienes un tercer sitio donde poder colocar tu código CSS. Y es en Divi > Opciones del tema y después en la pestaña General > CSS personalizado.

Como puedes ver, es muy fácil colocar el código CSS y tienes varias opciones a elegir según tus necesidades.

Resultado

Una vez colocado el código CSS deberías de ver el resultado así. Yo he elegido un color llamativo para que puedas apreciar el cambio, pero tu deberías elegir el color que tu necesites, y después personalizar el color de la tipografía de tu web y más ajustes generales para que te quede un diseño más elegante.

Página con fondo transparente

¿Qué ocurre si ahora creamos una página nueva? Si creamos una página nueva, está vendrá por defecto con el color blanco de fondo, y volveremos a tener el mismo problema. Para que podamos visualizar el color de fondo que hemos definido tendremos que hacer que el color de fondo de la página sea transparente.

Para hacer esto, hacemos lo siguiente. Nos a vamos al editor de Divi de nuestra página, y en la sección azul pulsamos sobre el botón de configuración que viene con las tres rayitas.

Después, en la pestaña de Contenido, donde pone Fondo, pulsamos sobre el icono del + para crearle un fondo a nuestra sección.

Ahora seleccionaremos un color de fondo para nuestra sección. Como lo que queremos es que sea transparente, nos da igual el color que seleccionemos. Lo único que tenemos que hacer es mover hacia abajo el control de la derecha que os muestro en la imagen. Con ese control ajustamos la transparencia de nuestro fondo. Nosotros lo bajaremos hasta abajo del todo, para que tenga un 100% de transparencia.

Y eso es todo. Lo repetiremos con todas las secciones de nuestra página, si es que tenemos más de una, y así veremos el color de fondo que hemos definido para nuestro sitio WordPress.