Personnaliser l’arrière-plan de son site web

01 août 2022 - Frédérique Biau
582 vues

4 minutes

Vous voulez donner un nouvel aspect à votre site internet, quoi de mieux que de personnaliser l’arrière-plan de son site web. 

L’arrière-plan de votre site, c'est le fond de votre site, cette partie est importante puisqu’il permet d'uniformiser votre site. 

Avec notre éditeur vous pouvez personnaliser l’arrière-plan de votre site et ça en quelques clics !

C'est parti, suivez le guide !

Comment ajouter un arrière-plan ?

La personnalisation de l’arrière-plan de votre site permet de créer une ambiance graphique cohérente. Vous pouvez donner à chaque page un arrière-plan afin de différencier les thématiques des pages, ou bien insérer le même arrière-plan sur toutes vos pages pour un aspect idéal. 

Pour insérer un arrière-plan à votre site, rendez-vous sur une page de votre site en cliquant sur l’onglet Pages. Puis cliquez sur l’onglet Design > Fond du site et zone de contenu.

Après avoir cliqué sur Fond du site et zone de contenu vous allez voir apparaître, toujours dans la section Design, la zone où vous allez pouvoir opérer les modifications, donc :

  • Une première partie Fond de la page « nom de la page sélectionnée » qui permet d'ajouter un fond à votre page une image, de la couleur, un dégradé ou une vidéo, 
  • Une seconde partie Zone de contenu de la page « nom de la page sélectionnée » vous pouvez customiser la zone de contenu de la page cela permet de ne pas dégrader la lisibilité de votre contenu.

personnaliser arriere plan

La personnalisation du fond de la page

Une fois sur la page à personnaliser, vous pouvez ajouter un arrière-plan grâce aux options suivantes :

  • Aucun : l’arrière-plan sera transparent,
  • Couleur : définissez une couleur pour avoir un fond uni et qui mettra en valeur les éléments présents sur votre page,

couleur-arriere-plan.png

  • Image : vous pouvez insérer une image en provenance de vos propres fichiers, ou bien de notre banque d’images libres de droit disponible dans le gestionnaire de fichiers,

Ensuite, vous allez pouvoir choisir si vous souhaitez que le fond soit : 

  • Répétable, c'est-à-dire qui se répète à plusieurs reprises selon la longueur de votre page,
  • Parallax, l’image de fond défile en même temps que le curseur de souris de votre utilisateur. 

  • Dégradé : vous pouvez mettre en fond un dégradé puis choisir le type de dégradé que vous voulez (horizontal, vertical, radial et diagonal). Vous choisissez la couleur de votre dégradé en sélectionnant un carré, ou bien en rentrant le code couleur désiré,

À l’aide des points, vous pouvez ajuster les couleurs de votre dégradé en déplaçant les points de couleur le long de la barre avec votre curseur. Vous pouvez également ajouter des points de couleur dans votre dégradé en cliquant sur la barre. 

La case Animer permet de donner un mouvement à votre dégradé, cela permet d'ajouter de la fluidité.

  • Vidéo : dans le gestionnaire de fichiers, vous pouvez choisir une vidéo mise à disposition de YouTube, Twitch, Vimeo ou encore Dailymotion. 

La petite astuce !💡
Pour personnaliser l'arrière-plan sur tout le site, vous avez accès à une liste déroulante qui vous propose deux choix, l'un pour ajouter un arrière-plan sur tout le site, l'autre pour insérer un fond seulement sur la page sélectionnée. Pratique, non ?

Pour personnaliser la zone de contenu de votre page, il vous suffit de cocher la case « Afficher la zone de contenu ». 

Les options de personnalisation de la zone de contenu sont les suivantes : 

  • Personnaliser : dans cette zone vous devez sélectionner le fond de votre zone de contenu, soit choisir un fond uni ou bien réaliser un dégradé,
  • Largeur : définissez ici la taille de votre zone de contenu, celle-ci peut prendre la largeur de la page, ou bien être réduite afin de laisser apparaître l'arrière-plan de votre site,
  • Marge du haut et Marge du bas : à l'aide de la réglette, choisissez l'espace que vous aurez entre le haut de votre page et le bas de votre footer, 
  • Ombre : vous avez la possibilité de mettre une ombre derrière votre zone de contenu pour cela vous pouvoir définir la couleur, la taille de l'ombre, mais aussi la position (à l'horizontal et à la vertical) ceci grâce à la réglette,  
  • Bordures : vous pouvez ajouter une bordure à votre zone de contenu, ensuite choisissez une couleur, l'épaisseur et les angles de votre bordure. 

Quelques conseils pour personnaliser l’arrière-plan de votre site internet

Pour finir, on vous donne quelques conseils pour personnaliser votre arrière-plan efficacement. 

#1 Utilisez des photos de qualité 

Si vous décidez de mettre en arrière-plan une photo, veillez à sélectionner une photo de qualité qui ne sera pas pixelisée.  

#2 Le contenu est le plus important 

Le contenu présent sur vos pages doit être lisible, sur des pages dans lesquels vous avez du contenu essentiel, préférez un fond uni qui laisse apparaître vos textes et autres éléments. 

#3 Gardez une cohérence visuelle 

Afin de garder une homogénéité dans votre site, utilisez des images et des couleurs ayant une base commune. De plus, veillez à respecter votre charte graphique en reprenant les couleurs de votre logo. 

#4 Veillez au responsive 

Un site doit être responsive puisque la majorité des internautes utilisent un appareil mobile pour réaliser leurs recherches, même si vous réalisez votre site internet sur un ordinateur ce dernier doit répondre au code du responsive. Si vous insérez une photo en fond de site vérifiez qu'elle s'adapte sur des petits écrans. 

 

À vous de jouer !

Frédérique Biau
Rédactrice et traductrice
Passionnée par la science-fiction, les nouvelles technologies, l’écriture et l’art en général, j’ai commencé ma carrière dans l’administration et la gestion des affaires culturelles. Et c’est avec plaisir et enthousiasme que je suis rédactrice et traductrice sur le web, depuis maintenant près de 9 ans. ✍️

Dernière mise à jour : 01 août 2022

Articles liés

Quoi de neuf ?
Les dernières mises à jour et nouveautés sur notre outil, après un décryptage poussé auprès de nos développeurs.