Je me souviens encore de la création de l'un de mes premiers sites de portfolio et j'ai passé des heures à ajuster les photos. Un ami m'a fait remarquer qu'il ne pouvait pas cliquer pour voir les détails de mon travail, et j'ai réalisé que j'avais négligé une étape cruciale qui nuisait à l'expérience utilisateur.
C'est un petit détail qui fait une grande différence dans le professionnalisme d'un site. Lorsque les visiteurs ne peuvent pas zoomer sur les photos de produits ou les pièces de portfolio, cela crée une expérience frustrante.
Maintenant que j'ai configuré cette fonctionnalité sur plusieurs sites Web, j'ai constaté que rendre les images agrandissables au clic est l'un des moyens les plus rapides d'améliorer l'engagement des visiteurs. C'est une solution simple qui ajoute une touche soignée et de haute qualité à n'importe quel site.
Dans ce guide, je vais vous présenter trois méthodes simples pour rendre vos images cliquables. Nous couvrirons tout, de la simple fonctionnalité par défaut aux plugins de galerie plus avancés, sans aucun codage requis.
Pourquoi agrandir les images au clic dans WordPress ?
Permettre aux visiteurs de cliquer pour agrandir les images sur votre site web WordPress les aide à voir les détails importants de près.
C'est une simple amélioration qui ajoute une touche professionnelle et soignée, en particulier pour les portfolios, les annonces immobilières et les galeries de photographie.
De plus, cela peut être utile pour les boutiques en ligne où les clients veulent examiner attentivement vos produits avant de décider de les acheter.
WordPress inclut une fonctionnalité de base « Agrandir au clic » par défaut. Elle ouvre l'image directement sur la page, sans aucune atténuation de l'arrière-plan ni effet visuel.
Cela fonctionne bien pour les blogs simples ou les pages internes, mais cela a l'air un peu fade et n'offre pas beaucoup de contrôle.
Si vous voulez quelque chose de plus moderne et soigné, alors un plugin de lightbox d'images est un meilleur choix.
Au lieu de simplement agrandir l'image, elle s'ouvre dans une superposition élégante qui atténue l'arrière-plan et maintient le spectateur concentré. Vous avez également plus de contrôle sur l'apparence et le fonctionnement de l'image.
Avant de vous présenter ces différentes méthodes, il y a une chose de plus à garder à l'esprit : la qualité de l'image. Lorsque quelqu'un clique pour agrandir une photo, il s'attend à une version claire et haute résolution. Mais les grands fichiers d'image peuvent ralentir votre site.
C'est là qu'intervient l'optimisation des images. En compressant vos images sans en diminuer la qualité visible, vous pouvez maintenir des tailles de fichiers réduites et votre site rapide.
Cela signifie que vous pouvez utiliser des images de grandes dimensions (comme 1500px de large) qui rendent bien lorsqu'elles sont agrandies, sans nuire aux performances.
Pour vous aider, consultez notre guide sur comment optimiser les images pour le web.
Dans cet article, je vais partager 3 méthodes différentes qui peuvent agrandir vos images WordPress lorsqu'elles sont cliquées, y compris quelques options de lightbox.
Vous pouvez utiliser les liens rapides ci-dessous pour accéder à la méthode que vous souhaitez utiliser :
- Méthode 1 : Utiliser la fonctionnalité par défaut de WordPress (Simple)
- Méthode 2 : Utiliser un plugin Lightbox (Plus de personnalisation)
- Méthode 3 : Utiliser un plugin de galerie (Idéal pour plusieurs images)
- FAQ sur l'agrandissement des images dans WordPress
- Ressources bonus : Gérez et améliorez vos images WordPress
Méthode 1 : Utiliser la fonctionnalité par défaut de WordPress (Simple)
Après avoir testé différentes façons d'agrandir les images, j'ai constaté que la fonctionnalité intégrée de WordPress est parfaite pour les besoins simples.
J'ai utilisé cette méthode lors de la création de documentation ou de la rédaction d'articles techniques. Elle est particulièrement utile lorsque vous avez besoin que les lecteurs voient de petits détails dans les captures d'écran ou examinent de plus près des parties spécifiques d'une image.
Le principal inconvénient est qu'il ne s'agit pas d'une véritable lightbox. Elle agrandit simplement l'image, et vous ne pouvez pas personnaliser l'apparence ni ajouter d'effets sympas.
Étape 1 : Ajoutez votre image dans l'éditeur WordPress
Tout d'abord, vous devez créer ou ouvrir l'article où vous souhaitez ajouter l'image cliquable.
Ensuite, dans l'éditeur de blocs, cliquez sur l'icône (+) pour ajouter un nouveau bloc et choisissez « Image » dans les options de bloc. Une fois que vous l'avez fait, vous verrez des boutons pour ajouter une image de 3 manières différentes : Télécharger, Bibliothèque de médias ou Insérer depuis l'URL.
Chez WPBeginner, nous utilisons toujours l'option « Bibliothèque de médias ». Cela garantit que le titre et le texte alternatif que nous ajoutons à l'image sont disponibles si nous la réutilisons dans d'autres articles.
Je suggère d'éviter « Insérer depuis l'URL ». Cela hotlinke une image sur un autre site Web, ce qui signifie que l'image pourrait disparaître de votre site si l'original est supprimé.
Étape 2 : Configurer l'option « Agrandir au clic »
Après avoir ajouté votre image à l'article ou à la page, vous pouvez cliquer dessus pour afficher les paramètres de l'image.
Avec l'image sélectionnée, cliquez sur l'icône « Insérer un lien » dans la barre d'outils du bloc. Dans les paramètres qui apparaissent, activez simplement l'option intitulée « Agrandir au clic ».
Étape 3 : Configurer les paramètres de l'image
Maintenant que vous avez activé la fonctionnalité de clic pour agrandir, vous voudrez peut-être personnaliser les paramètres de l'image d'origine pour garantir la meilleure qualité d'affichage dans votre article ou votre page.
Sélectionnez votre image, puis vérifiez le panneau des paramètres du bloc sur le côté droit de votre écran.
Vous pouvez contrôler l'apparence de l'image sur la page en ajustant ses dimensions. Cependant, il ne s'agit que de la taille d'affichage.
Lorsqu'un visiteur clique sur l'image, il verra l'image originale en pleine résolution que vous avez téléchargée dans votre médiathèque. Assurez-vous donc de télécharger une image de haute qualité d'au moins 1500 pixels de large. N'oubliez pas de l'optimiser d'abord, comme nous l'avons discuté précédemment, pour que votre page se charge rapidement ! 😉
Étape 4 : Prévisualiser votre image et publier votre contenu
Avant de publier votre article ou votre page avec l'option d'image « agrandir au clic » activée, vous voudrez le prévisualiser pour vous assurer qu'il fonctionne.
Pour ce faire, cliquez sur le bouton « Afficher » dans le coin supérieur droit de votre éditeur et sélectionnez « Prévisualiser dans un nouvel onglet ».
Je vous recommande de le tester dans toutes les options d'affichage, en particulier « Mobile », car de nombreuses personnes utilisent des smartphones de nos jours.
Avec l'effet d'image « agrandir au clic » appliqué, il devrait s'agrandir sur la même page, comme vu dans l'exemple ci-dessous. L'ampleur de l'agrandissement dépend de la taille de l'image d'origine que vous avez téléchargée.
Cliquez simplement sur l'image pour la redimensionner.
Bien que cette fonctionnalité intégrée soit rapide et facile, elle manque de la superposition élégante que de nombreux sites professionnels utilisent. Si vous recherchez cet effet 'lightbox' soigné qui assombrit l'arrière-plan et aide vos images à ressortir, notre prochaine méthode est pour vous.
Méthode 2 : Utiliser un plugin Lightbox (Plus de personnalisation)
Contrairement à la fonctionnalité de base de WordPress, un plugin lightbox crée une expérience beaucoup plus professionnelle. Lorsqu'un utilisateur clique sur une image, elle s'ouvre dans un élégant surlignage qui assombrit le reste de la page, faisant ressortir votre image.
Je recommande le plugin gratuit Simple Lightbox car il vous permet d'ajouter des animations fluides, des thèmes personnalisables et des fonctionnalités de diaporama qui font ressortir vos images. Il est léger et fonctionne automatiquement avec toutes vos images une fois activé.
Étape 1 : Installer et activer le plugin Simple Lightbox
Pour commencer, vous devez installer et activer le plugin Simple Lightbox.
Si vous avez besoin d'aide pour ce processus, veuillez lire notre guide sur l'installation de plugins WordPress.
Étape 2 : Configurer les paramètres de Simple Lightbox
Après avoir activé le plugin, il est conseillé de vous rendre dans Apparence » Lightbox et de passer en revue ses paramètres pour vous assurer que tout est configuré comme vous le souhaitez.
Ici, vous trouverez les paramètres de Lightbox qui vous permettent d'ajuster où vous souhaitez activer la fonctionnalité lightbox. Cela peut être sur la page d'accueil, les articles individuels, les pages, et plus encore.
Je m'en tiens généralement aux paramètres par défaut car ils fonctionnent très bien pour la plupart des sites Web.
Ensuite, faites défiler jusqu'aux paramètres « UI ». Ceux-ci contrôlent l'apparence et la convivialité de la lightbox.
Par défaut, le plugin utilisera un thème clair, mais vous pouvez passer au mode sombre si vous préférez. Vous pouvez également ajuster l'option « Opacité de la superposition », qui contrôle la façon dont la page d'arrière-plan est assombrie lorsqu'une image est ouverte, et activer les animations pour modifier la façon dont l'image s'ouvre.
N'hésitez pas à jouer avec ces paramètres et n'oubliez pas de cliquer sur « Enregistrer les modifications » une fois que vous avez terminé.
Étape 3 : Ajoutez votre image et activez la lightbox
Testons maintenant la fonctionnalité de lightbox. Créez ou ouvrez simplement un article et ajoutez une image.
Une fois votre image dans l'éditeur, vous pouvez ajouter une légende en tapant directement dans le champ 'Ajouter une légende' qui apparaît juste en dessous de l'image.
Si vous n'ajoutez pas de légende, le plugin utilisera automatiquement le titre de l'image de la médiathèque à la place. Cependant, je trouve que l'utilisation du champ de légende vous donne un contrôle plus direct.
Ensuite, avec l'image toujours sélectionnée, vous devez cliquer sur l'icône « Lien » dans la barre d'outils et sélectionner l'option « Lien vers le fichier image ». C'est une étape clé qui permet au plugin Simple Lightbox de fonctionner.
Une fois que vous avez fait cela, le plugin détectera automatiquement le lien et appliquera son effet lightbox lorsqu'un visiteur cliquera sur l'image.
💡 Remarque : Vous pouvez également utiliser Simple Lightbox pour une galerie d'images entière. Créez simplement une galerie d'images à l'aide de l'éditeur de blocs, puis suivez les étapes décrites dans cette méthode pour ajouter la fonctionnalité lightbox à chaque image.
Étape 4 : Testez votre Lightbox
Testons maintenant la fonctionnalité lightbox en prévisualisant la publication. Cliquez simplement sur l'option Afficher dans le coin supérieur droit, puis sélectionnez « Aperçu dans un nouvel onglet ».
Une fois le nouvel onglet ouvert, cliquez sur l'image. Elle devrait s'ouvrir en douceur dans un aperçu lightbox avec un fond assombri.
Selon vos paramètres de conception, vous verrez la lightbox dans un thème clair ou sombre. Voici à quoi ressemble le thème clair.
Le thème clair entoure la photo d'un cadre blanc, ce qui crée un bon contraste avec le fond assombri.
Voici maintenant à quoi ressemble le thème sombre.
Vous devriez également voir la légende de votre image dans le coin inférieur gauche de la lightbox.
Je vous recommande également de prévisualiser votre lightbox sur d'autres tailles d'écran pour vous assurer qu'elle est belle sur tous les appareils.
Vous pouvez le faire en revenant à l'option Afficher et en sélectionnant l'option « Bureau », « Tablette » ou « Mobile ». Ensuite, cliquez sur « Prévisualiser dans un nouvel onglet ».
Méthode 3 : Utiliser un plugin de galerie (Idéal pour plusieurs images)
Si vous avez toujours voulu mettre en avant plusieurs images, alors les plugins de galerie sont sans aucun doute la meilleure solution. Ils aident à organiser et à présenter une série d'images avec une fonctionnalité d'agrandissement d'image sans ralentir votre site.
Ces plugins peuvent améliorer l'interaction des utilisateurs en rendant votre contenu plus attrayant et visuellement agréable, offrant aux visiteurs une expérience fluide lors de la navigation dans vos images.
Je recommande Envira Gallery car il vous permet de créer de belles galeries personnalisables qui sont superbes sur n'importe quel appareil. Il est également très convivial pour les débutants.
De plus, il comprend des fonctionnalités de performance comme le chargement paresseux pour vous assurer que vos galeries ne ralentissent pas votre site. Et son outil d'IA peut vous aider à créer des images personnalisées directement dans WordPress.
Plus important encore, le plugin offre un réglage de lightbox avec de nombreuses options de personnalisation. De cette façon, vous pouvez bénéficier de la fonctionnalité d'agrandissement d'image au clic, ainsi que de paramètres intéressants pour les mises en page, les transitions de galerie, et bien plus encore.
Vous voulez en savoir plus sur ce que le plugin peut faire ? Nous l'avons testé en profondeur par le passé, et vous pouvez consulter notre test complet d'Envira Gallery pour plus d'informations.
📝 Note : Bien qu'il existe une version gratuite d'Envira Gallery, je recommande la version Pro pour des fonctionnalités avancées telles que la lightbox SuperSize, Envira AI et les outils de partage social. La version gratuite inclut toutes les fonctionnalités essentielles de la lightbox dont vous aurez besoin pour commencer !
Passons maintenant aux étapes d'utilisation d'Envira Gallery pour ajouter une fonctionnalité de lightbox.
Étape 1 : Installer et activer le plugin Envira Gallery
Commençons par installer le plugin sur votre site. Dans ce tutoriel, j'utiliserai la version gratuite, ou vous pouvez acheter une licence Pro sur le site web d'Envira Gallery.
Ensuite, installez-le et activez-le en suivant notre guide sur comment installer un plugin WordPress. Une fois le plugin activé, l'assistant de configuration d'Envira devrait se lancer instantanément.
À partir de là, cliquez sur le bouton « Commencer » pour lancer le processus.
Cet assistant comporte 5 étapes.
Pendant la configuration, vous pouvez choisir la catégorie qui décrit votre entreprise ou votre site Web (comme photographe ou propriétaire d'entreprise) et sélectionner les fonctionnalités de galerie que vous souhaitez ajouter.
Je recommande de continuer avec les paramètres par défaut suggérés, car ils offrent généralement tout ce dont vous avez besoin. Cependant, si vous avez un plan Pro, vous pourrez activer des fonctionnalités plus avancées.
Gardez à l'esprit que l'option « Lightboxes » devrait déjà être cochée, cette fonctionnalité sera donc automatiquement activée.
Une fois l'assistant de configuration terminé, vous devrez toujours activer votre licence pro si vous en avez acheté une. Pour ce faire, allez dans Envira Gallery » Paramètres et collez votre clé de licence dans le champ. Ensuite, cliquez sur « Vérifier la clé ».
Étape 2 : Créer une nouvelle galerie
Pour créer votre première galerie, allez dans Envira Gallery » Ajouter une nouvelle dans votre tableau de bord.
Tout d'abord, ajoutez un titre en haut de la page. Je recommande de lui donner un nom clair et descriptif afin qu'il soit plus facile de le retrouver plus tard.
Ensuite, vous verrez 3 options pour ajouter des images : Galerie native Envira, Galeries d'autres sources et Créer avec Envira AI.
Je recommande de commencer avec la Galerie native Envira. C'est la manière la plus simple de télécharger vos propres images directement.
💡 Besoin d'images originales rapidement ? Vous pouvez également créer vos propres images personnalisées avec Envira AI. Cette fonctionnalité permet de générer facilement des images uniques à la demande. Il vous suffit de créer une description d'image rapide, de choisir parmi les résultats et de l'ajouter à votre galerie en un seul clic.
Allez-y et sélectionnez les images que vous souhaitez inclure. Vous pouvez en ajouter autant que vous le souhaitez tout en maintenant la taille maximale du fichier de téléchargement en dessous de 256 Mo.
Étape 3 : Configurer les options de galerie et de lightbox
Dans le menu à gauche de vos images de galerie, vous trouverez les paramètres de galerie d'Envira.
Il y a des onglets pour la configuration générale, la fonctionnalité de lightbox, les paramètres mobiles, et plus encore. Passons-les un par un.
Vous pouvez choisir la disposition de votre galerie en haut de la section « Configuration ». La disposition en grille fonctionne très bien pour la plupart des galeries, mais n'hésitez pas à expérimenter avec d'autres options.
En faisant défiler vers le bas, vous trouverez d'autres options de paramètres de galerie.
Par exemple, vous pouvez activer le chargement paresseux, définir une disposition automatique et ajouter une description de galerie.
Par exemple, vous pourriez vouloir définir des dispositions automatiques pour vous assurer que votre galerie est soignée et organisée sans effort supplémentaire.
💡 Astuce de pro : Je recommande d'activer l'option de chargement paresseux. Cette fonctionnalité aide votre galerie à se charger plus rapidement en ne chargeant les images que lorsque les visiteurs font défiler la page. Elle aide également à optimiser la vitesse de votre site.
Ensuite, passez à l'onglet « Lightbox ». N'oubliez pas que cette fonctionnalité doit être activée par défaut, mais si ce n'est pas le cas, cochez la case à côté de « Activer la Lightbox ? »
Ensuite, vous voudrez sélectionner un « Thème de Lightbox de Galerie ». Cela déterminera l'apparence générale de votre lightbox.
Vos options dépendront de votre plan Envira et si vous avez le module complémentaire Gallery Themes. Mais vous devriez pouvoir choisir parmi un thème sombre, clair ou hérité.
Plus bas dans l'onglet « Lightbox », vous pouvez choisir comment vos images agrandies apparaissent, sélectionner des effets de transition et décider d'afficher ou non les titres des images.
Ensuite, vous pouvez trouver plus de paramètres de lightbox dans la seconde moitié de la page.
Par exemple, vous pouvez activer les flèches de navigation, la boucle infinie d'images ou le mode agrandissement. Vous pouvez même ajouter des effets sympas lorsque les gens ouvrent ou ferment votre galerie, et lorsqu'ils cliquent dessus.
Par exemple, pour « Effet de transition Lightbox », vous pouvez choisir des options amusantes comme Fondu, Glisser, Circulaire, Tube, Rotation, et plus encore.
Ensuite, je vous recommande d'aller dans l'onglet « Mobile » pour configurer les paramètres généraux et ceux de la lightbox.
Comme beaucoup de vos visiteurs verront probablement votre galerie sur leur téléphone, il est important de s'assurer qu'elle est belle sur les petits écrans.
En plus d'activer la fonctionnalité de lightbox pour les appareils mobiles, vous pouvez personnaliser les paramètres spécifiques au mobile tels que les dimensions de la lightbox, la hauteur des lignes et l'affichage des titres ou des légendes.
En faisant défiler vers le bas, vous découvrirez plus d'options, y compris des fonctionnalités comme le balayage vers le haut pour fermer, les flèches de navigation de la galerie, les miniatures, et plus encore.
Enfin, les onglets « Autonome » et « Divers » contiennent quelques paramètres supplémentaires qui pourraient vous être utiles.
L'onglet « Autonome » vous permet de donner à votre galerie sa propre URL unique. C'est une excellente fonctionnalité si vous souhaitez partager un lien direct vers un portfolio ou un album photo spécifique.
L'onglet « Divers » comprend des outils pour importer et exporter des galeries, mais vous n'en aurez probablement pas besoin pour le moment.
Pour une analyse plus approfondie de tous ces paramètres, vous pouvez consulter notre guide détaillé sur la création d'une galerie d'images.
Étape 4 : Prévisualiser et publier votre galerie
Pour prévisualiser la galerie, cliquez sur le bouton « Prévisualiser » situé sur le côté droit de votre page de paramètres de galerie.
Une fois sur la page de prévisualisation, cliquez sur les différentes images pour tester l'effet lightbox.
Ici, vous pouvez voir le nom de l'image et le reste de la galerie.
Lorsque vous testez la galerie, les images devraient s'ouvrir en douceur. Si vous avez choisi un effet de transition, il devrait être visible ici.
Par exemple, j'ai défini l'effet de transition Diapositive, et voici à quoi cela ressemble.
Pour naviguer entre les images, cliquez sur les flèches de navigation situées de chaque côté de l'écran ou utilisez les touches fléchées de votre clavier.
À ce stade, vous voudrez peut-être vous assurer que les flèches de navigation fonctionnent et que les titres de vos images apparaissent correctement si vous les avez activés.
Une fois que vous êtes satisfait du fonctionnement de tous les éléments, vous pouvez publier la galerie en cliquant sur le bouton « Publier » situé sur le côté droit des paramètres de votre galerie.
Après avoir publié la galerie, vous pouvez passer à son ajout sur votre site web.
Étape 5 : Ajouter la galerie à votre site web
Maintenant que votre galerie fonctionne parfaitement, ajoutons-la à un article.
Une fois dans l'éditeur WordPress, cliquez sur l'icône (+) pour ajouter un nouveau bloc et recherchez « Envira Gallery ». Faites ensuite glisser le bloc sur votre article.
Ensuite, lorsque vous cliquez sur le menu déroulant « Rechercher une galerie », sélectionnez la galerie que vous venez de créer. Elle sera automatiquement insérée dans l'article avec tous les paramètres que vous venez de configurer.
Alternativement, vous pouvez ajouter votre galerie à des pages, des widgets ou des types d'articles personnalisés en utilisant un shortcode.
Vous pouvez trouver ce shortcode dans la barre latérale droite des paramètres de la galerie, juste en dessous du bouton « Publier ».
Pour plus d'informations, consultez notre guide sur comment ajouter un shortcode dans WordPress.
Avant de cliquer sur le bouton « Publier », assurez-vous de prévisualiser votre article une dernière fois pour vous assurer que la galerie apparaît exactement comme vous le souhaitez.
Vos images devraient maintenant être affichées dans une mise en page en grille professionnelle avec un effet de lightbox fluide lorsque vous cliquez dessus.
FAQ sur l'agrandissement des images dans WordPress
Voici quelques questions fréquemment posées sur l'agrandissement des images dans WordPress.
Comment agrandir les images dans WordPress ?
Vous pouvez utiliser la fonctionnalité par défaut « Agrandir au clic » dans WordPress pour une fonctionnalité de base. Pour plus de contrôle, vous pouvez utiliser des plugins tels que Simple Lightbox ou Envira Gallery.
Comment redimensionner automatiquement les images dans WordPress ?
WordPress crée automatiquement plusieurs versions plus petites de vos images lors de leur téléchargement. Pour avoir plus de contrôle sur les dimensions des images ou pour les optimiser en termes de vitesse, je recommande d'utiliser un plugin d'optimisation d'images comme EWWW Image Optimizer.
Des plugins comme Envira Gallery vous donnent également un contrôle précis sur les dimensions d'affichage des images dans vos galeries.
Comment forcer la taille des images dans WordPress ?
Vous pouvez définir des dimensions d'image personnalisées dans votre thème. Pour un guide détaillé, consultez notre tutoriel sur comment créer des tailles d'image supplémentaires dans WordPress. C'est un excellent moyen d'assurer une mise en page cohérente dans vos galeries et sur votre site.
Si vous préférez utiliser un plugin, envisagez des options comme Envira Gallery. Il vous permet de spécifier efficacement des dimensions d'image exactes, vous donnant le contrôle sur l'apparence de vos galeries. Cela peut aider à maintenir une apparence soignée sur votre site.
Ressources bonus : Gérez et améliorez vos images WordPress
J'espère que cet article vous a aidé à ajouter la fonctionnalité « agrandir les images au clic » dans WordPress. Voici quelques guides bonus si vous souhaitez gérer et améliorer vos images WordPress :
- Comment optimiser les images pour les performances web sans perdre en qualité
- Comment ajouter plusieurs galeries dans les articles et les pages WordPress
- Comparatif des meilleurs plugins de compression d'images pour WordPress
- Comment ajouter une image héros dans WordPress (fonctionne pour tous les thèmes)
- Comment créer des tailles d'images supplémentaires dans WordPress
- Comment résoudre les problèmes d'images courants dans WordPress (Guide Ultime)
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Vous avez une question ou une suggestion ? Veuillez laisser un commentaire pour lancer la discussion.