Je vais garder cette intro vraiment courte.
Voici ce dont nous allons discuter dans cet article:
- Que sont les images d’arrière-plan
- Quel est le problème avec les arrière-plans parallax?
- Comment ajouter des images d’arrière-plan à votre site Web WordPress
- Comment aborder la taille de l’image dans WordPress
Prêt, stable? Allons-y!
Que sont les images d’arrière-plan?
Les images d’arrière-plan sont des images qui sont appliquées à l’arrière-plan d’un élément sur un site Web, dans un e-mail, etc. Alors que l’image du héros est le point focal principal d’un site Web ou d’un e-mail, les images d’arrière-plan sont plus subtiles. Ils supportent d’autres éléments du site web, en tant que deuxième couche: appels à l’action, autres images, différentes sections du site, etc.
Jetons un coup d’œil à quelques exemples de telles images d’arrière-plan:
IKEA
Sur la page d’accueil du site Web IKEA, des images d’arrière-plan sont utilisées pour présenter leurs histoires inspirantes. Le titre et la catégorie de l’histoire sont placés au-dessus de l’image. Une superposition de dégradé est utilisée pour diminuer l’opacité de l’image réelle. Cette approche permet de rendre le texte plus visible, mais elle crée également une cohérence dans la conception, de sorte qu’aucune couleur ne se démarque plus qu’une autre.
Aimer Vincent
Un de mes films préférés, celui-ci.
Des images de fond se trouvent derrière un carrousel qui présente des histoires derrière Vincent van Gogh et le film. Les images de fond semblent responsabiliser l’histoire et livrer des émotions fortes.
Lush
J’aime tellement l’apparence du site Web Lush: coloré et vibrant comme les produits eux-mêmes.
Maintenant, les images d’arrière-plan peuvent utiliser des motifs ou des formes, comme dans cet exemple de page d’inscription à la newsletter. Ces modèles parviennent à transformer quelque chose de potentiellement terne, en quelque chose de joyeux.
Images d’arrière-plan parallax
Si vous regardez le site Web du British Museum, vous remarquerez qu’il y a des images sur leurs pages, qui se trouvent en arrière-plan pour lesquelles le contenu de premier plan défile vers le bas. Ce sont des images d’arrière-plan en parallaxe.
Le défilement parallaxe est l’une de ces tendances de conception Web qui parvient à ajouter un effet brillant à un site Web s’il est correctement intégré.
Vous pouvez également obtenir un tel effet dans WordPress, je vais vous montrer comment un peu plus tard.
Comment ajouter des images d’arrière-plan à votre site Web WordPress
Il existe trois façons principales d’ajouter des images d’arrière-plan à votre site Web WordPress. Vérifions-les, d’accord?
-
Ajout d’images d’arrière-plan via votre personnalisateur de thème WordPress
Les thèmes WordPress les plus populaires ont cette option disponible. Je vais utiliser le thème Colibri aux fins de cet exemple. D’autres thèmes se comportent de manière similaire au thème Colibri.
Si le thème choisi ne prend pas en charge la fonctionnalité, passez aux méthodes 2 et 3.
Maintenant, commençons par passer à Apparence – > Personnaliser à partir du tableau de bord WordPress. Sur la gauche, vous verrez les options d’édition du personnalisateur du thème, tandis que sur la droite, il y a un aperçu en direct de votre site Web.
Le thème vous permet de placer des images d’arrière-plan pour:
- Lignes
- Colonnes
- Blocs (sections entières du site Web telles que: à propos de moi, portfolio, équipe, contact, etc.)
- Composants (rubriques, carrousels, tableaux de prix, carrousels, etc.)
La façon dont vous pouvez le faire est la même, peu importe où vous avez besoin de votre image d’arrière-plan.
Supposons que vous souhaitiez ajouter une image d’arrière-plan à votre bloc de site Web de services. Commencez par sélectionner la section. Sur la gauche, vous verrez les options d’édition dans un menu structuré comme ci-dessous:
- Mise en page
- Style
- Avancé
Allez dans Style – > Type d’arrière-plan.
Sélectionnez « Image ». Vous verrez maintenant une image que vous pouvez remplacer par la vôtre. 
Lorsque vous cliquez sur l’image, vous serez invité à un écran où vous pourrez sélectionner une image dans la galerie multimédia WordPress, ou vous pouvez télécharger une autre image.
Comme vous l’avez peut-être déjà remarqué, vous pouvez même ajouter une vidéo en arrière-plan.
Et, il y a aussi une option de bascule pour l’effet de parallaxe!
Maintenant, il y a un autre raccourci pour faire ce changement d’image d’arrière-plan. Lorsque vous sélectionnez un bloc à droite, vous verrez l’icône Paramètres. Cliquez dessus et vous verrez quelques options d’édition.
Si vous sélectionnez « Modifier l’arrière-plan », vous serez dirigé dans « Style » pour procéder comme décrit ci-dessus.
C’était tout le monde. Assez facile, non?
Maintenant, si votre thème n’a pas l’option image d’arrière-plan, il existe un moyen de le faire dans l’éditeur par défaut de WordPress.
-
Ajout d’une image d’arrière-plan à l’aide de blocs WordPress
Depuis le tableau de bord WordPress, rendez-vous sur « Pages ». Maintenant, sélectionnez « modifier » sous la page souhaitée. Vous verrez une interface comme indiqué ci-dessous.
L’éditeur WordPress par défaut est basé sur des blocs, ce qui signifie que chaque section de site Web est composée de blocs. Ces blocs sont accessibles à partir de n’importe quel signe « + » que vous verrez dans l’interface. Cliquons sur celui en haut à gauche.
Maintenant, sélectionnez le bloc « Couverture ». Vous le verrez apparaître tout de suite sur votre page.
Vous pouvez télécharger une image stockée localement sur votre ordinateur ou choisir parmi celles existantes dans la Médiathèque.
J’ai sélectionné une image dans la médiathèque. Maintenant, je peux y ajouter du texte. Les options d’édition sont assez limitées ici.
Si vous sélectionnez la couverture, vous verrez apparaître un menu ci-dessus, où vous pouvez aligner votre image ou dupliquer tout votre bloc. Vous pouvez même enregistrer votre bloc en tant que bloc réutilisable, pour être réutilisé dans d’autres conceptions.
Maintenant, sur le côté droit de l’écran, vous avez des options d’édition supplémentaires.
Dans les paramètres multimédias, si vous activez l’option d’arrière-plan fixe, vous activerez l’effet de parallaxe.
Lorsque la bascule est désactivée, vous pouvez régler le point focal.
Cet ajustement du point focal peut également être effectué en pourcentage, en tenant compte de la largeur et de la hauteur.
Ensuite, vous pouvez ajouter une superposition. Vous pouvez choisir sa couleur et son opacité.
Et vous avez un peu terminé.
-
Ajout d’images d’arrière-plan via des plugins WordPress
Voici quelques plugins WordPress étiquetés comme plugins d’image d’arrière-plan. Je vais jouer un peu avec le Simple plugin d’image d’arrière-plan en plein écran car il a le plus d’installations et les meilleures critiques jusqu’à présent.
Maintenant, voici un tutoriel sur l’installation d’un plugin WordPress.
Avec ce plugin, les images seront automatiquement mises à l’échelle avec le navigateur, donc quelle que soit la taille du navigateur, l’image remplira toujours l’écran.
Tout ce que vous avez à faire est d’aller à Apparence – > Image BG en plein écran. De là, sélectionnez votre image.
Lorsque vous cliquez sur « Enregistrer les options », vous verrez que toutes les sections de votre site, sans arrière-plan, recevront cette image en arrière-plan.
Maintenant, c’est ce qui se passe dans la version gratuite. C’est assez basique et pas du tout flexible. Le plan payant est livré avec des options supplémentaires telles que:
- Images d’arrière-plan illimitées
- Images d’arrière-plan spécifiques aux publications / pages
- Plusieurs images avec transitions de fondu sur les pages
Et, c’est terminé, vous venez de découvrir les 3 méthodes que vous pouvez utiliser pour ajouter des images d’arrière-plan à votre site WordPress.
Il y a encore une chose que je veux que vous sachiez avant que nous puissions l’appeler un jour.
Tailles d’image
Avant de télécharger une image sur votre site, faites attention à sa taille. Je sais que nous regardons tous les mégapixels, mais, sur le Web, il y a un hic. Les images haute résolution peuvent nuire à votre site en affectant son temps de chargement. À long terme, toute seconde de chargement supplémentaire pourrait vous faire perdre des visiteurs et des conversions sur votre site Web. En outre, vous diminuerez considérablement vos chances de classement dans les moteurs de recherche, car la vitesse d’âge est un facteur de classement important.
D’autre part, l’utilisation d’images trop petites peut également nuire à votre expérience utilisateur. Nous devons donc joindre les deux bouts.
Une façon de le faire est d’utiliser des applications externes qui peuvent vous aider à redimensionner vos images tout en garantissant une clarté appropriée.
Mais dans WordPress, vous pouvez le faire facilement en utilisant un plugin…, comme vous l’avez peut-être déjà deviné.
Ici, chez Colibri, nous sommes des fans de Smush. Smush peut et compressera les images sans baisse visible de qualité.
Dans la version pro, il convertira également les images en WebP, un format d’image de nouvelle génération qui peut compresser des tailles de fichiers d’image jusqu’à 35%, sans perte de qualité évidente.
Et c’est une enveloppe, les gars!
Si vous avez aimé cet article, et que vous souhaitez en savoir plus sur la conception d’un site Web WordPress, n’oubliez pas de vous abonner à la chaîne Youtube de Colibri et suivez-nous sur Twitter et Facebook !