#  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.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fsj6SXXtH3ED3tLhmd7vW%2F2024-04-14_09-52-47.png?alt=media&#x26;token=663c39e9-01e4-4e0b-94c5-2a58296eb147" alt="" width="375"><figcaption></figcaption></figure>

{% 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.&#x20;

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.&#x20;
{% 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.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZRgUVwgJixDJwEAB0To0%2F2023-10-24_14-25-56.png?alt=media&#x26;token=abe9f0c7-6ba6-4780-9aea-5ce772e3fcda" alt="" width="156"><figcaption></figcaption></figure>

***

## Copiar/Pegar propiedades de estilo

Esta función simplifica la creación de un estilo visual coherente para tus Experience Sites.&#x20;

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.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3XZBGjaCNsSo6n2qLkTP%2FMay%203%2011-06-11.gif?alt=media&#x26;token=cb74e278-d3b2-4fad-b927-c03b483a227c" alt=""><figcaption></figcaption></figure>

***

## 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

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fg5yP6eXs4ehhEVjwU0CH%2F2023-10-24_14-27-15.png?alt=media&#x26;token=cc574a34-35ea-46fc-a0f3-b61976aac9cf" alt="" width="174"><figcaption></figcaption></figure>

{% 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 %}