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

# Creación de un encabezado de página de detalles de registro

## Resumen

Este tutorial construirá un encabezado de página de registro para un sitio de Experience Cloud mediante la integración de varios componentes, incluidos tipos estándar y Avonni. Se utilizarán los siguientes componentes:

* [Contenedor Avonni](/experience-cloud/experience-cloud-es/experience-components/ax-container.md)
* [Objeto multimedia Avonni](/experience-cloud/experience-cloud-es/experience-components/ax-media-object.md)
* [Avatar Avonni](/experience-cloud/experience-cloud-es/experience-components/ax-avatar.md)
* Editor de contenido enriquecido

<details>

<summary>¿Por qué usar estos componentes?</summary>

#### Contenedor Avonni

* **Propósito:** El Contenedor Avonni actuará como el elemento fundamental de nuestro encabezado. Proporciona un espacio estructurado y personalizable para todos los demás componentes.
* **Por qué usarlo:** Es esencial para mantener un diseño limpio y puede estilizarse para alinearse con la marca del sitio, garantizando una apariencia coherente. El contenedor encapsulará el objeto multimedia, el avatar y el contenido enriquecido en una unidad cohesionada.

#### Objeto multimedia Avonni

* **Propósito:** Este componente muestra contenido multimedia junto a un bloque de contenido, normalmente una imagen o un video junto con texto.
* **Por qué usarlo:** En el encabezado, el Objeto multimedia Avonni puede mostrar elegantemente una imagen o un icono relevante junto a la información principal del registro, como una imagen de producto junto a su descripción. Esta combinación de contenido multimedia con contenido mejora el atractivo visual y proporciona contexto inmediato a los usuarios.

#### Avatar Avonni

* **Propósito:** Avonni Avatar muestra una imagen de un usuario o entidad, que puede representar a una persona, una empresa o cualquier otra entidad.
* **Por qué usarlo:** En el encabezado, el avatar puede representar visualmente el sujeto del registro, como mostrar la foto de perfil de un usuario para un registro de contacto. Añade un toque personal y hace que el encabezado sea más cercano y visualmente atractivo.

#### Editor de contenido enriquecido

* **Propósito:** El Editor de contenido enriquecido permite crear y editar contenido de texto enriquecido, incluidas varias opciones de formato.
* **Por qué usarlo:** Este componente puede usarse en el encabezado para proporcionar información detallada sobre el registro de una manera formateada y fácil de usar. Ofrece flexibilidad en la forma en que se presenta el texto, ya sea una breve descripción, información de contacto o cualquier otro dato relevante sobre el registro.

</details>

<figure><img src="/files/587cf9064edcfd8668a9edbcd7f1763f98e32caa" alt=""><figcaption><p>Resultado final</p></figcaption></figure>

## Guía interactiva de configuración paso a paso

{% @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-es/tutoriales/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.