Vous cherchez un moyen simple de changer la couleur de fond de votre site WordPress ?

La couleur d’arrière-plan de votre site Web joue un rôle important dans votre conception et votre image de marque, et pour rendre votre contenu plus lisible.

Dans cet article, nous allons vous montrer comment changer facilement la couleur de fond de votre site WordPress.

Pourquoi changer la couleur de fond dans WordPress ?

Un thème WordPress est livré avec une couleur de fond par défaut. Changer la couleur d’arrière-plan peut aider à personnaliser la conception de votre site Web et à améliorer la lisibilité.

Par exemple, vous pouvez mettre en évidence une section spécifique d’une page en utilisant une couleur d’arrière-plan différente. Cela aide à mettre en évidence votre appel à l’action (CTA) et à augmenter les conversions.

Vous pouvez utiliser différentes couleurs d’arrière-plan pour différents articles sur votre blog WordPress en fonction des auteurs, des commentaires ou des catégories. Cela aide à différencier les articles des autres contenus de votre site Web.

Il existe également un moyen d’ajouter des arrière-plans vidéo pour capter instantanément l’attention de vos visiteurs et stimuler l’engagement.

Cela étant dit, voyons 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 de votre choix :

  • Modifier la couleur d’arrière-plan à l’aide de WordPress Customizer
  • Modifier la couleur d’arrière-plan à l’aide de l’éditeur de site complet
  • Changer la couleur d’arrière-plan à l’aide de CSS personnalisé
  • Changer aléatoirement les couleurs d’arrière-plan
  • Changer la couleur d’arrière-plan pour les messages individuels
  • Utiliser une vidéo en arrière-plan
  • Créer une page de destination personnalisée

Modifier la couleur d’arrière-plan à l’aide du personnalisateur de thème WordPress

En fonction de votre thème, vous pourrez peut-être modifier la couleur d’arrière-plan à l’aide du WordPress Theme Customizer . 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 au WordPress Theme Customizer, vous pouvez vous connecter à votre site Web puis aller dans Apparence » Personnaliser .

Cela ouvrira le personnalisateur 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, etc.

Les options spécifiques disponibles dépendront du thème WordPress utilisé par votre site. Pour ce didacticiel, nous utilisons le thème par défaut Twenty Twenty-One.

Pour changer la couleur d’arrière-plan de votre site Web, allez-y et cliquez sur l’onglet des paramètres « Couleurs et mode sombre » dans le menu sur votre 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 couleurs ou entrer un code de couleur hexadécimal 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 pour voir la nouvelle couleur d’arrière-plan en action.

Votre thème peut ne pas avoir cette option disponible 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 à l’aide de l’éditeur de site complet

L’éditeur de site complet (FSE) est un éditeur de thème WordPress basé sur des blocs que vous pouvez utiliser pour modifier la couleur d’arrière-plan de votre site. Il propose différents blocs pour personnaliser la conception du site Web et est similaire à l’utilisation de l’éditeur de blocs WordPress.

L’éditeur de site complet est actuellement disponible dans des thèmes WordPress sélectionnés , comme le thème Twenty Twenty-Two. Pour effectuer un changement de couleur d’arrière-plan, vous pouvez aller dans Apparence » Éditeur depuis votre tableau de bord WordPress.

Une fois que vous êtes dans l’éditeur de site complet, vous pouvez modifier la couleur d’arrière-plan de chaque bloc individuel.

Tout d’abord, sélectionnez un bloc que vous souhaitez modifier. Ensuite, dans le panneau des paramètres sur votre droite, dirigez-vous vers la section « Couleur » et cliquez sur l’option « Arrière-plan » pour choisir une couleur.

Lorsque vous avez terminé, continuez et cliquez sur le bouton « Enregistrer ».

D’autre part, si vous souhaitez ajouter une couleur d’arrière-plan qui apparaît derrière tous les blocs, vous pouvez ajouter un bloc Couverture.

Tout d’abord, cliquez sur le signe ‘+’ en haut et ajoutez le bloc ‘Couverture’.

Ensuite, vous verrez le bloc Couverture dans le modèle de thème avec quelques options de couleur d’arrière-plan parmi lesquelles choisir.

Alternativement, vous pouvez aller dans la section Superposition du panneau des paramètres sur votre droite et cliquer sur l’option « Couleur ».

Après avoir sélectionné une couleur, l’étape suivante consiste à l’afficher sur toute votre page.

Pour commencer, vous devrez cliquer sur l’icône d’affichage en liste à 3 tirets en haut. Cela ouvrira le contour de votre thème et affichera différentes sections.

Ensuite, vous pouvez simplement faire glisser et déposer tous les éléments du thème dans la vue Liste sous le bloc Couverture.

Lorsque vous faites cela, la couleur de votre bloc de couverture apparaîtra comme couleur d’arrière-plan sur l’ensemble du site Web.

N’oubliez pas de cliquer sur le bouton « Enregistrer » en haut pour enregistrer vos modifications.

Changer la couleur d’arrière-plan en ajoutant du CSS personnalisé

Une autre façon de modifier la couleur d’arrière-plan de votre site Web WordPress consiste à ajouter du CSS personnalisé dans le personnalisateur de thème WordPress.

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

Ensuite, vous pouvez saisir le code suivant :

1
2
3
body {
 background-color: #FFFFFF;
}

Il vous suffit de remplacer le code couleur de fond par le code couleur que vous souhaitez utiliser sur votre site Web. Ensuite, allez-y et entrez le code dans l’onglet CSS supplémentaire.

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 la façon d’ajouter facilement du CSS personnalisé à votre site WordPress .

Changer aléatoirement les couleurs d’arrière-plan dans WordPress

Maintenant, cherchez-vous un moyen de changer au hasard la couleur d’arrière-plan dans WordPress ?

Vous pouvez ajouter un effet de changement de couleur d’arrière-plan lisse pour passer automatiquement d’une couleur d’arrière-plan à l’autre. L’effet passe par plusieurs couleurs jusqu’à ce qu’il atteigne 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 lisse.

Vous pouvez le faire en utilisant l’outil Inspecter de votre navigateur. Tout ce que vous avez à faire est de placer votre souris sur la zone dont vous souhaitez modifier la couleur et de cliquer avec le bouton droit pour sélectionner l’outil Inspecter.

Après cela, vous devrez noter la classe CSS que vous souhaitez cibler. Par exemple, dans la capture d’écran ci-dessus, nous souhaitons cibler la zone avec une 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 ‘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 :

1
2
3
4
5
6
sept
8
9
dix
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-header’ car c’est la zone que nous voulons cibler sur notre site Web.

Vous verrez également que nous avons utilisé quatre couleurs en utilisant le code de 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 de couleur dans l’extrait 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écharger 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. C’est un client FTP gratuit pour Windows, Mac et Linux, et il est très facile à utiliser.

Pour commencer, vous devrez vous connecter au serveur FTP de votre site Web. Vous pouvez trouver les identifiants de connexion dans l’e-mail de votre hébergeur 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 dans la colonne « Site distant ». Allez-y et accédez 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.

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 dans la colonne « Site local ».

Cliquez ensuite avec le bouton droit sur le fichier et cliquez sur l’option « Télécharger » pour ajouter le fichier à votre thème.

Pour plus de détails, vous pouvez suivre notre tutoriel sur la façon d’utiliser FTP pour télécharger 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.

1
2
3
4
function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . 'https://cdn.wpbeginner.com/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 le plug-in Code Snippets pour ajouter le code en toute sécurité à votre site. 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 Web pour voir les couleurs changeant au hasard en action dans la zone que vous avez ciblée.

Changer la couleur d’arrière-plan pour les messages 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 à l’ aide de CSS personnalisés .

Il vous permet de modifier l’apparence de messages 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 modifier la couleur d’arrière-plan des publications 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 didacticiels.

La première chose que vous devrez faire est de trouver la classe d’ID de publication dans le CSS de votre thème. Vous pouvez le faire en affichant n’importe quel article de blog, puis en cliquant avec le bouton droit de la souris pour utiliser l’outil Inspecter de votre navigateur.

Voici un exemple de ce à quoi cela 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 publication pour qu’il corresponde au vôtre et au code de couleur d’arrière-plan que vous souhaitez.

1
2
3
4
.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

Pour ajouter le CSS personnalisé, vous pouvez utiliser le WordPress Theme Customizer. Tout d’abord, assurez-vous que vous êtes connecté à votre site Web WordPress. Ensuite, visitez votre article de blog et cliquez sur l’option « Personnaliser » en haut.

Après cela, rendez-vous sur l’ onglet CSS supplémentaire dans le menu sur votre gauche.

Ensuite, entrez le CSS personnalisé, puis 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 didacticiel détaillé sur la façon de styliser différemment chaque article WordPress .

Utiliser une vidéo en arrière-plan

L’utilisation de vidéos comme arrière-plan de votre site Web est un excellent moyen de capter l’attention de vos visiteurs et d’augmenter l’engagement des utilisateurs.

Le moyen le plus simple d’ajouter une vidéo en arrière-plan consiste à utiliser un plugin WordPress. Pour ce didacticiel, nous utiliserons mb.YTPlayer pour les vidéos d’arrière-plan .

C’est un plugin gratuit qui vous permet de lire des vidéos YouTube en arrière-plan de votre site Web WordPress. Il existe également une version premium disponible qui vous permet de supprimer le filigrane mb.YTPlayer et offre plus de fonctionnalités de personnalisation.

Tout d’abord, vous devrez installer et activer le plugin sur votre site Web. Pour plus de détails, vous pouvez suivre notre tutoriel sur comment installer un plugin WordPress .

Lors de l’activation, vous pouvez vous diriger vers mb.ideas »YTPlayer depuis votre espace d’administration WordPress.

Sur l’écran suivant, vous devrez entrer l’URL de votre vidéo YouTube et activer la vidéo d’arrière-plan.

En plus de cela, le plugin vous permet de sélectionner l’emplacement pour afficher votre vidéo d’arrière-plan. Vous pouvez choisir une page d’accueil statique, une page d’accueil d’index de blog ou les deux. Il existe également une option pour afficher la vidéo sur l’ensemble de votre site si vous sélectionnez « Tous ».

Une fois que vous avez entré l’URL de la vidéo et activé l’arrière-plan, allez-y et visitez votre site Web pour voir l’arrière-plan vidéo en action.

Créer une page de destination personnalisée

La création de pages de destination personnalisées dans WordPress vous permet de générer des prospects et d’augmenter les ventes de votre entreprise. Vous avez un contrôle total sur la couleur d’arrière-plan et la conception de la page.

Le moyen le plus simple de créer une page de destination personnalisée très attrayante consiste à utiliser SeedProd . C’est le meilleur plugin de page de destination pour WordPress et offre un générateur de page glisser-déposer facile à utiliser pour créer des pages sans modifier le code.

La première chose que vous devrez faire est d’installer et d’activer SeedProd sur votre site Web. Vous pouvez vous référer à notre guide sur comment installer un plugin WordPress .

Remarque : Nous utiliserons la version SeedProd Pro car elle offre des fonctionnalités, des modèles et des options de personnalisation plus puissants. Cependant, il existe également une version gratuite disponible sur WordPress.org.

Une fois le plugin activé, il vous sera demandé d’entrer votre clé de licence. Vous pouvez trouver la clé dans votre espace compte SeedProd. Après avoir entré la clé, cliquez sur le bouton « Vérifier la clé ».

Ensuite, vous pouvez vous diriger vers SeedProd » Pages .

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

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

Vous pouvez également utiliser un modèle vierge pour repartir de zéro. Cependant, nous vous suggérons d’utiliser un modèle car il s’agit d’un moyen plus simple 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.

Sur l’écran suivant, vous verrez le générateur de page SeedProd. Ici, vous pouvez utiliser le générateur de 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 faites défiler vers le bas, il y a plus de blocs dans la section Avancé. Par exemple, vous pouvez ajouter un compte à rebours pour créer de l’urgence, afficher des profils sociaux pour augmenter le nombre d’abonnés, ajouter un formulaire d’option pour collecter des prospects, etc.

À l’aide du générateur de glisser-déposer , il est facile de modifier la position de chaque bloc sur votre page de destination. 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 de destination, sélectionnez simplement n’importe quelle section de la page. Vous verrez maintenant des options dans le menu sur 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 diriger vers l’onglet « Se connecter » et intégrer la page avec différents services de marketing par e-mail . Par exemple, vous pouvez vous connecter à Constant Contact , SendinBlue et autres.

Après cela, allez-y et cliquez sur l’onglet « Paramètres de la page ».

Ici, vous pouvez modifier 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 de référencement de la page, afficher les analyses, ajouter un code personnalisé sous Scripts et entrer un domaine personnalisé .

Une fois que vous avez terminé, vous pouvez quitter le générateur de page SeedProd et visiter votre page de destination personnalisée.

Nous espérons que cet article vous a aidé à apprendre à changer la couleur d’arrière-plan dans WordPress. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur créateur de site Web , ou notre comparaison des meilleurs logiciels de conception Web .

Si vous avez aimé cet article, veuillez vous abonner à notre  chaîne YouTube  pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur  Twitter  et Facebook .

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici