La section Avant et après superpose deux images avec un séparateur. Les clients font glisser le séparateur pour voir davantage l'une ou l'autre image. Utilisez-la pour des résultats (avant et après), deux couleurs ou deux finitions d'un produit.
Ajouter la section
- Ouvrez le constructeur et allez sur la page voulue. Elle fonctionne sur les pages d'accueil, produit, de destination, de collection et des collections, jusqu'à 3 par page.
- Dans l'onglet Sections, cliquez sur Ajouter une nouvelle section et choisissez Avant et après dans le groupe Contenu.
- Cliquez sur le bloc Avant et après à l'intérieur et choisissez vos deux images, puis cliquez sur Publier.
Le bloc Avant et après
Ce bloc contient les deux images. Il est toujours présent dans la section et ne peut pas être retiré.
- Image avant et Image après : les deux photos. Utilisez des photos prises sous le même angle, pour qu'elles se superposent bien.
- Libellé avant et Libellé après : une courte étiquette dans le coin de chaque image, comme « Avant » et « Après », ou « Noir » et « Blanc ». Laissez vide pour masquer l'étiquette.
- Direction : Horizontal utilise un séparateur que les clients font glisser vers la gauche et la droite. Vertical utilise un séparateur qu'ils font glisser vers le haut et le bas.
- Ratio : la forme du cadre. Automatique suit l'image avant, ou choisissez Portrait, Carré ou Paysage. Les deux images sont recadrées dans le même cadre.
- Position du séparateur : là où le séparateur commence, de 5 % à 95 %. À 50 %, les clients voient la moitié de chaque image.
- Afficher un indice à son apparition à l'écran : le séparateur bouge un peu tout seul, pour que les clients voient qu'ils peuvent le faire glisser.
- Suivre la souris sur ordinateur : sur ordinateur, le séparateur suit la souris sans clic. Sur téléphone, les clients font toujours glisser.
- Utiliser le schéma de couleurs parent : le séparateur, la poignée et les étiquettes utilisent les couleurs de la section. Désactivez-le pour choisir un autre Schéma de couleurs.
Réglages de la section et titre
Ajoutez jusqu'à 2 blocs Texte, 1 Séparateur et 1 Groupe pour un titre et un court texte.
- Direction : Vertical place le titre au-dessus des images, Horizontal le place à côté.
- Empiler verticalement sur mobile : activé par défaut, pour que les images gardent toute la largeur du téléphone.
- Position et Alignement, Largeur de la section, Schéma de couleurs, Marge intérieure et un onglet CSS personnalisé.
Sur la page produit
Le même bloc Avant et après peut aussi aller dans les sections Informations produit et Informations de la page d'accueil (page de destination), ainsi que dans les onglets dépliables, pour que la comparaison soit à côté du bouton d'achat. Voir Comment ajouter des onglets dépliables, des dates de livraison, un guide des tailles, des badges ou des images avant/après à ma page produit ?
Bon à savoir
- Sur votre boutique en ligne, la comparaison ne s'affiche qu'une fois les deux images choisies. Le constructeur affiche des images d'exemple en attendant.
- Les clients peuvent aussi déplacer le séparateur au clavier.
- Les clients qui ont activé la réduction des animations sur leur appareil ne voient pas le mouvement de l'indice.
- Les images semblent coupées ? Choisissez le Ratio le plus proche de vos photos, ou utilisez des photos de même forme.
- N'utilisez que de vraies photos de vrais résultats.