Personalizzazione

Adatta l'aspetto dei tuoi widget al design del tuo sito web. Tutte le impostazioni si trovano nel Widget Builder sotto le Impostazioni di integrazione (icona ingranaggio).

Temi

I temi sono combinazioni di colori predefinite che cambiano l'intero aspetto del tuo widget con un solo clic.

Temi disponibili

Selezionare un tema

1. Apri il Widget Builder
2. Clicca sull'icona ingranaggio (Impostazioni di integrazione)
3. Seleziona la combinazione di colori desiderata sotto "Tema"
4. I colori vengono applicati automaticamente

Colori personalizzati

Seleziona "Colori personalizzati" per impostare ogni colore individualmente. Oppure scegli un tema come punto di partenza e poi regola i singoli colori successivamente.

Colori

Puoi configurare i seguenti colori individualmente:

Cambiare un colore

1. Clicca sul campione di colore accanto al rispettivo colore
2. Scegli un colore con il selettore colore o inserisci un codice esadecimale (es. #84CC16)
3. L'anteprima nel canvas si aggiorna immediatamente

Suggerimento: Usa lo stesso colore primario del tuo sito web -- in questo modo il widget si integra perfettamente.

Impostazioni del contenitore

Queste impostazioni influenzano la cornice esterna dell'intero widget.

Larghezza

Larghezza massima

Limita la larghezza anche con un'impostazione in percentuale:

Spaziatura interna (Padding)

Arrotondamento degli angoli (Border Radius)

Controlla l'arrotondamento degli angoli delle schede e degli elementi all'interno del widget. Valori da 0px (quadrato) a 32px (fortemente arrotondato).

Ombra

Attiva o disattiva un'ombra sottile attorno al widget.

Layout specifici per widget

Alcuni widget offrono diverse opzioni di layout:

Griglia

• Griglia responsive automatica
• Gli elementi riempiono lo spazio disponibile
• Diventa automaticamente a colonna singola su schermi piccoli

Lista

• Elenco verticale
• Ogni elemento utilizza l'intera larghezza
• Ideale per rappresentazioni dettagliate

Carosello

• Scorrimento orizzontale
• Ottimizzato per il tocco su dispositivi mobili
• Navigazione con frecce su desktop

Comportamento responsive

Tutti i widget si adattano automaticamente alla dimensione dello schermo:

Non devi configurare nulla -- il comportamento responsive funziona automaticamente.

Terminologia dinamica

I widget utilizzano automaticamente le etichette che hai impostato nel tuo studio:

• Invece di "Trainer", puoi usare Coach, Istruttore o Terapista
• Invece di "Corsi", puoi usare Workshop, Seminari o Sessioni

Cambiare la terminologia

1. Vai a Impostazioni → Generali → Terminologia
2. Seleziona i termini appropriati per il tuo studio
3. I widget adottano la modifica automaticamente -- nessun nuovo embedding necessario

Branding

Applicato automaticamente

I widget ereditano automaticamente:

• Il nome del tuo studio
• La terminologia scelta
• I colori configurati

Isolamento dal tuo sito web

Il widget funziona in un'area isolata (Shadow DOM). Questo significa:

• Il CSS del tuo sito web non influenza l'aspetto del widget
• Il CSS del widget non modifica nulla sul tuo sito web
• Colori e stile sono controllati esclusivamente tramite le impostazioni del widget

Best practice

Abbina il tuo sito web

• Usa lo stesso colore primario del tuo sito web
• Scegli un arrotondamento degli angoli simile
• Regola lo sfondo (trasparente di solito funziona meglio)

Meno e meglio

• Le impostazioni predefinite sono ottimizzate per la maggior parte dei siti web
• Inizia con un tema adatto e regola solo il colore primario
• Testa sempre su desktop e mobile

Test

• Usa la funzione di anteprima nel builder
• Controlla il widget sul tuo sito web reale
• Testa su diversi dispositivi e browser
• Naviga: clicca sui corsi, usa i filtri, visualizza i trainer

Domande frequenti

Posso aggiungere CSS personalizzato al widget?

No. Il widget funziona in un Shadow DOM isolato che non puo essere indirizzato dall'esterno tramite CSS. Tutte le personalizzazioni visive vengono effettuate tramite le impostazioni nel Widget Builder.

Perche il widget appare diverso sul mio sito web rispetto all'anteprima?

Il widget si adatta alla larghezza del contenitore in cui si trova sul tuo sito web. Se il contenitore e piu stretto che nel builder, il layout appare leggermente diverso. Il contenuto si adatta automaticamente pero.

Posso cambiare il font?

I widget utilizzano font di sistema per tempi di caricamento rapidi. Un font personalizzato non e attualmente configurabile.

Le modifiche sono visibili immediatamente?

Si. Non appena clicchi "Salva" nel Widget Builder, le modifiche sono immediatamente visibili sul tuo sito web. Non devi reinserire il codice di embedding.

Devo aggiornare il codice di embedding quando faccio modifiche?

No. Il codice di embedding rimane sempre lo stesso. Tutte le modifiche al design, ai widget e ai contenuti vengono applicate automaticamente.

Prossimi passi

• Incorpora il widget sul tuo sito web
• Scopri il Widget Builder
• Torna alla panoramica