> 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-it/pannello-proprieta/appearance.md). # Aspetto ## Panoramica Questa guida spiega come personalizzare lo stile e il branding dei componenti Avonni all'interno di Salesforce Experience Cloud. Che tu stia usando il moderno framework LWR o il tradizionale framework Aura, puoi adattare l'aspetto e lo stile del tuo sito per creare un'esperienza utente fluida. ### **Cosa imparerai** * **Compatibilità del framework**: Distinguere tra le opzioni di stile disponibili in LWR rispetto ad Aura. * **Personalizzazione a livello di componente**: Rifinire i singoli componenti per farli corrispondere 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 il CSS personalizzato per un controllo granulare *** ## Specifiche del framework: LWR vs. Aura È importante identificare quale framework sta usando il tuo Experience Site, poiché gli strumenti di stile disponibili differiscono notevolmente: | Funzionalità | Framework LWR | Framework Aura | | -------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------- | | **Scheda Stile e visibilità** | Disponibile. Gestito direttamente da Salesforce per spaziatura e layout granulari. | Non disponibile. | | **Scheda Aspetto di Avonni** | Disponibile per una personalizzazione approfondita dei componenti. | Disponibile per la personalizzazione dei componenti. | | **Collegamento al tema globale** | Supporto completo per i set di branding DXP. | Limitato all'ereditarietà standard del tema. | {% hint style="warning" %} #### Importante La scheda Stile e visibilità è una funzionalità nativa di Salesforce gestita direttamente dalla piattaforma. È disponibile solo per i siti creati con il **framework LWR**. Se stai usando un **Aura** sito, 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 modificarne lo stile. Queste impostazioni ti permettono di personalizzare l'aspetto dei tuoi componenti.
{% hint style="warning" %} I componenti Avonni in Experience Site sono progettati per adattarsi automaticamente alle impostazioni di stile predefinite del tema del tuo sito. Tuttavia, se apporti modifiche di stile a livello di componente, queste sovrascriveranno specificamente gli stili predefiniti corrispondenti impostati dal tema del tuo sito. Questa funzione consente una personalizzazione del design più precisa e individuale per ogni componente. {% endhint %} ## Coerenza del tema * **Adozione automatica del tema:** I componenti Avonni si adattano per impostazione predefinita alle impostazioni del tema del tuo sito. * **Sovrascrivi con stili personalizzati:** Qualsiasi modifica apportata a livello di componente sovrascriverà gli stili predefiniti del tema, offrendo un controllo preciso del design per ogni componente. *** ## Integrazione con le impostazioni globali del tema * **Integrazione fluida del tema:** Collega senza sforzo i componenti Avonni alle impostazioni globali del tema della tua Digital Experience Platform (DXP). * **Nessun inserimento manuale di stile richiesto:** Collega direttamente gli attributi di stile dei componenti ai valori del tema predefiniti di 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 Experience Site. Ecco come funziona e quali sono i vantaggi: ### **Come usarlo** 1. **Individua il componente di origine:** Trova un componente con l'aspetto desiderato (colori, font, ecc.). 2. **Copia gli stili:** Nelle impostazioni Aspetto del componente, fai clic su "Copia proprietà di stile". 3. **Applica al componente di destinazione:** Seleziona il componente che desideri stilizzare, quindi scegli "Incolla proprietà di stile" nelle sue impostazioni Aspetto. ### **Perché è utile** * **Coerenza visiva:** Mantieni senza sforzo un aspetto uniforme per il tuo sito. * **Fa risparmiare tempo:** Evita regolazioni di stile ripetitive su più componenti. * **Design semplificato:** Concentrati sulla creazione di contenuti e layout efficaci, mentre la stilizzazione diventa più rapida e semplice.
*** ## Stilizzazione con CSS personalizzato Vuoi personalizzare l'aspetto dei componenti Avonni oltre le opzioni di stile integrate? Ecco come: ### **Perché usare CSS personalizzato** * **Branding unico:** Adatta i componenti con precisione al design del tuo sito web o alle linee guida del brand. * **Effetti avanzati:** Ottieni elementi visivi non possibili con le impostazioni standard (ad es. animazioni speciali, effetti hover, ecc.). * **Controllo completo:** Ottieni l'aspetto esatto che desideri senza limitazioni. ### **Come funziona** 1. **Crea il 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 dell'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 la spaziatura (margin/padding), mentre in **Aura**, devono essere gestite tramite classi CSS personalizzate o le impostazioni di spaziatura interne 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-it/pannello-proprieta/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.