Comment créer une slide « avant / après » ?

21 octobre 2021 | Astuces 6temFlex, Webdesign | image, slide, dynamique, avant/après, webdesign, avant, après

Pourquoi utiliser une slide « avant / après » ?

L’avant/après est une pratique qui consiste à rapprocher deux images traitant d’un même sujet, avant et après un changement, afin de pouvoir les comparer efficacement. L’avant/après peut être utilisé dans plusieurs cas, notamment pour vendre un produit ou un service, l’avant/après permet de prouver son efficacité (rénovation, maquillage, retouches de photos…)

Comment créer une slide « avant / après » ?

Pour activer cette nouvelle option, rendez-vous dans le panneau d’administration de votre site 6temflex. Dans la colonne de gauche, cliquez sur « Fonctionnalités avancées » puis cherchez le module « Images Avant/Après » et son bouton « Activer« . À présent, un nouveau bouton « Slide avant/après » apparaît au dessus de votre éditeur de texte.

Une fenêtre de configuration s’ouvre alors (ci-contre). Vous avez alors la possibilité :

d’ajouter une légende pour les images (« avant / après », par exemple)
de changer la dimension de la slide (en pourcentage ou en pixels)
de définir un décalage initial (distance à partir de laquelle le curseur se place)
de définir la direction de l’animation (horizontale ou verticale)
de déplacer automatiquement le curseur au survol avec la souris ou non

Une fois vos options définies, vous pouvez cliquer sur « Ajouter dans la page » puis sur « Publier« , afin de mettre en ligne votre nouvelle animation.