Les images d’arrière-plan peuvent être très utiles rendre votre site Web plus attrayant pour vos visiteurs. Plus convaincants qu’un arrière-plan monochrome, ils peuvent illustrer un point que vous faites valoir ou créer l’ambiance de l’ensemble de votre site.
Dans ce tutoriel, nous allons vous montrer plusieurs manières d’ajouter une image d’arrière-plan dans WordPress. Voici ce dont nous allons discuter :
Mais avant de commencer, nous devons noter qu’il n’est pas possible de donner une réponse unique et définitive quant à comment ajouter une image de fond dans WordPress, en raison de nombreux facteurs affectant la présentation générale et l’apparence d’une page Web. Le thème, avant tout, dicte la possibilité ou l’incapacité d’ajouter une image de fond à des parties ou à l’intégralité d’une page. Nous vous avons fourni trois façons différentes, mais elles peuvent ne pas toutes fonctionner, ou peuvent fonctionner différemment, selon le thème que vous utilisez. Même le terme « arrière-plan » peut se rapporter à différents domaines de différents thèmes. Néanmoins, lisez la suite, car l’une de ces méthodes pourrait être exactement ce dont vous avez besoin.
C’est peut-être le bon moment pour souligner que les images volumineuses et de haute qualité ont tendance à ralentir les temps de chargement. Pourtant, il y a des choses que vous pouvez faire pour optimiser vos images et les rendre aussi faciles à charger que possible. Si vous créez un site Web en gardant à l’esprit la vitesse de chargement, nous avons également couvert les arrière-plans répétés (en mosaïque).
Si votre thème a un réglage de l’arrière-plan, comme le font de nombreux thèmes populaires de nos jours, vous pouvez l’utiliser pour configurer votre image d’arrière-plan. La plupart des thèmes dotés de cette fonctionnalité fonctionnent à peu près de la même manière. Nous avons utilisé le thème par défaut Twenty Twenty de WordPress.
Tout d’abord, vous devez accéder au personnalisateur de thème à partir de Apparence>Personnaliser dans votre tableau de bord WordPress.
Ensuite, vous voulez le Image de fond sous-menu sur le côté gauche de l’écran.
En cliquant dessus, vous accéderez au Sélectionnez l’image bouton. Vous pouvez ajouter une image d’arrière-plan à partir de votre médiathèque ou vous pouvez en télécharger une. Nous en avons sélectionné un dans notre médiathèque.
Et voilà, vous avez maintenant changé votre arrière-plan.
Le thème Twenty Twenty que nous utilisons nous donne ici quelques options. Vous pouvez utiliser une image qui peut être carrelée (répétée), telle que notre petite feuille verte là-bas, ou vous pouvez utiliser une seule image pour votre arrière-plan.
Si tel est le cas, vous aurez besoin d’images haute définition pour votre site Web qui occuperont toute la largeur de votre page, mais elles peuvent prendre beaucoup de temps à charger et peuvent entraîner une mauvaise expérience utilisateur. C’est vraiment à vous de découvrir quelles images et quels paramètres fonctionnent pour votre thème et le style de votre site Web.
Notez, cependant, que si de nombreux thèmes ont la possibilité d’ajouter une image d’arrière-plan de cette manière, la plupart ne le font pas, c’est pourquoi vous devrez peut-être recourir à l’une des deux autres méthodes que nous avons décrites dans cet article.
Si vous êtes plutôt un utilisateur pratique, vous avez également la possibilité de changer votre CSS afin de mettre en place une image de fond pour des articles individuels, mais aussi des catégories, des auteurs et d’autres classes CSS.
Vous pouvez modifier l’arrière-plan d’une catégorie ou de l’ensemble du site Web à l’aide du personnalisateur de thème. Accédez-y depuis votre tableau de bord WordPress en cliquant sur Apparence>Personnaliser.
Une fois là-bas, ouvrez le CSS supplémentaire section.
Vous devrez ajouter quelques lignes de code au champ CSS afin d’ajouter une image de fond. Pour changer l’arrière-plan de l’ensemble du site Web, utilisez ce code :
body {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Vous devrez bien sûr remplacer XXX par l’URL de l’image que vous souhaitez utiliser. Nous en avons sélectionné un dans notre médiathèque.
Si vous souhaitez le modifier pour les pages d’une certaine catégorie, cela fonctionne un peu différemment. Le code que tu veux est le suivant :
body.category-YYY {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Vous devrez, comme ci-dessus, remplacer XXX par une URL d’image valide, tout en échangeant également YYY avec une catégorie valide.
Et c’est vraiment tout ce qu’il y a à faire !
Maintenant, comme toujours, notre suggestion est d’utiliser la fonctionnalité d’un thème chaque fois que vous le pouvez, car il a fait ses preuves. Cependant, si un thème que vous utilisez n’a pas les fonctionnalités dont vous avez besoin, vous pouvez probablement trouver un plugin ça le fait. Notre plugin de choix est Arrière-plans WordPress avancés. Une fois que vous avez installé et activé le plugin, vous aurez obtenu un bloc Gutenberg spécial que vous pourrez utiliser pour configurer un arrière-plan dynamique.
Ce plugin fonctionne principalement en mettant en place une sorte de méta-bloc, qui sert d’arrière-plan, et que vous devez ensuite remplir avec un ou plusieurs autres blocs.
Nous vous montrerons comment faire cela dans un article.
Tout d’abord, nous allons créer un article à partir de notre tableau de bord WordPress en sélectionnant Publier>Ajouter un nouveau. Ensuite, après avoir tapé le titre et l’avoir rempli avec deux blocs de paragraphe, nous allons appuyer sur Entrée après le premier paragraphe, puis cliquer sur le plus signer et ajouter un Fond bloquer.
Vous devez maintenant configurer le bloc. Le paramètre par défaut est Couleur, qui est un simple bloc de couleur que vous pouvez choisir si vous souhaitez un arrière-plan monochrome. Une autre option intéressante est la Vidéo Contexte. Vous pouvez utiliser ce plugin pour configurer un arrière-plan vidéo, que ce soit en boucle ou en lecture unique, et vous n’avez même pas besoin de l’héberger sur votre site Web : le plugin prend en charge les vidéos hébergées sur YouTube et Vimeo. Pour cette démonstration, cependant, nous nous intéressons principalement à la Image Contexte.
En cliquant sur le Image bouton, vous trouverez un ensemble de contrôles pour ce plugin. Dans le Image rubrique, cliquez sur le Sélectionnez l’image et téléchargez une image ou sélectionnez une image dans votre médiathèque.
Une fois que vous avez fait cela, vous constaterez que l’image a occupé une partie de l’arrière-plan. Sur le côté droit, vous trouverez des options de parallaxe et d’espacement que vous pouvez utiliser si vous souhaitez rendre votre site Web un peu plus dynamique. Tout en haut, vous trouverez les commandes de position. Vous pouvez sélectionner quelle partie de l’image sera affichée en fonction de la position de l’indicateur sur les axes. La valeur par défaut (50% horizontal et 50% vertical) est l’endroit où nous allons le laisser maintenant – juste au milieu de l’image.
Maintenant, nous devrons ajouter le contenu sur lequel cette image sera en arrière-plan. Pour cela, il suffit de cliquer sur le plus signe au milieu du bloc d’arrière-plan. Nous allons opter pour un bloc de paragraphe, mais vous pouvez choisir n’importe quel bloc que vous aimez. Une citation ou un titre, par exemple, peut avoir fière allure sur un fond de parallaxe.
Nous avons collé notre texte et changé sa couleur dans l’onglet des paramètres de bloc en blanc, pour mieux être compensé par l’arrière-plan. Et c’est vraiment tout.
Maintenant, en cliquant sur le bouton Aperçu, nous pouvons voir le plugin en action.
Et maintenant, vous pouvez ajouter n’importe quel type d’arrière-plan à n’importe quelle section de contenu de votre site Web que vous souhaitez mettre en valeur.
En conclusion
Une image d’arrière-plan peut vraiment faire ressortir votre site Web pour vos utilisateurs comme une grosse aiguille brillante dans une botte de foin de paille terne. Cependant, cela a un coût : vous aurez probablement besoin de stocker des supports grand format, et ils affecteront négativement les temps de chargement. Pourtant, de superbes graphismes restent le meilleur moyen de faire une première impression durable, et les internautes s’attendent désormais à un design professionnel et accrocheur. L’arrière-plan sera probablement le plus grand élément graphique sur les écrans de vos visiteurs. Si vous pouvez vous permettre d’augmenter le temps de chargement, pourquoi ne pas rendre l’expérience de vos visiteurs visuellement intéressante ? Donc, que vous le fassiez en utilisant les paramètres natifs de votre thème, un plugin ou CSS, vous savez maintenant comment le faire.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
