--- title: "Comment ajouter et modifier une vignette dans Smart Tiles" description: "Comment travailler avec les vignettes individuelles dans le composant WebPart Vitextra Smart Tiles : ajout d'une vignette, boîte de dialogue Properties avec titre, description, lien, ouverture dans un nouvel onglet et audience, menu contextuel, formats de lien acceptés, réorganisation des vignettes par glisser-déposer et suppression d'une vignette." url: https://vitextra.com/fr/support/kb/10242 language: fr published: 2026-10-13 modified: 2026-10-13 author: "Vitālijs Kalniņš" tags: ["ajouter une vignette Smart Tiles", "modifier les propriétés d'une vignette", "menu contextuel de vignette", "URL de lien de vignette", "ouvrir dans un nouvel onglet", "glisser-déposer des vignettes", "supprimer une vignette", "description de vignette", "lien mailto tel vignette", "modification Vitextra Smart Tiles"] --- # Comment ajouter et modifier une vignette dans Smart Tiles Comment travailler avec les vignettes individuelles dans le composant WebPart Vitextra Smart Tiles : ajout d'une vignette, boîte de dialogue Properties avec titre, description, lien, ouverture dans un nouvel onglet et audience, menu contextuel, formats de lien acceptés, réorganisation des vignettes par glisser-déposer et suppression d'une vignette. ## Introduction Dans [Smart Tiles](https://vitextra.com/fr/products/smart-tiles), chaque vignette se modifie à l'endroit où elle est affichée : sur la page, en mode édition. Il n'y a aucune liste de liens distincte à maintenir. Cet article décrit les outils de modification d'une vignette individuelle — ajout, boîte de dialogue **Properties**, menu contextuel, réorganisation et suppression. L'apparence d'une vignette — couleurs, icônes, images et tailles — fait l'objet d'articles distincts, dont les liens figurent à la fin. Pour suivre les étapes, ouvrez la page en mode édition. Le composant WebPart affiche alors les boutons **Add Tile**, **Export** et **Import** sous les vignettes, ainsi qu'un bouton **…** dans l'angle supérieur droit de chaque vignette. ## Ajouter une vignette Cliquez sur **Add Tile** sous le panneau. Une nouvelle vignette apparaît à la fin, avec un titre provisoire (*Tile #4*, par exemple), la première couleur d'accentuation du thème, un texte blanc, une icône SharePoint et un lien provisoire qui ne pointe nulle part. Ouvrez immédiatement ses propriétés pour lui donner un titre et un lien. ![Une vignette qui vient d'être ajoutée](https://static.vitextra.com/articles/10242/new-tile-fr.png) *Une vignette qui vient d'être ajoutée* ## Le menu contextuel Cliquez sur le bouton **…** dans l'angle d'une vignette pour ouvrir son menu contextuel. Tout ce qui peut être modifié sur une vignette commence ici : |::Élément::|::Fonction::| |:---|:---| |**Edit Properties**|Ouvre la boîte de dialogue **Properties** avec les textes, le lien, la cible et l'audience de la vignette.| |**Size**|Permet de choisir l'une des six largeurs, de **Extra Small** à **Full Width**.| |**Background Color**|Permet de choisir une couleur d'arrière-plan, une image d'arrière-plan ou — pour les liens YouTube — la miniature de la vidéo.| |**Font Color**|Permet de choisir la couleur du titre, de la description et de l'icône standard.| |**Tile Icon**|Ouvre l'un des cinq jeux d'icônes ou permet de choisir une image personnalisée.| |**Remove**|Supprime la vignette.| ![Le menu contextuel d'une vignette](https://static.vitextra.com/articles/10242/context-menu-fr.png) *Le menu contextuel d'une vignette* ## La boîte de dialogue Properties Choisissez **Edit Properties** pour ouvrir la boîte de dialogue. Vous pouvez la déplacer sur le côté en faisant glisser sa barre de titre, afin que la vignette reste visible pendant que vous la modifiez. ![La boîte de dialogue Properties d'une vignette](https://static.vitextra.com/articles/10242/properties-dialog-fr.png) *La boîte de dialogue Properties d'une vignette* |::Champ::|::Description::| |:---|:---| |**Title**|Le texte affiché sur la vignette. Il s'affiche sur une seule ligne ; un titre trop long est tronqué par des points de suspension, c'est pourquoi il vaut mieux le garder court.| |**Description**|Une seconde ligne facultative en plus petits caractères, également affichée dans l'info-bulle de la vignette. Vous pouvez saisir jusqu'à deux lignes, mais la vignette affiche la description sur une seule ligne.| |**URL**|Le lien que la vignette ouvre. Obligatoire ; les formats acceptés sont énumérés ci-dessous. Le bouton **Save** reste désactivé tant que le lien n'est pas valide.| |**Open in new tab**|Ouvre le lien dans un nouvel onglet du navigateur au lieu de la fenêtre actuelle. L'option n'est pas disponible pour les liens qui ouvrent une application (e-mail, téléphone, SMS, Teams), car de tels liens n'ouvrent jamais d'onglet.| |**Audience**|Les groupes SharePoint du site ou les groupes Microsoft Entra ID dont les membres voient la vignette. Laissez le champ vide pour afficher la vignette à tout le monde.| Cliquez sur **Save** pour appliquer les modifications ou sur **Cancel** pour les annuler. ### Formats de lien acceptés |::Lien::|::Exemple::| |:---|:---| |Adresse web|`https://contoso.sharepoint.com/sites/hr`| |Chemin sur le locataire actuel|`/sites/hr/Shared Documents/Handbook.pdf`| |Ancre sur la page actuelle|`#benefits`| |E-mail|`mailto:helpdesk@contoso.com`| |Numéro de téléphone|`tel:+15551234567`| |SMS|`sms:+15551234567`| |Microsoft Teams|`msteams:/l/chat/0/0?users=helpdesk@contoso.com`| Un chemin relatif est la forme la plus sûre pour un contenu situé sur le même locataire : le lien continue de fonctionner lorsque le panneau est exporté vers un autre site ou que le site est déplacé. 📝 **Remarque** Les liens vers des vidéos YouTube (`youtube.com`, `youtu.be`) sont reconnus automatiquement. La vignette reçoit un bouton de lecture à la place de son icône, et le menu **Background Color** propose la **Thumbnail** de la vidéo comme arrière-plan. ## Réorganiser les vignettes Faites glisser une vignette à sa nouvelle position avec la souris ; les autres vignettes s'écartent pour lui faire de la place. Le nouvel ordre est enregistré avec la page. ![Réorganisation des vignettes par glisser-déposer](https://static.vitextra.com/articles/10242/drag-and-drop-fr.png) *Réorganisation des vignettes par glisser-déposer* ## Vignettes ciblées en mode édition Une vignette associée à une audience affiche en mode édition une petite icône de personnes dans son angle supérieur gauche, afin de distinguer les vignettes ciblées des autres. En mode édition, l'auteur voit toutes les vignettes, quelle que soit leur audience ; le filtrage s'applique à la page publiée. ## Supprimer une vignette Choisissez **Remove** dans le menu contextuel. La vignette disparaît immédiatement, sans confirmation. Si une vignette a été supprimée par erreur, fermez la page sans l'enregistrer — ou utilisez l'historique des versions de la page pour restaurer une version antérieure. ❗ **Important** Les modifications apportées aux vignettes sont stockées dans la page. Elles ne deviennent visibles pour les visiteurs qu'après la republication de la page ; d'ici là, les visiteurs voient la version précédente du panneau. 💡 **Astuce** Pour modifier l'apparence d'une vignette, consultez [KB10043. Couleurs des vignettes dans Smart Tiles](https://vitextra.com/fr/support/kb/10043), [KB10243. Choisir des icônes pour les vignettes](https://vitextra.com/fr/support/kb/10243), [KB10245. Définir une image d'arrière-plan pour une vignette](https://vitextra.com/fr/support/kb/10245) et [KB10247. Tailles et disposition des vignettes dans Smart Tiles](https://vitextra.com/fr/support/kb/10247).