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
Comment obtenir une couleur de fond différente sur chaque page de votre site Divi ?
2.6 pour 5 votes

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This