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

Publicado el 24/02/2019 | 11 comentarios

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 un ambiente diferente a cada página de su sitio? ¿Un color específico 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
Couleur de fond différente sur chaque page

Diferente color de fondo en cada página de su sitio Divi

Anuncio: 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 > Habilitar diseño anidado

Para saber más 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 definirlo "a simple vista".

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

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 solo día sin que lo use...

Choisir la couleur de fond par défaut

Elija el color de fondo por defecto en las opciones de personalización de Divi

Una vez que sepas 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 usando 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 anidado está activado, repito).

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

 

3 - Obtener el identificador de cada página

Antes de empezar cualquier cosa y de utilizar el código CSS que le propondré a continuación, 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.

Obtenir l'identifiant d'une page

Cómo encontrar el ID de su página web

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

  1. Vaya a la administración de la página en cuestión. También puede hacerlo desde el front office haciendo clic en Editar página (no activar el 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.

Sólo hay que encontrar 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 tienes los códigos de color HTML y los identificadores de tus páginas, puedes 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. Cambia el 9 por los números propios de tus 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. ¿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.

Couleur dégradée en arrière-plan

Color graduado en el fondo

Couleur de fond différente sur chaque page de son site Divi
Couleur différente sur chaque page de son site Divi
Couleur de fond différente sur chaque page de Divi

1.024 palabras

4

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

11 Commentaires

  1. Mathilde

    Bonjour,
    Je n’arrive pas à utiliser une couleur de fond différente comme c’est indiqué.
    Déjà, lorsque j’active la mise en page emboitée, cela créé une sorte de bordure sur toutes les pages de mon site web. Ensuite, malgré l’activation, la couleur de fond des articles de mon blog ne varie pas.
    Merci
    Mathilde

  2. Lycia Diaz

    Bonjour Mathilde, si vous suivez le tuto vous devriez y parvenir. Il faut le faire manuellement sur chaque page/article comme indiqué dans ce tutoriel.

  3. ewa

    Bonjour Mathilde,

    Thanks very much for these code. I love it:)!

    Could You help me to change the background with your code but with animation gradient for all my sites not only for each module? What I have to do?

    * couleurs changeantes */

    .fun-color {
    -webkit-animation: random 20s infinite;
    animation: random 20s infinite;
    }

    @keyframes random {
    15% { background-color:#EBEAE9; }
    30% { background-color: #e0d3d0; }
    45% { background-color: #fbf9f8; }
    60% { background-color: #eae2df; }
    75% { background-color: #f4eeec; }
    }

  4. Lycia Diaz

    Hi Ewa ! What do you want exactly ? « Background changing color » on all your website ?

  5. Sandra

    Bonjour Lycia,

    Je veux que plusieurs pages aient la même couleur de fond. J’ai essayé de regrouper tous les id des pages concernées avec une seule ligne de code (exemple ci-dessous)

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

    Mais cela ne fonctionne pas. Suis-je obligée d’écrire une ligne de code pour chaque page id ? ou bien ai-je fait une erreur dans le code ?

    Merci pour ton aide

  6. Lycia Diaz

    Salut Sandra !
    Effectivement tu peux les regrouper normalement mais ton code ne me parait pas correct. Je ne suis pas devant l’ordinateur, je ne peux donc pas te donner le code exact (je l’ai pas en tête) mais déjà, je note qu’il manque un point devant deux de tes classes. Ensuite, si tu « colles » deux classes ensemble, ça n’aura pas le même sens. Un espace est peut-être nécessaire entre .custom-background et .page-id-xxx . Enfin, l’ordre de tes classes a une importance également… Donc tu n’es pas loin mais il faut tester avec les éléments que je viens de te donner…. 😉

  7. Sandra

    Merci Lycia. Je vais faire des tests.

  8. Petra van der Schoot

    hallo, thanks; this works very well for a page-page, but some how i can’t make it work for a project-page ;the default color stay’s visible on both sides and a small horizontal line just above the bottom menu. I don’t understand. what can i do?

  9. Lycia Diaz

    Hi Petra,
    For a Project Page, you have to change the CSS Classes. You should try « postid-xxx » instead of « page-id-xxx », like this :

    .postid-123.custom-background {
    background-color: #1bb5ea !important;
    }

    instead of

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

    I think, it would be fine 😉

  10. Petra van der schoot

    thanks very much Lydia!

  11. Lycia Diaz

    You’re Welcome !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto