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:
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.
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
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.
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.
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
Individua il componente di origine: Trova un componente con l'aspetto desiderato (colori, font, ecc.).
Copia gli stili: Nelle impostazioni Aspetto del componente, fai clic su "Copia proprietà di stile".
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
Crea il CSS: Scrivi i tuoi stili CSS personalizzati, definendo le modifiche desiderate.
Aggiungi al sito: Usa le funzionalità standard di Experience Cloud per includere questo CSS nel markup dell'head del tuo sito.
Applica ai componenti: Aggiungi i nomi delle tue classi CSS personalizzate ai componenti Avonni
Ultimo aggiornamento
È stato utile?