Comment atténuer une image d'arrière-plan dans WordPress (Aucun CSS requis) 

Vous avez téléchargé une image d'arrière-plan que vous aimez, mais maintenant votre titre est presque invisible dessus. Le texte est là, mais les visiteurs ne peuvent pas le lire sans plisser les yeux. C'est le problème qu'une superposition d'image d'arrière-plan résout, et vous n'avez pas besoin de toucher une seule ligne de CSS pour le corriger.

WordPress dispose d'un moyen intégré pour atténuer les images d'arrière-plan, et si vous souhaitez plus de contrôle sur votre conception, SeedProd ajoute un curseur de superposition dédié qui fonctionne sur les sections, les lignes et les colonnes. Dans ce guide, je vais vous montrer les deux options afin que vous puissiez choisir ce qui convient à votre configuration.

Pourquoi atténuer une image d'arrière-plan dans WordPress ?

Une image d'arrière-plan WordPress est toute image qui se trouve derrière votre contenu, qu'il s'agisse d'un arrière-plan pleine page ou d'une image derrière une section spécifique comme un en-tête ou un bloc héros.

Mais le problème est le contraste. Une image d'arrière-plan vibrante ou chargée rend votre texte presque impossible à lire, et une mauvaise lisibilité du texte sur les images d'arrière-plan est l'un des moyens les plus rapides de perdre des visiteurs.

L'ajout d'une superposition de couleur transparente atténue l'image d'arrière-plan sans la masquer, de sorte que votre texte ressorte et que les visiteurs puissent réellement interagir avec votre contenu.

Le moyen le plus simple d'atténuer une image d'arrière-plan dans WordPress ?

Pour atténuer une image d'arrière-plan dans WordPress, l'option la plus simple consiste à ajouter une superposition de couleur transparente. Cela crée un contraste entre l'image et votre contenu, de sorte que tout est plus facile à lire.

Une petite note sur la terminologie : une superposition est une couche semi-transparente placée sur votre image d'arrière-plan. Elle est différente d'un filtre CSS (qui applique un effet visuel à l'image elle-même) et différente d'une simple réduction de l'opacité de l'image (qui affecte toute la section).

Une superposition vous donne le plus de contrôle, et c'est l'approche que l'éditeur de blocs de WordPress et SeedProd utilisent.

Si vous utilisez SeedProd, vous pouvez le faire en quelques étapes rapides :

• Cliquez sur la section avec votre image d'arrière-plan
• Ouvrez le panneau des paramètres
• Utilisez le curseur Atténuer l'arrière-plan pour ajuster la luminosité
• (Facultatif) Ajoutez une superposition de couleur pour correspondre à votre marque

Aucun CSS ou HTML n'est nécessaire. Vous pouvez prévisualiser les résultats en temps réel et faire ressortir votre contenu instantanément.

Pourquoi SeedProd est le meilleur moyen d'atténuer les images d'arrière-plan

SeedProd est la meilleure façon d'atténuer les images d'arrière-plan dans WordPress car il ne nécessite aucun codage. Il est livré avec un constructeur de site Web par glisser-déposer, vous permettant de pointer et cliquer pour personnaliser votre site.

Avec sa fonctionnalité de superposition facile, vous pouvez assombrir une image d'arrière-plan en faisant glisser un simple curseur. Vous pouvez également créer une superposition de couleur et modifier la position de votre image d'arrière-plan en choisissant une option dans un menu déroulant.

En bref : SeedProd permet de personnaliser facilement n'importe quelle partie de votre site WordPress sans code.

Comment atténuer une image d'arrière-plan à l'aide de l'éditeur de blocs WordPress

Si vous utilisez un thème WordPress standard et que vous avez seulement besoin d'assombrir une section, l'éditeur de blocs natif peut le faire sans plugin. La clé est le bloc Image de couverture, conçu spécifiquement pour ajouter du contenu par-dessus une image d'arrière-plan.

Pour l'utiliser, ouvrez une page ou un article dans l'éditeur de blocs et ajoutez un bloc Image de couverture.

Téléchargez votre image, et vous verrez un curseur Superposition d'image d'arrière-plan assombrie apparaître dans les paramètres du bloc à droite. Faites-le glisser pour ajuster l'opacité de la superposition d'arrière-plan jusqu'à ce que votre texte soit lisible.

Cela fonctionne bien pour les sections d'en-tête et les blocs de contenu individuels où vous souhaitez une image d'arrière-plan avec du texte par-dessus. Le bloc Image de couverture vous permet également de choisir une couleur de superposition, afin que vous puissiez correspondre à votre marque tout en gardant le texte lisible.

Utilisez l'éditeur de blocs si vous êtes sur un thème WordPress standard et que vous n'avez besoin que d'assombrir une section. Utilisez SeedProd si vous souhaitez un contrôle total de la conception, des superpositions de couleurs et la possibilité d'appliquer des ajustements d'opacité d'image d'arrière-plan sur l'ensemble de votre site sans toucher aux fichiers du thème.

Étapes pour assombrir une image d'arrière-plan dans WordPress sans code

Suivez ces étapes pour assombrir une image d'arrière-plan dans WordPress sans code CSS ni HTML en utilisant SeedProd.

Tutoriel vidéo

Étape 1 : Installer et activer le plugin SeedProd

Tout d'abord, vous devrez visiter le site Web de SeedProd et choisir un niveau d'abonnement. Nous recommandons SeedProd Pro car il inclut des fonctionnalités avancées de création de thèmes.

Une fois que vous avez choisi un plan et ouvert votre compte, rendez-vous dans la section Téléchargements de votre tableau de bord utilisateur et téléchargez le plugin sur votre ordinateur. Pendant que vous y êtes, copiez votre clé de licence de plugin à utiliser plus tard.

Ensuite, allez sur votre site Web WordPress et installez et activez le plugin SeedProd. Si vous n'avez jamais fait cela auparavant, suivez ce guide sur l'installation d'un plugin WordPress.

Après avoir activé SeedProd, allez à la page SeedProd » Paramètres et collez votre clé de licence dans le champ approprié.

Une fois que vous cliquez sur le bouton Vérifier la clé, vous pourrez accéder à toutes les fonctionnalités Pro de SeedProd.

Étape 2 : Choisissez un kit de site Web ou un modèle de page de destination

Pour ce guide, nous allons créer un thème WordPress personnalisé. Accédez à SeedProd » Constructeur de thèmes depuis votre espace d'administration WordPress et cliquez sur le bouton Thèmes.

Sur l'écran suivant, vous verrez une galerie de kits de sites Web que vous pouvez utiliser pour créer un thème WordPress instantané.

Chaque kit est livré avec toutes les pages et tous les modèles de thème dont votre site Web a besoin. Vous pouvez ensuite personnaliser chaque page avec le constructeur de site Web par glisser-déposer de SeedProd.

Faites défiler les kits jusqu'à ce que vous trouviez celui qui convient à votre entreprise, puis placez votre souris sur la miniature du kit et cliquez sur l'icône de coche.

Après avoir importé le kit de site Web, vous verrez une liste des parties qui composent votre nouveau thème WordPress. Pour personnaliser une partie, cliquez sur le lien Modifier la conception, et cela s'ouvrira dans l'éditeur visuel où vous pourrez ajouter votre image d'arrière-plan personnalisée.

Commençons par modifier le design de la page d'accueil.

Étape 3 : Ajoutez votre image d'arrière-plan à WordPress

Lorsque vous ouvrez un modèle dans l'éditeur visuel de SeedProd, vous verrez une mise en page similaire à l'exemple ci-dessous.

Il y a des blocs et des sections pour ajouter du contenu à gauche et un aperçu en direct de votre conception à droite avec les éléments utilisés dans votre kit de site Web.

Vous pouvez personnaliser votre modèle facilement en cliquant sur n'importe quel élément de l'aperçu. Cela ouvrira un panneau avec les paramètres de cet élément et les options de personnalisation.

Vous pouvez également faire glisser un bloc de la gauche sur votre page pour ajouter plus de contenu, tels que des formulaires d'inscription, des icônes de médias sociaux, des vidéos, des images, des boutons, et plus encore.

Ajouter une image d'arrière-plan à n'importe quelle section est tout aussi facile. Cliquez sur la zone que vous souhaitez modifier et supprimez l'image d'arrière-plan par défaut.

Vous pouvez ensuite télécharger une nouvelle image depuis votre ordinateur ou votre médiathèque WordPress.

Étape 4 : Ajouter une superposition transparente pour atténuer votre image d'arrière-plan

Comme vous pouvez le voir dans notre exemple précédent, l'image d'arrière-plan ne contraste pas suffisamment avec le titre, ce qui le rend difficile à lire.

Trouvez le titre Assombrir l'arrière-plan dans les paramètres de la section et faites glisser le curseur vers la droite jusqu'à ce que votre titre se démarque.

Dans quelle mesure devez-vous assombrir l'arrière-plan ?

Pour la plupart des conceptions, une opacité de 40 à 60 % sur la superposition d'arrière-plan offre la meilleure lisibilité du texte.

En dessous de 40 %, le contraste du texte peut encore poser problème. Au-dessus de 70 %, votre image d'arrière-plan devient presque invisible, ce qui va à l'encontre de l'objectif de l'utiliser.

Si vous travaillez avec une image d'en-tête ou une section pleine largeur, visez 50 % comme point de départ, puis ajustez à partir de là.

Vous pouvez également utiliser le même panneau pour ajouter une superposition de couleur à votre image d'arrière-plan. C'est un excellent moyen d'intégrer les couleurs de votre marque dans votre conception tout en la maintenant lisible.

Pour ce faire, trouvez le titre Couleur de superposition et cliquez sur le sélecteur de couleur pour choisir une couleur personnalisée. Vous pouvez pointer et cliquer pour trouver une couleur qui fonctionne, ou utiliser les flèches pour entrer une valeur hexadécimale, RGBA ou HSLA.

Vous pouvez également :

• Ajuster la position de l'image d'arrière-plan
• Changer la couleur d'arrière-plan d'une section
• Utiliser un dégradé au lieu d'une image

Par exemple, cliquer sur la flèche déroulante vous permet de positionner votre arrière-plan de la manière suivante :

• Couverture plein écran
• Couverture plein écran – Fixe
• Contenu plein écran
• Contenu plein écran – Fixe
• 100% Largeur Haut
• 100% Largeur Bas
• Répétition de l'arrière-plan
• Répétition horizontale en haut
• Répétition horizontale en bas
• Répétition verticale au centre
• Position personnalisée

Le choix de l'option Position personnalisée ouvre des options de personnalisation plus détaillées.

Par exemple, vous pouvez modifier la position X ou Y pour afficher une partie spécifique de votre image. Vous pouvez également modifier le type d'attachement pour fixe ou défilant, définir comment l'image se répète et modifier la taille de l'arrière-plan.

En conséquence, vous pouvez adapter chaque zone de vos images d'arrière-plan pour obtenir le bon look.

Puis-je atténuer les images d'arrière-plan dans d'autres parties de WordPress ?

Maintenant que vous savez comment assombrir les images d'arrière-plan avec SeedProd, vous pouvez utiliser la même approche dans d'autres parties de votre conception.

Par exemple, vous pouvez ajouter une image d'arrière-plan aux lignes et aux colonnes et utiliser les contrôles de superposition d'arrière-plan de WordPress pour l'assombrir, afin que votre contenu se démarque. Ceci est particulièrement utile pour les images héroïques, où la lisibilité du texte sur les images d'arrière-plan est essentielle.

Vous pouvez même personnaliser la barre latérale de votre blog avec une image d'arrière-plan, afin qu'elle soit plus facile à voir par rapport à vos articles de blog. Téléchargez votre image, ajustez vos paramètres et vous êtes prêt à publier.

Étape 5 : Publiez vos modifications

Pour que les visiteurs de votre site Web puissent voir vos nouvelles images d'arrière-plan, vous devrez activer votre thème SeedProd personnalisé. Accédez à SeedProd » Theme Builder et réglez l'option Enable SeedProd Theme sur la position « Oui ».

C'est tout ! Vous pouvez maintenant prévisualiser votre thème et voir vos superpositions d'arrière-plan en action.

Voici un exemple de notre nouvelle image d'arrière-plan de la page d'accueil :

Vous pouvez également voir nos images d'arrière-plan de la section « À propos de nous » et de la barre latérale ci-dessous :

FAQ sur l'atténuation des images d'arrière-plan dans WordPress

Ai-je besoin d'un plugin pour assombrir une image d'arrière-plan dans WordPress ?

Pas toujours. Le bloc Cover natif de l'éditeur de blocs WordPress comprend un curseur de luminosité intégré que vous pouvez utiliser sans aucun plugin. Si vous souhaitez un contrôle total sur l'opacité des images d'arrière-plan dans les sections, les lignes et les colonnes de votre site, un outil comme SeedProd facilite grandement les choses.

Puis-je assombrir une image d'arrière-plan dans l'éditeur de blocs WordPress sans plugin ?

Oui. Ajoutez un bloc Cover à votre page ou article et téléchargez votre image. Vous verrez un curseur de superposition d'assombrissement d'image d'arrière-plan dans les paramètres du bloc sur le côté droit de l'éditeur. Faites-le glisser pour ajuster la noirceur de la superposition.

Quelle couleur de superposition fonctionne le mieux pour assombrir une image d'arrière-plan WordPress ?

Les superpositions gris foncé ou noires à 40-60 % d'opacité fonctionnent le mieux pour la plupart des conceptions. Cette plage vous donne suffisamment de contraste pour un texte lisible tout en affichant l'image en dessous.

Si vous souhaitez correspondre à votre marque, vous pouvez utiliser une superposition colorée à la place. Gardez simplement l'opacité dans cette même plage de 40 à 60 % et testez sur différentes tailles d'écran pour vous assurer que le texte reste lisible.

Puis-je assombrir seulement une partie d'une image d'arrière-plan dans WordPress ?

WordPress ne prend pas en charge l'assombrissement sélectif sur une seule image. Cependant, vous pouvez appliquer des superpositions à des sections, des lignes ou des colonnes spécifiques dans SeedProd, ce qui crée l'effet d'un assombrissement partiel en ciblant uniquement ces zones.

Si votre image d'arrière-plan est superbe mais rend votre texte difficile à lire, l'assombrir est une solution rapide qui peut transformer votre page.

Je vous ai montré comment assombrir une image d'arrière-plan avec SeedProd en utilisant le curseur Assombrir l'arrière-plan et la couleur de superposition facultative. Vous pouvez l'utiliser pour des images héroïques pleine largeur, des arrière-plans de section, ou même des barres latérales, partout où vous souhaitez un meilleur contraste sans perdre votre conception.

La meilleure partie est que vous n'avez pas besoin de toucher au CSS ou aux fichiers de thème. Glissez, ajustez et publiez.

Vous voulez plus de moyens de personnaliser votre site sans toucher au code ? Consultez ces tutoriels ensuite :

• La navigation des pages de destination est morte : voici pourquoi
• Comment créer des animations de texte dans WordPress (étapes faciles)
• Comment créer des séparateurs de section fantaisie pour les sites Web WordPress

Merci de votre lecture ! Nous serions ravis d’entendre vos réflexions, alors n’hésitez pas à participer à la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.