Aspetto
Panoramica
Questa pagina è la tua guida per la stylizzazione dei componenti Avonni per Experience Site. Qui scoprirai come personalizzare l'aspetto del tuo sito per creare un'esperienza utente fluida e visivamente attraente.
Cosa imparerai
Personalizzazione individuale: Regola l'aspetto di ciascun componente Avonni per uno stile distintivo che corrisponda al tuo marchio.
Integrazione del tema: Comprendi come integrare i componenti Avonni con il tema esistente del tuo Experience Site per un look coerente, mantenendo comunque la flessibilità di sovrascrivere gli stili quando necessario.
Strumenti per l'efficienza: Impara a usare le proprietà di stile copia/incolla per stabilire rapidamente una coerenza visiva in tutto il sito.
Styling avanzato: Scopri come utilizzare CSS personalizzato per sbloccare ancora più opzioni di personalizzazione e ottenere effetti unici.
Perché è importante
Un Experience Site ben stilizzato crea una presenza professionale, aumenta l'engagement degli utenti e rafforza l'identità del tuo brand. I componenti Avonni forniscono la flessibilità e gli strumenti per ottenere l'aspetto perfetto senza codifica estensiva
Styling individuale
Ogni componente Avonni offre una sezione Aspetto dedicata in cui puoi regolare il suo stile. Queste impostazioni ti permettono di personalizzare l'aspetto dei tuoi componenti.
I componenti Avonni in Experience Site 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, questi cambiamenti sovrascriveranno specificamente gli stili predefiniti corrispondenti impostati dal tema del tuo sito. Questa funzionalità consente una personalizzazione del design più precisa e individualizzata per ciascun 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 del tema senza soluzione di continuità: Collega senza sforzo i componenti Avonni alle impostazioni del tema globale della tua Digital Experience Platform (DXP).
Nessun input manuale di stile richiesto: Collega direttamente gli attributi di stile del componente ai valori di tema predefiniti della DXP, eliminando la necessità di inserimenti di stile manuali.
Proprietà di stile copia/incolla
Questa funzionalità semplifica la creazione di uno stile visivo coerente per i tuoi Experience Sites.
Ecco come funziona e i vantaggi:
Come usarlo
Individua il componente sorgente: Trova un componente con l'aspetto desiderato (colori, font, ecc.).
Copia gli stili: Nelle impostazioni Aspetto del componente, fai clic su "Copia proprietà stile."
Applica al componente di destinazione: Vai al componente che desideri stilizzare e seleziona "Incolla proprietà stile" nelle sue impostazioni Aspetto.
Perché è utile
Coerenza visiva: Mantieni senza sforzo un aspetto unificato per il tuo sito.
Risparmio di tempo: Evita regolazioni di stile ripetitive su più componenti.
Design semplificato: Concentrati sulla creazione di contenuti e layout eccellenti, mentre la stilizzazione diventa più rapida e semplice.
Styling con CSS personalizzato
Vuoi adattare l'aspetto dei componenti Avonni oltre le opzioni di stile integrate? Ecco come:
Perché usare CSS personalizzato
Branding unico: Allinea i componenti in modo preciso al design del tuo sito web o alle linee guida del marchio.
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?