Barra laterale destra nel costruttore di Form e Survey

La Barra laterale destra nel costruttore di Form e Survey di HITLEAD centralizza le impostazioni di stile e configurazione mentre costruisci. Usa Styles, Themes e Advanced Settings per controllare il layout, l'aspetto degli input, la spaziatura, i colori e molto altro!

INDICE DEI CONTENUTI

Panoramica della barra laterale destra nel costruttore di Form e Survey

Panoramica della barra laterale destra nel costruttore di Form e Survey

La barra laterale destra è il pannello di controllo del costruttore di Form e Survey per le impostazioni visive e di layout. Include le tab Styles, Themes e Advanced, così puoi regolare con precisione l'aspetto e il comportamento del tuo Form o Survey. Avere tutti i controlli di design a portata di mano rende più rapido visualizzare le modifiche in anteprima e mantenere la coerenza.

La barra laterale destra è composta da 3 tab:

Styles: Regola con precisione il layout e l'aspetto del tuo Form o Survey
Themes: Applica preset predefiniti per un branding coerente
Advanced: Accedi a opzioni aggiuntive per esigenze specializzate

Come aprire la barra laterale destra

Per aprire la barra laterale destra dall'interno del costruttore di Form o Survey, clicca il pulsante Styles & Options nell'angolo in alto a destra del builder. Clicca di nuovo il pulsante Style & Options per chiuderla.

Schermata 1 — Barra laterale destra nel costruttore di Form e Survey

Tab Styles

La tab Styles è il punto in cui imposti il layout principale del tuo Form o Survey. Da questa tab controlli il layout, la combinazione di colori e il branding. I controlli disponibili nella tab Styles includono:

Layout: Definisci la disposizione generale e la presentazione dei campi, incluso come appaiono input ed etichette, larghezze, spaziatura, padding e il margine superiore del tuo Form o Survey. Usa i controlli del margine superiore per regolare lo spazio senza CSS personalizzato. Le modifiche si aggiornano in tempo reale nell'anteprima, e lasciare i campi del margine vuoti mantiene la spaziatura predefinita. Clicca qui per ulteriori informazioni sull'allineamento etichette a livello di elemento
- Ora puoi impostare il padding superiore e inferiore a 0 px per un layout completamente a bordo pagina. In precedenza, gli asset pubblicati potevano comunque mostrare spaziatura verticale aggiuntiva anche quando il padding era impostato a 0.
Footer (Survey): Gestisci il contenuto e l'aspetto del footer specificamente per i Survey.
Colors & Background: Imposta le impostazioni del font, scegli i colori di sfondo e, dove supportato, applica immagini di sfondo o intestazione per abbinarle al tuo brand.
Miscellaneous: Applica o disattiva il branding a livello di agenzia

Schermata 2 — Barra laterale destra nel costruttore di Form e Survey

Tab Themes

La tab Themes ti permette di creare rapidamente Form e Survey dall'aspetto professionale usando i preset. Usa Themes per accelerare la configurazione, poi usa Styles per regolare con precisione la spaziatura e le larghezze.

Per applicare un tema al tuo Form o Survey, passa il mouse sul tema desiderato e seleziona Use Theme. Nel pop-up, conferma la selezione cliccando Proceed.

Attenzione: Cambiare tema comporterà la perdita delle modifiche di stile correnti.

Schermata 3 — Barra laterale destra nel costruttore di Form e Survey

Pannello di stile pulsante

Il pannello di stile pulsante centralizza tutti i controlli sull'aspetto del pulsante, così puoi applicare stili raffinati e coerenti senza codice personalizzato. Usa i preset per iniziare velocemente, poi perfeziona tipografia, spaziatura, bordi, angoli, ombre e larghezza.

Nota: I precedenti controlli del pulsante ora appaiono sotto sezioni raggruppate in questo pannello per uno stile più semplice e aggiornamenti più rapidi.

Aprire il pannello di stile pulsante

Apri un Form nel builder.
Clicca l'elemento pulsante sul canvas.
Nella barra laterale destra, espandi Button (o Styles → Button).

Scegliere un tema pulsante (Galleria + Anteprima)

Clicca Select Themes.
Sfoglia le categorie Filled, Border e Text Only.
Passa il mouse o seleziona un tema per visualizzare le modifiche in tempo reale sul canvas.
Clicca Apply per impostare il tema sul pulsante selezionato.

Personalizzare gli stili del pulsante (Controlli raggruppati)

Scopo: Perfezionare il tema per rispettare gli standard del brand senza CSS.

Colors & Background: Imposta i colori del testo, dello sfondo e del bordo.

Typography: Scegli la famiglia e lo spessore del font (supporta i font personalizzati). Imposta dimensione, spaziatura delle lettere e trasformazione del testo.

Layout & Alignment: Allinea il pulsante a Left / Center / Right. Attiva Full Width per estenderlo al contenitore.

Padding: Regola il padding superiore/inferiore e sinistro/destro (collega/scollega i valori).

Border & Corner Radius: Imposta la larghezza e lo stile del bordo. Regola il raggio degli angoli per pulsanti arrotondati o squadrati.

Shadow: Attiva l'ombra, poi regola sfocatura/distanza/diffusione.

Reset o Revert

Clicca Reset o Revert per annullare le modifiche di stile. Riapri Select Themes per scegliere un punto di partenza diverso.

Tab Advanced

La tab Advanced fornisce opzioni aggiuntive per esigenze specializzate che vanno oltre i controlli principali di layout e tema. Usala quando hai bisogno di una regolazione più approfondita mantenendo il Form gestibile. I tipi di controllo nella tab Advanced includono:

Form: Regola i bordi, gli angoli e l'ombra del contenitore del Form
Input Field: Stilizza gli elementi di input stessi, inclusi colori del testo e del focus, bordi e angoli, larghezza, padding e ombre
Label: Controlla la tipografia e il colore delle etichette
Short Label: Configura la tipografia e il colore delle etichette brevi
Placeholder: Personalizza l'aspetto del testo segnaposto
Custom CSS: Aggiungi CSS personalizzato per un controllo preciso

Attenzione: Il CSS personalizzato ha la precedenza su Styles e Themes e può influire sullo stile dei temi.

Schermata 4 — Barra laterale destra nel costruttore di Form e Survey

Allineamento etichette a livello di elemento

L'allineamento etichette a livello di elemento ti permette di impostare una posizione diversa per l'etichetta di ogni campo, invece di applicare un allineamento globale a tutto il Form o Survey. Usalo per perfezionare il ritmo visivo e la spaziatura, specialmente nei layout compatti.

Ecco cosa devi sapere prima di usare l'allineamento etichette a livello di elemento:

Disponibile in Form, Survey e Quiz (disponibile solo per i Form con layout a colonna singola)
I Form esistenti mantengono il loro allineamento globale a meno che non venga aggiornato esplicitamente a livello di campo
Si applica ai campi standard come input di testo, menu a tendina, radio button e altri
Su mobile, l'allineamento passa automaticamente a Top, garantendo un layout chiaro e intuitivo indipendentemente dalle impostazioni desktop

Come impostare l'allineamento etichette a livello di elemento

Nel costruttore di Form o Survey, seleziona un singolo campo
Nella barra laterale destra che appare, individua Label Alignment
Da qui, seleziona l'allineamento dell'etichetta desiderato per quell'elemento usando le frecce (Top, Left, Right o Form Default)

Schermata 5 — Barra laterale destra nel costruttore di Form e Survey

Domande frequenti

D: Le modifiche nella barra laterale destra si salvano automaticamente?

No, clicca Save nel builder per confermare le modifiche.

D: Cambiare Themes in seguito sovrascriverà il mio stile dettagliato?

Un nuovo tema può reimpostare parti dello stile visivo. Ricontrolla le tue impostazioni in Styles dopo aver cambiato tema. Il CSS personalizzato sovrascrive comunque Themes e Styles, quindi verifica il CSS per eventuali conflitti.

D: Come posso testare rapidamente diversi preset di tema senza perdere l'aspetto attuale?

Dopo aver applicato un nuovo tema al tuo Form o Survey, puoi tornare all'aspetto precedente cliccando il pulsante Back nell'angolo in alto a destra del builder.

D: Cosa succede all'allineamento etichette per campo se cambio il layout a Due Colonne o Riga Singola?

L'allineamento etichette a livello di elemento è disponibile solo in Colonna Singola. Cambiare layout rimuove il controllo per campo e le etichette torneranno all'impostazione predefinita.

D: Se cambio l'allineamento globale delle etichette in seguito, cosa succede ai campi che ho già impostato?

I campi impostati su Form Default si aggiornano automaticamente al nuovo valore globale. I campi impostati esplicitamente su Left/Right/Top mantengono la loro scelta per campo.