# Apariencia ## Resumen Esta guía explica cómo diseñar y aplicar la marca a los Componentes Avonni dentro de Salesforce Experience Cloud. Ya sea que estés usando el moderno framework LWR o el tradicional framework Aura, puedes adaptar la apariencia de tu sitio para crear una experiencia de usuario coherente. ### **Lo que aprenderás** * **Compatibilidad del framework**: Distinguir entre las opciones de estilo disponibles en LWR vs. Aura. * **Personalización a nivel de componente**: Ajustar finamente componentes individuales para que coincidan con tu marca. * **Integración del tema**: Aprender cómo los componentes heredan los estilos globales del sitio. * **Herramientas de eficiencia**: Usar "Copiar/Pegar propiedades de estilo" para mantener la coherencia. * **Estilado avanzado**: Usar CSS personalizado para un control granular *** ## Particularidades del framework: LWR vs. 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 estilado profundo de componentes. | Disponible para el estilado de componentes. | | **Vinculación con tema global** | Soporte completo para conjuntos de marca DXP. | Limitado a la herencia de temas estándar. | {% 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 construidos con el **framework LWR**. Si estás utilizando un **sitio Aura** , utilizarás principalmente los ajustes de Apariencia específicos de Avonni y el CSS global del sitio {% endhint %} *** ## Estilado individual Cada Componente Avonni ofrece una sección de Apariencia dedicada donde puedes ajustar su estilo. Estos ajustes te permiten personalizar la apariencia de tus componentes.
{% hint style="warning" %} Los Componentes Avonni en Experience Site están diseñados para adaptar automáticamente los ajustes de estilo predeterminados 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 %} ## Consistencia del tema * **Adopción automática del tema:** Los Componentes Avonni adaptan por defecto los ajustes de tema de tu sitio. * **Anular con estilos personalizados:** Cualquier ajuste realizado a nivel de componente anulará los estilos predeterminados del tema, ofreciendo control de diseño preciso para cada componente. *** ## Integración con los ajustes del tema global * **Integración de tema sin fisuras:** Vincula sin esfuerzo los Componentes Avonni a los ajustes de tema global 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 la 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 coherente para tus Experience Sites. Así es como funciona y los beneficios: ### **Cómo usarlo** 1. **Localiza el componente fuente:** Encuentra un componente con la apariencia deseada (colores, fuentes, etc.). 2. **Copiar estilos:** En los ajustes de Apariencia del componente, haz clic en "Copiar propiedades de estilo." 3. **Aplicar al componente objetivo:** Selecciona el componente que deseas estilizar y luego elige "Pegar propiedades de estilo" en sus ajustes de Apariencia. ### **Por qué es útil** * **Coherencia visual:** Mantén sin esfuerzo una apariencia unificada para tu sitio. * **Ahorra tiempo:** Evita ajustes de estilo repetitivos en varios componentes. * **Diseño optimizado:** Concéntrate en crear excelente contenido y diseños, mientras que el estilado se vuelve más rápido y sencillo.
*** ## Estilado 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 exactamente con el diseño o las directrices de marca de tu sitio web. * **Efectos avanzados:** Logra elementos visuales que no son posibles con los ajustes estándar (por ejemplo, animaciones especiales, efectos al pasar el cursor, etc.). * **Control total:** Obtén la apariencia exacta que deseas sin limitaciones. ### **Cómo funciona** 1. **Crear CSS:** Escribe tus estilos CSS personalizados, definiendo los cambios deseados. 2. **Agregar al sitio:** Usa las funciones estándar de Experience Cloud para incluir este CSS en el marcado head de tu sitio. 3. **Aplicar a componentes:** Agrega 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 **sitio Aura**, estos deben manejarse mediante clases CSS personalizadas o los ajustes de espaciado internos del componente. {% endhint %} --- # Agent Instructions: 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/panel-de-propiedades/apariencia.md?ask= ``` 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.