Vous pouvez atténuer une image d'arrière-plan dans WordPress sans écrire de code. Cela ne prend que quelques minutes et c'est beaucoup plus facile que la plupart des gens ne le pensent.
WordPress inclut un réglage simple qui vous permet d'ajouter une superposition de couleur transparente à n'importe quelle image d'arrière-plan. Cela aide votre texte à rester lisible tout en mettant en valeur votre design.
Dans ce guide, je vais vous montrer exactement où trouver l'option et comment l'ajuster. C'est l'un des moyens les plus rapides d'améliorer le design de votre site sans rien changer d'autre.
Étapes rapides pour atténuer une image d'arrière-plan WordPress :
- Étape 1 : Installer et activer le plugin SeedProd
- Étape 2 : Choisissez un kit de site Web ou un modèle de page de destination
- Étape 3 : Ajoutez votre image d'arrière-plan à WordPress
- Step 4: Add a Transparent Overlay to Dim Your Background Image
- Étape 5 : Publiez vos modifications
- FAQ sur l'atténuation des images d'arrière-plan dans WordPress
Qu'est-ce qu'une image d'arrière-plan WordPress ?
Une image d'arrière-plan WordPress est toute image qui apparaît derrière le contenu principal de votre site Web. Par exemple, vous pouvez avoir une image d'arrière-plan derrière tout comme ceci :
Ou vous pouvez afficher une image derrière des éléments de contenu spécifiques comme les barres latérales, les pieds de page, les en-têtes, et plus encore.
Ces images ajoutent de l'intérêt à votre site Web et peuvent aider à maintenir l'engagement des visiteurs avec votre contenu. Elles sont également essentielles à l'image de marque de votre entreprise, aidant les utilisateurs à différencier votre site de vos concurrents.
Pourquoi devriez-vous atténuer les images d'arrière-plan dans WordPress ?
Parfois, les images d'arrière-plan peuvent rendre difficile la lecture de votre contenu par les visiteurs. Regardez cet exemple :
Il est assez difficile de voir ce que dit le texte car l'image d'arrière-plan est très vive.
Pourtant, si vous assombrissez l'image d'arrière-plan, vous pouvez faire ressortir le contenu, ce qui permet aux visiteurs de lire plus facilement, d'en savoir plus sur vos produits et services, et de devenir des clients potentiels.
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.
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 le meilleur moyen 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 pages par glisser-déposer, vous permettant de pointer et de cliquer pour personnaliser votre site.
Avec sa fonction 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 pratique.
En plus de vous aider à personnaliser les images sur votre site WordPress, SeedProd vous permet également de :
- Créer un thème WordPress à partir de zéro
- Créez des boutiques WooCommerce complètes
- Créez des pages de destination qui convertissent
- Gérez vos abonnés et développez votre liste d'e-mails
- Préparez le lancement de votre site avec une page "Bientôt disponible"
- Mettez votre site web en mode maintenance
- Et bien plus encore
En bref : SeedProd permet de personnaliser facilement n'importe quelle partie de votre site WordPress sans code.
Étapes pour assombrir une image d'arrière-plan dans WordPress sans code
Suivez ces étapes simples pour assombrir une image d'arrière-plan dans WordPress sans code CSS ni HTML avec SeedProd. Nous vous promettons que c'est beaucoup plus facile que d'apprendre à coder et que cela donne des résultats époustouflants.
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
Il y a 2 façons d'utiliser SeedProd sur votre site Web WordPress. Vous pouvez soit :
- Créer un thème WordPress personnalisé à partir de zéro et remplacer votre thème actuel
- Créer une page de destination autonome et conserver votre thème WordPress existant
Pour ce guide, nous allons créer un thème personnalisé, mais si vous souhaitez créer une page de destination à la place, vous pouvez suivre notre guide étape par étape : Comment créer une page de destination dans WordPress.
Après avoir configuré votre page, vous pourrez revenir à ce tutoriel pour apprendre à assombrir vos images d'arrière-plan.
Puisque nous créons un thème WordPress pour ce tutoriel, vous devrez naviguer vers SeedProd » Constructeur de thèmes depuis votre zone d'administration WordPress et cliquer 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 pages 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 le design, et cela s'ouvrira dans le constructeur de pages 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 le constructeur de pages 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 que nous utilisons ne contraste pas suffisamment avec le titre, ce qui rend la lecture difficile.
Corriger cela est très facile et ne prend que quelques clics. Trouvez simplement l'en-tête Atténuer l'arrière-plan dans les paramètres de la section et faites glisser le curseur vers la droite jusqu'à ce que votre titre ressorte.
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 de lier les couleurs de votre marque à la conception de votre site Web et de rendre votre site plus reconnaissable.
Pour ce faire, trouvez l'en-tête Couleur de superposition et cliquez sur le sélecteur de couleur pour choisir une couleur personnalisée. Choisir une couleur est assez simple. Vous pouvez pointer et cliquer pour trouver une couleur qui fonctionne ou utiliser les flèches pour entrer un :
- Valeur hexadécimale
- Valeur RGBA
- Valeur HSLA
C'est une excellente solution si vous savez déjà quelle couleur vous voulez utiliser.
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 look and feel parfait.
Puis-je atténuer les images d'arrière-plan dans d'autres parties de WordPress ?
Maintenant que vous savez comment atténuer les images d'arrière-plan avec SeedProd, vous pouvez utiliser ces connaissances dans d'autres parties de la conception de votre site Web.
Par exemple, vous pouvez ajouter une image d'arrière-plan aux lignes et aux colonnes et ajouter une propriété de filtre pour l'atténuer, afin que votre contenu se démarque.
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 simplement votre image, ajustez rapidement vos paramètres et vous êtes prêt à publier.
Étape 5 : Publiez vos modifications
Pour que les visiteurs de votre site Web voient vos nouvelles images d'arrière-plan, vous devrez vous assurer d'activer votre thème personnalisé SeedProd. Pour ce faire, allez dans SeedProd » Constructeur de thèmes et réglez l'option Activer le thème SeedProd 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
Si votre image d'arrière-plan est superbe mais rend votre texte difficile à lire, l'atténuer est une solution simple qui peut transformer votre page.
Je vous ai montré comment le faire avec SeedProd en utilisant le curseur Atténuer 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 design.
Le meilleur dans tout ça ? 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
Prêt à vous lancer et à personnaliser votre site WordPress sans code ?
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
