Vous souhaitez mettre en avant une progression ou un changement d'environnement sur vos photos ? L'élément "avant/après" est la solution !
Sommaire
Ajouter des photos "avant/après"
Pour intégrer des photos "avant/après", il faut :
Sélectionner dans la colonne de gauche dans la section "média", l'élément "avant/après"
Faire un glisser/déposer à l'endroit où vous souhaitez intégrer l'élément
Dans la fenêtre qui s'ouvre :
Cliquer sur le premier encart "modifier l'image" : pour intégrer l'image "avant" qui sera l'image de gauche
Titre du diapo « Avant » : pour intégrer le texte en légende qui accompagnera la photo "avant"
Description alternative de l'image "avant" : pour permettre à Google de comprendre ce qu'il y a sur votre photo et également de lire le contenu la photo pour une personne malvoyante visitant votre site
Cliquer sur le second encart "modifier l'image" : pour intégrer l'image "après" qui sera l'image de droite
Titre du diapo « Après » : pour intégrer le texte en légende qui accompagnera la photo "après".
Description alternative de l'image "après" : pour permettre à Google de comprendre ce qu'il y a sur votre photo et également de lire le contenu la photo pour une personne malvoyante visitant votre site
Valider une fois les intégrations effectuées pour valider l'intégration des photos "avant/après".
Configurer l'élément photos "avant/après"
Une fois l'élément intégré avec vos photos, vous avez la possibilité de configurer l'affichage de cet élément pour que celui-ci soit harmonieux sur votre site. Pour cela, il faut :
Passer la souris sur l'élément "avant/après" et cliquer sur le crayon "modifier l'élément avant/après".
Cliquer sur l'onglet "apparence" dans la fenêtre qui s'affiche.
Vertical :
Cliquer sur "horizontal" pour afficher l'affichage des photos de gauche à droite.
Cliquer sur "vertical" pour afficher l'affichage des photos de haut en bas.
Position du curseur :
Côté image 1 (avant) : pour que le curseur déroulant débute à partir de l'image 1 et que l'image 2 soit visible dans son intégralité.
Centré : pour que le curseur déroulant soit entre les deux images, et que l'on voit la moitié des images de part et d'autres.
Côté image 2 (après) : pour que le curseur déroulant débute à partir de l'image 2 et que l'image 1 soit visible dans son intégralité.
Définir une taille maximale : cocher la case pour sélectionner la taille de l'élément souhaité.
Alignement : pour sélectionner l'alignement de l'élément dans la page.
Afficher une légende : cocher la case et intégrer une légende globale pour l'ensemble des photos.
Vous pouvez valider et ainsi profiter de votre nouvelle mise en page.
Attention : cette fonctionnalité est uniquement disponible pour les clients ayant l'option "Fonctionnalités de design dynamique avancé"