Widget « Media Slider »

Catégories de widgets : Media

Le widget Media Slider propose des diapositives vidéo, image ou texte seul, ainsi que différentes dispositions. Avec la quantité de réglages et d'options de design offerte, les configurations possibles sont très nombreuses et conviennent à presque tous les types de contenu : témoignages, questions fréquentes, présentations de produit, une section équipe ou vos services, pour n'en citer que quelques-uns. Un carrousel est aussi un bon moyen de donner à vos visiteurs un contenu interactif et bien organisé.

Remarque :

• Vous pouvez inclure 25 diapositives au maximum.
• Les fichiers pris en charge sont les images et les vidéos, ce qui comprend .svg, .png, .jpg, .gif et tous les formats vidéo.
• Le son est désactivé sur les vidéos, car elles servent de fond aux diapositives.
• La lecture automatique des vidéos dépend de certaines restrictions du navigateur et des réglages de l'appareil (si le mode d'économie d'énergie est activé, par exemple, les vidéos peuvent ne pas se lancer seules).

Pour savoir comment ajouter des widgets, consultez « Add Widgets ».

Astuce : Pour en savoir plus sur les widgets et la bibliothèque de widgets, consultez « Widgets: Library and Overview ».

Éditeur de contenu

Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de l'éditeur de contenu.

Ajouter, ordonner et supprimer des diapositives

Ajouter des diapositives. Pour ajouter du contenu au carrousel, cliquez sur Ajouter un slide. Une nouvelle diapositive est créée et ses réglages s'ouvrent.

Dupliquer des diapositives. Pour dupliquer une diapositive, survolez-la et choisissez l'icône de duplication.

Ordonner les diapositives. Pour changer l'ordre, faites glisser une diapositive jusqu'à la position voulue.

Supprimer des diapositives. Survolez la miniature de la diapositive à supprimer et cliquez sur l'icône de corbeille. Pour toutes les supprimer, cliquez sur Tout supprimer.

Options de chaque diapositive

• Media (image ou vidéo). Ajoutez le contenu voulu. Cliquez sur Click to add media pour ouvrir la Media Library.

  Remarque : Pour ajouter plusieurs diapositives, utilisez l'option Ajouter plusieurs fichiers. Notez que cela crée de nouvelles diapositives plutôt que d'ajouter plusieurs fichiers à la diapositive en cours.

• Position. Ajuste la partie du contenu qui est visible (l'option apparaît une fois le contenu ajouté).

• Alt text. Saisissez votre propre texte alternatif.

• Text on slide. Le texte (titre et description) que vous voulez afficher sur la diapositive. Ces champs ne peuvent pas être masqués directement, mais les laisser vides revient à les masquer.

  Remarque : Le champ de texte long propose plusieurs options de mise en forme, comme mettre le texte en italique, en gras ou le souligner.

• Bouton. Le bouton de la diapositive peut être masqué en cliquant sur l'icône en forme d'œil.

  Remarque : Dès qu'un lien est ajouté, toute la diapositive devient cliquable. Que le bouton soit masqué avant ou après l'ajout du lien, la diapositive reste cliquable et mène à la destination.

Éditeur de design

Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de modification du design.

1. Pour changer la disposition du carrousel, cliquez sur la miniature de la disposition actuelle. Fixez le nombre de colonnes avec la liste déroulante située à côté de Nombre de colonnes.
2. Transition. Configurez la transition entre les diapositives.
   • Transition des diapositives. Choisissez Fade ou Slide.
   • Autoplay.
   • Slideshow speed. Déplacez le curseur pour choisir une vitesse comprise entre 1 et 20 secondes.
   • Pause slideshow on hover.
   • Content animation.
3. Navigation indicators. Configurez les indicateurs de navigation entre les diapositives.
   • Display. Choisissez une option dans la liste déroulante.
   • Taille.
   • Space in-between.
   • Couleur.
4. Media & Background.
   • Display full media. Affiche le contenu dans ses dimensions d'origine. Notez que cela peut ajouter de l'espace sur les bords du carrousel.
   • Overlay color. Un curseur permet aussi de régler l'opacité (Opacity).
   • Couleur d'arrière-plan.
5. Cadre. Configurez le cadre (par exemple, ajustez les dimensions ou personnalisez la bordure).
   • Alignment & Padding. Ajustez l'alignement et la marge intérieure du contenu de chaque diapositive. Ces réglages décident du placement du contenu sur la diapositive.
   • Content Alignment. Alignez le contenu de chaque diapositive à gauche, au centre ou à droite.
   • Space between elements.
     • Between media & title. Cette option n'est disponible que lorsque le contenu n'est pas le fond de la diapositive.
     • Between title & description.
     • Between description & button.
   • Horizontal Padding.

Pour en savoir plus sur les options de design qui ne sont pas propres à ce widget (par exemple la disposition, le style ou l'espacement), consultez « Widget Design ».

Créer un carrousel de témoignages

Avec le widget Media Slider, vous avez plusieurs possibilités selon le contenu que vous voulez inclure dans votre carrousel de témoignages.

Pour créer un carrousel de témoignages sans image de fond :

1. Ajoutez le widget Media Slider à votre site.
2. Dans le contenu du Media Slider, cliquez sur Tout supprimer pour supprimer toutes les diapositives par défaut.
3. Cliquez sur Add new slide.
4. Dans les réglages de la diapositive, ajoutez :
   • (Facultatif) Dans la section Media, cliquez sur Click to add media pour ajouter la photo d'un client.
   • Le contenu du témoignage (par exemple le nom et le témoignage).
5. Dans l'onglet Design, choisissez l'une des dispositions suivantes (ce sont les dispositions conseillées ; d'autres peuvent demander des réglages supplémentaires) :
   • La disposition par défaut (idéale si vous n'utilisez pas de photos de clients). Elle applique par défaut une superposition sur l'image (et une couleur de fond). Vous pouvez la modifier dans la section Image & Background.
   • La photo du client se place au-dessus du contenu du témoignage.
   • Les diapositives défilent verticalement, avec l'image à gauche et le témoignage à droite.
6. Ajustez le reste des réglages de design comme vous le souhaitez.