¿Cómo se consigue un color de fondo diferente en cada página de su sitio Divi?

Aunque Divi ofrece la posibilidad de elegir un color de fondo para todo el sitio, verás que es muy fácil cambiarlo a un color diferente en cada página de tu sitio.

El color de fondo sólo es visible si has elegido un diseño con la disposición de anidamiento de Divi.

¿Quiere dar a cada página de su sitio una sensación diferente? ¿Un color dedicado que difiere cada vez que el usuario navega por sus páginas?

El tema Divi no ofrece esta opción de forma nativa, pero es muy fácil de arreglar, con sólo unas pocas líneas de CSS.

Aquí está el programa:

1. Activar el diseño anidado
2. Establecer un color de fondo por defecto
3. Obtener el identificador de cada página
4. Modificar el CSS para obtener un color de fondo diferente para cada página
5. ¡Aquí está el resultado del video!
6. Declinación con fondos degradados

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

 

1 - Activar el diseño de la página anidada

Para que el color de fondo aparezca en su sitio, el diseño anidado de Divi debe estar habilitado. Para ello, basta con ir a Apariencia > Personalizar > Ajustes generales > Ajustes de diseño > Habilitardiseño anidado

Para más información sobre El diseño anidado de Divi, lea este artículo.

 

2 - Establecer un color de fondo por defecto

Para establecer el color de fondo de su sitio Divi, debe tener su código de color HTML.

Aunque no es obligatorio, será más preciso utilizar el color exacto de su "marca" que definirla "a simple vista".

Si necesita ideas, hay muchos sitios que ofrecen sugerencias o convertidores de colores:

• Adobe Color
• Código de colores HTML
• HTMLColorCode
• Allthecolours.com

Si necesitas extraer un color de una página web, te aconsejo que utilices una herramienta indispensable: un cuentagotas que recogerá por ti los códigos de color de las páginas web que visites. No pasa un día sin que lo use...

• Para Firefox: hay ColorZilla pero no es necesario instalar un plugin porque esta función es nativa en Firefox.
• Para Chrome: puedes instalar Pipeta de color o ColorZilla

Una vez que conozcas tu código de color, puedes ir a :

1. Apariencia > Personalizar
2. Haga clic en Configuración general
3. Haga clic en Fondo
4. A continuación, haga clic en "Seleccionar un color" en la opción "Color de fondo".
5. Defina su color utilizando el deslizador o el código HEX.
6. No olvides hacer clic en "Publicar " para guardar los cambios.

Ahora todo tu sitio mostrará el color de fondo que acabas de establecer (si el diseño de anidación está activado, repito).

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

 

3 - Obtener el identificador de cada página

Antes de empezar nada y de utilizar el código CSS que le sugeriré después, debe enumerar las páginas de su sitio que serán objeto de un cambio de color de fondo. Esto le permitirá obtener valores específicos de su sitio: el identificador de sus páginas. Puede ser la página de contacto, la página de servicios, la página de información, etc.

Para obtener el identificador de las páginas a modificar :

1. Vaya a la administración de la página en cuestión. Puede hacerlo desde el front office haciendo clic en Editar página (no en Activar Visual Builder).
2. Una vez en tu página en modo "edición", sólo tienes que mirar la barra de URL de tu navegador. Verá una URL como monsite.com/wp-admin/past.php?post=9&acción=editar. El número que aparece después de [post=] es el identificador de su página.

Por lo tanto, basta con localizar estos identificadores para todas las páginas que se van a modificar.

 

4 - Modificar el CSS para obtener un color de fondo diferente para cada página

Ahora que tiene los códigos de color HTML y los identificadores de sus páginas, puede adaptar el siguiente código.

Para ello, basta con copiar y pegar el siguiente código en el Apariencia > Personalizar > CSS adicional cambiando los valores en rojo por sus propios valores.

/* couleurs personnalisées pour chaque page */

.page-id-9.custom-background {
    background-color: #1bb5ea !important;
}

.page-id-28.custom-background {
    background-color: #AC58FA !important;
}

.page-id-25.custom-background {
    background-color: #e2a9f3 !important;
}

 

Explicación:

• .page-id-9 : Aquí es donde tendrá que cambiar su ID de página. Cambie el 9 por los números específicos de sus páginas.
• .custom-background : no cambie nada aquí. Esta es una clase CSS de Divi. No debe haber espacios entre .page-id-9 y .custom-background
• background-color: #xxxxxx !important; : aquí puede insertar su código de color HTML. El símbolo !important no es obligatorio

 

5 - ¡Aquí está el resultado del vídeo!

¿Qué te parece? ¿Le da ideas?

 

6 - Declinación con fondos degradados

La idea de obtener un color diferente en cada página es agradable, pero también se puede adaptar esta técnica para obtener un color de fondo degradado. ¿Es una buena idea?

En este caso, puede utilizar el siguiente código:

/* dégradé de couleurs personnalisées pour chaque page */

.page-id-9.custom-background {
background-image: linear-gradient(to bottom right, #AC58FA, #1bb5ea);
}

.page-id-28.custom-background {
background-image: linear-gradient(to bottom right, #1bb5ea, #AC58FA);
}

.page-id-25.custom-background {
background-image: linear-gradient(to bottom right, #1bb5ea, #e2a9f3);
}

.page-id-7.custom-background {
background-image: linear-gradient(to bottom right, #e2a9f3, #1bb5ea);
}

Para saber más sobre los degradados en CSS, te invito a leer este artículo.