Comment changer la couleur d'arrière-plan dans WordPress (Guide pour débutants)

La couleur d'arrière-plan de votre site Web donne le ton à vos visiteurs.

Peut-être souhaitez-vous quelque chose de propre et professionnel, de chaleureux et accueillant, ou d'audacieux et créatif – quelle que soit l'ambiance que vous recherchez, la bonne couleur d'arrière-plan peut faire toute la différence.

La bonne nouvelle est que le changer ne nécessite aucune compétence technique ni d'outils coûteux. WordPress dispose de fonctionnalités intégrées qui vous permettent de personnaliser les couleurs en quelques clics.

Après avoir aidé de nombreux propriétaires de sites à personnaliser leurs sites Web, nous avons constaté que la plupart des gens sont surpris de la simplicité et de l'immédiateté du processus.

Nous vous présenterons trois méthodes simples pour mettre à jour la couleur d'arrière-plan de votre site WordPress, en commençant par l'option la plus conviviale pour les débutants et en passant à des techniques légèrement plus avancées.

Pourquoi la couleur d'arrière-plan de votre site WordPress est vraiment importante 🎨

Pensez à la couleur d'arrière-plan de votre site Web comme aux 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 est accueillant pour les visiteurs.

Voici pourquoi cet élément de conception WordPress est si important :

• Ils rendent votre contenu plus facile à lire
• Ils aident les informations importantes à ressortir
• Ils définissent l'ambiance de votre site Web
• Ils peuvent rendre votre site 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, par exemple en utilisant des couleurs spécifiques pour différentes catégories de blog ou des annonces spéciales.

Et si vous voulez rendre votre site encore plus attrayant, vous pouvez même ajouter des arrière-plans vidéo pour capter l'attention de vos visiteurs.

Cela étant dit, examinons comment changer la couleur d'arrière-plan dans WordPress. Nous vous montrerons différentes façons de personnaliser la couleur d'arrière-plan afin que vous puissiez passer directement à la section que vous préférez :

• Comment changer la couleur d'arrière-plan dans le personnalisateur de thème WordPress
• Comment changer la couleur d'arrière-plan dans l'éditeur de site complet (méthode 2024)
• Comment changer la couleur d'arrière-plan dans WordPress avec CSS
• Comment changer aléatoirement les couleurs d'arrière-plan dans WordPress
• Comment changer la couleur d'arrière-plan pour les articles individuels
• Bonus Tip: Use a Page Builder for More Design Control
• FAQ : Changer les couleurs d'arrière-plan dans WordPress

Comment changer la couleur d'arrière-plan dans le personnalisateur de thème WordPress

Selon votre thème, vous pourrez peut-être changer la couleur d'arrière-plan en utilisant le personnalisateur de thème WordPress. Il vous permet de modifier l'apparence de votre site en temps réel et sans avoir à modifier le code.

Pour accéder au personnalisateur de thème WordPress, vous pouvez vous connecter à votre site Web, puis aller dans Apparence » Personnaliser.

Cela ouvrira le personnaliseur de thème, où vous trouverez plusieurs 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 changer la couleur d'arrière-plan de votre site web, cliquez sur l'onglet de réglages « Couleurs & Mode sombre » dans le menu de gauche.

Ensuite, vous devrez cliquer sur l'option « Couleur d'arrière-plan » et choisir une couleur pour votre site web.

Vous pouvez utiliser l'outil de sélection de couleur ou entrer un code couleur Hex pour votre arrière-plan.

Lorsque vous avez terminé les modifications, n'oubliez pas de cliquer sur le bouton « Publier ».

Vous pouvez maintenant visiter votre site Web WordPress pour voir la nouvelle couleur d'arrière-plan en action.

Votre thème peut ne pas avoir cette option disponible dans le personnaliseur de thème. Dans ce cas, vous pouvez essayer l'une des méthodes ci-dessous.

Comment changer la couleur d'arrière-plan dans l'éditeur de site complet (méthode 2024)

L'éditeur de site complet (FSE) est une plateforme d'édition WordPress pour l'édition de thèmes de blocs. Cet éditeur facilite grandement la modification de la couleur d'arrière-plan de votre site. Passons en revue le processus ensemble.

Commencez par aller dans Apparence » Éditeur dans votre tableau de bord WordPress.

Maintenant, vous verrez un bouton « Styles » dans l'une des options du menu.

Cliquez dessus.

Maintenant, cliquez sur le bouton d'édition en forme de crayon.

Cela vous amènera à l'interface d'édition.

Maintenant, vous remarquerez un panneau pratique sur le côté droit de votre écran. C'est votre centre de contrôle de conception où vous pouvez changer les couleurs, les polices, et plus encore.

Pour changer la couleur de votre arrière-plan, cliquez simplement sur « Couleurs » dans le panneau Styles.

Ensuite, cliquez 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, appuyez sur « Enregistrer » et vous avez terminé !

Comment changer la couleur d'arrière-plan dans WordPress avec CSS

Vous vous demandez comment changer la couleur de l'arrière-plan en utilisant CSS ?

Une autre façon de changer la couleur d'arrière-plan de votre site Web WordPress est d'ajouter du CSS personnalisé dans le personnaliseur de thème WordPress.

Pour commencer, rendez-vous sur Apparence » Personnaliser, puis accédez à l'onglet « CSS additionnel ».

Ensuite, vous pouvez entrer le code suivant :

body {
 background-color: #FFFFFF;
}

Tout ce que vous avez à faire est de remplacer le code couleur d'arrière-plan par le code couleur que vous souhaitez utiliser sur votre site web. Ensuite, entrez le code dans l'onglet CSS additionnel.

Lorsque vous avez terminé, n'oubliez pas de cliquer sur le bouton « Publier ». Vous pouvez maintenant visiter votre site web pour voir la nouvelle couleur d'arrière-plan.

Pour plus de détails, veuillez consulter notre guide sur comment ajouter facilement du CSS personnalisé à votre site WordPress.

Comment changer aléatoirement les couleurs d'arrière-plan dans WordPress

Maintenant, cherchez-vous un moyen de changer aléatoirement la couleur d'arrière-plan dans WordPress ?

Vous pouvez ajouter un effet de changement de couleur d'arrière-plan doux pour passer automatiquement d'une couleur d'arrière-plan à une autre. L'effet parcourt plusieurs couleurs jusqu'à atteindre la couleur finale.

Pour ajouter l'effet, vous devrez ajouter du code à votre site web WordPress. Nous vous guiderons tout au long du processus ci-dessous.

La première chose que vous devrez faire est de trouver la classe CSS de la zone où vous souhaitez ajouter l'effet de changement de couleur d'arrière-plan doux.

Vous pouvez le faire en utilisant l'outil d'inspection de votre navigateur. Tout ce que vous avez à faire est de placer votre souris sur la zone dont vous voulez changer la couleur et de faire un clic droit pour sélectionner l'outil d'inspection.

Après cela, vous devrez noter la classe CSS que vous souhaitez cibler. Par exemple, dans la capture d'écran ci-dessus, nous voulons cibler la zone avec la classe CSS « page-header ».

Ensuite, vous devez ouvrir un éditeur de texte brut 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 bureau.

Une fois cela fait, vous pouvez ajouter le code suivant au fichier JS que vous venez de créer :

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-header’ car c’est la zone que nous voulons cibler sur notre site web.

Vous verrez également que nous avons utilisé quatre couleurs à l’aide du code couleur hexadécimal. Vous pouvez ajouter autant de couleurs que vous le souhaitez pour votre arrière-plan. Tout ce que vous avez à faire est d’entrer les codes couleur dans l’extrait et de les séparer à l’aide d’une virgule et d’apostrophes, comme les autres couleurs.

Maintenant que votre fichier JS est prêt, vous devrez le téléverser dans le dossier JS de votre thème WordPress. La manière la plus simple de le faire est d'utiliser un client de protocole de transfert de fichiers (FTP), qui vous permet de gérer directement les fichiers sur votre serveur web.

Pour ce tutoriel, nous utiliserons FileZilla. C'est un client FTP gratuit et simple pour Windows, Mac et Linux. En fait, c'est un outil courant que nous avons testé nous-mêmes pour gérer les fichiers du site.

Pour commencer, vous devrez vous connecter au serveur FTP de votre site web. Vous trouverez les identifiants de 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 des dossiers et fichiers de votre site web sous la colonne « Site distant ». Naviguez jusqu'au dossier JS du thème de votre site.

Si votre thème ne possède pas de dossier js, vous pouvez en créer un.

Faites simplement un clic droit sur le dossier de votre thème dans le client FTP et cliquez sur l'option « Créer un répertoire ».

Ensuite, vous devrez ouvrir l'emplacement de votre fichier JS sous la colonne « Site local ».

Cliquez ensuite avec le bouton droit sur le fichier et sélectionnez l'option « Téléverser » pour ajouter le fichier à votre thème.

Pour plus de détails, vous pouvez suivre notre tutoriel sur comment utiliser FTP pour téléverser des fichiers sur WordPress.

Ensuite, vous devrez entrer 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 :

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 recommandons d'utiliser le plugin gratuit WPCode pour ajouter le code en toute sécurité à votre site. Pour plus de détails, consultez notre guide sur comment coller des extraits du web dans WordPress.

Vous pouvez maintenant visiter votre site web pour voir les couleurs aléatoires changer en action dans la zone que vous avez ciblée.

Comment changer la couleur d'arrière-plan pour les articles individuels

Vous pouvez également modifier la couleur d'arrière-plan de chaque article de blog individuel dans WordPress au lieu d'utiliser une seule couleur sur l'ensemble de votre site web en utilisant du CSS personnalisé.

Il vous permet de modifier l'apparence d'articles spécifiques et de personnaliser leurs arrière-plans. Par exemple, vous pouvez personnaliser le style de chaque article en fonction des auteurs ou afficher une couleur d'arrière-plan différente pour votre article le plus commenté.

Vous pouvez même changer la couleur d'arrière-plan des articles d'une catégorie particulière. Par exemple, les articles d'actualité peuvent avoir des couleurs d'arrière-plan différentes de celles des tutoriels.

La première chose à faire est de trouver la classe de l'ID de publication dans le CSS de votre thème. Vous pouvez le faire en consultant n'importe quel article de blog, puis en faisant un clic droit pour utiliser l'outil Inspecter de votre navigateur.

Voici un exemple de ce à quoi cela ressemblerait :

<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'un article individuel en utilisant le CSS personnalisé suivant. Remplacez simplement l'ID de publication pour qu'il corresponde au vôtre et le code de couleur d'arrière-plan que vous souhaitez.

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

Pour ajouter le CSS personnalisé, vous pouvez utiliser le personnalisateur de thème WordPress. Tout d'abord, assurez-vous d'être connecté à votre site Web WordPress. Ensuite, visitez votre article de blog et cliquez sur l'option « Personnaliser » en haut.

Après cela, dirigez-vous vers l'onglet CSS additionnel dans le menu de gauche.

Ensuite, entrez le CSS personnalisé.

Une fois que c'est fait, cliquez sur le bouton « Publier ».

Vous pouvez maintenant visiter votre article 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 commentaires ou de la catégorie, consultez notre tutoriel détaillé sur comment styliser chaque article WordPress différemment.

Astuce bonus : Utilisez un constructeur de pages pour plus de contrôle sur la conception

Changer 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 Web, un constructeur de pages peut ouvrir de nombreuses autres possibilités.

Chez WPBeginner, nous recommandons SeedProd car c'est le constructeur de pages le plus populaire et le plus convivial pour WordPress. Nos marques partenaires l'ont également utilisé pour concevoir leurs sites Web, notamment WPForms, Duplicator et Charitable.

Il vous donne un contrôle complet de la conception et vous permet de :

• Concevoir n'importe quelle page sans codage
• Personnaliser les couleurs, les mises en page et l'espacement
• Créer des pages d'aspect professionnel en quelques minutes
• Faire en sorte que vos pages soient superbes sur tous les appareils

Nous avons testé l'outil en profondeur dans notre environnement de démonstration et l'avons trouvé très intuitif et facile à utiliser. Pour en savoir plus sur notre expérience, vous pouvez consulter notre avis sur SeedProd.

Commencer est facile – installez et activez simplement SeedProd en utilisant notre guide simple d'installation de plugin WordPress.

Remarque : 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 le plugin actif, il vous sera demandé d'entrer votre clé de licence. Vous pouvez trouver la clé dans votre espace client SeedProd. Après avoir entré la clé, cliquez sur le bouton « Vérifier la clé ».

Ensuite, vous pouvez aller sur SeedProd » Pages.

À partir de là, cliquez sur le bouton « Ajouter une nouvelle page de destination ».

Ensuite, vous devrez sélectionner un thème pour votre page de destination. SeedProd propose de nombreux beaux modèles de pages de destination pour commencer.

Vous pouvez également utiliser un modèle vierge pour commencer à partir de zéro. Cependant, nous vous suggérons d'utiliser un modèle car c'est un moyen plus facile et plus rapide de créer une page de destination.

Lorsque vous sélectionnez un modèle, il vous sera demandé d'entrer un nom de page et de choisir une URL.

Après cela, cliquez simplement sur le bouton « Enregistrer et commencer à modifier la page ».

Sur l'écran suivant, vous verrez le constructeur de pages SeedProd. Ici, vous pouvez utiliser le constructeur par glisser-déposer pour ajouter des blocs à partir du menu de votre gauche. Vous pouvez ajouter un titre, une vidéo, une image, un bouton, etc.

Lorsque vous faites défiler 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 des profils sociaux pour augmenter les abonnés, ajouter un formulaire d'option pour collecter des prospects, et plus encore.

En utilisant le constructeur par glisser-déposer, il est facile de changer la position de chaque bloc sur votre page de destination. Vous pouvez même changer la disposition, la taille, la couleur et la police du texte.

Pour changer la couleur d'arrière-plan de votre page de destination, sélectionnez simplement n'importe quelle section de la page. Vous verrez maintenant des options dans le menu de votre gauche pour modifier le style d'arrière-plan, la couleur et ajouter une image.

Une fois que vous avez terminé de modifier votre page de destination, n'oubliez pas de cliquer sur le bouton « Enregistrer » en haut.

Ensuite, vous pouvez vous rendre dans l'onglet « Connecter » et intégrer la page à différents services de marketing par e-mail. Par exemple, vous pouvez vous connecter à Constant Contact, Brevo (anciennement Sendinblue), et d'autres.

Après cela, cliquez sur l'onglet « Paramètres de la page ».

Ici, vous pouvez changer le statut de la page de Brouillon à Publier pour mettre votre page en ligne.

En dehors de cela, vous pouvez également modifier les paramètres SEO de la page, afficher les analyses, ajouter du code personnalisé sous Scripts, et entrer un domaine personnalisé.

Une fois que vous avez terminé, vous pouvez quitter l'éditeur de page SeedProd et visiter votre page de destination personnalisée.

Tutoriel vidéo

FAQ : Changer les couleurs d'arrière-plan dans WordPress

Voici quelques questions fréquemment posées par nos lecteurs concernant le changement des couleurs d'arrière-plan dans WordPress :

Puis-je utiliser une image pour mon arrière-plan au lieu d'une couleur ?

Oui, absolument. La plupart des thèmes WordPress qui permettent de changer la couleur de fond ont également une option pour télécharger une image d'arrière-plan.

Vous trouverez généralement ce réglage dans le personnalisateur de thème (Apparence » Personnaliser) sous un onglet tel que « Image d'arrière-plan ». De là, vous pouvez télécharger un fichier depuis votre ordinateur.

Changer la couleur de mon arrière-plan affectera-t-il la vitesse de mon site ?

Une couleur de fond unie n'a pratiquement aucun impact sur la vitesse de votre site, ce qui en fait un gain de performance sûr et facile.

Cependant, l'utilisation d'une grande image d'arrière-plan non optimisée peut considérablement ralentir le temps de chargement de vos pages. Si vous utilisez une image, nous vous recommandons toujours de la compresser au préalable.

Pour plus de conseils, veuillez consulter notre guide sur comment optimiser les images pour le web sans perdre en qualité.

Comment trouver le code hexadécimal correct pour la couleur de ma marque ?

Un code hexadécimal est un code à six chiffres qui représente une couleur spécifique (par exemple, #FFFFFF pour le blanc pur). Le meilleur endroit pour trouver le code hexadécimal de votre marque est le guide de style officiel de votre entreprise.

Si vous n'en avez pas, vous pouvez utiliser un outil en ligne gratuit comme HTML Color Codes. Leur sélecteur de couleurs vous permet de trouver le code hexadécimal exact pour n'importe quelle nuance que vous souhaitez.

Nous espérons que cet article vous a aidé à apprendre comment changer la couleur d'arrière-plan dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment convertir Figma en WordPress et notre comparaison des meilleurs logiciels de conception web.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.