Table des matières
Une image, c’est bien, mais quatre images, c’est mieux : pour illustrer un site web, les galeries d’images présentent l’avantage de rendre la lecture plus divertissante et plus instructive à la fois.
Dans ce tutoriel, je vais vous montrer comment utiliser le widget galerie d’Elementor pour créer une galerie d’images attrayante sur votre site web. Histoire de mettre un petit coup de pinceau numérique qui transformera votre site web en une véritable oeuvre d’art.
Étape 1 : Installer et activer les addons (facultatif)
Elementor a au moins un widget galerie, mais grâce aux addons, il est possible d’en utiliser d’autres.
Choisir les addons
Dans l’écosystème Elementor, il existe pléthore d’addons ; beaucoup d’entre eux proposent leur propre version du widget galerie.
Qu’est-ce qu’un addon ? Un addon ou add-on est un ajout de fonctionnalités à un logiciel existant.
En l’occurence, un addon Elementor est donc une série de widgets qui servent à mettre en forme de manière simple et intuitive une gamme d’éléments utiles en webdesign.
Vous avez l’embarras du choix entre
Personnellement, j’ai une préférence pour les Ultimate Addons pour leur simplicité d’utilisation, mais votre expérience peut différer.
Installer et activer les addons
Maintenant que vous avez fait votre choix, il est temps de passer à l’action.
Installez et activez l’addon choisi dans votre tableau de bord WordPress. Et voilà, le widget galerie fait son apparition dans la liste des widgets disponibles dans Elementor.
Étape 2 : Ajouter le widget galerie à votre page
Ouvrir Elementor
Tout d’abord, sélectionnez la page sur laquelle vous souhaitez afficher votre galerie d’images avec Elementor.
Cliquez sur « Modifier avec Elementor » pour lancer l’éditeur visuel.
Ajouter le widget galerie
Une fois la page ouverte avec Elementor, repérez l’icône qui marche 9 petits carrés en 3×3, cliquez dessus : ça ouvre la liste des widgets disponibles.
Ensuite, parcourez la liste des widgets disponibles à la recherche de galeries, ou tapez simplement « galerie » dans la petite barre de recherche. Chez moi, ça donne ceci :
Faites glisser le widget galerie dans la section que vous avez choisie.
Étape 3 : Configurer les options de la galerie
Onglet Contenu
C’est ici que le véritable travail de config commence. Cliquez sur l’icône en haut à droite du widget galerie, pour ouvrir ses options.
Dans l’onglet Contenu, cliquez sur l’emplacement vide ou la vignette d’image standard, pour ouvrir la médiathèque, puis sélectionnez les images qu’affichera votre galerie.
Vous pourrez aussi importer de nouvelles images depuis votre ordinateur.
En fonction du type de widget, les options vont différer mais en général vous aurez des options comme le format des images, le nombre de colonnes du widget, le lien, l’activation de la visionneuse (lightbox), etc.
Onglet Style
Passez ensuite à l’onglet Style pour donner à votre galerie ses paramètres de style. Ici, vous pouvez jouer avec la taille des images, les espacements, les bordures et les ombres pour donner du relief à votre galerie.
Pour rehausser encore l’esthétique de votre galerie, vous pouvez également jouer avec des effets de saturation et de mise en page.
Le widget de galerie basique permet aussi de paramétrer finement la légende des images : l’afficher ou pas, l’aligner comment, de quelle couleur et en quelle typo l’écrire, avec quel ombrage.
Il existe aussi d’autres galeries, comme je le disais au début : par exemple celui-ci est celui d’Ultimate addons, et ses options sont plus riches : elle ajoute le chargement différé (lazyload, qui améliore le temps de chargement des images), la mise en page, etc.
Étape 4 : Adapter la galerie aux différents appareils
Utiliser les options de responsive
Elementor n’oublie pas les utilisateurs mobiles.
Grâce aux options de responsive disponibles dans l’onglet Style, vous pouvez adapter la présentation de votre galerie aux différents appareils : ordinateurs de bureau, tablettes et smartphones.
Ne négligez pas cette une étape importante, qui déterminer le bon affichage de votre galerie d’images quel que soit le type d’écran de l’internaute.
Étape 5 : Publier et prévisualiser votre galerie
Publier la galerie
Maintenant que vous avez créé votre galerie, il est temps de la partager.
Cliquez sur le bouton « Publier » ou sur « Mettre à jour », en bas de la colonne de droite de l’éditeur visuel, pour enregistrer les modifications faites à votre page. Et voilà, votre galerie est maintenant en ligne sur votre site web.
Exemple d’une galerie de 4 images sur 4 colonnes :
Prévisualiser la galerie
Il est toujours bon de vérifier une dernière fois. Après avoir publié votre galerie, utilisez le bouton « Aperçu » ou rendez-vous directement à l’url de votre page, pour voir comment la galerie s’affiche sur votre site. Assurez-vous que tout fonctionne comme prévu et que le design correspond à vos attentes, aussi bien sur écran d’ordi que sur smartphone.
Conclusion
Voilà, vous savez dorénavant utiliser le widget galerie sur Elementor. Vous pouvez désormais créer des galeries d’images attrayantes et responsive sur votre site web.
Continuez à explorer les autres addons et widgets d’Elementor – témoignages, carrousel – pour donner à votre site une touche personnelle, améliorer son apparence et ses fonctionnalités. Votre site est votre toile, ne vous contentez pas de moins que d’une œuvre d’art.
