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
Comment obtenir une image d’arrière-plan différente sur chaque page de son site Divi ?
2.6 pour 5 votes

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This