Afficher des images grand format dans un diaporama

Grâce à l’élément de contenu diaporama, vous pouvez afficher plusieurs images grand format l’une après l’autre. Cette option peut être utile pour mettre en valeur certaines parties de votre boutique, comme une catégorie de produits spécifique, puisque vous pouvez également ajouter du texte et des liens aux images du diaporama.

Example_ImageSlider_EN.gif

Vérifiez toujours que vos images s'affichent correctement sur tous les appareils. Votre boutique est responsive, autrement dit elle est optimisée pour que le design s’adapte automatiquement à l’appareil utilisé. Pour plus d’informations, consultez l’article Que signifie « responsive » ?

Comment ajouter un diaporama

Voici comment ajouter un diaporama à une page et importer les images que vous souhaitez mettre en avant :

  1. Dans la barre latérale de l'administration, ouvrez l’Éditeur.
  2. Vous pouvez voir une liste de vos pages dans la barre latérale de votre Éditeur sous Pages.
    Sélectionnez la page à laquelle vous souhaitez ajouter le diaporama ou ajoutez une nouvelle page. Un aperçu de la page s'affiche à droite.
  3. Dans la barre latérale de l’Éditeur, sélectionnez Éléments de contenu.
  4. Sélectionnez la catégorie Images ou Galerie.
  5. Faites glisser et déplacez l'élément de contenu Diaporama dans la zone d'aperçu. Vous ne pouvez déposer des éléments de contenu que dans les zones bleues de la page.
  6. Sélectionnez Ajouter des images.
    La vue Ajouter des images apparaît. Vous pouvez ajouter jusqu'à 5 images à votre diaporama.
  7. Faites un glisser-déposer de chaque image dans le champ Ajouter une image ou sélectionnez Ajouter une image pour choisir une image depuis votre appareil.
  8. Attendez jusqu’à ce que l’image soit totalement chargée.
  9. Choisissez l’alignement des images. Vous pouvez choisir haut ImageAlignment_Top.png, bas ImageAlignment_Bottom.png, ou centré ImageAlignment_Middle.png. Pour plus d’informations, consultez la section En savoir plus sur l’alignement des images.
  10. Vous avez également la possibilité de saisir un Texte alternatif. Celui-ci sera utilisé à des fins de référencement et pourra être lu par des lecteurs d’écran destinés aux personnes malvoyantes. Il s’affiche également dans le cas où l’image n’apparaîtrait pas.
  11. Si vous souhaitez ajouter du texte à votre image, modifiez les paramètres concernés sur les onglets AddTextOnImage.png et ModifyColours.png. Pour plus d’informations, consultez l’article Ajouter du texte/des liens aux images.
  12. Si vous souhaitez ajouter plus d’images à votre diaporama, sélectionnez l’emplacement vide dans le petit aperçu du diaporama en haut circle-1.png et répétez les étapes 7 à 11.
  13. Choisissez la vitesse de défilement des images. Il vous suffit de faire glisser le curseur sous Les images changent toutes les ... secondes circle-2.png. Par défaut, les images changent toutes les 5 secondes. Vous pouvez choisir une cadence allant de 1 à 10 secondes.

    EditImageSlider_View_EN_unedited.png
  14. Une fois que vous avez terminé, sélectionnez Enregistrer.

Le diaporama est à présent ajouté à votre boutique.

Pour modifier à nouveau le diaporama, sélectionnez-le ou survolez-le avec votre souris et sélectionnez EditCircleIcon.png en haut à droite. La vue Modifier le diaporama apparaît et vous permet d’apporter les modifications souhaitées.

Info

Vous pouvez modifier d’autres paramètres via la barre de bleue qui apparaît lorsque vous survolez un élément de contenu avec votre souris. Vous pouvez le déplacer avec un glisser-déposer Screenshot 2023-12-06 at 15.04.46.png , le supprimer DeleteIconBlue.png , modifier l’arrière-plan EditColourIcon.png ou sélectionner une animation Animation.png .

Comment modifier l’ordre des images

Pour modifier l’ordre des images, faites un glisser-déposer de l’image que vous souhaitez déplacer à l’endroit souhaité dans l’aperçu du diaporama, juste au-dessus du curseur. Le texte ou le lien que vous avez ajouté à cette image sera également déplacé.

Order_ImageSlider_EN.gif

En savoir plus sur l’alignement des images

La manière dont les images s’affichent dans le diaporama de votre boutique dépend du format original des images et de l'appareil utilisé par vos clients. Vos images peuvent donc parfois être recadrées. Pour éviter que les parties les plus importantes d’une image ne soient coupées, vous pouvez choisir d’aligner vos images en conséquence.

Lorsque vous choisissez le type d’alignement, prenez celui qui montre la partie la plus importante des images. Vous n’avez pas la possibilité actuellement de positionner l’image librement. Vous devrez à la place sélectionner une des trois options proposées sous Positionnement de l'image, à savoir : haut ImageAlignment_Top.png, bas ImageAlignment_Bottom.png et centré ImageAlignment_Middle.png.

Cet article vous a-t-il été utile ?