Vous souhaitez donner à votre site WordPress un nouveau look sans passer des heures sur des modifications de design complexes ?
Nous créons des sites WordPress depuis 2008. Et nous pouvons vous dire avec certitude que la modification de la couleur d’arrière-plan de votre site est l’un des moyens les plus rapides de transformer l’apparence de votre site.
Cependant, avec tous les thèmes et éditeurs/éditrices WordPress disponibles, trouver la bonne méthode peut sembler insurmontable pour les débutants.
Dans ce guide facile à suivre, nous vous montrerons exactement comment modifier la couleur d’arrière-plan de votre WordPress, quel que soit le thème ou le constructeur de page que vous utilisez.
Pourquoi la couleur de votre arrière-plan WordPress est vraiment importante 🎨
Considérez la couleur d’arrière-plan de votre site comme les murs de votre maison numérique. Bien que votre thème WordPress soit livré avec une couleur par défaut, choisir le bon arrière-plan peut faire une grande différence dans la façon dont votre site se sent accueillant pour les internautes.
Voici pourquoi cet élément de conception de WordPress est si important :
- Ils facilitent la lecture de votre contenu
- Ils aident à faire ressortir les informations importantes.
- Les Réglages définissent l’ambiance de votre site.
- Ils peuvent donner à votre site un aspect plus professionnel
La bonne couleur d’arrière-plan peut aider à mettre en évidence vos boutons importants et à augmenter vos conversions. Vous pouvez également utiliser différentes couleurs pour mieux organiser votre contenu, comme utiliser des couleurs spécifiques pour différentes catégories de blog ou des annonces spéciales.
Et si vous souhaitez rendre votre site encore plus attrayant, vous pouvez même ajouter des arrière-plans vidéo pour attirer l’attention de vos internautes.
Ceci étant dit, voyons comment modifier la couleur d’arrière-plan dans WordPress. Nous allons vous afficher différentes façons de personnaliser la couleur d’arrière-plan afin que vous puissiez sauter à la section que vous préférez :
- How to Change Background Color in WordPress Theme Customizer
- How to Change Background Color in Full Site Editor (2024 Method)
- How to Change Background Color in WordPress With CSS
- How to Randomly Change Background Colors in WordPress
- How to Change Background Color for Individual Posts
- Bonus Tip: Use a Page Builder for More Design Control
Comment modifier la couleur d’arrière-plan dans le personnalisateur de thème WordPress
En fonction de votre thème, vous pourrez peut-être modifier la couleur de l’arrière-plan à l’aide de l’Outil de personnalisation du thème WordPress. Il vous permet de modifier l’apparence de votre site en temps réel et sans avoir besoin de modifier le code.
Pour accéder à l’Outil de personnalisation du thème WordPress, vous pouvez vous connecter à votre site, puis aller dans Apparence ” Personnaliser.
Cela ouvrira l’Outil de personnalisation du thème, où vous trouverez de multiples options pour modifier votre thème. Cela inclut les menus, les couleurs, la page d’accueil, les widgets, l’image d’arrière-plan, et plus encore.
Les options spécifiques disponibles dépendront du thème WordPress utilisé par votre site. Pour ce tutoriel, nous utilisons le thème par défaut Twenty Twenty-One.
Pour modifier la couleur d’arrière-plan de votre site, cliquez sur l’onglet “Modifications et mode sombre” dans le menu de gauche.
Ensuite, vous devez cliquer sur l’option “Couleur d’arrière-plan” et choisir une couleur pour votre site.
Vous pouvez utiliser le sélecteur de couleurs ou saisir un code de couleur hexadécimal pour votre arrière-plan.
Lorsque vous avez terminé vos modifications, n’oubliez pas de cliquer sur le bouton “Publier”.
Vous pouvez maintenant visiter votre site WordPress pour voir la nouvelle couleur d’arrière-plan en action.
Il se peut que votre thème ne dispose pas de cette option dans le personnalisateur de thème. Dans ce cas, vous pouvez essayer l’une des méthodes ci-dessous.
Modifier la couleur d’arrière-plan dans l’éditeur du site complet (Méthode 2024)
L’Éditeur de site complet (Éditeur de site) est une plateforme d’édition WordPress permettant de modifier les thèmes sur blocs. Cet éditeur rend super facile la modification de la couleur d’arrière-plan de votre site. Voyons ensemble comment procéder.
Commencez par aller dans Apparence ” Éditeur dans votre tableau de bord WordPress.
Vous verrez maintenant un bouton “Styles” dans l’une des options du menu.
Allez-y et cliquez dessus.
Cliquez ensuite sur le bouton de modification du crayon.
Vous accédez ainsi à l’interface de modification.
Vous remarquerez maintenant un panneau pratique sur le côté droit de votre écran. Il s’agit du centre de contrôle de la conception, où vous pouvez modifier les couleurs, les polices et bien plus encore.
Pour modifier la couleur de votre arrière-plan, il suffit de cliquer sur “Couleurs” dans le panneau “Modifications”.
Cliquez ensuite sur “Arrière-plan”.
Vous pouvez maintenant choisir entre une couleur unie ou créer un dégradé. N’hésitez pas à choisir ce qui correspond à votre style. Lorsque vous êtes satisfait de votre choix, cliquez sur “Enregistrer” et le tour est joué !
Comment modifier la couleur d’arrière-plan de WordPress avec CSS
Vous vous demandez comment modifier la couleur d’arrière-plan à l’aide de CSS ?
Une autre façon de modifier la couleur d’arrière-plan de votre site WordPress consiste à ajouter un CSS personnalisé dans le personnalisateur de thème WordPress.
Pour commencer, allez dans Apparence ” Personnaliser, puis dans l’onglet ” CSS supplémentaires “.
Ensuite, vous pouvez saisir le code suivant :
1 2 3 | body { background-color: #FFFFFF;} |
Il vous suffit de remplacer le code de la couleur d’arrière-plan par le code de la couleur que vous souhaitez utiliser sur votre site. Saisissez ensuite le code dans l’onglet Additional CSS.
Lorsque vous avez terminé, n’oubliez pas de cliquer sur le bouton “Publier”. Vous pouvez maintenant visiter votre site pour voir la nouvelle couleur d’arrière-plan.
Pour plus de détails, veuillez consulter notre guide sur la façon d’ajouter facilement des CSS personnalisés à votre site WordPress.
Comment modifier aléatoirement les couleurs d’arrière-plan sur WordPress
Vous cherchez un moyen de modifier aléatoirement la couleur de l’arrière-plan dans WordPress ?
Vous pouvez ajouter un effet de modification en douceur de la couleur de l’arrière-plan pour assurer une transition automatique entre différentes couleurs d’arrière-plan. L’effet passe par plusieurs couleurs jusqu’à la couleur finale.
Pour ajouter l’effet, vous devrez ajouter du code à votre site WordPress. Nous vous expliquons ci-dessous comment procéder.
La première chose à faire est de trouver la classe CSS de la zone où vous souhaitez ajouter l’effet de modification de la couleur d’arrière-plan.
Vous pouvez le faire en utilisant l’outil Inspecter dans votre navigateur. Il vous suffit de placer votre souris sur la zone dont vous souhaitez modifier la couleur et de cliquer avec le bouton droit de la souris pour sélectionner l’outil Inspecter.
Ensuite, vous devez indiquer la classe CSS que vous souhaitez cibler. Par exemple, dans la capture d’écran ci-dessus, nous voulons cibler la zone avec une classe CSS “page-header”.
Ensuite, vous devez ouvrir un éditeur/éditrices de texte sur votre ordinateur, comme un bloc-notes, et créer un nouveau fichier. Vous devrez enregistrer le fichier sous le nom “wpb-background-tutorial.js” sur votre ordinateur.
Une fois que c’est fait, vous pouvez ajouter le code suivant au fichier JS que vous venez de créer :
1 2 3 4 5 6 7 8 9 10 11 12 | jQuery(function($){ $('.page-header').each(function(){ var $this = $(this), colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function(){ var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); }); |
Si vous étudiez le code, vous remarquerez que nous avons utilisé la classe CSS “page en-tête”, car c’est la zone que nous voulons cibler sur notre site.
Vous verrez également que nous avons utilisé quatre couleurs en utilisant le code hexadécimal. Vous pouvez ajouter autant de couleurs que vous le souhaitez pour votre arrière-plan. Il vous suffit de saisir les codes de couleur dans l’extrait de code et de les séparer à l’aide d’une virgule et de guillemets simples, comme les autres couleurs.
Maintenant que votre fichier JS est prêt, vous devez le téléverser dans le dossier JS de votre thème WordPress à l’aide d’un service de protocole de transfert de fichiers (FTP).
Pour ce tutoriel, nous utilisons FileZilla. Il s’agit d’un client FTP gratuit pour Windows, Mac et Linux, très facile à utiliser.
Pour commencer, vous devez vous connecter au serveur FTP de votre site. Vous trouverez les infos connexion dans l’e-mail de votre fournisseur d’hébergement ou dans le Tableau de bord cPanel de votre compte d’hébergement.
Une fois connecté, vous verrez une liste de dossiers et de fichiers de votre site dans la colonne ‘Remote site’. Allez-y et naviguez jusqu’au dossier JS dans le thème de votre site.
Si votre thème n’a pas de dossier JS, vous pouvez en créer un.
Cliquez simplement avec le bouton droit de la souris sur le dossier de votre thème dans le client FTP et cliquez sur l’option “Créer un répertoire”.
Ensuite, vous devez ouvrir l’emplacement de votre fichier JS dans la colonne “Site local”.
Cliquez ensuite avec le bouton droit de la souris sur le fichier et cliquez sur la faculté de Téléverser pour ajouter le fichier à votre thème.
Pour plus de détails, vous pouvez suivre notre tutoriel sur l’utilisation du FTP pour téléverser des fichiers sur WordPress.
Ensuite, vous devez saisir le code suivant dans le fichier funtions.php de votre thème. Ce code charge correctement le fichier JavaScript et le script jQuery dépendant dont vous avez besoin pour que ce code fonctionne :
1 2 3 4 | function wpb_bg_color_scripts() {wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); }add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); |
Nous vous recommandons d’utiliser l’extension gratuite WPCode pour ajouter le code à votre site en toute sécurité. Pour plus de détails, consultez notre guide sur la façon de coller des extraits du web dans WordPress.
Vous pouvez maintenant visiter votre site pour voir les modifications aléatoires des couleurs en action dans la zone que vous avez ciblée.
Comment modifier la couleur d’arrière-plan des publications individuelles ?
Vous pouvez également modifier la couleur d’arrière-plan de chaque article de blog dans WordPress au lieu d’utiliser une couleur unique sur l’ensemble de votre site à l’aide d’un CSS personnalisé.
Il vous permet de modifier l’apparence de certaines publications et de personnaliser leur arrière-plan. Par exemple, vous pouvez personnaliser le style de chaque publication en fonction des auteurs/autrices ou afficher une couleur d’arrière-plan différente pour votre publication la plus commentée.
Vous pouvez même modifier la couleur d’arrière-plan des publications d’une catégorie particulière. Par exemple, les publications de nouvelles peuvent avoir des couleurs d’arrière-plan différentes de celles des tutoriels.
La première chose à faire est de trouver la classe post ID dans le CSS de votre thème. Vous pouvez le faire en voyant n’importe quelle publication de blog, puis en cliquant avec le bouton droit de la souris pour utiliser l’outil Inspecter dans votre navigateur.
Voici un exemple de ce à quoi il ressemblerait :
1 | <article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized"> |
Une fois que vous avez votre ID de publication, vous pouvez modifier la couleur d’arrière-plan d’une publication individuelle en utilisant le CSS personnalisé suivant. Remplacez simplement l’ID de la publication par le vôtre et le code de la couleur d’arrière-plan que vous souhaitez.
1 2 3 4 | .post-104 {background-color: #D7DEB5;color:#FFFFFF;} |
Pour ajouter la CSS personnalisée, vous pouvez utiliser le personnalisateur de thème WordPress. Confirmez d’abord que vous êtes connecté à votre site WordPress. Ensuite, visitez votre publication de blog et cliquez sur l’option ” Personnaliser ” en haut.
Ensuite, dirigez-vous vers l’onglet Additional CSS dans le menu de gauche.
Saisissez ensuite le CSS personnalisé.
Une fois que c’est fait, cliquez sur le bouton “Publier”.
Vous pouvez maintenant visiter votre publication de blog pour voir la nouvelle couleur d’arrière-plan.
Si vous souhaitez modifier la couleur d’arrière-plan en fonction de l’auteur, des auteurs/autrices ou de la catégorie, alors consultez notre tutoriel détaillé sur la façon de styliser chaque publication WordPress différemment.
Astuce supplémentaire : Utiliser un constructeur de page pour mieux contrôler la conception des pages
Modifier les couleurs d’arrière-plan n’est qu’un début. Si vous souhaitez prendre le contrôle total de la conception de votre site, un constructeur de page peut vous ouvrir bien d’autres possibilités.
Nous aimons utiliser SeedProd, le constructeur de page le plus populaire pour WordPress, parce qu’il vous permet de.. :
- Concevoir n’importe quelle page sans codage
- Outil de personnalisation des couleurs, des mises en page et de l’espacement
- Créez des pages d’aspect professionnel en quelques minutes
- Faites en sorte que vos pages soient superbes sur tous les appareils.
Premiers pas est facile – il suffit d’installer et d’activer SeedProd en utilisant notre guide simple d’installation de l’extension WordPress.
Note : Vous pouvez commencer avec la version gratuite, mais SeedProd Pro vous donne accès à plus de modèles et d’options de conception si vous en avez besoin.
Une fois l’extension activée, il vous sera demandé de saisir votre clé de licence. Vous pouvez trouver la clé dans votre zone de compte SeedProd. Après avoir saisi/saisie la clé, cliquez sur le bouton ‘Verify Key’.
Ensuite, vous pouvez vous rendre sur SeedProd ” Pages.
À partir de là, cliquez sur le bouton ” Ajouter une nouvelle page d’atterrissage “.
Après cela, vous devrez sélectionner un thème pour votre page d’atterrissage. SeedProd propose de nombreux modèles de pages d’atterrissage magnifiques pour commencer.
Vous pouvez également utiliser un modèle vierge pour partir de zéro. Cependant, nous suggérons d’utiliser un modèle car c’est un moyen plus facile et plus rapide de créer une page d’atterrissage.
Lorsque vous sélectionnez un Modèle, vous êtes invité à saisir un Nom de page et à sélectionner une URL.
Ensuite, il suffit de cliquer sur le bouton “Enregistrer et commencer à modifier la page”.
Sur l’écran suivant, vous verrez le constructeur de page SeedProd. Ici, vous pouvez utiliser le constructeur par glisser-déposer pour ajouter des blocs à partir du menu sur votre gauche. Vous pouvez ajouter un titre, une vidéo, une image, un bouton, etc.
Lorsque vous défilez vers le bas, il y a plus de blocs sous la section Avancé. Par exemple, vous pouvez ajouter un compte à rebours pour créer une urgence, afficher les profils sociaux pour augmenter le nombre d’abonnés, ajouter un formulaire d’option pour collecter des prospects, et plus encore.
Grâce au constructeur par glisser-déposer, il est possible de modifier sans effort la position de chaque bloc sur votre Page atterrissage. Vous pouvez même modifier la mise en page, la taille, la couleur et la police du texte.
Pour modifier la couleur d’arrière-plan de votre page d’atterrissage, il vous suffit de sélectionner n’importe quelle section de la page. Vous verrez maintenant des options dans le menu sur votre gauche pour modifier le style et la couleur de l’arrière-plan, et ajouter une image.
Une fois que vous avez fini de modifier votre page d’atterrissage, n’oubliez pas de cliquer sur le bouton ” Enregistrer ” en haut.
Titre, vous pouvez vous diriger vers l’onglet ‘Connect’ et intégrer la page avec différents services de marketing e-mail. Par exemple, vous pouvez vous connecter à Constant Contact, Brevo (anciennement Sendinblue) et d’autres.
Ensuite, cliquez sur l’onglet “Réglages de la page”.
Ici, vous pouvez modifier l’état de la page de Brouillon à Publier pour mettre votre page en ligne.
À part cela, vous pouvez également modifier les Réglages SEO de la page, voir les analyses, ajouter du code personnalisé sous Scripts, et saisir un domaine personnalisé.
Une fois que vous avez terminé, vous pouvez quitter le constructeur de page de SeedProd et visiter votre page d’atterrissage personnalisée.
Tutoriel vidéo
Nous espérons que cet article vous a aidé à apprendre comment modifier la couleur d’arrière-plan sur WordPress. Vous pouvez également consulter notre guide sur la conversion de Figma vers WordPress et notre comparatif des meilleurs logiciels de création de sites web.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.