Définissez une image d’arrière-plan pour votre site Web WordPress

Chaque image ou vidéo que vous utilisez sur votre site Web définit votre marque pour votre public. Les images d’arrière-plan sur votre site Web sont donc importantes et vous devez les concevoir ou les choisir en tenant compte du style de votre marque et de votre public cible.

Dans ce tutoriel, vous apprendrez plusieurs façons de définir une image d’arrière-plan sur votre site Web WordPress. Je vais vous guider dans le processus de configuration de votre image d’arrière-plan WordPress en détail afin que vous puissiez facilement le faire vous-même.

Si vous hébergez votre site WordPress avec WordPress.com ou utilisez un serveur autogéré, ce tutoriel est pour vous. Vous apprendrez les méthodes suivantes pour définir une image d’arrière-plan pour votre site Web WordPress:

• ajouter une image d’arrière-plan avec les paramètres du thème WordPress
• ajouter une image d’arrière-plan à l’aide des plugins WordPress
• ajouter des photos d’arrière-plan à l’aide du CSS

Option 1. Ajoutez une Image d’arrière-plan Avec les paramètres du thème WordPress

De nombreux thèmes WordPress gratuits vous permettent de définir une image d’arrière-plan. J’utilise le thème Twenty Twenty-One, qui est un thème simple pour les blogs, les portefeuilles et les petites entreprises. Ce thème vous permet également d’avoir une image d’arrière-plan.

Connectez-vous à la section admin de votre site WordPress. Vous pouvez gérer la plupart de vos paramètres WordPress à partir d’ici.

• 
  WordPress
  Comment se connecter au tableau de bord d’administration de votre site WordPress
  Adi Purdila

Cliquez sur Apparence, qui contient tous les paramètres de l’apparence de votre site Web. Il vous sera demandé de choisir un thème. Choisissez Twenty Twenty-One comme thème (ou tout autre thème qui vous permet d’avoir une image d’arrière-plan).

Maintenant, survolez le menu Apparence et cliquez sur Arrière-plan. La fenêtre de personnalisation du thème apparaîtra et vous permettra de choisir une image d’arrière-plan.

Maintenant, Sélectionnez Image et choisissez une image dans votre bibliothèque WordPress ou téléchargez une image.

Vous pouvez définir les détails de votre image d’arrière-plan, comme le texte alternatif, le titre, la légende et la description. Si vous vous concentrez sur le référencement, il est toujours judicieux d’ajouter du texte alternatif.

Une fois que vous avez choisi l’image et enregistré les paramètres, votre image d’arrière-plan WordPress changera. Maintenant, vous pouvez explorer les différentes options prédéfinies (Écran de remplissage, Ajustement à l’écran, etc.), ce qui vous permettra de rendre votre image d’arrière-plan exactement comme vous le souhaitez.

N’oubliez pas de cliquer sur le bouton Enregistrer les modifications en haut à gauche ou vos modifications ne seront pas enregistrées.

Option 2. Ajouter une image d’arrière-plan À l’aide de plugins WordPress

L’utilisation de plugins pour modifier l’apparence de votre site Web n’est recommandée que si vous avez un site WordPress autogéré ou si vous avez investi dans un plan payant à partir de WordPress.com . Si vous choisissez d’utiliser des plugins avec votre WordPress.com compte, votre domaine va changer de.wordpress.com à.la mise en scène.com, ce qui n’est pas idéal.

Les plugins offrent de nombreuses fonctionnalités et fonctionnalités pour votre site WordPress. Par exemple, avec un plugin d’arrière-plan, vous pouvez ajouter différents arrière-plans dans plusieurs zones de votre site Web: publications, pages et catégories. Vous pouvez également définir une vidéo YouTube comme arrière-plan avec un plugin. Les plugins peuvent également redimensionner vos images et vidéos pour les téléphones afin que votre public puisse facilement profiter de votre site Web à partir de leurs téléphones.

• 
  WordPress
  Qu’est-ce qu’un plugin WordPress?
  Rachel McCollin
• 
  WordPress
  17 Meilleurs Plugins de fond vidéo pour WordPress
  Nona Blackman

Pour ce tutoriel, nous utilisons un plugin gratuit très basique. C’est ce qu’on appelle le Simple plugin d’image d’arrière-plan en Plein écran.

Une fois que vous avez activé le plugin, passez votre souris sur l’apparence. Maintenant, cliquez sur la nouvelle option, Image BG en plein écran.

Ensuite, cliquez sur Choisir une image et téléchargez l’image que vous souhaitez comme image d’arrière-plan WordPress. Vous pouvez également choisir une image dans votre bibliothèque multimédia si vous y avez déjà ajouté votre image d’arrière-plan préférée.

Vous pouvez ajouter les détails tels que le texte alternatif, la légende et la description de l’image si vous le souhaitez. Cliquez sur Utiliser l’image, puis sur Enregistrer les options.

Maintenant, rendez-vous sur votre site Web pour voir à quoi ressemble votre image d’arrière-plan WordPress.

Option 3. Ajouter des photos d’arrière-plan en utilisant CSS

Encore une fois, pour ajouter une image d’arrière-plan en utilisant CSS, vous devrez disposer d’un site WordPress auto-hébergé ou vous abonner à un plan payant sur WordPress.com . CSS personnalisé vous permettra non seulement d’ajouter une image d’arrière-plan, mais vous pouvez également apporter diverses modifications à l’apparence de votre site Web pour le rendre exactement comme vous le souhaitez.

Accédez au tableau de bord WordPress et cliquez sur Apparence > CSS supplémentaire.

Maintenant, ajoutez ces lignes de code dans le champ CSS pour définir une image d’arrière-plan WordPress.

body { background-image: url("https://theimageurl"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}

Remplacez http://theimageurl par l’URL de l’image que vous souhaitez utiliser comme image d’arrière-plan WordPress.

Vous pouvez également ajouter des arrière-plans et des images personnalisés à des publications individuelles sur votre site Web WordPress. Pour ce faire, vous aurez besoin de ce code:

body.category-slug { background-image: url("http://anotherimageurl"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}

Comme précédemment, vous devrez remplacer http://anotherimageurl par l’URL de l’image que vous souhaitez utiliser. Vous devrez également remplacer slug par le nom d’une catégorie existante sur votre site.

Une fois que vous avez terminé d’apporter les modifications en CSS, n’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour stocker toutes les modifications. Vous pouvez maintenant visiter votre site pour afficher la nouvelle image d’arrière-plan!

Faites attention à la Taille de l’image

Avant de télécharger une image sur votre site WordPress, concentrez-vous sur sa taille. Il est tentant d’ajouter un visuel de haute qualité. Cependant, cela pourrait augmenter la vitesse de chargement de votre site Web. Cela ne ressemble pas à un gros problème; cependant, plus votre site est lent, plus le taux de rebond est élevé, ce qui signifie que plus de personnes quittent votre site Web avant de lire ou de voir son contenu. Ceci, à son tour, affecte vos conversions. Google a dit que deux secondes est la vitesse de site idéale, surtout si vous dirigez une entreprise.

Cependant, l’ajout d’images de mauvaise qualité uniquement pour avoir une taille plus petite peut également avoir un impact négatif sur l’expérience utilisateur. L’idéal est donc de garder un équilibre et d’ajouter des images de bonne qualité, mais uniquement lorsque cela est nécessaire — c’est-à-dire lorsqu’elles ajoutent de la valeur à votre contenu, et uniquement à la résolution nécessaire.

Résumé

Dans ce tutoriel, je vous ai montré trois façons de définir l’image d’arrière-plan WordPress.

1. ajout d’une image d’arrière-plan via les paramètres d’apparence du thème
2. utilisation d’un plugin pour ajouter l’image d’arrière-plan
3. ajout de CSS personnalisé

Vous pourriez avoir besoin ou non d’une image d’arrière-plan pour votre site Web WordPress. Cependant, si vous choisissez d’avoir une image d’arrière-plan, sachez que c’est un élément important qui définit le style de votre marque pour votre public. Assurez-vous donc que votre image d’arrière-plan WordPress reflète votre image de marque.