Smart Tiles Introduction
Une vignette comporte deux textes : un titre, qui nomme la destination, et une description facultative, qui indique en quelques mots ce que le visiteur y trouvera. Avec le titre du composant WebPart, ce sont tous les mots d'un panneau Smart Tiles : il est donc utile de savoir exactement comment ils sont affichés. Cet article présente les deux textes, les paramètres qui permettent de les afficher, de les masquer et de les dimensionner, ainsi que l'infobulle.
Titre et description
Les deux textes se saisissent dans la boîte de dialogue Propriétés d'une vignette : cliquez sur le bouton … de la vignette et choisissez Modifier les propriétés.
- Le Titre est affiché dans la vignette sous l'icône, dans la Couleur de police de la vignette et à la Taille de police du composant WebPart.
- La Description est affichée sous le titre dans un texte plus petit et légèrement plus clair - aux trois quarts de la taille du titre, mais jamais en dessous de 12 pixels.
Chaque texte occupe une seule ligne. Un texte plus large que la vignette est coupé par des points de suspension (…) ; il n'est pas renvoyé à la ligne. Le texte complet est toujours disponible dans l'infobulle.
L'infobulle
Lorsque le pointeur reste sur une vignette, une infobulle affiche le titre et, sur une seconde ligne, la description. L'infobulle apparaît même lorsque les textes sont masqués sur la vignette : un panneau de vignettes avec icône seule s'explique donc de lui-même au survol. Les lecteurs d'écran annoncent le titre de la vignette comme nom du lien.
Afficher les titres et Afficher les descriptions
Deux interrupteurs du groupe Apparence du volet de propriétés contrôlent les textes de toutes les vignettes à la fois :
| Paramètre | Effet |
|---|---|
| Afficher les titres | Activé par défaut. Une fois désactivé, les titres disparaissent de toutes les vignettes . Utilisez-le pour une mosaïque de logos d'applications bien connus ou pour des vignettes d'images qui n'ont pas besoin de libellé. |
| Afficher les descriptions | Activé par défaut. Une fois désactivé, les descriptions disparaissent de toutes les vignettes mais restent dans les infobulles. Utilisez-le pour un panneau compact, ou lorsque seules quelques vignettes ont une description et que le panneau paraît inégal. |
📝 Remarque
Les textes sont masqués, pas supprimés. En réactivant un interrupteur, vous retrouvez chaque titre et chaque description exactement tels qu'ils ont été saisis.
Taille de police
Taille de police dans le groupe Apparence définit la taille des titres en sept paliers : 14, 16, 18, 20, 24, 28 et 32 pixels. La description suit à trois quarts de la taille du titre. La valeur par défaut est le palier 3 (18 px).
Un texte plus grand exige des vignettes plus larges : à 28 ou 32 px, un titre de deux ou trois mots remplit déjà une vignette Petite. Associez les grandes tailles de police à des vignettes Moyenne et plus grandes, ou à des titres courts.
Vignettes sans titre
Pour afficher uniquement les icônes, masquez les titres et les descriptions dans les paramètres du composant WebPart. Conservez un titre explicite pour chaque vignette : il reste dans l’infobulle et fournit le nom accessible du lien. Masquer les titres ne garantit pas le centrage vertical.
❗ Important
Une vignette qui renvoie vers une vidéo YouTube et utilise la Miniature de la vidéo comme arrière-plan n'affiche aucun texte sur la page publiée, quels que soient les paramètres : la miniature est le contenu de la vignette. Le titre et la description d'une telle vignette sont visibles en mode édition et dans l'infobulle.
Le titre du composant WebPart
Au-dessus des vignettes se trouve un titre pour l'ensemble du panneau. Cliquez sur l'espace réservé Titre du composant WebPart en mode édition et saisissez l'intitulé - il est affiché dans le style des autres titres de composants WebPart de la page. Laissez-le vide si le panneau n'a pas besoin d'intitulé ; rien ne s'affiche à sa place sur la page publiée.
Rédiger des textes adaptés
- Des titres d'un à trois mots. Assistance, Réserver une salle, Notes de frais. Les verbes conviennent bien aux actions, les noms aux lieux.
- Des descriptions qui apportent quelque chose. Saisir les heures avant vendredi en dit plus que Système de suivi du temps. Gardez-les sous environ 40 caractères pour qu'elles tiennent dans une vignette Petite à la taille de police par défaut.
- Pas de répétition. La description ne doit pas reformuler le titre ; s'il n'y a rien à ajouter, laissez-la vide - la vignette est plus nette sans seconde ligne vide.
- Cohérence. Soit toutes les vignettes d'un panneau ont une description, soit aucune. Quelques vignettes avec une seconde ligne rendent les rangées inégales.
💡 Astuce
La façon dont la largeur des vignettes est définie, et donc la quantité de texte qui y tient, est expliquée dans KB10247. Tailles et disposition des vignettes dans Smart Tiles. La boîte de dialogue Propriétés est décrite dans KB10242. Comment ajouter et modifier une vignette dans Smart Tiles.
En savoir plus sur le produit : https://vitextra.com/fr/products/smart-tiles
