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:
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.
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
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.
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.
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
Individua il componente sorgente: Trova un componente con l'aspetto desiderato (colori, font, ecc.).
Copia stili: Nelle impostazioni Aspetto del componente, fai clic su "Copia proprietà di stile."
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
Crea 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 head del tuo sito.
Applica ai componenti: Aggiungi i nomi delle tue classi CSS personalizzate ai Componenti Avonni
Ultimo aggiornamento
È stato utile?