--- title: Grille de liens slug: docs/fr/grille-de-liens createdAt: 2024-07-24T07:41:15.178Z --- ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/7Swb-lpQWhWia7P0JwhzK-20260108-105119.png) Link Grid est un élément qui combine l’attrait visuel d’une carte avec la fonctionnalité d’un élément cliquable. C’est parfait pour **mettre en avant** des informations importantes ou pour **présenter** des ressources connexes. ## Quand l’utiliser ::::LinkArray{contentSource="CUSTOM" itemsPerRow="2"} :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-star"} **Mettre en évidence des informations clés** Créer des cartes accrocheuses pour des annonces ou des mises à jour importantes. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-file-pen"} **Présenter du contenu connexe** Créer des liens vers des ressources supplémentaires, des articles ou des produits. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-folder-tree"} **Créer un répertoire visuellement attrayant** Organiser l’information en cartes cliquables pour une navigation facile. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-arrow-pointer"} **Améliorer l’expérience utilisateur** Fournir une manière claire et interactive de guider les utilisateurs à travers votre contenu. ::: :::: ## Comment créer un Link Grid ::::WorkflowBlock :::WorkflowBlockItem Tapez `/` pour ouvrir le menu **Bloc Archbee** ::: :::WorkflowBlockItem Recherchez **Grille de liens** et cliquez pour l’insérer ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/gTvRvhMyIEa6ZAEK_XWgP-20260107-112506.png) ::: :::WorkflowBlockItem Choisissez comment vous souhaitez le créer. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9sjCskLUQLroEBt3GbBs--20260128-131317.png) ::: :::: ## Link Grid manuel vs. auto-rempli ::::::::Tabs :::::::Tab{title="Grille de liens manuelle"} Lorsque vous continuez à rédiger du contenu manuellement dans Link Grid, les prochaines étapes sont : ::::::WorkflowBlock :::::WorkflowBlockItem Choisissez un type d’en-tête. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/NzrVaqt42ZCwPD859wbEQ-20260107-112732.png) Vous avez trois options : - Aucun - [Couleur](docId\:PK8vQQlHhl75RrAs1X5so) - [Image](docId\:PK8vQQlHhl75RrAs1X5so) ::::LinkArray{contentSource="CUSTOM" customOrder="foiWGU1sKYkQpO3puSCc-,9bGqAthPinIWIzN1JDG9a,KN_Vi2koMOHat6p3NwJmV"} :::LinkArrayItem **En-tête Aucun** ::: :::LinkArrayItem{headerType="COLOR" headerColor="#2166ae"} **En-tête Couleur** ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/P2zVL7JMh-OAL-9OuY4WL-wzfTIiPQpIcLwzpDfNvIY-20240805-143427.png"} **En-tête Image** ::: :::: ::::: :::WorkflowBlockItem Ajoutez votre contenu. Vous pouvez styliser le contenu comme vous le souhaitez en utilisant le [Menu WYSIWYG](#) ou même insérer d’autres blocs, comme : - [Titres](docId\:m5YtbqSdP8r5-Mf8qZ06o) - [En-têtes extensibles](docId\:vzJtGjqibvOm7Liy_MlxO) - [Listes](docId\:nPfcEoI9K08-yMLuZK7Fh) - [Avertissement](docId\:OL_gxdn7xBLaPFqLQ3n-7) - [Séparateur horizontal](docId\:nCxSX6BbAvR5tG3MPNYwH) - [Fichier](docId:_NnUvECpV1i_8pS-sS1h-) - [Image](docId\:TPn9FZo6lfXo2lMviwCWj) - [Vidéo](docId\:GQ9-sKSwAguEEbpshXf6u) ::: :::::: ### En-tête de couleur unie Vous pouvez utiliser une couleur comme en-tête pour rendre votre carte plus visible. Vous pouvez même utiliser des codes couleurs pour correspondre à vos fonctionnalités. ::::WorkflowBlock :::WorkflowBlockItem Cliquez sur le bouton déroulant **Type d'en-tête **:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} et sélectionnez **Couleur** ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/KGqONH1WBlDKfHrOqsxKx-20260113-122010.png" size="80" width="1806" height="962" position="center" showCaption="false"} ::: :::WorkflowBlockItem Cliquez sur **Changer la couleur**et sélectionnez votre couleur préférée. Toute modification sera enregistrée automatiquement. ::: :::: ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/i2rKx8uA91waVM4dtoDrf-20260127-193752.png" size="70" width="1688" height="1324" position="center" showCaption="false"} ### En-tête d’image Vous pouvez utiliser une image comme en-tête pour décrire le contenu de la carte et la rendre plus esthétique. ::::WorkflowBlock :::WorkflowBlockItem Cliquez sur le bouton déroulant **Type d'en-tête **:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} et sélectionnez **Image** ::: :::WorkflowBlockItem Cliquez sur le bouton** Ajouter une image **pour ajouter une image. ::: :::WorkflowBlockItem Choisissez votre image. Toute modification sera enregistrée automatiquement. ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WeWMQu8KeXdNOMW30NHTW_image.png) ### Options de disposition **Éléments par ligne **- contrôlez combien d’éléments apparaissent sur chaque ligne : - 3 éléments par ligne - 2 éléments par ligne - 1 élément par ligne ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} ::::::: :::::Tab{title="Remplissage automatique de Link Grid"} Gagnez du temps et assurez la synchronisation de la structure de votre documentation en remplissant automatiquement un **Grille de liens **avec des documents enfants basés sur un parent sélectionné. Chaque élément est rendu sous forme de lien cliquable ou de carte qui renvoie au document correspondant. ### Choisir une source Choisir une source est la première étape et détermine quels documents apparaîtront dans le Link Grid. Sélectionnez d’où le Link Grid doit récupérer les documents : - **N’importe quel document parent dans l’espace** – Choisissez un document ou une catégorie spécifique comme source. - **Document parent actuel** – Utilisez le parent de la page que vous êtes en train de modifier. Le Link Grid inclura tous les documents directement sous le parent sélectionné. Les brouillons, documents masqués, documents avec restrictions de permissions et niveaux imbriqués plus profonds ne seront pas inclus. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/AkJ4oac_KRwvCY69ODKDb-20260128-142724.png) ### Exemple Ci-dessous se trouve un exemple tiré de notre documentation montrant l’utilisation du remplissage automatique Link Grid dans [Exemples d’intégration](docId\:tQv8z09d0Qm9bwpWCW8s8). ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DDWZix1eIFtrffmTaLXFE-20260128-173556.png) ### Options de mise en page Ces options vous permettent de contrôler la structure, l’ordre et l’apparence visuelle de votre Link Grid. Après avoir sélectionné une source, personnalisez l’affichage du Link Grid. **Éléments par ligne **- contrôlez le nombre d’éléments affichés par ligne : - 3 éléments par ligne - 2 éléments par ligne - 1 élément par ligne ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **Options de tri** - choisissez comment les éléments sont ordonnés : - **Par défaut** – Correspond à l’ordre dans l’arborescence du portail. - **Manuel** – Faites glisser et déposez les éléments pour définir un ordre personnalisé. - **Alphabétique** – Trier de A à Z ou de Z à A. - **Date de création** – Les plus récents en premier ou les plus anciens en premier. ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Uxi0o0I8YiE8zcZBIfLHG-20260128-174445.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **Style d’affichage** - choisissez comment les éléments apparaissent dans votre documentation : - **Lien** – Une liste compacte, idéale pour un grand nombre de documents. - **Carte** – Une mise en page visuelle avec image, titre et description. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![Vue en mode lien des éléments Link Grid](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/S2ki6R4zi0cuGW5CimEHP-20260128-175053.png "Vue en mode lien des éléments Link Grid") ::: :::VerticalSplitItem ![Vue en mode carte des éléments Link Grid](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DretKScZcyN1zDyMBsTrm-20260128-175110.png "Vue en mode carte des éléments Link Grid") ::: :::: :::hint{type="info"} ### Détails de la carte Pour l’affichage de **Carte**, l’image, le titre et la description sont automatiquement extraits des [Contrôles des métadonnées SEO](docId\:sN9-JWnAnIKlkkGvSqsE3) du document. Vous pouvez modifier ces valeurs directement dans les paramètres de chaque document sous **Contrôles méta SEO**. Consultez la documentation SEO Meta Controls pour apprendre à mettre à jour les images, les titres et les descriptions. ::: ::::: :::::::: *** ## Guide d’image ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/fFVWmk1gxX-tjDfg6Z-kr_image-guide.png "Guide d’image pour Link Grid") Pour garantir que votre contenu s’affiche correctement, nous vous recommandons de créer une image avec une **hauteur de 480px** et une **largeur de 1324px**. En suivant le guide de [guide de zone visible](docId\:PK8vQQlHhl75RrAs1X5so) ci-dessous, vous pouvez vous assurer que votre contenu n’est pas coupé. ### Guide de zone visible L’image principale a des dimensions de 480px de hauteur et 1324px de largeur. ::::Tabs :::Tab{title="3 éléments / ligne"} Dans le cas de **3 grilles de liens** par ligne, la zone visible sera de **480px** en **hauteur** et de **860px en largeur**. Cette zone visible sera centrée dans les dimensions principales. Veuillez vous référer à l’image ci-dessous pour une représentation visuelle : ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/ypYZ53zBi5kh4s42ErngN_3perrow.png "Zone visible 3 Link Grids par ligne") ::: :::Tab{title="2 éléments / ligne"} Lorsqu’il y a **2 grilles de liens** par ligne, la zone visible sera déterminée par les dimensions principales. Pour offrir une meilleure compréhension, veuillez vous référer à l’image ci-dessous : ![2 Link Grids per row](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WzWRX9svOFc3oazdOcUGN_2perrow.png "Zone visible 2 Link Grids par ligne") ::: :::Tab{title="1 élément / ligne"} Lorsqu’il n’y a qu’un **Grille à 1 lien** par ligne, la zone visible sera centrée dans les dimensions principales. Plus précisément, elle aura une largeur de 1324px et une hauteur de 234px. Pour mieux comprendre, veuillez vous référer à l’image ci-dessous : ![Link Grid per row](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PDlPPdo9SGDIM1fuPndHH_1perrow.png "Zone visible 1 Link Grid par ligne") ::: :::: :::hint{type="info"} Pour clarifier, le contenu principal ou le logo doit être positionné dans cette zone désignée. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/liJYjYkvJUMwyTyv5TpiX_arealogo.png "positionnement du contenu") ::: Veuillez trouver ci-dessous une démonstration en direct illustrant l’apparence de l’image de couverture et son comportement. ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/rAFUifPkjwjyC0lbqKM4c_image-guide.png"} ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/pK4P-nlFBux86p-jBYQTu_image-guide.png"} ::: :::: ## Markdown Voici comment créer un onglet dans votre document en utilisant du code markdown : :::::WorkflowBlock :::WorkflowBlockItem **Créer la grille de liens** Commencez avec la ligne `::::link-array`. ::: :::WorkflowBlockItem **Ajouter une carte de lien** Chaque contenu de la Link Grid va entre les marqueurs `:::link-array-item` et `:::`. ::: :::WorkflowBlockItem **Choisir le `headerType`** Vous avez deux options pour votre en-tête : - **`image`:** Cela affiche une image comme arrière-plan de votre en-tête. - **`couleur`:** Cela vous permet d’utiliser une couleur unie pour votre en-tête. ::: :::WorkflowBlockItem **Ajouter l’attribut approprié** Pour les en-têtes `image` : - Ajoutez l’URL de l’image comme valeur pour l’attribut `headerImage`. - Exemple : `headerImage="https://placehold.co/600x400")` Pour les en-têtes `couleur` : - Définissez la couleur souhaitée en utilisant un code hexadécimal pour l’attribut `headerColor`. - Exemple : `headerColor="#ff00FF"` ::: ::::WorkflowBlockItem Ajoutez du contenu à l’intérieur de votre carte de lien. :::hint{type="warning"} **🚨 Attention !** Lorsque vous utilisez la syntaxe à triple deux-points (`:::`) pour créer un élément markdown imbriqué, assurez-vous que chaque élément parent au-dessus possède également un deux-points supplémentaire (`:`) avant son triple deux-points d’ouverture. ::: :::: ::::: ```markdown ## Link Array - Example ::::link-array :::link-array-item{headerType="IMAGE" headerImage="https://placehold.co/600x400"} - list item 1 - list item 2 ::: :::link-array-item{headerType="COLOR" headerColor="#ff00FF"} - [ ] unchecked list box - [x] checked list box ::: :::: ``` Voici le résultat : ::::LinkArray{attributes="{}" contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2YO-Z1cATRi0OGk8yZ99Y-20260127-192519.png"} - élément de liste 1 - élément de liste 2 ::: :::LinkArrayItem{attributes="{"headerType":"COLOR","headerColor":"#ff00FF"}" headerType="COLOR" headerColor="#ff00FF"} - [ ] case à cocher non cochée - [x] case à cocher cochée ::: :::: Consultez la page [Utiliser les raccourcis Markdown](docId\:KNz2rYwFSXk8e_9SX8G_G) pour voir davantage de raccourcis markdown pour d’autres blocs. ## Exemples Des exemples ? Pour une Link Grid ? C’est comme trouver de l’eau dans l’océan. Impossible de passer à côté. Nos docs en regorgent ! Sur cette page, il y en a 8, plus des images. ## CSS personnalisé Au fil de notre vaste expérience, nous nous sommes consacrés à aider les clients à personnaliser leur documentation selon leurs préférences uniques. De plus, nous avons offert une assistance précieuse qui, nous le croyons, vous sera également très utile pour concevoir une documentation exceptionnelle pour votre produit. [Découvrez le fonctionnement du CSS personnalisé](docId\:fbgAaAU9N8TX5q219TA7K) ### Définir un lien comme collant en bas Définissez vos liens à l’intérieur de la Link Grid comme collants en bas de la carte. ```css ``` *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** Trouver d’autres blocs** Découvrez de nouvelles façons et de nouveaux blocs pour créer des pages de documentation superbes et fonctionnelles. [Consultez tous les blocs](docId\:oSw7o7IGH93-6KHkyg-eL) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** Besoin d’aide? ⬇️** Utilisez la **bulle de discussion** **bleue** dans le coin inférieur droit. Ou essayez **Chat IA** (depuis la barre de recherche) pour obtenir des réponses rapides. ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** Votre avis compte** Utilisez le formulaire de rétroaction ci-dessous, de manière anonyme. Ou posez une question dans la **section Questions/Réponses** et notre équipe ou l’IA vous fournira une solution. ::: ::::