Les internautes d’aujourd’hui n’ont que l’embarras du choix et il est peu probable qu’un site Web mal conçu trouve la faveur du public. C’est en partie la raison pour laquelle l’esthétique prend de plus en plus d’importance: vous devez accrocher vos visiteurs non seulement avec votre excellent contenu (créer ce qui est assez difficile), mais aussi avec la façon dont il est présenté.
Dans ce tutoriel, nous aimerions vous montrer un moyen de présenter votre contenu d’image : la galerie de cartes. Une galerie de cartes est simplement une galerie qui « mélange » un peu comme un jeu de cartes. Cela ressemble à quelque chose comme ça :
Ajouter une galerie de cartes à votre site WordPress est simple et gratuit, alors si vous pensez que cela pourrait améliorer votre site Web, il n’y a aucune raison d’hésiter. Mais comment savoir si vous pouvez utiliser une galerie de cartes ? Est-ce juste un choix esthétique, ou est-ce aussi un élément de design fonctionnel? Nous aimerions aborder ces problèmes et répondre à certaines questions que vous pourriez vous poser avant d’aborder les détails de la procédure.
Voici de quoi nous allons parler :
Une galerie de cartes a de multiples usages, mais c’est surtout une galerie : une vitrine pour photos ou autres images vos visiteurs peuvent naviguer à leur guise.
Chacune des images d’une galerie de cartes peut également être utilisée pour créer un lien vers une autre page. De cette façon, vous pouvez utilisez votre galerie de cartes pour la navigation vers d’autres sites Web ou votre propre site Web. Vous pouvez, par exemple, créer des logos pour vos projets, les présenter sous forme de cartes et les lier à des pages de projet individuelles, ce qui rend les galeries de cartes idéales pour les portefeuilles. Ou vous pouvez les utiliser à la place des pages d’équipe, grâce auxquelles un visiteur pourrait cliquer sur une image miniature d’un membre de votre personnel et l’avoir liée à sa page bio.
Cependant, même si elle n’est pas utilisée pour la navigation, une galerie de cartes est un élément animé cliquable. Ton les utilisateurs se sentiront plus engagés lorsqu’on leur donne quelque chose à faire, plutôt que de simplement regarder des images, ce qui améliore l’expérience utilisateur dans l’ensemble.
Le problème avec les galeries d’images, c’est qu’elles contiennent nécessairement des images et, bien sûr, la galerie de cartes ne fait pas exception. Cela signifie que, lorsqu’une page contenant une galerie est chargée, le chargement peut prendre sensiblement plus de temps que de charger une page sans beaucoup d’images.
Si vous utilisez des images haute résolution pour vos galeries, cela peut signifier longs temps de chargement, ce qui peut à son tour affecter négativement votre taux de rebond et votre classement SERP. Si cela vous préoccupe, utilisez les graphiques avec parcimonie.
Bien entendu, certains sites Internet (portefeuilles d’artistes, salons de tatouage, studios photo, je pense notamment) doivent par leur nature même peser lourdement sur les images. C’est pourquoi vous devriez vous pencher sur l’optimisation d’image si vous souhaitez améliorer l’expérience utilisateur.
Nous allons vous montrer comment ajouter une galerie de cartes à l’aide de notre propre plugin Qi Addons for Elementor. Avant de pouvoir l’utiliser, cependant, vous devez installer et activer la dernière version de l’éditeur visuel Elementor (la version gratuite convient), puis installer et activer les modules complémentaires Qi. Qi Addons est un plugin entièrement gratuit, de sorte que l’ensemble de l’installation n’a pas besoin de vous coûter un centime.
Qi Addons for Elementor élargit la gamme déjà impressionnante d’éléments de conception d’Elementor avec 60 nouveaux widgets conçus par des professionnels. Il comprend une grande variété d’options de galerie, et le widget de galerie de cartes n’est que l’un d’entre eux. Nous allons vous montrer comment ajouter le widget à une publication, mais vous pouvez ajoutez-le à n’importe quelle zone prête pour les widgets de votre site Web. Nous utiliserons notre thème Qi gratuit, mais le plugin devrait fonctionner correctement avec n’importe quel thème que vous utilisez.
Avec Qi Addons for Elementor, créer une galerie de cartes belle et fonctionnelle ne prend que quelques minutes de jouer avec certains paramètres de widgets simples. Vous pouvez voir comment cela se passe dans notre didacticiel vidéo :
Mais si vous préférez vos tutoriels sous forme de texte, nous avons ce qu’il vous faut : continuez à lire.
L’ajout d’une galerie de cartes Qi Addons à votre site Web WordPress commence comme avec n’importe quel autre widget Elementor : trouvez-le dans votre menu de gauche et faites-le glisser où vous le souhaitez.
La version par défaut de l’élément contient trois images d’espace réservé. En utilisant le Général partie de la Contenu onglet, vous pouvez remplir votre galerie de cartes avec vos propres images.
La première option est la Style de mélange d’images, qui est réglé sur À droite par défaut, ce qui signifie que les cartes cliquables sont à droite . Vous pouvez également mélanger vos cartes depuis le À gauche, ou Gauche et droite, c’est ce que nous avons sélectionné.
Ensuite, nous trouvons le Éléments d’image section. C’est ici que vous pouvez ajouter les images de votre choix à votre galerie de cartes. La version par défaut du widget contient trois images, et c’est le nombre dont nous avons besoin, mais vous pouvez en ajouter d’autres en cliquant sur le bouton + Ajouter un article bouton.
Pour ajouter une image à un Article, Clique dessus. Une Article a deux contrôles : Lien et Image de l’article. le Lien peut être utilisé pour créer un lien vers une page lorsqu’un élément est cliqué. Nous définirons le nôtre sur #, en renvoyant à la même page que l’élément, afin que vous puissiez voir à quoi il ressemblera et se comportera lorsqu’il sera lié. Le laisser vide signifie que l’élément de page ne sera lié à aucun endroit.
Pour ajouter une image, cliquez sur le Image de l’article boîte. le Choisissez une image Le bouton doit être visible au survol de la souris.
Vous pouvez choisir une image dans votre médiathèque ou en télécharger une nouvelle. Une fois que vous avez sélectionné une image, cliquez sur Insérer un média.
Nous avons entré le # dans le Lien champ et sélectionné une image pour chaque Article. Le dernier contrôle du Général la section est la Proportions d’image menu. Cela régit la taille et les proportions de l’image pour tous les éléments. Vous pouvez choisir entre Miniature, Carré, Paysage, Portrait, et plusieurs autres options. Nous sommes allés avec Original, en préservant la taille de nos images.
Passons à la Style onglet, vous constaterez qu’il n’y a que deux curseurs. Le premier est Pas d’échelle. Vous pouvez utiliser ce curseur pour réduire les images inactives (cliquables) à un pourcentage de leur taille d’origine. Le réglage de ce curseur sur 0 conserverait la taille d’origine des images. Nous avons choisi 0,19 pour notre réglage d’échelle, rendant les images inactives à 81 % de leur taille d’origine.
le Pas de décalage Le curseur est utilisé pour décaler les images inactives par rapport à l’image active, c’est-à-dire la quantité d’image inactive (cliquable) affichée. Définir ce curseur sur 0 les masquerait entièrement, les rendant non cliquables et rendant l’ensemble du widget inutile. Nous avons fixé le nôtre à 37.
Et voilà, une galerie de cartes animées simple, élégante et efficace, réalisée en quelques minutes.
En conclusion
Comme vous pouvez le voir, avec Qi Addons for Elementor, vous pouvez ajouter un widget magnifique, accrocheur et attrayant à votre site Web WordPress en quelques minutes et entièrement gratuitement. Si un site Web que vous concevez peut bénéficier de cette vitrine saisissante, il fait désormais partie de votre boîte à outils WordPress. Et si c’est la première fois que vous rencontrez des modules complémentaires Qi pour Elementor, notez qu’il ne s’agit que de l’une de ses nombreuses utilisations possibles.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
