Curseur de comparaison d’images

Mis à jour le mois dernier

Le bloc de curseur de comparaison d’images affiche deux images superposées, l’image située au premier plan étant révélée par un séparateur déplaçable afin que les acheteurs puissent les comparer. Il est idéal pour les comparaisons avant-après. La comparaison commence au centre, à 50 %, et ne dispose d’aucun réglage de hauteur ou de position fixe : la hauteur dépend du ratio, et la position correspond à celle où l’acheteur relâche le curseur.

Paramètres

Ajoutez le bloc à une section et configurez ci-dessous ses images, ses libellés et son ratio. Le bloc se trouve dans la catégorie Média de l’éditeur de thème.

Image avant et Image après : les deux images à comparer. Si l’une d’elles reste vide, le bloc affiche une image d’espace réservé à sa place.
Texte du badge avant et Texte du badge après : un court badge affiché sur chaque image (par défaut, Avant et Après). Laissez un champ vide pour masquer le badge de l’image correspondante.
Ratio d’aspect sur mobile et Ratio d’aspect sur ordinateur : la hauteur du bloc sur chaque appareil. Choisissez S’adapter à l’image pour utiliser le ratio propre à l’image sélectionnée, Portrait (4:5), Carré (1:1) ou Paysage (16:9). Avec S’adapter à l’image, le thème utilise d’abord le ratio de l’image avant, puis celui de l’image après, et utilise 16:9 par défaut si aucun ratio n’est défini. Les deux options sont réglées par défaut sur Carré (1:1).
Utiliser l’arrondi intérieur : arrondit les angles du bloc (désactivé par défaut). Activez cette option pour faire apparaître le réglage Style d’arrondi des bordures, qui permet de sélectionner l’un des trois styles d’arrondi.
Activer le schéma de couleurs : applique un schéma de couleurs au bloc (désactivé par défaut). Activez cette option pour faire apparaître le réglage Schéma de couleurs.
Marge supérieure (ordinateur) et Marge supérieure (mobile) : espace au-dessus du bloc, de 0 à 34 (0 par défaut).
Masquer le bloc sur ordinateur et Masquer le bloc sur mobile : masque le bloc sur l’appareil sélectionné (désactivé par défaut).

Utilisez ce bloc pour des photos associées dont la différence constitue le point central : une photo avant-après, un gros plan d’un produit comparé à son emballage, ou une ancienne et une nouvelle version d’un design.

FAQ

Qu’est-ce que le curseur de comparaison d’images dans le thème Pops ?

Le bloc de curseur de comparaison d’images superpose deux images et révèle l’image située au premier plan à l’aide d’un séparateur déplaçable, afin que les acheteurs puissent les comparer. Il est idéal pour les comparaisons avant-après. La comparaison commence au centre, à 50 %, et ne dispose d’aucun réglage de hauteur ou de position fixe : la hauteur dépend du ratio, et la position correspond à celle où l’acheteur relâche le curseur.

Comment ajouter le bloc de curseur de comparaison d’images dans Pops ?

Ajoutez le bloc à une section dans l’éditeur de thème, où il se trouve dans la catégorie Média. Configurez ensuite ses images, ses libellés et son ratio dans les paramètres du bloc.

Que se passe-t-il si je laisse l’image avant ou l’image après vide dans le curseur de comparaison d’images Pops ?

Si l’image avant ou l’image après reste vide, le bloc affiche une image d’espace réservé à sa place.

Comment modifier la hauteur du curseur de comparaison d’images Pops ?

Définissez le Ratio d’aspect sur mobile et le Ratio d’aspect sur ordinateur. Choisissez S’adapter à l’image pour utiliser le ratio propre à l’image sélectionnée, Portrait (4:5), Carré (1:1) ou Paysage (16:9). Avec S’adapter à l’image, le thème utilise d’abord le ratio de l’image avant, puis celui de l’image après, et utilise 16:9 par défaut si aucun ratio n’est défini. Les deux options sont réglées par défaut sur Carré (1:1).

Comment modifier ou masquer les badges du curseur de comparaison d’images Pops ?

Modifiez les champs Texte du badge avant et Texte du badge après, qui contiennent par défaut Avant et Après. Laissez un champ vide pour masquer le badge de l’image correspondante.

Puis-je masquer le curseur de comparaison d’images sur mobile ou sur ordinateur ?

Activez Masquer le bloc sur ordinateur pour masquer le bloc sur ordinateur, ou Masquer le bloc sur mobile pour le masquer sur mobile. Les deux options sont désactivées par défaut.

Cela vous a-t-il été utile ?