Le bloc bascule Avant Après vous permet de créer des comparaisons d’images interactives sur vos pages SeedProd. Ce bloc affiche deux images côte à côte avec une poignée de curseur personnalisable que les visiteurs peuvent faire glisser pour révéler les états avant et après, créant ainsi une expérience de comparaison visuelle attrayante.
Les comparaisons Avant/Après sont parfaites pour présenter des transformations, des améliorations de produits, des changements de conception, des résultats de perte de poids, des rénovations domiciliaires, des effets de retouche photo, ou tout scénario où vous souhaitez démontrer visuellement l’impact du changement. Le curseur interactif permet aux visiteurs d’explorer facilement les différences à leur propre rythme.
Ajouter le bloc bascule Avant Après à vos pages
Suivez ces étapes pour ajouter un bloc bascule Avant Après à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Conception > Blocs, faites glisser et déposez le bloc Bascule Avant Après dans la section souhaitée de votre page.
Le bloc bascule Avant Après est situé sous Conception > Avancé et peut être glissé dans n’importe quelle section de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc bascule Avant Après pour ouvrir ses paramètres. Dans l’onglet Contenu, vous pouvez télécharger vos images de comparaison et configurer le comportement du curseur.
Image :
- Image Avant : Cliquez sur Choisir une nouvelle image pour télécharger ou sélectionner l’image « avant » qui apparaît sur le côté gauche (ou supérieur) de la comparaison
- Utiliser votre propre image ou une image de stock : Choisissez si vous souhaitez télécharger votre propre image depuis votre ordinateur ou en sélectionner une dans les bibliothèques d’images de stock
- Source de l’image : Affiche l’URL source de votre image avant sélectionnée
- Étiquette Avant : Entrez un texte personnalisé qui apparaît sur l’image avant (par exemple, « Avant », « Original », « 2023 »). Cela aide les visiteurs à comprendre ce qu’ils voient
- Image Après : Cliquez sur Choisir une nouvelle image pour télécharger ou sélectionner l’image « après » qui apparaît sur le côté droit (ou inférieur) de la comparaison
- Utiliser votre propre image ou une image de stock : Choisissez si vous souhaitez télécharger votre propre image ou en sélectionner une dans les bibliothèques de stock pour l’image après
- Source de l’image : Affiche l’URL source de votre image après sélectionnée
- Étiquette Après : Entrez un texte personnalisé qui apparaît sur l’image après (par exemple, « Après », « Amélioré », « 2024 »)
Orientation :
- Orientation du curseur : Choisissez entre Vertical (le curseur se déplace de haut en bas) ou Horizontal (le curseur se déplace de gauche à droite). L’horizontal est le plus courant pour les comparaisons côte à côte
- Alignement : Définissez l’alignement de l’ensemble du bloc de comparaison dans son conteneur
- Déplacement au survol : Activez pour permettre le mouvement automatique du curseur lorsque les visiteurs survolent la comparaison avec leur souris. Lorsque cette option est activée, le curseur suit le pointeur sans nécessiter de clics ou de glisser-déposer
- Couleur de superposition : Ajoutez une couleur semi-transparente à vos images pour un effet visuel unique ou pour faire ressortir les étiquettes
Téléchargez vos images avant/après, ajoutez des étiquettes et configurez l'orientation et le comportement du curseur.
Curseur de comparaison :
- Décalage initial du curseur : Définissez où le curseur commence au chargement de la page, en pourcentage (par exemple, 50 commence au milieu, 25 montre plus de l'image avant)
- Couleur du curseur : Choisissez la couleur du curseur et de la ligne de séparation entre les images
- Épaisseur du curseur : Ajustez la largeur de la ligne de séparation qui sépare les deux images
- Largeur du cercle : Contrôlez la taille du curseur circulaire que les visiteurs font glisser pour déplacer le curseur
- Rayon du cercle : Ajustez l'arrondi du cercle du curseur. Des valeurs plus élevées créent un curseur plus circulaire
- Taille du triangle : Définissez la taille des flèches directionnelles qui apparaissent sur le curseur, indiquant la direction du glissement
Personnalisez l'apparence du curseur de comparaison, y compris sa couleur, sa taille et sa position de départ.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Basculer Avant/Après :
Styles des étiquettes Avant / Après :
- Typographie des étiquettes : Contrôlez les propriétés de la police des étiquettes avant et après, y compris la famille de polices, la taille, le poids et le style
- Couleur des étiquettes : Définissez la couleur du texte des étiquettes avant et après pour vous assurer qu'elles sont visibles sur vos images
- Couleur d'arrière-plan : Ajoutez une couleur d'arrière-plan derrière les étiquettes pour améliorer la lisibilité, surtout si vos images ont une luminosité variable
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Basculer Avant/Après (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre la comparaison et les éléments environnants
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Basculer Avant/Après (Haut, Droite, Bas, Gauche). Cela crée un espace entre les images et les bords du bloc
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Basculer Avant/Après. Cet ID est créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé
- Attributs personnalisés : Ajoutez des attributs HTML à l'élément d'encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-comparison|before-after)
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Basculer Avant/Après sur les écrans d'ordinateur
- Masquer sur tablette : Masquez le bloc Basculer Avant/Après sur les appareils tablettes
- Masquer sur mobile : Masquez le bloc Basculer Avant/Après sur les appareils mobiles
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc de comparaison apparaît dans la vue. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d'autres. Cela attire l'attention sur votre comparaison interactive
L'onglet Avancé fournit des options pour styliser les étiquettes, ajuster les espacements et configurer la visibilité des appareils et les animations.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé la configuration du bloc Bascule Avant Après et la personnalisation de son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Bascule Avant Après à votre page ! Ce bloc interactif crée des comparaisons visuelles attrayantes qui permettent aux visiteurs d'explorer les différences entre deux images à leur propre rythme. Expérimentez avec différentes couleurs de poignée, orientations de curseur et effets de survol pour créer une expérience de comparaison qui captive votre public et démontre efficacement les transformations ou les améliorations.