Description : Cet outil permet de créer, personnaliser et gérer des carrousels dynamiques (sliders) composés de plusieurs éléments visuels, idéaux pour la présentation de contenus en vedette sur le site web.
À quoi ça sert ? (Exemples pratiques)
Utilisez le module Carrousels pour :
- Créer une zone d'accueil sur la page d'accueil qui fait automatiquement défiler différentes promotions ou messages clés.
- Présenter une galerie d'images ou de vidéos avec des effets de fond uniques et des textes superposés.
- Organiser des contenus complexes dans une séquence visuelle contrôlée, comme une présentation guidée ou un portfolio.
Fonctionnalités principales
Le module offre un contrôle granulaire à la fois sur les paramètres généraux du carrousel et sur la personnalisation de chaque slide individuelle.
- Gestion centralisée : Affichage rapide de tous les carrousels créés, avec indication immédiate s'ils sont actifs ou cachés sur le site.
- Structure en slides : Le carrousel est composé d’onglets séparés, chacun représentant une slide unique.
- Éditeur visuel avancé : Chaque slide inclut une zone pour l'insertion de texte, images et autres éléments graphiques complexes, gérés via un éditeur visuel dédié.
- Arrière-plans multimédias : Support pour l’utilisation d’images de fond (avec options distinctes pour desktop et mobile) ou vidéos (depuis des plateformes externes comme YouTube/Vimeo ou fichiers MP4).
- Effets de superposition (Overlay) : Possibilité d’appliquer couleurs, dégradés et niveaux d’opacité au-dessus du fond pour améliorer la lisibilité du contenu.
Comment configurer
La configuration se divise en deux zones : les paramètres généraux du carrousel et les réglages spécifiques à chaque slide.
1. Paramètres généraux du carrousel
Ces options définissent le comportement et l’apparence globale du carrousel.
| Option | Description |
|---|---|
| Titre slider | Nom interne pour identifier le carrousel dans l’espace de gestion. |
| Visible sur le site | État d’activation/désactivation du carrousel. |
| Hauteur slider | Définit la hauteur totale du carrousel, en précisant une valeur numérique et l’unité (pixel, vh, vw). |
| Autoplay | Durée en secondes après laquelle la slide passe automatiquement à la suivante. |
| Boucle (Loop) | Si activé, le carrousel recommence depuis le début après la dernière slide. |
| Flèches | Affiche les boutons de navigation pour faire défiler manuellement les slides. |
| Ordre aléatoire | Les slides sont affichées dans un ordre différent à chaque chargement de page. |
2. Paramètres de chaque slide individuelle
Chaque slide (gérée via un onglet) peut être personnalisée individuellement.
Contenu et Titre
- Titre Slide : Nom interne de la slide (utile pour l’organisation).
- Contenu : Zone principale où insérer texte et éléments visuels de la slide en utilisant l’éditeur.
Arrière-plan (Images)
Cette section gère l’aspect visuel du fond via des images.
| Option | Description |
|---|---|
| Image Desktop/Mobile | Permet de charger des images spécifiques pour affichage sur grands écrans et petits écrans. |
| Taille | Définit comment l’image s’adapte à la zone (ex. cover pour couvrir entièrement l’espace). |
| Répéter | Détermine si l’image doit être répétée horizontalement, verticalement ou pas du tout. |
| Position | Alignement de l’image de fond (ex. centre, en haut à gauche, etc.). |
| Fixation | Définit si l’image défile avec la page ou reste fixe (fixed). |
Arrière-plan (Vidéo)
Permet d’utiliser une vidéo comme arrière-plan.
| Option | Description |
|---|---|
| Vidéo Fond | Insérez l’URL de la vidéo (supporte liens directs vers fichiers MP4 ou liens depuis plateformes comme Vimeo/YouTube). |
| À la fin de la vidéo | Définit ce qui se passe quand la vidéo se termine (continue en boucle, masque, s’arrête sur la dernière image). |
| Afficher sur | Permet de masquer la vidéo sur certains appareils (Desktop, Tablette, Mobile). |
Overlay
Ces options appliquent un filtre coloré ou dégradé par-dessus le fond.
| Option | Description |
|---|---|
| Dégradé | Applique un dégradé coloré sur le fond. |
| Couleur | Applique une couleur uniforme sur le fond. |
| Opacité | Définit la transparence du dégradé/couleur appliqué(e) (de 0 à 100%). |
Intégrations automatiques
Une fois sauvegardés, les carrousels sont immédiatement disponibles pour être insérés dans n’importe quelle page de votre site. Le système gère automatiquement :
- Affichage multilingue : Si votre système supporte plusieurs langues, le contenu textuel des slides est géré et enregistré pour chaque langue configurée.
- Adaptabilité : Les paramètres d’arrière-plan (images desktop/mobile) ainsi que la visibilité des vidéos garantissent que le carrousel s’adapte correctement à tous types d’appareils.
