> 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/panel-de-propiedades/appearance.md). # Apariencia ## Resumen Esta guía explica cómo dar estilo y personalizar la marca de los Componentes Avonni dentro de Salesforce Experience Cloud. Tanto si usas el marco moderno LWR como el marco tradicional Aura, puedes adaptar la apariencia de tu sitio para crear una experiencia de usuario fluida. ### **Lo que aprenderás** * **Compatibilidad con frameworks**: Distinguir entre las opciones de estilo disponibles en LWR frente a Aura. * **Personalización a nivel de componente**: Ajustar con precisión componentes individuales para que coincidan con tu marca. * **Integración de temas**: Aprende cómo los componentes heredan los estilos globales del sitio. * **Herramientas de eficiencia**: Usa "Copiar/Pegar propiedades de estilo" para mantener la coherencia. * **Estilo avanzado**: Usa CSS personalizado para un control granular *** ## Especificidades del framework: LWR frente a Aura Es importante identificar qué framework utiliza tu sitio de Experience, ya que las herramientas de estilo disponibles difieren significativamente: | Característica | Framework LWR | Framework Aura | | -------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------- | | **Pestaña Estilo y visibilidad** | Disponible. Gestionada directamente por Salesforce para un espaciado y diseño granulares. | No disponible. | | **Pestaña Apariencia de Avonni** | Disponible para un estilizado profundo de componentes. | Disponible para el estilizado de componentes. | | **Vinculación global del tema** | Compatibilidad total con los conjuntos de branding de DXP. | Limitada a la herencia estándar del tema. | {% hint style="warning" %} #### Importante La pestaña Estilo y visibilidad es una función nativa de Salesforce gestionada directamente por la plataforma. Solo está disponible para sitios creados con el **framework LWR**. Si estás usando un **Aura** sitio, usarás principalmente la configuración de Apariencia específica de Avonni y el CSS global del sitio {% endhint %} *** ## Estilizado individual Cada componente Avonni ofrece una sección de Apariencia dedicada donde puedes ajustar su estilo. Esta configuración te permite personalizar la apariencia de tus componentes.
{% hint style="warning" %} Los componentes Avonni en Experience Site están diseñados para adaptarse automáticamente a la configuración de estilo predeterminada del tema de tu sitio. Sin embargo, si realizas ajustes de estilo a nivel de componente, estos cambios anularán específicamente los estilos predeterminados correspondientes establecidos por el tema de tu sitio. Esta función permite una personalización de diseño más precisa e individualizada para cada componente. {% endhint %} ## Coherencia del tema * **Adopción automática del tema:** Los componentes Avonni se adaptan de forma predeterminada a la configuración del tema de tu sitio. * **Sobrescritura con estilos personalizados:** Cualquier ajuste realizado a nivel de componente anulará los estilos predeterminados del tema, ofreciendo un control de diseño preciso para cada componente. *** ## Integración con la configuración global del tema * **Integración perfecta del tema:** Vincula sin esfuerzo los componentes Avonni a la configuración global del tema de tu Plataforma de Experiencia Digital (DXP). * **No se requieren entradas manuales de estilo:** Conecta directamente los atributos de estilo del componente con los valores de tema predefinidos de DXP, eliminando la necesidad de entradas manuales de estilo.
*** ## Copiar/Pegar propiedades de estilo Esta función simplifica la creación de un estilo visual cohesivo para tus sitios de Experience. Así es como funciona y los beneficios: ### **Cómo usarlo** 1. **Localiza el componente de origen:** Busca un componente con la apariencia deseada (colores, fuentes, etc.). 2. **Copiar estilos:** En la configuración de Apariencia del componente, haz clic en "Copiar propiedades de estilo". 3. **Aplicar al componente de destino:** Selecciona el componente al que quieres dar estilo y luego elige "Pegar propiedades de estilo" en su configuración de Apariencia. ### **Por qué es útil** * **Coherencia visual:** Mantén sin esfuerzo un aspecto unificado para tu sitio. * **Ahorra tiempo:** Evita ajustes de estilo repetitivos en varios componentes. * **Diseño simplificado:** Céntrate en crear contenido y diseños excelentes, mientras el estilo se vuelve más rápido y fácil.
*** ## Estilizado con CSS personalizado ¿Quieres adaptar la apariencia de los componentes Avonni más allá de las opciones de estilo integradas? Aquí te explicamos cómo: ### **Por qué usar CSS personalizado** * **Marca única:** Haz que los componentes coincidan con precisión con el diseño o las pautas de marca de tu sitio web. * **Efectos avanzados:** Consigue elementos visuales que no son posibles con la configuración estándar (por ejemplo, animaciones especiales, efectos al pasar el cursor, etc.). * **Control total:** Obtén exactamente el aspecto que deseas sin limitaciones. ### **Cómo funciona** 1. **Crear CSS:** Escribe tus estilos CSS personalizados, definiendo los cambios que deseas. 2. **Añadir al sitio:** Usa las funciones estándar de Experience Cloud para incluir este CSS en el código del encabezado de tu sitio. 3. **Aplicar a los componentes:** Añade los nombres de tus clases CSS personalizadas a los Componentes Avonni
{% hint style="warning" %} #### Nota sobre el framework En **LWR**, a menudo puedes usar la pestaña "Estilo" para el espaciado (margen/relleno), mientras que en **Aura**, esto debe gestionarse mediante clases CSS personalizadas o la configuración de espaciado interna del componente. {% endhint %} --- # 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/appearance.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.