--- title: "Comment ajouter et configurer le composant WebPart Smart Tiles" description: "Guide pas à pas pour ajouter le composant WebPart Vitextra Smart Tiles à une page SharePoint Online : déploiement du package, recherche du composant WebPart dans la boîte à outils, vignettes d'exemple, titre du composant WebPart, tous les paramètres du groupe Apparence, le groupe À propos de et le placement du panneau dans une section pleine largeur." url: https://vitextra.com/fr/support/kb/10042 language: fr published: 2026-11-14 modified: 2026-11-14 products: - "Smart Tiles" author: "Jānis Bērziņš" tags: ["ajouter le composant WebPart Smart Tiles", "configurer Smart Tiles", "configuration de la navigation par vignettes SharePoint Online", "volet de propriétés du composant WebPart", "paramètres d’apparence", "composant WebPart en section pleine largeur", "installation de Vitextra Smart Tiles", "vignettes de page SharePoint", "paramètres de Smart Tiles", "panneau de navigation par vignettes"] --- # Comment ajouter et configurer le composant WebPart Smart Tiles Guide pas à pas pour ajouter le composant WebPart Vitextra Smart Tiles à une page SharePoint Online : déploiement du package, recherche du composant WebPart dans la boîte à outils, vignettes d'exemple, titre du composant WebPart, tous les paramètres du groupe Apparence, le groupe À propos de et le placement du panneau dans une section pleine largeur. ## Introduction Cet article présente les premières étapes avec [Smart Tiles](https://vitextra.com/fr/products/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](https://vitextra.com/fr/support/kb/10242). ## 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](https://vitextra.com/fr/support/kb/10035). 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 1. Ouvrez la page et cliquez sur **Edit** (Modifier) dans le coin supérieur droit. 2. 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::. 3. Saisissez *Smart Tiles* dans la zone de recherche et cliquez sur le composant WebPart. ![Smart Tiles dans la boîte à outils des composants WebPart](https://static.vitextra.com/articles/10042/web-part-toolbox-fr.png) *Smart Tiles dans la boîte à outils des composants 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 composant WebPart avec les vignettes d'exemple](https://static.vitextra.com/articles/10042/sample-tiles-fr.png) *Le composant WebPart avec les vignettes d'exemple* ## 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. ![Le groupe Apparence du volet de propriétés](https://static.vitextra.com/articles/10042/appearance-group-fr.png) *Le groupe Apparence du volet de propriétés* |::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](https://vitextra.com/fr/support/kb/10247) et [KB10249. Afficher les titres et les descriptions sur les vignettes](https://vitextra.com/fr/support/kb/10249) ; les effets au survol, dans [KB10248. Configurer l'effet au survol des vignettes](https://vitextra.com/fr/support/kb/10248). ## 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:: : 1. En mode édition, survolez le bord gauche de la page et cliquez sur le **+** qui apparaît entre les sections. 2. Choisissez **Full-width section** (Section pleine largeur) dans la liste des dispositions. 3. 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. ![Ajout d'une section pleine largeur](https://static.vitextra.com/articles/10042/full-width-section-fr.png) *Ajout d'une 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 :