Passer au contenu principal
Ajouter des photos "avant/après"

L'élément "avant/après" permet de mettre en avant une progression ou un changement d'environnement sur vos photos.

Yohan Germany avatar
Écrit par Yohan Germany
Mis à jour il y a plus d’une semaine

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 :

  1. Sélectionner dans la colonne de gauche dans la section "média", l'élément "avant/après"

  2. Faire un glisser/déposer à l'endroit où vous souhaitez intégrer l'élément

  3. Dans la fenêtre qui s'ouvre :

    1. Cliquer sur le premier encart "modifier l'image" : pour intégrer l'image "avant" qui sera l'image de gauche

    2. Titre du diapo « Avant » : pour intégrer le texte en légende qui accompagnera la photo "avant"

    3. 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

    4. Cliquer sur le second encart "modifier l'image" : pour intégrer l'image "après" qui sera l'image de droite

    5. Titre du diapo « Après » : pour intégrer le texte en légende qui accompagnera la photo "après".

    6. 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

  4. 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 :

  1. Passer la souris sur l'élément "avant/après" et cliquer sur le crayon "modifier l'élément avant/après".

  2. Cliquer sur l'onglet "apparence" dans la fenêtre qui s'affiche.

  3. Vertical :

    1. Cliquer sur "horizontal" pour afficher l'affichage des photos de gauche à droite.

    2. Cliquer sur "vertical" pour afficher l'affichage des photos de haut en bas.

  4. Position du curseur :

    1. 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é.

    2. 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.

    3. 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é.

  5. Définir une taille maximale : cocher la case pour sélectionner la taille de l'élément souhaité.

  6. Alignement : pour sélectionner l'alignement de l'élément dans la page.

  7. Afficher une légende : cocher la case et intégrer une légende globale pour l'ensemble des photos.

  8. 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é"

Avez-vous trouvé la réponse à votre question ?