Grille de liens

12 min

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

Mettre en évidence des informations clés

Créer des cartes accrocheuses pour des annonces ou des mises à jour importantes.

Présenter du contenu connexe Créer des liens vers des ressources supplémentaires, des articles ou des produits.

Créer un répertoire visuellement attrayant

Organiser l’information en cartes cliquables pour une navigation facile.

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

Tapez / pour ouvrir le menu Bloc Archbee

Recherchez Grille de liens et cliquez pour l’insérer

Choisissez comment vous souhaitez le créer.

Link Grid manuel vs. auto-rempli

Grille de liens manuelle

Remplissage automatique de Link Grid

Lorsque vous continuez à rédiger du contenu manuellement dans Link Grid, les prochaines étapes sont :

Choisissez un type d’en-tête.

Vous avez trois options :

Aucun

Couleur

Image

En-tête Aucun

En-tête Couleur

En-tête Image

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

En-têtes extensibles

Listes

Avertissement

Séparateur horizontal

Fichier

Image

Vidéo

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.

Cliquez sur le bouton déroulant Type d'en-tête Inline image et sélectionnez Couleur

Cliquez sur Changer la couleuret sélectionnez votre couleur préférée. Toute modification sera enregistrée automatiquement.

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.

Cliquez sur le bouton déroulant Type d'en-tête Inline image et sélectionnez Image

Cliquez sur le bouton Ajouter une image pour ajouter une image.

Choisissez votre image. Toute modification sera enregistrée automatiquement.

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

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.

Exemple

Ci-dessous se trouve un exemple tiré de notre documentation montrant l’utilisation du remplissage automatique Link Grid dans Exemples d’intégration.

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

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.

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.

Vue en mode lien des éléments Link Grid

Vue en mode carte des éléments Link Grid

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 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

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 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.

3 éléments / ligne

2 éléments / ligne

1 élément / 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 :

Zone visible 3 Link Grids par ligne

Pour clarifier, le contenu principal ou le logo doit être positionné dans cette zone désignée.

positionnement du contenu

Veuillez trouver ci-dessous une démonstration en direct illustrant l’apparence de l’image de couverture et son comportement.

Markdown

Voici comment créer un onglet dans votre document en utilisant du code markdown :

Créer la grille de liens Commencez avec la ligne ::::link-array.

Ajouter une carte de lien Chaque contenu de la Link Grid va entre les marqueurs :::link-array-item et :::.

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.

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"

Ajoutez du contenu à l’intérieur de votre carte de lien.

🚨 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.

## 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 :

élément de liste 1

élément de liste 2

case à cocher non cochée

case à cocher cochée

Consultez la page Utiliser les raccourcis Markdown 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é

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.

<style>
    .ab-link-block-content-wrap .ab-link {
    position: absolute;
    bottom: 0;
    }
</style>

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

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.

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.

Have a question?

Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.

To ask a question or participate in discussions, you'll need to authenticate first.