Élément d'image de comparaison

À propos de l'élément de comparaison d'images

L' Comparaison d'images Cet élément vous permet de mettre en avant les avantages de votre produit ou service en comparant des images avant/après dans une même image. Son fonctionnement est similaire à celui de l'élément « Image avant/après » des versions précédentes.

Exemples de cas d'utilisation :

Utilisez la comparaison d'images pour mettre en évidence l'impact de vos produits et instaurer la confiance avec vos clients :

• Démonstrations de produits: Afficher les améliorations avant/après (par exemple, soins de la peau, effets nettoyants).
• Visuels lifestyle: Comparez l’utilisation réelle et l’absence d’utilisation.
• Vitrines de design:Afficher les refontes, les mises à niveau ou les transformations.

Comment ajouter un élément de comparaison d’images à votre page ? 

La comparaison d'images est un élément flexible et peut être utilisé à n'importe quel endroit de votre page en suivant les étapes ci-dessous :

Étape 1 : Consultez la Tableau de bord GemPages  > Pages, puis cliquez sur votre page cible pour localiser l'éditeur.

Étape 2 : Dans la barre latérale gauche, recherchez «comparaison", puis faites-le glisser et déposez-le dans la section souhaitée.

Étape 3 : Cliquez sur l'élément pour ouvrir son panneau Paramètres et commencer la personnalisation.

Configurer l'onglet Paramètres

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Onglet Paramètres, vous pouvez ajuster les options suivantes :

Mise En Page

Choisissez comment les deux images seront affichées dans le cadre de comparaison :

• Horizontal: Les images sont comparées de gauche à droite.

• Verticale: Les images sont comparées de haut en bas.

Image(s)

Téléchargez et ajustez les images que vous souhaitez comparer.

1ère image : Téléchargez ou sélectionnez la première image.

2ème image : Ensuite, choisissez la 2ème image pour comparaison.

Échelle:

• Remplir l'image : Étire l'image pour l'adapter au conteneur. Le rapport hauteur/largeur peut être déformé.
• Image d'ajustement : Ajuste l'image pour qu'elle s'adapte au conteneur tout en conservant son rapport hauteur/largeur.
  

Slider

Décidez comment vos visiteurs interagissent avec le curseur de comparaison.

Comportement:

• Faites glisser pour déplacer : Les visiteurs font glisser le curseur manuellement.

• Survolez pour vous déplacer : Le curseur se déplace automatiquement lorsqu'il est survolé.

Taux par défaut : Définissez le rapport de division initial (en %).

Badge

Activez la Badge fonctionnalité permettant aux visiteurs d'identifier clairement les deux images comparées.

Ensuite, vous pouvez personnaliser le badge texte à votre façon, notamment :

1er et 2ème textes : Ajoutez une étiquette pour la première et la deuxième image. Par exemple, « Ancienne » ou « Nouvelle » ou « Avant » ou « Après ».

Style de texte : Adaptez la typographie à votre boutique. Vous pouvez :

• Choisissez parmi les styles de texte disponibles (titre, paragraphe, etc.).
• Sélectionnez une famille de polices.
• Modifiez la taille de la police.
• Appliquer les caractères gras, italiques et soulignés.
• Choisissez une couleur de police.
• Contrôlez la hauteur des lignes et l'espacement des lettres.
• Appliquer la transformation du texte (majuscule, minuscule, majuscule).

Rembourrage: Définissez l'espacement à l'intérieur du badge pour contrôler l'espace dont dispose le texte autour de lui.

Mise en contexte: Définissez la couleur d'arrière-plan du badge pour plus de visibilité (par exemple, un arrière-plan de couleur sombre pour le texte blanc).

Frontière: Personnalisez l'épaisseur, le style et la couleur de la bordure.

Coin: Choisissez si les angles du badge sont pointus, arrondis ou en forme de pilule. Saisissez un rayon pour un contrôle total.

Ombre: Ajoutez de la profondeur avec des effets d'ombre. Ajustez la taille, le flou, la couleur et la distance de l'ombre.

Poste: Choisissez où le badge doit apparaître (par exemple, en haut à gauche, en haut à droite, en bas à gauche, en bas à droite).

Taille

Ajustez le cadre et la largeur de votre élément.

Cadre: Sélectionnez le rapport hauteur/largeur du cadre dans la liste déroulante (par exemple, 16:9, 4:3).

Largeur: Par défaut, la largeur est définie sur 100 % (pleine largeur). Si vous préférez, vous pouvez modifier la largeur en saisissant une valeur spécifique dans le champ.

Forme

Personnalisez l'apparence générale du cadre de comparaison.

• Frontière:Vous pouvez modifier la couleur, l'épaisseur et le contour de la bordure.
• CORNER: L'angle de la section peut être carré, rond ou en forme de pilule. Vous pouvez également saisir un rayon précis pour personnaliser l'angle de l'élément à votre guise.
• Shadow:Vous pouvez ajouter une ombre et ajuster son affichage (taille, couleur, flou et distance).

Optimiser le LCP

Ce paramètre permet d'améliorer la qualité de votre page. La plus grande peinture contentieuse (LCP) score, qui est une mesure clé des Core Web Vitals pour les performances et le référencement.

Précharge: Activez cette option si l’image apparaît au-dessus du pli et constitue l’un des principaux éléments visuels de la page.

• Si Précharge = Oui : L'image est préchargée pour améliorer la vitesse.
• Si Précharge = Non : L'image se charge normalement.

Qualité: Choisissez le bon niveau de compression d'image pour équilibrer la clarté et la vitesse de chargement :

• Le meilleur : Qualité supérieure, taille de fichier plus grande.
• Élevé (par défaut) : Équilibre entre qualité et performance.
• Moyen: Chargement plus rapide, qualité légèrement réduite pour les pages contenant beaucoup d'images.
• Personnalisé: Définissez vos paramètres de compression pour un contrôle avancé.

Le SEO

Améliorez le classement de votre page en fournissant des informations sur les images. Texte alternatif Titre de l'image pour chaque image.

Aligner

Ajustez l'alignement de votre élément à l'intérieur du conteneur : aligné à gauche, aligné au centre ou aligné à droite.

Remarque : L'alignement n'est pas pris en charge si la largeur est définie sur 100 % ou plus.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Onglet Avancé et suivez les instructions dans cet article.

Questions fréquentes

1. Puis-je ajouter plus de deux images dans l’élément Comparaison d’images ?

Non. L'élément de comparaison d'images est conçu pour comparer uniquement deux images à la fois (avant vs. après). Si vous souhaitez afficher davantage de comparaisons, vous pouvez dupliquer l'élément sur votre page.

2. L'élément de comparaison d'images fonctionne-t-il sur mobile ?

Oui. Le curseur est entièrement responsive et fonctionne aussi bien sur ordinateur que sur mobile. Sur mobile, les visiteurs peuvent faire glisser la poignée avec leur doigt.

3. Puis-je ajuster le style de la poignée du curseur ?

Oui. Vous pouvez personnaliser la couleur, la forme et l'ombre de la poignée dans le Slider .

4. Comment puis-je m'assurer que les images ne semblent pas étirées ?

Utilisez le bouton Image ajustée option sous Scale pour préserver le rapport hauteur/largeur d'origine de vos images.

5. Puis-je ajouter des étiquettes de texte telles que « Avant » et « Après » ?

Oui. Activez le Badge possibilité d'ajouter des étiquettes personnalisables à chaque image.