> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/use-cases/building-a-record-detail-page-header.md).

# Créer un en-tête de page de détail d’enregistrement

## Aperçu

Ce tutoriel va construire un en-tête de page d’enregistrement pour un site Experience Cloud en intégrant divers composants, y compris des types Standard et Avonni. Les composants suivants seront utilisés :

* [Conteneur Avonni](/experience-cloud/experience-cloud-fr/experience-components/ax-container.md)
* [Objet média Avonni](/experience-cloud/experience-cloud-fr/experience-components/ax-media-object.md)
* [Avatar Avonni](/experience-cloud/experience-cloud-fr/experience-components/ax-avatar.md)
* Éditeur de contenu riche

<details>

<summary>Pourquoi utiliser ces composants ?</summary>

#### Conteneur Avonni

* **Objectif :** Le Conteneur Avonni servira d’élément fondamental de notre en-tête. Il fournit un espace structuré et personnalisable pour tous les autres composants.
* **Pourquoi l’utiliser :** Il est essentiel pour maintenir une mise en page claire et peut être stylisé afin de s’aligner sur l’image de marque du site, garantissant ainsi un aspect cohérent. Le conteneur regroupera l’objet média, l’avatar et le contenu riche dans une unité cohérente.

#### Objet média Avonni

* **Objectif :** Ce composant affiche un média à côté d’un bloc de contenu, généralement une image ou une vidéo accompagnée de texte.
* **Pourquoi l’utiliser :** Dans l’en-tête, l’Objet média Avonni peut afficher élégamment une image ou une icône pertinente à côté des informations principales de l’enregistrement, comme une image de produit à côté de sa description. Cette association du média et du contenu renforce l’engagement visuel et fournit un contexte immédiat aux utilisateurs.

#### Avatar Avonni

* **Objectif :** L’Avatar Avonni affiche l’image d’un utilisateur ou d’une entité, qui peut représenter une personne, une entreprise ou toute autre entité.
* **Pourquoi l’utiliser :** Dans l’en-tête, l’avatar peut représenter visuellement le sujet de l’enregistrement, par exemple en affichant la photo de profil d’un utilisateur pour un enregistrement de contact. Cela ajoute une touche personnelle et rend l’en-tête plus pertinent et plus attrayant visuellement.

#### Éditeur de contenu riche

* **Objectif :** L’Éditeur de contenu riche permet de créer et de modifier du contenu texte enrichi, avec diverses options de mise en forme.
* **Pourquoi l’utiliser :** Ce composant peut être utilisé dans l’en-tête pour fournir des informations détaillées sur l’enregistrement de manière formatée et conviviale. Il offre une grande flexibilité dans la présentation du texte, qu’il s’agisse d’une brève description, d’informations de contact ou de toute autre donnée pertinente concernant l’enregistrement.

</details>

<figure><img src="/files/4349652501b8e0b7d46242bb780d6bf8d9e0f751" alt=""><figcaption><p>Résultat final</p></figcaption></figure>

## Guide de configuration interactif étape par étape

{% @arcade/embed url="<https://app.arcade.software/share/WSIrtqDu3Qz8KKpXTMmz>" flowId="WSIrtqDu3Qz8KKpXTMmz" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/use-cases/building-a-record-detail-page-header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.