L’ajout d’une image d’arrière-plan à votre site WordPress est facile. Droit?

Pour la plupart, oui. À moins que votre thème ne le supporte pas. La vérité est que de nombreux thèmes WordPress ont aujourd’hui des paramètres rapides et faciles pour ajouter ou modifier une image d’arrière-plan existante. Tout comme les personnalisations d’apparence WP par défaut.

Vous pouvez également modifier l’arrière-plan à l’aide de CSS ou via divers plugins, ouvrant des options pour définir une image d’arrière-plan sur les pages, les articles et les catégories.

Dans cet article, nous allons vous montrer comment faire tout ce qui précède et faire en sorte que votre site se démarque avec un look accrocheur de votre choix.

Continuez à lire ou avancez en utilisant ces liens :

Pourquoi changer d’arrière-plan ? Eh bien, l’image par défaut de votre thème peut ne pas vous plaire, ou donner l’impression qu’elle correspond à votre image de marque. Ou, peut-être que ce n’est pas du tout une image, juste des couleurs. Ou peut-être avez-vous aimé l’image à l’origine, mais vous en avez marre.

Quelle que soit la raison, essayons de le changer.

Ajouter une image d’arrière-plan à l’aide des personnalisations par défaut de WordPress

Les thèmes WordPress peuvent avoir un arrière-plan coloré ou une photo par défaut en arrière-plan. La plupart des gens choisissent de les remplacer par une image et/ou des couleurs qui correspondent mieux à leurs goûts et à l’image de marque du site.

Pour ajouter une image d’arrière-plan dans l’éditeur WordPress par défaut, vous devrez suivre ces étapes :

  • Depuis le tableau de bord WP, ​​accédez à Apparence > Personnaliser > Image d’arrière-plan ou Apparence > Arrière-plan/Image d’arrière-plan.
  • Clique sur le Sélectionnez une image bouton pour ouvrir votre médiathèque.
  • Choisissez l’image souhaitée, soit en la téléchargeant depuis votre ordinateur, soit en en sélectionnant une dans votre médiathèque.
  • Une fois que vous avez l’image que vous souhaitez sélectionner, cliquez sur le bleu Choisissez l’image bouton.
  • Dans la fenêtre supérieure du menu de gauche, vous verrez votre sélection se remplir. À droite, vous verrez un aperçu en taille réelle de la page d’accueil de vos sites, avec l’image d’arrière-plan.

Si vous aimez ce que vous voyez, cliquez sur le bleu Publier bouton dans le coin supérieur droit, et vous avez terminé !

Si vous souhaitez modifier son apparence avant de finaliser, il existe un certain nombre de paramètres et d’options avec lesquels vous pouvez jouer pour trouver votre look préféré.

Paramètres d'arrière-plan WP par défaut
L’option Répéter est mieux utilisée sur les motifs conçus pour s’aligner exactement, pas sur les photos.

Les outils d’édition du menu de l’image d’arrière-plan, ainsi que leurs options associées, sont les suivants :

  • Préréglage
    • Par défaut, Remplir l’écran, Adapter à l’écran, Répéter, Personnalisé
  • Position de l’image
    • Centre, en haut à droite, au milieu à droite, en bas à droite, au milieu en bas, en haut à gauche, au milieu à gauche, en bas à gauche, au milieu en haut
  • Taille de l’image
    • Original, Adapter à l’écran, Remplir l’écran
  • Répéter l’image de fond – case à cocher
  • Faire défiler avec la page – case à cocher

Jouez avec les outils d’édition pour voir quelle taille, quel motif et quelle position vous préférez. La sélection de l’une des options déroulantes dans les sous-menus vous donnera l’aperçu résultant de votre page sur la droite.

Ne vous inquiétez pas d’être coincé avec quoi que ce soit. Il est facile de revenir dans les paramètres et de modifier l’image d’arrière-plan (et les options associées) à tout moment.

Ajouter une image d’arrière-plan à l’aide d’un plugin

Il existe plusieurs plugins sur WordPress.org qui accomplissent la tâche d’ajouter des images d’arrière-plan.

Pour n’en nommer que quelques-uns : arrière-plans WordPress avancés, gestionnaire d’arrière-plan complet et image d’arrière-plan simple en plein écran.

Ce dernier est mon préféré du groupe, c’est donc ce que je vais utiliser pour ce tutoriel.

bannière de plugin d'image d'arrière-plan simple en plein écran

Image d’arrière-plan simple en plein écran fournit une installation et une configuration faciles d’une image plein écran comme arrière-plan de votre site Web. Il met automatiquement à l’échelle les images avec le navigateur, ce qui signifie que l’image remplit toujours l’écran.

Sa mise en œuvre ne nécessite que quelques étapes simples. Il existe une version payante/pro disponible qui ajoute d’autres fonctionnalités, mais la version gratuite est tout ce dont nous avons besoin pour cet exercice.

Utilisons maintenant le plugin pour ajouter une image d’arrière-plan en plein écran.

  1. Installer et activer le Image d’arrière-plan simple en plein écran brancher.
  2. Depuis le tableau de bord WP, ​​accédez à Apparence > Image d’arrière-plan plein écran.
  3. Choisissez l’image souhaitée, soit en la téléchargeant depuis votre ordinateur, soit en en sélectionnant une dans votre médiathèque.
  4. Une fois que vous avez l’image que vous souhaitez sélectionner, cliquez sur le bleu Utiliser l’image bouton.
  5. Cliquez sur le bleu Enregistrer les options bouton, et consultez votre site.
aperçu de l'image d'arrière-plan en plein écran
Un aperçu de la page après avoir sélectionné une image dans Image d’arrière-plan en plein écran.

Voilà! L’image devrait maintenant s’afficher sur votre site en tant qu’image d’arrière-plan en plein écran.

Je voulais mentionner que les paramètres de ce plugin pour l’image d’arrière-plan remplacent les paramètres d’arrière-plan personnalisés de WP par défaut. Ce n’est pas une mauvaise chose, juste quelque chose à noter.

La définition d’une image d’arrière-plan pour des articles, des pages, des catégories, des balises et plus encore avec ce plugin particulier est possible, mais nécessitera l’achat de la version pro.

Ajouter une image d’arrière-plan à l’aide de CSS

Nous allons maintenant explorer comment modifier l’image d’arrière-plan à l’aide du code CSS. Cela peut être fait pour créer un arrière-plan à l’échelle du site ou pour une catégorie spécifique, à l’aide du personnalisateur de thème WP.

WP par défaut personnaliser l'ajout de CSS
La personnalisation WP par défaut CSS supplémentaire menu de saisie.
  1. Depuis votre tableau de bord WordPress, accédez à Apparence > Personnaliser.
  2. Faites défiler vers le bas et cliquez sur CSS supplémentaire.
  3. Collez le code approprié dans le champ CSS comme suit :

Image de fond à l’échelle du site :

Assurez-vous de remplacer le texte du titulaire par « URL de l’image » dans le code avec le nom réel de l’URL du fichier image. Pour le voir, sélectionnez n’importe quelle image dans votre médiathèque et regardez les informations sur l’image sur le côté droit de l’écran.

Copie de la bibliothèque multimédia dans le presse-papiers
Clique sur le Copier l’URL dans le presse-papiers bouton à utiliser pour coller dans le code CSS.

Image de fond de catégorie spécifique :

Assurez-vous de remplacer les deux zones de texte du titulaire dans le code ci-dessus :

  • Le nom réel de l’URL du fichier image pour « URL de l’image« 
  • Un nom de catégorie valide pour nom de chat

Pour trouver le nom de la catégorie :

  1. Accédez au tableau de bord de votre site WordPress
  2. Cliquer sur Articles > Catégories
  3. Choisissez la catégorie que vous souhaitez référencer, et survolez le « Éditer« lien pour cela ; vous verrez l’URL en bas à gauche de la page, qui affiche l’ID de catégorie
Identifiant de catégorie
Dans ce cas, l’ID de catégorie serait 428.

Gardez à l’esprit que cela est codé en dur, il est donc possible que certains plugins ne chargent pas l’image paresseux ou ne puissent l’indexer sur CDN.

Ajouter une image d’arrière-plan à des zones spécifiques

Il existe un autre plugin sympa qui vous aidera à ajouter des images d’arrière-plan à des zones de contenu spécifiques.

Bannière de plug-in AWB

Les Arrière-plans WordPress avancés Le plugin pour WordPress permet d’ajouter des arrière-plans à l’aide de blocs Gutenberg. Vous pouvez définir une couleur, une image ou même une vidéo comme arrière-plan, et ceux-ci peuvent être visualisés sur des appareils mobiles.

Il permet également d’ajouter un effet de parallaxe aux images d’arrière-plan et aux vidéos.

Dans ce cas, nous allons simplement ajouter une image d’arrière-plan statique à une zone de contenu, en particulier une publication.

Étant donné que cela fonctionne avec les blocs Gutenberg, vous devrez utiliser l’éditeur Gutenberg, alors assurez-vous de passer du mode Éditeur classique si vous en avez besoin.

Une fois le plugin installé et activé, accédez au tableau de bord WordPress.

1. Cliquez sur Publier > Ajouter un nouveau.

2. Cliquez sur le signe plus + bouton, faites défiler jusqu’au Concevoir rubrique et cliquez sur le LTA bloquer.

Les barres d’outils pour toutes les modifications que nous souhaitons effectuer sont situées dans deux zones : la barre d’icônes supérieure et la colonne de menu latéral.

3. Dans l’un ou l’autre menu (je préfère utiliser celui de la colonne latérale), cliquez sur le Image barre en haut (entre Couleur & Vidéo), puis cliquez sur le bleu Sélectionnez une image bouton en dessous, et il ouvrira votre médiathèque.

4. Sélectionnez l’image que vous voulez, puis cliquez sur le bleu Sélectionner bouton.

Une fois que vous avez fait cela, vous devriez voir que l’image fait maintenant partie du bloc AWB. (Si vous ne le voyez pas, cliquez sur l’icône d’image dans la barre d’icônes AWB et elle devrait apparaître.)

Outils d'édition AWB
Le plugin AWB dispose de deux zones de menu distinctes pour l’édition.

En utilisant les paramètres du menu, vous pouvez modifier la position de l’image (en fonction de l’indicateur sur les axes), la taille, les espacements, etc. J’ai laissé les paramètres de pourcentage par défaut 50/50 (ce qui la met directement au milieu), et les valeurs par défaut de taille complète et couverture.

Alors maintenant que nous avons notre arrière-plan de publication, nous devons ajouter le contenu/texte réel de la publication.

1. Cliquez sur le signe plus + bouton situé dans le bloc au-dessus de l’image de fond.

2. Cliquez sur le Paragraphe icône, qui ajoutera un bloc de texte au-dessus de notre image de fond.

Ajouter un paragraphe au bloc d'arrière-plan de l'image
Les blocs « empiler » sont possibles dans LTA; vous pouvez mettre du texte au-dessus d’une image d’arrière-plan.

Tapez le contenu de votre texte, puis modifiez l’alignement ou la couleur du texte si vous le souhaitez (je l’ai fait, mais c’est facultatif), et le tour est joué ! Nous avons un message avec sa propre image de fond individuelle.

Publier avec une image de fond à l'aide du plugin AWB
Le plugin AWB vous permet de créer un article avec une image de fond, indépendamment de la page.
Publier avec des blocs de paragraphe d'image d'arrière-plan
Plusieurs blocs de texte avec une combinaison image d’arrière-plan/bloc de texte entre les deux.

Vous pouvez faire en sorte qu’une seule section de votre message ait l’image d’arrière-plan, ce qui lui donne un peu de punch. Ajoutez simplement des blocs de paragraphe supplémentaires avant et après celui de l’image d’arrière-plan.

Plutôt cool.

Retour à l’essentiel

Ajouter des arrière-plans à votre site WordPress peut sembler une petite chose. Mais si cela est fait correctement, cela peut avoir un grand impact. Cela peut également aider à maintenir votre présence en ligne à jour, afin que les visiteurs ne s’ennuient pas à voir toujours les mêmes images encore et encore.

Il est idéal d’utiliser la personnalisation intégrée de la fonctionnalité d’un thème pour ajouter des images d’arrière-plan lorsqu’elle existe, car elle est spécialement conçue pour fonctionner comme codé.

Cependant, vous avez d’autres options pour mettre en place des images d’arrière-plan WordPress. La personnalisation de base de WP, les plugins, les constructeurs de pages et les ajustements CSS, permettent tous d’obtenir un contrôle précis sur les images utilisées et où.

Alors allez-y et soyez créatif avec vos arrière-plans. Créez un impact thématique et fidélisez vos visiteurs visuellement.

Note de l’éditeur: Ce message a été mis à jour pour plus d’exactitude et de pertinence.
[Originally Published: August 2014 / Revised: November 2021]

Mots clés:

0 Partages
Partagez
Tweetez
Enregistrer