Ajout d'un carrousel d'image

Présentation

Ajoutez un widget Image Slider (carrousel d'image) sur votre site Web afin d'afficher plusieurs images l'une après l'autre sur une ligne ou dans une colonne. Vous pouvez ajouter plusieurs images à afficher sous la forme d'un diaporama. Plutôt que plusieurs widgets d'images n'encombrent vos lignes et vos colonnes, utilisez un seul widget de carrousel d'image pour parvenir à vos fins. 

Guide

Ajout d'un widget de carrousel d'image sur le site Web

Ajoutez un widget Image Slider (Carrousel d'images) sur votre site Web responsive. Pour en savoir plus sur l'ajout de widgets à votre site Web, consultez Ajout de widgets.

L'éditeur de contenu s'affiche.

Ajout d'une image

Ajoutez une image en cliquant sur le bouton Add Image (Ajouter une image) ou sur n'importe quel emplacement d'image vide. Cela permet d'ouvrir la boîte de dialogue Choose & Place an Image (Choisir et placer une image) pour que vous puissiez choisir l'image que vous souhaitez ajouter.

AddImageSlider2_en-US.png

De là, vous pouvez :

  1. Sélectionner le dossier contenant les images que vous souhaitez utiliser
  2. Appuyer sur l'icône « + » pour télécharger votre image
  3. Passer en mode Plein écran pour plus d'options de sélection d'images

Modification / Remplacement d'une image

Le fait de cliquer sur une image qui a déjà été ajoutée au curseur permet d'ouvrir une boîte de dialogue Image Settings (Paramètres de l'image) à droite. 

Cliquez sur le bouton Replace (Remplacer) pour ouvrir à nouveau la boîte de dialogue Choose & Place an Image (Choisir et placer une image) afin de pouvoir choisir une image différente.

Cliquez sur le bouton Edit (Modifier) pour ouvrir notre éditeur d'image intégré à partir duquel vous pouvez ajouter des fonctions et des styles simples à votre image.AddImageSlider4_en-US.png

Suppression d'une image

Cliquez sur la croix grise dans le coin supérieur de la miniature de l'image pour la supprimer.

Paramètres de l'image

Vous pouvez afficher plus d'options pour chaque image en faisant défiler la liste dans la boîte de dialogue Image Settings (Paramètres de l'image). Parmi ces options, il y a :

Add Link to Slide (Ajouter un lien au curseur) : transforme l'ensemble de l'image en bouton qui peut être relié comme un widget Bouton.

Slider Title (Titre du curseur) : permet d'ajouter un texte grand format à l'image du curseur.

Slider Caption (Légende du curseur) : permet d'ajouter un texte de plus petit format à l'image du curseur sous le texte du titre. Utilisez l'éditeur de texte enrichi pour ajouter de la couleur, une accentuation (gras, italique et soulignement) et des puces au texte dans la zone de légende.

Button (Bouton) : permet d'ajouter un bouton à l'image du curseur qui peut être relié comme un widget Bouton.

Alt Text (Texte alternatif) : permet d'ajouter un texte alternatif à afficher pour des raisons de SEO ou lorsque l'image ne peut pas s'afficher.

Affichage d'images complètes

Lorsque des images sont ajoutées au carrousel d'image, elles ne s'affichent pas dans leurs dimensions d'origine. Elles sont affichées de façon à s'adapter aux dimensions du carrousel d'image et peuvent donc être étirées ou floues. Pour afficher les images dans leurs dimensions d'origine, vous pouvez activer l'option « Display full image » (Afficher l'image complète) dans l'éditeur de conception.

AddImageSlider7_en-US.png

Remarques

Le fait de regrouper toutes vos photos en un widget est utile et permet de libérer beaucoup d'espace. Mais dans certains cas, il est nécessaire d'avoir des images seules. Par exemple, vous pouvez avoir besoin d'un paragraphe expliquant une seule image qui ne peut pas être incluse dans un groupe d'images dans le carrousel d'images. Pour en savoir plus sur le widget Image, consultez notre guide sur le Widget Image.

Ressources