Smart Tiles Introduction
Un panneau dans Smart Tiles n'est pas une grille fixe. Les vignettes s'organisent en lignes comme les mots dans un texte : chaque vignette demande une part de la ligne selon sa Taille, la ligne se remplit de gauche à droite, et tout ce qui ne tient pas commence la ligne suivante. Comprendre ce fonctionnement fait toute la différence entre un panneau qui est simplement correct sur un écran et un panneau qui paraît soigné sur tous les écrans. Cet article explique les tailles, les retraits et la hauteur des vignettes, et propose quelques recettes de disposition.
Les six tailles
La taille d'une vignette est sa largeur, exprimée en part de la ligne. Choisissez-la dans le menu contextuel de la vignette : cliquez sur le bouton …, pointez sur Taille et sélectionnez l'une des six entrées ; la taille actuelle est repérée par une coche.
| Taille | Part de base de la ligne | Vignettes par ligne (même taille) |
|---|---|---|
| Très petit | 15 % | 6 |
| Petite | 30 % | 3 |
| Moyenne | 45 % | 2 |
| Grand | 65 % | 1, avec de la place pour une vignette Petite ou Très petit à côté |
| Très grande | 80 % | 1, avec de la place pour une vignette Très petit à côté |
| Pleine largeur | 100 % | 1 |
Une nouvelle vignette est de taille Petite.
Comment les lignes se remplissent
Deux règles complètent le tableau :
- Les vignettes s'étirent pour remplir la ligne. La part indiquée dans le tableau est un minimum. Lorsqu'il reste de la place dans une ligne (par exemple deux vignettes Petite seules sur une ligne), les vignettes s'agrandissent pour la remplir, les tailles les plus grandes s'agrandissant plus vite que les plus petites. Les lignes sont donc toujours pleines, sans bord droit irrégulier.
- Une vignette qui ne tient pas passe à la ligne suivante. Trois vignettes Petite remplissent une ligne ; une quatrième en commence une nouvelle. Une vignette Moyenne placée après deux vignettes Petite ne tient pas dans les 40 % restants et commence une nouvelle ligne, où elle s'étire sur toute la largeur si rien ne la suit.
La seconde règle est celle qui surprend : une vignette Petite isolée à la fin du panneau sera étirée en vignette Pleine largeur. Comptez les parts de chaque ligne (elles doivent totaliser environ 90 à 100 %) ou terminez le panneau par des vignettes qui remplissent exactement leur ligne.
📝 Remarque
Les nombres du tableau et des exemples ci-dessous supposent suffisamment de place pour les espacements externes. Ces espacements s’ajoutent aux largeurs en pourcentage : dans un composant WebPart étroit ou avec de grands espacements, des vignettes peuvent passer à la ligne suivante. Sur téléphone, les pourcentages restent identiques, mais le nombre de vignettes par ligne peut changer.
Hauteur
La hauteur d'une vignette ne se définit pas directement. Elle est la somme du contenu (l'icône à sa Taille d’icône, le titre à sa Taille de police et la description, si elle est affichée) et du Retrait interne au-dessus et au-dessous du contenu. Toutes les vignettes d'une ligne ont la même hauteur, celle de la plus haute.
Pour agrandir les vignettes en hauteur sans agrandir l'icône ni le texte, augmentez Retrait interne ; pour les rendre quasi carrées, combinez un Retrait interne élevé avec des vignettes Petite ou Très petit.
Les trois retraits
Le groupe Apparence du volet des propriétés comporte trois paramètres d'espacement, chacun de 0 à 30 pixels :
| Paramètre | Ce qu'il espace |
|---|---|
| Retrait interne | Au-dessus et au-dessous du contenu d'une vignette : la « marge intérieure » (padding). Il détermine la hauteur des vignettes. |
| Indentation de l'icône | Entre l'icône et le titre. |
| Retrait externe | Entre les vignettes voisines, horizontalement et verticalement : la « gouttière » (gap). À 0, les vignettes se touchent et le panneau devient une mosaïque compacte ; à 10–16, les vignettes se lisent comme des cartes distinctes. |
Recettes de disposition
Barre de liens rapides. Six vignettes Très petit, Retrait externe 4, Retrait interne 8, titres affichés, descriptions masquées. Une ligne de boutons compacts sous la bannière principale d'une page d'accueil.
Panneau de service. Une vignette Pleine largeur comme en-tête du panneau (une photo en arrière-plan et le nom du service), suivie de lignes de trois vignettes Petite présentant les prestations du service. Retrait externe 8.
Vignette à la une et liste. Une vignette Grand avec une image d'arrière-plan et une description, et une vignette Petite à côté ; en dessous, deux lignes de trois vignettes Petite. La vignette Grand attire le regard vers le lien le plus important.
Mosaïque. Un mélange de vignettes Très petit et Petite avec Retrait externe 0, toutes dans des couleurs d'accentuation, icônes uniquement (titres et descriptions masqués). Le rendu est optimal dans une section pleine largeur sur un site de communication.
💡 Astuce
Créez le panneau dans une section pleine largeur lorsqu'il constitue la navigation principale de la page ; consultez KB10042. Comment ajouter et configurer le composant WebPart Smart Tiles. Pour les textes des vignettes, consultez KB10249. Afficher les titres et les descriptions sur les vignettes.
❗ Important
Vérifiez le panneau avec une fenêtre étroite avant de le publier : réduisez la largeur de la fenêtre du navigateur ou utilisez l'aperçu mobile de la page. Les titres longs qui tiennent dans une vignette Pleine largeur sont tronqués par des points de suspension sur une vignette Petite ; la description, lorsqu'elle ne tient pas, est tronquée de la même manière.
Pour en savoir plus sur le produit : https://vitextra.com/fr/products/smart-tiles
