> 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-it/tutorial/use-cases/building-a-record-detail-page-header.md).

# Creazione di un'intestazione per una pagina di dettaglio record

## Panoramica

Questo tutorial creerà un'intestazione della pagina record per un sito Experience Cloud integrando vari componenti, inclusi sia tipi Standard sia Avonni. Verranno utilizzati i seguenti componenti:

* [Avonni Container](/experience-cloud/experience-cloud-it/experience-components/ax-container.md)
* [Avonni Media Object](/experience-cloud/experience-cloud-it/experience-components/ax-media-object.md)
* [Avonni Avatar](/experience-cloud/experience-cloud-it/experience-components/ax-avatar.md)
* Editor di contenuti rich text

<details>

<summary>Perché usare questi componenti?</summary>

#### Avonni Container

* **Scopo:** L'Avonni Container fungerà da elemento fondamentale della nostra intestazione. Offre uno spazio strutturato e personalizzabile per tutti gli altri componenti.
* **Perché usarlo:** È essenziale per mantenere un layout pulito e può essere stilizzato per allinearsi al branding del sito, garantendo un aspetto coerente. Il container racchiuderà l'oggetto multimediale, l'avatar e i contenuti rich in un'unità coerente.

#### Avonni Media Object

* **Scopo:** Questo componente visualizza contenuti multimediali accanto a un blocco di contenuto, tipicamente un'immagine o un video insieme al testo.
* **Perché usarlo:** Nell'intestazione, l'Avonni Media Object può mostrare in modo elegante un'immagine o un'icona pertinente accanto alle informazioni principali del record, come un'immagine del prodotto accanto alla sua descrizione. Questa combinazione di contenuti multimediali e testo migliora il coinvolgimento visivo e fornisce agli utenti un contesto immediato.

#### Avonni Avatar

* **Scopo:** Avonni Avatar visualizza l'immagine di un utente o di un'entità, che può rappresentare una persona, un'azienda o qualsiasi altra entità.
* **Perché usarlo:** Nell'intestazione, l'avatar può rappresentare visivamente il soggetto del record, ad esempio mostrando l'immagine del profilo di un utente per un record contatto. Aggiunge un tocco personale e rende l'intestazione più immediata e visivamente gradevole.

#### Editor di contenuti rich text

* **Scopo:** L'Editor di contenuti rich consente di creare e modificare contenuti di testo formattato, includendo varie opzioni di formattazione.
* **Perché usarlo:** Questo componente può essere utilizzato nell'intestazione per fornire informazioni dettagliate sul record in modo formattato e intuitivo per l'utente. Offre flessibilità nella presentazione del testo, che si tratti di una breve descrizione, informazioni di contatto o qualsiasi altro dato rilevante sul record.

</details>

<figure><img src="/files/1a00307c133942263ee925430b529b723ea73079" alt=""><figcaption><p>Risultato finale</p></figcaption></figure>

## Guida interattiva alla configurazione passo dopo passo

{% @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-it/tutorial/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.