Smart Tiles Introduction
Cet article présente les premières étapes avec Smart Tiles : le déploiement du composant WebPart, son ajout à une page moderne SharePoint Online et les paramètres du volet de propriétés qui s'appliquent à l'ensemble du panneau. Les propriétés de chaque vignette - textes, liens, couleurs, icônes - sont décrites dans KB10242. Comment ajouter et modifier une vignette dans Smart Tiles.
Avant de commencer
Smart Tiles est déployé une seule fois sur le tenant par un administrateur SharePoint, depuis le catalogue d'applications du tenant. Le package est déployé à l'échelle du tenant : le composant WebPart devient donc disponible sur tous les sites sans avoir à être ajouté à chaque site séparément. La procédure est décrite dans KB10035. Comment installer un produit Vitextra dans SharePoint Online.
Pour ajouter le composant WebPart à une page, vous devez disposer de l'autorisation de modifier cette page - le niveau d'autorisation Edit (Modifier) ou l'appartenance au groupe Membres du site suffit.
📝 Remarque
Smart Tiles fonctionne uniquement sur les pages modernes. Sur un site qui utilise encore des pages classiques, créez d'abord une page de site moderne.
Ajouter le composant WebPart à une page
- Ouvrez la page et cliquez sur Edit (Modifier) dans le coin supérieur droit.
- Survolez l'endroit où le panneau doit se trouver jusqu'à ce qu'une ligne portant le signe + apparaisse entre les sections ou les composants WebPart, puis cliquez dessus pour ouvrir la galerie de composants WebPart.
- Saisissez Smart Tiles dans la zone de recherche et cliquez sur le composant WebPart.
Le composant WebPart apparaît sur la page avec trois vignettes d'exemple qui pointent vers des pages de produits Vitextra. Elles montrent l'aspect d'une vignette et peuvent être modifiées pour devenir vos propres liens, ou supprimées.
Le titre du composant WebPart
Au-dessus des vignettes se trouve un champ de titre. Cliquez dessus et saisissez un intitulé pour le panneau, par exemple Quick Links ou HR Services. Le titre est facultatif : si vous le laissez vide, aucun intitulé n'est affiché sur la page publiée.
Paramètres d’apparence
Cliquez sur l'icône en forme de crayon (Edit web part, Modifier le composant WebPart) à gauche du composant WebPart pour ouvrir le volet de propriétés. Le groupe Apparence contient les paramètres qui s'appliquent à toutes les vignettes.
| Paramètre | Description |
|---|---|
| Taille de police | Taille du titre de la vignette, en sept paliers de 14 px à 32 px. La description, lorsqu'elle est affichée, est réduite proportionnellement. |
| Taille d’icône | Taille de l'icône, en six paliers de 20 px à 64 px. Les images d'icônes personnalisées utilisent les mêmes tailles. |
| Retrait interne | Espace au-dessus et au-dessous du contenu d'une vignette, de 0 à 30 px. Des valeurs plus élevées rendent les vignettes plus hautes. |
| Indentation de l'icône (Retrait de l'icône) | Espace entre l'icône et le titre, de 0 à 30 px. |
| Retrait externe | Espace entre les vignettes voisines, de 0 à 30 px. À 0, les vignettes se touchent et forment une mosaïque continue. |
| Ombre | Dessine une ombre portée douce sous les icônes. |
| Afficher les titres | Affiche ou masque les titres de toutes les vignettes. Lorsque les titres sont masqués, les icônes sont centrées dans les vignettes. |
| Afficher les descriptions | Affiche ou masque les descriptions de toutes les vignettes. Les descriptions restent disponibles dans les infobulles. |
| Effet de survol (Effet au survol) | Active un effet visuel lorsque le pointeur reste sur une vignette. La liste Effet, le curseur d'intensité et Durée apparaissent sous l'interrupteur. |
Les modifications des curseurs et des interrupteurs sont appliquées immédiatement à la page, ce qui permet d'évaluer le résultat tout en les modifiant.
💡 Astuce
Les tailles, les retraits et les textes sont décrits en détail dans KB10247. Tailles et disposition des vignettes dans Smart Tiles et KB10249. Afficher les titres et les descriptions sur les vignettes ; les effets au survol, dans KB10248. Configurer l'effet au survol des vignettes.
Le groupe À propos de
Le groupe À propos de du volet de propriétés affiche la licence du composant WebPart : l’État ( d'essai, actif, expiré ou suspendu), la Version du composant WebPart, la Date de début de l'abonnement et le Client auquel il est associé. Pendant la période d'essai, le nombre de jours restants est également indiqué ici. Le groupe contient en outre un lien vers la page du produit où il est possible d'acheter un abonnement.
📝 Remarque
Lorsqu'une version plus récente de Smart Tiles est disponible, un avis s'affiche au-dessus des vignettes en mode édition. La mise à jour s'installe en téléversant le nouveau package dans le catalogue d'applications ; les pages et leurs vignettes ne sont pas affectées.
Placer le panneau dans une section pleine largeur
Les vignettes font le plus d'effet lorsqu'elles occupent toute la largeur de l'écran. Pour y parvenir, placez le composant WebPart dans une section pleine largeur :
- En mode édition, survolez le bord gauche de la page et cliquez sur le + qui apparaît entre les sections.
- Choisissez Full-width section (Section pleine largeur) dans la liste des dispositions.
- Faites glisser le composant WebPart Smart Tiles de sa section actuelle vers la nouvelle, ou ajoutez un nouveau composant WebPart Smart Tiles dans la section pleine largeur.
Smart Tiles s'intègre également dans une section à une ou deux colonnes, et plusieurs composants WebPart Smart Tiles peuvent coexister sur une même page - par exemple un panneau par service. Chaque composant WebPart conserve ses propres paramètres et son propre effet au survol.
❗ Important
Les sections pleine largeur sont disponibles sur les sites de communication et sur les sites d'équipe dotés de la mise en page moderne de la page d'accueil. Sur une page sans sections pleine largeur, les vignettes occupent toute la largeur de la section dans laquelle elles se trouvent.
Enregistrer la page
Les vignettes et les paramètres sont stockés dans la page. Cliquez sur Save as draft (Enregistrer comme brouillon) pour poursuivre plus tard, ou sur Republish (Republier) pour rendre le panneau visible aux visiteurs. Tant que la page n'est pas republiée, les visiteurs voient sa version précédente.
En savoir plus sur le produit : https://vitextra.com/fr/products/smart-tiles
