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 :
- comment changer la couleur d’arrière-plan dans WordPress en utilisant les thèmes Full Site Editing
- comment changer la couleur de fond d’un site WordPress en utilisant les thèmes WordPress classiques
- comment changer la couleur de fond de WordPress en utilisant les CSS (fonctionne avec tous les thèmes)
- comment changer uniquement la couleur de fond de la page d’accueil de WordPress
- comment changer la couleur de fond uniquement dans des pages ou des articles spécifiques de WordPress (fonctionne avec n’importe quel thème)
- comment définir un gradient de couleur sur WordPress en utilisant les CSS ?
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.
Une fois l’éditeur de site complet ouvert, regardez en haut à droite de la page – vous trouverez l’icône Styles. Cliquez dessus.
Cliquez sur Couleurs dans le menu Styles.
Cliquez maintenant sur Arrière-plan.
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.
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.
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é.
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.
Voici un exemple tiré du thème Twenty Twenty-One. Cliquez sur l’onglet Couleurs et mode sombre.
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.
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.
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.
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.
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/:
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.
