# Aspetto
## Panoramica
Questa guida spiega come stilizzare e dare il brand ai Componenti Avonni all'interno di Salesforce Experience Cloud. Sia che tu stia utilizzando il moderno framework LWR o il tradizionale framework Aura, puoi personalizzare l'aspetto del tuo sito per creare un'esperienza utente fluida.
### **Cosa imparerai**
* **Compatibilità del framework**: Distinguiere tra le opzioni di stile disponibili in LWR rispetto ad Aura.
* **Personalizzazione a livello di componente**: Rifinisci i singoli componenti per adattarli al tuo brand.
* **Integrazione del tema**: Scopri come i componenti ereditano gli stili globali del sito.
* **Strumenti di efficienza**: Usa "Copia/Incolla proprietà di stile" per mantenere la coerenza.
* **Stilizzazione avanzata**: Usa CSS personalizzato per un controllo granulare
***
## Specifiche dei framework: LWR vs. Aura
È importante identificare quale framework sta utilizzando il tuo sito Experience, poiché gli strumenti di stilizzazione disponibili differiscono significativamente:
| Caratteristica | Framework LWR | Framework Aura |
| ----------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------ |
| **Scheda Stile e Visibilità** | Disponibile. Gestita direttamente da Salesforce per spaziature e layout granulari. | Non disponibile. |
| **Scheda Aspetto Avonni** | Disponibile per una stilizzazione approfondita dei componenti. | Disponibile per la stilizzazione dei componenti. |
| **Binding del tema globale** | Supporto completo per set di branding DXP. | Limitato all'ereditarietà del tema standard. |
{% hint style="warning" %}
#### Importante
La scheda Stile e Visibilità è una funzionalità nativa di Salesforce gestita direttamente dalla piattaforma. È disponibile solo per i siti costruiti con il **framework LWR**. Se stai usando un **sito Aura** , userai principalmente le impostazioni Aspetto specifiche di Avonni e il CSS globale del sito
{% endhint %}
***
## Stilizzazione individuale
Ogni Componente Avonni offre una sezione Aspetto dedicata in cui puoi regolare la sua stilizzazione. Queste impostazioni ti permettono di personalizzare l'aspetto dei tuoi componenti.
{% hint style="warning" %}
I Componenti Avonni nel sito Experience sono progettati per adattare automaticamente le impostazioni di stile predefinite dal tema del tuo sito.
Tuttavia, se apporti modifiche di stile a livello di componente, queste modifiche sovrascriveranno specificamente gli stili predefiniti corrispondenti impostati dal tema del tuo sito. Questa funzionalità consente una personalizzazione del design più precisa e individualizzata per ogni componente.
{% endhint %}
## Coerenza del tema
* **Adozione automatica del tema:** I Componenti Avonni adottano per impostazione predefinita le impostazioni del tema del tuo sito.
* **Sovrascrivi con stili personalizzati:** Eventuali modifiche apportate a livello di componente sovrascriveranno gli stili predefiniti del tema, offrendo un controllo preciso del design per ogni componente.
***
## Integrazione con le impostazioni del tema globale
* **Integrazione del tema senza soluzione di continuità:** Collega senza sforzo i Componenti Avonni alle impostazioni del tema globale della tua Piattaforma di Esperienze Digitali (DXP).
* **Nessun inserimento manuale di stili richiesto:** Collega direttamente gli attributi di stilizzazione dei componenti ai valori di tema predefiniti del DXP, eliminando la necessità di inserimenti manuali di stile.
***
## Copia/Incolla proprietà di stile
Questa funzione semplifica la creazione di uno stile visivo coerente per i tuoi siti Experience.
Ecco come funziona e i vantaggi:
### **Come usarlo**
1. **Individua il componente sorgente:** Trova un componente con l'aspetto desiderato (colori, font, ecc.).
2. **Copia stili:** Nelle impostazioni Aspetto del componente, fai clic su "Copia proprietà di stile."
3. **Applica al componente di destinazione:** Seleziona il componente che vuoi stilizzare, quindi scegli "Incolla proprietà di stile" nelle sue impostazioni Aspetto.
### **Perché è utile**
* **Coerenza visiva:** Mantieni senza sforzo un aspetto unitario per il tuo sito.
* **Risparmio di tempo:** Evita regolazioni ripetitive degli stili su più componenti.
* **Design semplificato:** Concentrati sulla creazione di ottimi contenuti e layout, mentre la stilizzazione diventa più veloce e semplice.
***
## Stilizzazione con CSS personalizzato
Vuoi personalizzare l'aspetto dei Componenti Avonni oltre le opzioni di stile integrate? Ecco come:
### **Perché usare il CSS personalizzato**
* **Branding unico:** Allinea i componenti precisamente al design del tuo sito o alle linee guida del brand.
* **Effetti avanzati:** Ottieni elementi visivi non possibili con le impostazioni standard (es. animazioni speciali, effetti hover, ecc.).
* **Controllo completo:** Ottieni l'aspetto esatto che desideri senza limitazioni.
### **Come funziona**
1. **Crea CSS:** Scrivi i tuoi stili CSS personalizzati, definendo le modifiche desiderate.
2. **Aggiungi al sito:** Usa le funzionalità standard di Experience Cloud per includere questo CSS nel markup head del tuo sito.
3. **Applica ai componenti:** Aggiungi i nomi delle tue classi CSS personalizzate ai Componenti Avonni
{% hint style="warning" %}
#### Nota sul framework
In **LWR**, spesso puoi usare la scheda "Stile" per gli spazi (margine/padding), mentre in **sito Aura**, questi devono essere gestiti tramite classi CSS personalizzate o le impostazioni di spaziatura interne 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-it/pannello-proprieta/aspetto.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.