Comment obtenir une couleur de fond différente sur chaque page de votre site Divi ?

Publié le 24/02/2019 | 11 commentaires

Même si Divi propose de choisir une couleur de fond pour l’ensemble de votre site, vous allez voir qu’il est très simple de modifier cela pour obtenir une couleur différente sur chaque page de votre site.

La couleur de fond est visible uniquement si vous avez choisi un design avec la mise en page emboitée de Divi.

Avez-vous envie de donner une atmosphère différente pour chaque page de votre site ? Une couleur dédiée qui diffère chaque fois que l’internaute navigue au sein de vos pages ?

Le thème Divi ne propose pas cette option de manière native mais c’est très facile d’y remédier, avec seulement quelques lignes de CSS.

Voici le programme :

  1. Activer la mise en page emboitée
  2. Définir une couleur de fond par défaut
  3. Obtenir l’identifiant de chaque page
  4. Modifier le CSS pour obtenir une couleur de fond différente à chaque page
  5. Voici le résultat vidéo !
  6. Déclinaison avec des arrières-plan en dégradé
Couleur de fond différente sur chaque page

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

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

 

1 – Activer la mise en page emboitée

Pour faire apparaitre la couleur de fond de votre site, la mise en page emboitée de Divi doit être activée. Pour cela, il suffit de vous rendre à l’onglet Apparence > Personnaliser > Paramètres Généraux > Paramètres de mise en page > Activer la mise en page emboitée

Pour en savoir plus sur la mise en page emboitée de Divi, lisez cet article.

 

2 – Définir une couleur de fond par défaut

Pour définir la couleur de fond de votre site Divi, vous devez être en possession de son code couleur HTML.

Même si cela n’est pas obligatoire, ce sera plus précis d’utiliser la couleur exacte de votre « marque » plutôt que de la définir « à vue d’œil ».

Si vous avez besoin d’idée, il existe de nombreux sites qui proposent des suggestions ou des convertisseurs de couleurs :

Si vous avez besoin d’extraire une couleur depuis une page web, je vous conseille d’utiliser un outil indispensable : une pipette qui récoltera pour vous les codes couleurs des pages web que vous visitez. Il ne se passe pas un seul jour sans que je ne l’utilise…

Choisir la couleur de fond par défaut

Choisir la couleur de fond par défaut dans les options de personnalisation de Divi

Une fois que vous connaissez votre code couleur, vous pourrez aller à :

  1. Apparence > Personnaliser
  2. Cliquez sur Paramètres Généraux
  3. Cliquez sur Fond
  4. Puis sur « Sélectionner une couleur » dans l’option « Couleur d’arrière-plan »
  5. Définissez votre couleur à l’aide du curseur ou du code HEX.
  6. N’oubliez pas de cliquer sur « Publier » pour enregistrer vos modifications.

À présent, la totalité de votre site fera apparaitre la couleur de fond que vous venez de définir (si la mise en page emboitée est activée, je le répète).

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

 

3 – Obtenir l’identifiant de chaque page

Avant de commencer quoi que ce soit et d’utiliser le code CSS que je vous propose après, vous devez lister les pages de votre site qui feront l’objet d’un changement de couleur de fond. Cela vous permettra d’obtenir des valeurs qui sont propres à votre site : l’identifiant de vos pages. Cela pourrait-être la page de contact, la page de service, la page à propos etc…

Obtenir l'identifiant d'une page

Comment trouver l’identifiant de votre page web (ID)

Pour obtenir l’identifiant des pages à modifier :

  1. Rendez-vous sur l’administration de la page en question. Vous pouvez très bien faire cela depuis le front-office en cliquant sur Modifier la page (et non sur activer le visual builder).
  2. Une fois dans votre page en mode « édition », il suffit de regarder la barre d’URL de votre navigateur. Vous verrez une URL de type monsite.com/wp-admin/past.php?post=9&action=edit. Le chiffre après [post=] est l’identifiant de votre page.

Il suffit donc de repérer ces identifiants pour toutes les pages à modifier.

 

4 – Modifier le CSS pour obtenir une couleur de fond différente à chaque page

Maintenant que vous avez en votre possession les codes couleurs HTML ainsi que les identifiants de vos pages, vous allez pouvoir adapter le code suivant.

Pour cela, il suffit de copier et coller le code ci-dessous dans l’onglet Apparence > Personnaliser > CSS additionnel en changeant les valeurs en rouge par vos propres valeurs.

/* 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;
}

 

Explications :

  • .page-id-9 : c’est ici que vous devrez changer l’identifiant de votre page. Changez le 9 par les chiffres qui sont propres à vos pages.
  • .custom-background : ne rien changer ici. C’est une classe CSS de Divi. Il ne doit pas y avoir d’espace entre .page-id-9 et .custom-background
  • background-color: #xxxxxx !important; : ici, vous pourrez insérer votre code couleur HTML. Le !important n’est pas obligatoire

 

5 – Voici le résultat vidéo !

Qu’en dites-vous ? Ça vous donne des idées ?

 

6 – Déclinaison avec des arrières-plan en dégradé

L’idée d’obtenir une couleur différente sur chaque page est sympa mais vous pouvez également adapter cette technique pour obtenir une couleur de fond en dégradé. Bonne idée ?

Dans ce cas, vous pourrez utiliser le code suivant :

/* 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);
}

Pour en savoir plus sur les gradients en CSS, je vous invite à lire cet article.

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

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

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 mots

4

Ça devrait vous plaire aussi :

Effet zoom sur image avec texte cliquable

Effet zoom sur image avec texte cliquable

Cet article vous explique comment obtenir simplement un effet zoom au survol des images avec un texte et un lien cliquable. Pas besoin d’extension, Divi permet de le faire facilement !

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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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

Pin It on Pinterest

Shares
Share This