Créer une vue en tuiles pour les catégories
Les illustrations montrent une version antérieure de l'interface. Utilisez les étapes de ce guide pour les fonctions et options disponibles.
Exemple d’accès par des images de catégories : chaque tuile mène aux offres de sa catégorie. Cet exemple provient du compte de démonstration de yoga clairement identifié comme public.
Avec le widget Tuiles de catégories, vous présentez visuellement aux visiteurs les catégories du niveau actuel. Chaque tuile utilise l’image, le nom de la catégorie et le nombre d’offres trouvées dans celle-ci. Un clic ouvre la catégorie choisie.
Le widget n’affiche pas une galerie publicitaire composée librement. Le contenu, l’ordre et la destination des tuiles proviennent de votre véritable structure de catégories. Gérez donc d’abord les catégories, puis la mise en page.
Préparer les catégories pour l’affichage en tuiles
Chaque catégorie principale possède un nom court et distinct.
Les offres sont attribuées à la bonne catégorie métier.
Une image appropriée est enregistrée pour chaque catégorie visible.
Le statut et la visibilité des offres contenues sont contrôlés.
Si une image manque ou ne peut pas être chargée, la zone d’image peut disparaître du widget public. Vérifiez donc le véritable aperçu, et pas uniquement la gestion des catégories.
Insérer le widget dans le Design Manager
Ouvrez le Design Manager et choisissez le design d’accès à votre vue d’ensemble des offres.
Modifiez le modèle Vue d’ensemble des offres.
Ajoutez le widget Tuiles de catégories à l’emplacement souhaité.
Enregistrez ou publiez le design et ouvrez Aperçu / Partager.
Régler la largeur, le bouton et les catégories vides
| Paramètre | Effet |
|---|---|
| Largeur « Vue normale » | 3/12, 4/12, 6/12 ou 12/12 définissent combien de tuiles peuvent tenir côte à côte dans les vues larges. |
| Largeur « Vue tablette » | Contrôle les mêmes largeurs de grille pour les vues intermédiaires, indépendamment de la vue normale. |
| Bouton | Activé, affiche un bouton « Afficher » distinct. Désactivé, transforme toute la tuile en lien. |
| Afficher les catégories vides | Activé, affiche aussi les catégories sans offres trouvées. Désactivé, masque ces catégories. |
Une largeur de 3/12 correspond, dans la vue concernée, à quatre tuiles au maximum par ligne, 4/12 à trois, 6/12 à deux et 12/12 à une tuile. L’espace réellement disponible dépend aussi du design environnant et de la largeur de l’écran.
Les paramètres généraux définissent la place occupée par le widget entier sur la page. Dans les paramètres spécifiques, Largeur « Vue normale » et Largeur « Vue tablette » définissent la largeur d’une tuile dans le widget. Adaptez les deux niveaux ensemble.
- Ouvrez la vue d’ensemble des offres de votre design et choisissez Tuiles de catégories.
- Définissez les largeurs des tuiles pour les vues normale et tablette.
- Décidez si le bouton Afficher et les catégories vides doivent être visibles.
- Enregistrez, puis ouvrez une catégorie avec des sous-catégories et une catégorie sans résultat.
Pour afficher les offres elles-mêmes, ajoutez une liste, un tableau ou des tuiles d’offres. Les tuiles de catégories ne remplacent pas un catalogue d’abonnements ; utilisez les widgets d’abonnement dédiés pour les abonnements.
Quand deux designs sont utiles
Deux designs ne sont pas une obligation technique, mais constituent souvent la solution la plus claire :
Design d’entrée : affiche au niveau supérieur uniquement ou principalement les tuiles de catégories.
Design de catégorie : attribué aux catégories principales, il y affiche les offres sous forme de liste, tableau, calendrier ou tuiles d’offres.
Si vous utilisez le même ensemble de widgets dans le design d’entrée et celui des catégories, les catégories et les offres peuvent apparaître ensemble selon le niveau. Vérifiez donc chaque niveau séparément. Pour les catégories imbriquées et les designs hérités, le guide Affichage en tuiles des catégories et sous-catégories s’applique également.
Tester entièrement l’affichage
Ouvrir la vue d’ensemble supérieure des offres et vérifier les noms, images, nombres et ordre.
Cliquer sur chaque tuile et vérifier que la bonne catégorie s’ouvre.
Tester une catégorie vide avec l’option « Afficher les catégories vides » activée puis désactivée.
Activer et désactiver le bouton et vérifier à chaque fois l’utilisation au clavier et la zone cliquable.
Contrôler les vues normale, tablette et mobile étroite.
Exemple d’utilisation : académie avec trois domaines thématiques
Une académie affiche « Management », « Communication » et « Numérique » sous forme de trois tuiles de largeur 4/12. Après la sélection, un deuxième design ouvre les offres du domaine sous forme de liste de séances.
Exemple d’utilisation : masquer une catégorie saisonnière encore vide
La catégorie « Été 2027 » est déjà préparée, mais ne contient encore aucune offre visible. Jusqu’à la publication, l’administration désactive « Afficher les catégories vides ». Dès que la première offre est publiée, la catégorie apparaît automatiquement dans l’affichage en tuiles.
Exemple d’utilisation : sélection de cours lisible sur mobile
Une école de yoga utilise 3/12 dans les vues larges et 6/12 sur tablette. Elle teste aussi l’aperçu étroit, où les tuiles passent les unes sous les autres, et raccourcit les noms de catégories longs avant d’intégrer la page.
Si une catégorie manque ou semble vide
Contrôlez la hiérarchie des catégories, les offres visibles publiquement et l’option des catégories vides. Le widget affiche les catégories directes du niveau actuel ; une image de catégorie ne remplace pas la publication d’une offre. Ouvrez la tuile et vérifiez si le niveau suivant contient un affichage d’offres ou d’autres sous-catégories. Si la mise en page est incorrecte, contrôlez aussi l’attribution du design à ce niveau.