Home » WordPress » Comment changer la couleur de fond dans WordPress

Comment changer la couleur de fond dans WordPress

Vous voulez changer la couleur d’arrière-plan de votre site Web WordPress ? Il existe plusieurs façons de le faire. Voici tout ce que vous devez savoir sur l’ajout ou la modification des couleurs d’arrière-plan dans WordPress.

Ce que vous allez apprendre dans ce tutoriel :

Commençons par définir la couleur de fond dans les thèmes Full Site Editing (FSE).

Comment modifier la couleur d’arrière-plan des thèmes Full Site Editing de WordPress ?

Les derniers thèmes WordPress par défaut comme Twenty Twenty-Three sont des thèmes Full Site Editing. Presque tous les éléments du thème peuvent être configurés à l’aide de l’éditeur de thème intégré. Il vous permet également de modifier la couleur d’arrière-plan du site.

Cliquez d’abord sur Apparence >> Éditeur dans le menu d’administration.

how to edit wordpress website colors

Une fois l’éditeur de site complet ouvert, regardez en haut à droite de la page – vous trouverez l’icône Styles. Cliquez dessus.

how to change wordpress webste colors in full site editor

Cliquez sur Couleurs dans le menu Styles.

how to change colors in wordpress

Cliquez maintenant sur Arrière-plan.

how to change background in full site editor

Une fois que vous êtes dans la section Arrière-plan, vous trouverez quelques options. Vous pouvez sélectionner une couleur solide ou un dégradé.

Si vous souhaitez utiliser une couleur unie, vous pouvez sélectionner n’importe quelle couleur parmi les couleurs prédéfinies ci-dessous, ou cliquer sur le code couleur (FFFFFF dans l’exemple) pour sélectionner la couleur de votre choix.

background color change in wordpress

WordPress vous permet littéralement de sélectionner la couleur que vous voulez pour l’arrière-plan en utilisant le sélecteur de couleur intégré. Sélectionnez la couleur de votre choix, et vous verrez à quoi elle ressemble en direct – pas besoin d’enregistrer et de rafraîchir la page à chaque fois.

how to change background color in wordpress full site editor

Si vous voulez utiliser un arrière-plan en dégradé dans WordPress, il vous permet de sélectionner un arrière-plan parmi quelques prédéfinis. Ou encore, vous pouvez créer n’importe quelle couleur d’arrière-plan dégradé que vous aimez en utilisant le sélecteur de couleurs intégré.

how to set gradient color in wordpress full site editor

N’oubliez pas de cliquer sur le bouton Enregistrer pour sauvegarder les modifications si vous voulez que l’arrière-plan soit appliqué à votre site Web.

Comment changer la couleur de fond dans les thèmes WordPress classiques

Beaucoup de thèmes WordPress ont des paramètres dans le Customizer du thème pour définir la couleur de fond.

Si votre thème WordPress possède cette fonctionnalité, vous la trouverez dans l’outil Apparence >> Personnaliser. Vous pouvez également accéder à ce même outil lorsque vous consultez votre site en tant que visiteur – il suffit de cliquer sur le lien Personnaliser en haut de la page.

wordpress where to change background color

Voici un exemple tiré du thème Twenty Twenty-One. Cliquez sur l’onglet Couleurs et mode sombre.

how to change background color in classic wordpress themes

Vous pouvez choisir parmi les couleurs prédéfinies en bas de l’onglet, ou sélectionner la couleur de votre choix dans le sélecteur de couleurs.

how to change colors in wordpress

Tous les changements de couleur que vous effectuez seront visibles immédiatement. N’oubliez pas d’enregistrer les modifications pour mettre à jour la couleur d’arrière-plan de votre site WordPress.

Comment changer la couleur de fond en utilisant le code CSS

Certains thèmes WordPress peuvent ne pas avoir d’outils pour changer la couleur de fond. Et ce n’est pas un gros problème en fait – ce n’est pas si difficile de changer la couleur d’arrière-plan en utilisant du code CSS. Cela fonctionne avec n’importe quel thème WordPress.

Pour ajouter un code CSS à WordPress, vous devez ouvrir le Customizer en utilisant le lien Customize dans Apparence >> Customize, ou dans le menu supérieur lorsque vous naviguez sur le site en tant que visiteur.

Sur le côté gauche, vous verrez le menu Customizer. Ouvrez l’onglet Additional CSS.

wordpress add css background color

Une fois que vous avez ouvert l’onglet, entrez ce code dans la case Additional CSS :

body {
   background-color: pink;
}

Le résultat s’affichera immédiatement pendant que vous saisissez le code.

wordpress how to change background color

Vous pouvez choisir une couleur plus spécifique pour votre arrière-plan au lieu des noms des couleurs principales. C’est également facile à faire – vous pouvez remplacer le nom de la couleur par son code HEX.

HEX est un code de 6 symboles (avec # devant) qui peut représenter n’importe quelle couleur. Par exemple, #FF0000 signifie rouge, #FFFFFF est blanc, #000000 est noir, et ainsi de suite. Vous pouvez obtenir le code HEX de n’importe quelle couleur en utilisant des sélecteurs de couleurs en ligne (comme https://htmlcolorcodes.com/ ).

Comment définir la couleur d’arrière-plan à l’aide du code HEX ? Facilement. Voici l’exemple de l’image ci-dessus qui doit être entré dans l’onglet Additional CSS:

body {
   background-color: #d1e4dd;
}

Comment changer la couleur de fond de la page d’accueil dans WordPress

Changer uniquement la couleur d’arrière-plan de la page d’accueil dans WordPress n’est pas du tout compliqué. Tous les thèmes WordPress correctement construits utilisent des classes de corps. Chaque page d’accueil a une classe nommée home.

Donc tout ce que vous devez faire pour changer la couleur de fond de la page d’accueil est dans cet exemple :

body.home {
   background-color: #d1e4dd;
}

N’oubliez pas de remplacer le code couleur (d1e4dd) par la couleur HEX que vous souhaitez.

Comment changer la couleur d’arrière-plan d’un article ou d’une page spécifique sur WordPress ?

Pour changer la couleur de fond d’une page ou d’un article spécifique dans WordPress, vous devez connaître quelques astuces faciles.

Tout d’abord, vous devez connaître l’ID de cette page ou de cet article spécifique de WordPress. Pour savoir quelle page a quel ID, vous devez aller dans Pages >> All Pages dans le panneau d’administration de WordPress. Essayez d’éditer la page de votre choix et regardez le lien de la page dans l’URL du navigateur. La partie qui montre ?post=[NUMERO] indique l’ID de la page. Dans l’exemple, vous voyez que l’ID de la page est 2.

where to find post or page id in wordpress

La même règle s’applique si vous voulez connaître l’ID du message. Il suffit d’ouvrir n’importe quel message(Messages >> Tous les messages), et de rechercher l’ID du message dans l’URL.

Pour définir l’arrière-plan uniquement pour une page spécifique, vous devez entrer ce code dans l’onglet Additional CSS (class : page-id-[ID de la page que vous avez trouvé dans l’URL]) :

body.page-id-2 {
   background-color: #d1e4dd;
}

Pour définir l’arrière-plan d’un message spécifique, le code est légèrement différent (class : postid-[POST ID] ) :

body.postid-2 {
   background-color: #d1e4dd;
}

C’est tout – maintenant vous savez comment ajouter une couleur d’arrière-plan personnalisée uniquement à des articles ou des pages spécifiques dans WordPress.

Comment définir une couleur d’arrière-plan en dégradé dans les thèmes WordPress classiques ?

Définir des couleurs d’arrière-plan dégradées dans des thèmes WordPress classiques est aussi facile que de définir une couleur solide. Vous avez juste besoin de l’aide des générateurs de dégradés CSS en ligne. Par exemple, celui-ci : https://cssgradient.io/:

wordpress how to setup gradient color background

Vous pouvez modifier les couleurs comme vous le souhaitez, et l’outil générera un code de dégradé d’arrière-plan personnalisé. Tout ce que vous avez à faire est de l’entrer dans WordPress de la même manière que vous avez entré les couleurs solides – en utilisant Personnaliser >> CSS supplémentaire:

body {
   background: rgb(131,58,180);
   background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

Et voilà, votre fond dégradé WordPress est prêt !

Auteur de l’image – David Pisnoy.

Tags:

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK