🇮🇹 IT

5.2 Editor del Tema

L'Editor del Tema ti permette di personalizzare l'aspetto visivo dell'incorporamento web del tuo questionario. Puoi modificare i token di design globali (colori, tipografia, raggio del bordo), stilizzare singoli elementi (schede, pulsanti, input, barra di progresso, schermate di completamento) e scrivere CSS personalizzato — il tutto con un'anteprima live che si aggiorna mentre apporti modifiche.

Editor del Tema del Questionario — Editor del Tema — schede degli elementi a sinistra, controlli delle proprietà al centro e anteprima live a destra.

Apertura dell'Editor del Tema

Apri un questionario nell'editor Naviga su Questionari nella barra laterale e clicca il questionario che vuoi stilizzare.
Clicca il pulsante "Tema" Nella barra superiore dell'editor, clicca Tema. L'Editor del Tema si apre in una pagina dedicata con un layout a tre pannelli.

Panoramica dell'Interfaccia

L'Editor del Tema e organizzato in tre pannelli affiancati:

Pannello	Posizione	Scopo
Selettore Elementi	Barra laterale sinistra	Elenca ogni elemento stilizzabile come una scheda. Clicca una scheda per caricare le sue proprieta nel pannello centrale.
Controlli Proprieta	Centro	Mostra le proprieta CSS per l'elemento selezionato. I campi colore usano un selettore colori; gli altri valori usano campi di testo.
Anteprima Live	Destra	Visualizza un'anteprima realistica del questionario che si aggiorna istantaneamente quando modifichi le proprieta. Include un selettore desktop/mobile.

Token di Design Globali

La scheda Token Globali (il primo elemento nella barra laterale) definisce i token di design che si propagano a tutti gli altri elementi. Modificare un token qui aggiorna ogni elemento che lo eredita.

Token	Predefinito	Descrizione
primary_color	`#6366f1` (indaco)	Colore d'accento usato per pulsanti, opzioni selezionate, riempimento progresso ed evidenziazioni interattive in tutto il questionario.
surface_color	Bianco	Colore di sfondo per le schede e il contenitore principale.
text_color	Grigio scuro	Colore del testo principale per domande, descrizioni, etichette e corpo del testo.
border_radius	`8px`	Arrotondamento angoli globale applicato a schede, pulsanti, input e chip delle opzioni.
font_family	Predefinito di sistema	Carattere tipografico utilizzato in tutto il questionario.
font_size	`16px`	Dimensione base del carattere. Gli altri elementi si scalano relativamente a questo valore.

Suggerimento: Imposta prima i token globali — si propagano a tutti gli elementi. Poi sovrascrivi i singoli elementi solo dove hai bisogno di una deviazione specifica.

Stilizzazione Elementi

Sotto la scheda Token Globali, la barra laterale elenca ogni elemento stilizzabile. Clicca qualsiasi scheda per caricare le sue proprieta CSS nel pannello centrale.

Scheda Elemento	Cosa Stilizza
Contenitore	Il wrapper esterno dell'incorporamento del questionario.
Scheda	La scheda domanda che contiene il contenuto di ogni passaggio.
Domanda	Il titolo del testo della domanda.
Descrizione	Il testo descrittivo visualizzato sotto la domanda.
Opzioni	I pulsanti delle opzioni di risposta nel loro stato predefinito (non selezionato).
Opzione (selezionata)	I pulsanti delle opzioni di risposta quando il rispondente li ha selezionati.
Pulsante	Il pulsante invia / avanti nel suo stato predefinito.
Pulsante (hover)	Il pulsante invia / avanti quando il cursore e sopra.
Input	Campi di testo e aree di testo per risposte a testo libero e testo validato.
Input (focus)	Campi di testo e aree di testo quando sono in focus.
Etichette	Etichette dei campi sopra gli input.
Testo errore	Messaggi di errore di validazione mostrati sotto gli input.
Domanda FAQ	Il testo della domanda cliccabile nella fisarmonica FAQ.
Risposta FAQ	Il testo della risposta espansa nella fisarmonica FAQ.
Immagini	Allegati immagine visualizzati nella galleria della domanda.
File	Schede allegati file non immagine (PDF, DOC, ecc.).
Schermata successo	La schermata di completamento mostrata quando la sessione termina con stato successo.
Schermata fallimento	La schermata di completamento mostrata quando la sessione termina con stato fallimento.
Barra di progresso	La traccia di sfondo dell'indicatore di progresso.
Riempimento progresso	La porzione riempita dell'indicatore di progresso che avanza man mano che il rispondente progredisce.

Proprieta CSS per Elemento

Quando selezioni una scheda elemento, il pannello centrale visualizza le proprieta CSS disponibili per quell'elemento. I controlli si adattano al tipo di proprieta:

Campi colore — usano un selettore colori. Clicca il campione per aprire il selettore, o digita direttamente un valore esadecimale/RGB.
Campi dimensione e spaziatura — campi di testo che accettano valori CSS (es. 12px, 1rem, 0.5em).
Campi font e testo — campi di testo per famiglie di font, pesi del font e altri valori tipografici.

Le modifiche hanno effetto immediato nell'anteprima live sulla destra. Le proprieta lasciate vuote ereditano dai token globali o dai valori predefiniti del browser.

Avanzato: CSS Personalizzato

In fondo al pannello dei controlli proprieta, una sezione espandibile Avanzato — CSS Grezzo fornisce un editor di codice dove puoi scrivere regole CSS personalizzate con ambito limitato al questionario. Usalo per stilizzazioni che vanno oltre cio che offrono i controlli proprieta — animazioni, media query, pseudo-elementi o selettori complessi.

Vincolo	Dettagli
Lunghezza massima	10.000 caratteri.
Ambito	Tutte le regole vengono automaticamente limitate al contenitore del questionario — non influenzeranno la pagina ospitante.
Sanificazione	Pattern non sicuri (`expression()`, `javascript:`, `@import`) vengono rimossi al salvataggio.

Pattern sanificati: I seguenti vengono rimossi automaticamente quando salvi: expression(), URL javascript: e regole @import. Questo previene potenziali problemi di sicurezza nel questionario incorporato.

Anteprima

Il pannello destro mostra un'anteprima live del questionario come lo vedranno i rispondenti. L'anteprima si aggiorna in tempo reale mentre modifichi proprieta o token.

Anteprima desktop — mostra il questionario a larghezza piena (vista predefinita).
Anteprima mobile — limita l'anteprima a un viewport mobile stretto per verificare il layout responsive.

Passa tra desktop e mobile usando le icone dispositivo in alto nel pannello di anteprima.

Salvataggio e Ripristino

Azione	Descrizione
Salva	Salva tutte le modifiche al tema (token, proprieta degli elementi e CSS personalizzato). Il tema salvato viene applicato immediatamente all'incorporamento web live.
Ripristina Elemento	Ripristina le proprieta dell'elemento attualmente selezionato ai valori predefiniti. Gli altri elementi non vengono influenzati.
Ripristina Tutto	Ripristina l'intero tema — tutti i token, tutte le proprieta degli elementi e il CSS personalizzato — ai valori di fabbrica predefiniti. Appare una finestra di conferma prima che il ripristino venga applicato.
Indietro	Torna all'editor del grafo del questionario. Le modifiche non salvate vengono perse.

Modifiche non salvate: Se navighi via usando Indietro senza salvare, le tue modifiche vengono perse. Clicca sempre Salva prima di uscire dall'Editor del Tema.

Suggerimento: Usa Ripristina Elemento per annullare le modifiche a un singolo elemento senza influenzare il resto del tema. Usa Ripristina Tutto solo quando vuoi ricominciare il tema da zero.