Carrousel
Faire défiler vos articles pour présenter des annonces visuelles
Disponible à partir du forfait Essentiel.
Le module Carrousel fait défiler vos articles un à la fois dans un même espace de la page. Il convient aux annonces visuelles : événement à venir, campagne de dons, nouvelle importante ou bannière d'accueil.
Chaque diapositive correspond à un article. Vous choisissez les éléments de l'article affichés dans la diapositive : image, titre, introduction, etc.
Ajouter le module à une page
Dans la fenêtre de configuration d'une zone, sélectionnez la fonctionnalité Site Web, puis Carrousel dans la liste Module de la zone. Pour savoir comment ouvrir cette fenêtre, consultez l'article Liste des modules de la fonctionnalité Site web.
Les champs Titre et Format, en haut de la fenêtre, ajoutent un titre au-dessus du module et en déterminent le niveau (Titre 1 à Titre 6).
Configurer le module
Interface graphique
- Mode d'affichage :
- Image avec texte à gauche : gabarit sur deux colonnes. Le texte occupe le premier tiers et l'image, le reste. Idéal pour des annonces accompagnées d'un visuel.
- Bloc pleine largeur : tous les éléments occupent toute la largeur. Convient aux bannières ou aux diapositives de texte seulement.

Mode Image avec texte à gauche.

Mode Bloc pleine largeur.
- Nombre d'articles affichés : nombre de diapositives du carrousel.
- Ordre d'affichage : Date de création (du plus ancien au plus récent), Date de création décroissant (du plus récent au plus ancien), ou ordre alphabétique croissant ou décroissant du titre de l'article.
- Afficher la navigation par flèches : ajoute une flèche de chaque côté du carrousel pour passer d'une diapositive à l'autre.
- Afficher la navigation par puces : ajoute sous le carrousel une puce par diapositive.
Articles affichés
- Catégorie des articles affichés : sélectionnez la ou les catégories des articles à faire défiler. Pour en savoir plus, consultez l'article Catégories et mots-clés d'articles.
- Mots-clés et Groupes : limitent l'affichage aux articles qui portent ces mots-clés ou qui sont associés à ces groupes.
- Affichage des archives : un article archivé est un article dont la date de fin d'affichage est passée. Choisissez Afficher tous les articles, Afficher les articles sans les archives ou Afficher uniquement les archives.
Créez une catégorie réservée au carrousel, par exemple « Annonces d'accueil ». Ajoutez ensuite une date de fin d'affichage à chaque annonce et choisissez Afficher les articles sans les archives : les annonces expirées disparaissent alors d'elles-mêmes du carrousel.
Affichage des éléments
Cochez les éléments affichés dans chaque diapositive : Titre de l'article, Nom de l'auteur, Date de création, Images, Introduction, Article (le contenu complet, sous l'introduction) et Lien.
Pour diriger les visiteurs vers une autre page à partir d'une diapositive, ajoutez un hyperlien dans l'introduction de l'article.
Cliquez sur Enregistrer et fermer pour afficher le carrousel sur la page.
Préparer les images du carrousel
Quand le carrousel occupe toute la largeur de l'écran, par exemple une bannière d'accueil en mode Bloc pleine largeur, il a une hauteur fixe : environ 700 px sur ordinateur et 386 px sur mobile. L'image est agrandie pour remplir ce cadre, puis centrée. La partie visible change donc selon la largeur de l'écran du visiteur, et un léger rognage sur les côtés, ou en haut et en bas, est normal sur certains écrans.
Pour limiter le rognage :
- Format du visuel : 1920 × 700 px.
- Zone sécuritaire : placez les textes, logos et éléments importants dans une zone centrale d'environ 1000 × 520 px, qui reste visible sur la plupart des ordinateurs et des tablettes.
- Poids : exportez en JPG ou en PNG optimisé, idéalement sous 500 Ko.
- Uniformité : utilisez les mêmes dimensions pour toutes les images du carrousel. La hauteur reste ainsi stable d'une diapositive à l'autre.
En mode Image avec texte à gauche, l'image n'occupe qu'une partie de la largeur : une image large de type bannière y est recadrée. Choisissez plutôt une image moins large, proche du format carré.
Si votre site a une personnalisation avancée (CSS), ces dimensions peuvent varier légèrement. Faites un essai avec une image avant de préparer toutes vos diapositives. Voir aussi l'article Les bonnes pratiques pour gérer les images de votre site web.