Comment atténuer une image de fond dans WordPress sans CSS 

Vous avez toujours voulu atténuer les images d'arrière-plan sur votre site Web WordPress ?

L'ajout d'images de haute qualité à votre site est un excellent moyen d'accroître l'engagement et d'illustrer votre contenu. Mais les visiteurs qui ne parviennent pas à lire votre contenu à cause d'images gênantes risquent de quitter votre site sans en savoir plus sur votre marque.

C'est pourquoi il est judicieux d'assombrir les images d'arrière-plan pour les contenus importants. Dans cet article, nous allons vous montrer comment assombrir les images d'arrière-plan en ligne sans CSS ni HTML.

Comment assombrir mon arrière-plan ?

La méthode la plus courante pour assombrir les images d'arrière-plan en ligne consiste à utiliser une combinaison de code CSS et de HTML. Cela vous permet de modifier les propriétés de votre arrière-plan et d'ajouter un filtre sur les images afin qu'elles ne masquent pas le contenu de votre site web.

Le problème de cette approche est qu'elle n'est pas facile à mettre en œuvre pour les propriétaires de sites web qui n'ont pas d'expérience en matière de codage. De plus, elle implique de modifier le code à l'intérieur des fichiers de votre thème WordPress, ce qui risque d'endommager votre site si vous ne savez pas ce que vous faites.

Une meilleure solution pour les débutants sans connaissances techniques est d'utiliser un plugin WordPress pour rendre votre image de fond plus sombre. Notre plugin WordPress préféré est SeedProd, un constructeur de site web simple et puissant.

Pourquoi utiliser SeedProd pour atténuer les images de fond ?

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

Grâce à 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 couleurs et modifier la position de l'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éer des boutiques WooCommerce complètes
• Créer des pages d'atterrissage qui convertissent
• Gérer les abonnés et développer votre liste d'adresses électroniques
• Pré-lancer votre site avec une page "coming soon" (à venir)
• 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.

Comment atténuer une image de fond dans WordPress sans code CSS ou HTML

Suivez ces étapes faciles pour atténuer une image de fond dans WordPress sans code CSS ou HTML avec SeedProd. Nous vous promettons que c'est beaucoup plus facile que d'apprendre le code et que vous obtiendrez des résultats étonnants.

Tutoriel vidéo

Étape 1. Installer et activer le plugin SeedProd

Tout d'abord, vous devez 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 construction 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 et téléchargez le plugin sur votre ordinateur. Pendant que vous y êtes, copiez votre clé de licence du plugin pour l'utiliser plus tard.

Ensuite, allez sur votre site 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, rendez-vous sur la page SeedProd " Settings " et collez votre clé de licence dans le champ correspondant.

Une fois que vous aurez cliqué sur le bouton Verify Key, vous pourrez accéder à toutes les fonctionnalités Pro de SeedProd.

Étape 2. Choisir un kit de site Web ou un modèle de page d'atterrissage

Il y a 2 façons d'utiliser SeedProd sur votre site WordPress. Vous pouvez soit :

• Créer un thème WordPress personnalisé à partir de zéro et remplacer votre thème actuel
• Créez une page d'atterrissage autonome et conservez votre thème WordPress existant

Pour ce guide, nous allons créer un thème personnalisé, mais si vous souhaitez créer une page d'atterrissage à la place, vous pouvez suivre notre guide étape par étape : Comment créer une page d'atterrissage sur WordPress.

Après avoir configuré votre page, vous pouvez 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 " Theme Builder depuis votre zone d'administration WordPress et cliquer sur le bouton Themes.

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èmes 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 passez votre souris sur la vignette du kit et cliquez sur l'icône de la coche.

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

Commençons par modifier la conception 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.

À gauche, vous trouverez des blocs et des sections pour ajouter du contenu et, à droite, un aperçu en direct de votre conception avec les éléments utilisés dans le kit de votre site web.

Vous pouvez facilement personnaliser votre modèle 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 gauche sur votre page pour ajouter du contenu, comme des formulaires d'optin, des icônes de médias sociaux, des vidéos, des images, des boutons, etc.

Il est tout aussi facile d'ajouter une image d'arrière-plan à n'importe quelle section. 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 à partir de votre ordinateur ou de la bibliothèque multimédia de WordPress.

Étape 4. Ajouter une incrustation pour atténuer l'image d'arrière-plan

Comme vous pouvez le voir dans notre exemple précédent, l'image de fond que nous utilisons ne contraste pas suffisamment avec le titre, ce qui le rend difficile à lire.

Il est très facile d'y remédier et cela ne prend que quelques clics. Il suffit de trouver l'intitulé Dim Background dans les paramètres de la section et de faire glisser le curseur vers la droite jusqu'à ce que l'intitulé ressorte.

Vous pouvez également utiliser le même panneau pour ajouter une superposition de couleurs à votre image d'arrière-plan. C'est un excellent moyen d'intégrer les couleurs de votre marque dans votre conception web et de rendre votre site plus reconnaissable.

Pour ce faire, trouvez la rubrique Couleur de la superposition et cliquez sur le sélecteur de couleurs pour sélectionner une couleur personnalisée. Le choix d'une couleur est assez simple. Vous pouvez pointer et cliquer pour trouver une couleur qui vous convient ou utiliser les flèches pour en saisir une :

• Valeur hexagonale
• Valeur RGBA
• Valeur HSLA

C'est une excellente solution si vous savez déjà quelle couleur vous voulez utiliser. 

Outre l'ajout d'une incrustation à votre image, vous pouvez également modifier la couleur d'arrière-plan de la section, utiliser un dégradé au lieu d'une image et modifier la position de l'image d'arrière-plan.

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

• Couverture plein écran
• Couverture intégrale de l'écran - Fixe
• Conteneur plein écran
• Container plein écran - Fixe
• 100% Largeur Haut
• 100% Largeur du fond
• Répétition de l'arrière-plan
• Répétition Horizontale Haut
• Répétition horizontale inférieure
• Répétition Centre vertical
• 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 changer le type de pièce jointe en fixe ou en défilement, définir la façon dont l'image se répète et modifier la taille de l'arrière-plan.

Vous pouvez ainsi adapter chaque zone de vos images d'arrière-plan pour obtenir l'aspect et la sensation parfaits.

Etape 5. Assombrir les images d'arrière-plan ailleurs dans 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 votre conception 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 ressorte bien.

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 aux articles de votre blog. Il vous suffit de télécharger votre image, de modifier rapidement vos paramètres et vous êtes prêt à publier.

Étape 6. Publier vos modifications

Pour que les visiteurs de votre site Web puissent voir vos nouvelles images d'arrière-plan, vous devez vous assurer que vous activez votre thème SeedProd personnalisé. Pour ce faire, rendez-vous sur SeedProd " Theme Builder et mettez l'option Enable SeedProd Theme sur la position "Yes".

Voilà, c'est fait ! Vous pouvez maintenant prévisualiser votre thème et voir vos superpositions d'arrière-plan en action.

Voici un exemple de la nouvelle image de fond de notre page d'accueil :

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

Dans ce guide étape par étape, vous avez appris comment estomper une image d'arrière-plan dans WordPress sans CSS, HTML ou toute autre connaissance de codage.

Voici d'autres guides qui devraient vous être utiles :

• La navigation dans les pages d'atterrissage est morte : voici pourquoi
• Comment créer des animations de texte sur WordPress (étapes faciles)
• Comment créer des séparateurs de sections fantaisistes pour les sites web WordPress

Prêt à vous lancer dans la personnalisation de votre site WordPress sans code ?

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.