Comment obtenir une image d’arrière-plan différente sur chaque page de son site Divi ?

Publié le 24/02/2019 | 10 commentaires

Lors d’un précédent tuto, vous avez vu qu’il était facile d’obtenir une couleur différente sur chaque page de votre site. Je vous propose à présent de réaliser la même technique pour obtenir une image d’arrière-plan différente sur chaque page de votre site Divi.

La procédure est sensiblement pareille mais surtout, c’est tout autant facile….

Voici le programme :

  1. Activer la mise en page emboitée
  2. Définir une image d’arrière-plan par défaut
  3. Obtenir l’identifiant de chaque page
  4. Lister les URL de vos images
  5. Modifier le CSS pour afficher une image d’arrière-plan différente sur chaque page
  6. Voici le résultat en vidéo
Image de fond différente

Image d’arrière-plan différente sur chaque page du site avec 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

De la même manière que pour rendre visible la couleur de fond, vous devez activer la mise en page emboitée de Divi pour que l’on puisse apercevoir l’image d’arrière-plan de votre site Divi.

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 découvrir la procédure en détail, lisez l’article dédié à la mise en page emboitée de Divi.

 

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

Divi propose nativement cette option et c’est très facile de sélectionner votre image de fond depuis les paramètres de personnalisation.

Définir une image d'arrière-plan par défaut

Définir une image d’arrière-plan par défaut dans les paramètres de Divi

  1. Apparence > Personnaliser
  2. Cliquez sur Paramètres Généraux
  3. Cliquez sur Fond
  4. Puis sur « Sélectionner une image » dans l’option « Image de fond »
  5. Une fenêtre s’ouvrira pour vous proposer de téléverser votre image ou de la choisir parmi les éléments de votre bibliothèque de médias.
  6. Si votre image le nécessite, cochez la case « étirer l’image de fond »
  7. Pour un effet sympa, choisissez l’option « Fixée » disponible à la section « Position de fond ». L’image de fond sera fixe et le contenu de votre page glissera au défilement. N’oubliez pas de cliquer sur « Publier » pour enregistrer vos modifications.

À présent, la totalité de votre site fera apparaitre l’image d’arrière-plan que vous venez de définir.

 

3 – Obtenir l’identifiant de chaque page

Le code CSS que je vous donne un peu plus tard dans cet article aura besoin d’informations propres à chaque site. Vous devrez alors obtenir ces informations pour adapter le code CSS afin qu’il fonctionne sur votre site.

Vous devrez donc commencer par lister les pages de votre site qui feront l’objet d’un changement d’image d’arrière-plan afin de récupérer leur identifiant.

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). Ou bien depuis le back-office à l’onglet Page > Toutes les pages.
  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 cet identifiant pour chaque page à modifier.

 

4 – Lister les URL de vos images

De la même manière que l’identifiant, il y a un autre paramètre qui sera propre à votre site : l’URL de vos images.

Récupérer l'URL de l'image

Récupérer l’URL de l’image depuis la bibliothèque des médias

Vous devrez lister les URL des images que vous utiliserez en guise d’arrière-plan. Pour cela, rendez-vous à l’onglet Médias > Bibliothèque et cliquez sur l’image à définir en arrière-plan personnalisé pour récupérer son URL inscrite dans le champ Adresse Web.

Renouvelez la procédure pour toutes les images qui vous serviront d’arrière-plan.

 

5 – Modifier le CSS pour afficher une image d’arrière-plan différente sur chaque page

Copier et collez le code CSS ci-dessous dans l’onglet Apparence > Personnaliser > CSS additionnel, en prenant soin de modifier les éléments en rouge avec vos propres valeurs :

/* images personnalisées pour chaque page */

.page-id-28.custom-background {
	background-image: url("placer ici l'url de votre image");
}

.page-id-9.custom-background {
	background-image: url("placer ici l'url de votre image");
}

.page-id-25.custom-background {
	background-image: url("placer ici l'url de votre image");
}

 

Quelques explications à propos de ce code :

  • .page-id-28 : c’est ici que vous devrez changer l’identifiant de votre page. Changez le 28 par les chiffres qui sont propres à vos pages.
  • .custom-background : ne rien changer ici.
  • background-image: url(« xxx ») : ici, vous pourrez insérer l’URL de votre image à la place des xxx.

Pour en savoir plus au sujet de la propriété CSS « background-image », je vous invite à lire cette page.

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantTheme qui regorge d’idées et de tutos !

 

6 – Voici le résultat en vidéo…

Retrouvez d’autres tutos pour personnaliser Divi sur la rubrique dédiée !

Une image différente sur chaque page de son site Divi
Image d'arrière-plan différente sur chaque page de son site Divi
A background image different on each page Divi

852 mots

3

Ça devrait vous plaire aussi :

Images rognées (recadrées) dans Divi : comment éviter cela ?

Images rognées (recadrées) dans Divi : comment éviter cela ?

Pourquoi Divi affiche des images rognées ? C’est souvent le cas des vignettes des modules Blog et Portefeuille… Sans oublier la Galerie Divi… Dans ces 3 modules les images sont retaillées, rognées, recadrées ! Voici comment remédier à cela…

10 Commentaires

  1. Catherine Menguy

    Des jours que je cherchais la balise css à mettre pour modifier le fond de ma page d’accueil.. Mille mercis !

  2. Lycia Diaz

    Merci Catherine 😉

  3. Michele

    bonsoir Lycia
    2 questions
    1/peut on changer l’image de fond d’un layout ?
    2/ peut on utiliser differents layouts par page créée ?
    merci

    si tout ça c’est possible ca m’eviterait de mettre la patte aux codes

    PS j’apprends bcp dans les e books !!!

  4. Lycia Diaz

    Super que mes Ebooks t’aident Michèle ! Oui bien sûr que tu peux changer les images ! Tu dois trouver dans quel module elles ont été placées. Si c’est une image de fond, c’est souvent dans les réglages de la section (bleue) onglet contenu > fond > sous-onglet image (icône d’une image)… et oui tu peux utiliser différents layout sur chaque page.

  5. Michele

    super merci pour ta réponse je vais essayer ce soir et te tiens au courant
    merci encore

  6. Michele

    rebonjour Lycia
    ca ne marche pas
    c’était bien dans la section violette j’ai changé image de fond et elle ne remplace pas l’autre
    déjà dans Admin il y avait marqué Hero section et j’ai supprimé
    pour que ca redevienne section
    ca n’integre pas la nouvelle image et je garde le fond il y a surement une autre case à cocher
    je n’arrive pas à joindre une copie d’ecran
    si tu as une idée …je continue à chercher

  7. Michele

    j’ai posté un commentaire il y a deux heures car je n’y arrivais pas….. je ne le retrouve pas dans le fil !!
    en tous cas j’ai trouvé la solution
    il faut aller dans fond et aussi dans superposition et dans les deux modules
    si l’autre commentaire ressort efface le
    je continue à bosser
    qd j’aurai fini promis je te montre le site

  8. Lycia Diaz

    Salut Michèle.
    J’ai l’impression que tu veux aller trop vite. Il faut que tu prennes le temps d’apprivoiser Divi et de comprendre son fonctionnement global. Mes ebooks t’aident en partie, l’autre partie viendra avec le temps et la pratique. Ça ne s’acquiert pas en une journée malheureusement ! Il faut des semaines… Tu dois chercher et galérer, quelques fois, pour trouver ! Plus tu es curieuse, plus tu découvriras les options. N’hésite pas à cliquer partout et même à créer des pages de test pour mieux comprendre. Ensuite, tu seras de plus en plus efficace. Apprendre WordPress et Divi, c’est comme tout : apprendre à conduire, apprendre PhotoShop, apprendre à lire, hi hi hi !
    Donc je ne m’inquiète pas, tu vas trouver.

  9. Lycia Diaz

    Super, ben tu vois, j’ai répondu à ton 1er commentaire avant de voir celui-ci… Je savais que tu trouverais 😉

  10. Michele

    hi hi hi !!
    bon j’avance mais je fais plus que ça heureusement il pleut !!!!!
    en tous cas c’est sympa de repondre aussi vite et gratuitement en plus franchement j’adooore
    en fait j’ai acheté un domaine pour moi perso et un domaine pour mon club
    alors je fais tous les essais sur le mien et je mettrai en place sur celui du club qd je serai au top
    voili voilà
    je voudrais qd meme pas y passer tout l’été !!
    merci Lycia

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