La Barra laterale destra nel Costruttore di Form e Survey di GoHighLevel / Squadd centralizza le impostazioni di stile e configurazione mentre lavori. Usa Stili, Temi e Impostazioni avanzate per controllare layout, aspetto dei campi, spaziatura, colori e molto altro!
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 schede Stili, Temi e Avanzate, così puoi perfezionare l'aspetto e il comportamento del tuo form o survey. Avere tutti i controlli di design a portata di mano rende più veloce la visualizzazione in anteprima delle modifiche e garantisce coerenza visiva.
La barra laterale destra è composta da 3 schede:
- Stili: Perfeziona il layout e l'aspetto del tuo form o survey
- Temi: Applica preset predefiniti per un branding coerente
- Avanzate: Accedi a opzioni aggiuntive per esigenze specifiche
Come aprire la barra laterale destra
Per aprire la barra laterale destra dall'interno del Costruttore di Form o Survey, clicca il pulsante Stili e opzioni nell'angolo in alto a destra del costruttore. Clicca di nuovo il pulsante Stili e opzioni per chiuderla.
Scheda Stili
La scheda Stili è il punto in cui si imposta il layout principale del form o del survey. Da questa scheda controlli il layout, la palette colori e il branding. I controlli disponibili nella scheda Stili 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 form o survey. Usa i controlli del margine superiore per regolare lo spazio senza ricorrere a CSS personalizzato. Le modifiche si aggiornano in tempo reale nell'anteprima e lasciare vuoti i campi del margine mantiene la spaziatura predefinita. Clicca qui per ulteriori informazioni sull'allineamento etichetta a livello di elemento
- È ora possibile impostare il padding superiore e inferiore a 0 px per un layout completamente edge-to-edge. In precedenza, gli elementi pubblicati potevano mostrare spaziatura verticale extra anche con padding impostato a 0.
Footer (Survey): Gestisci il contenuto e l'aspetto del footer specificamente per i survey.
Colori e sfondo: Imposta le opzioni tipografiche, scegli i colori di sfondo e, dove supportato, applica immagini di sfondo o di intestazione per allinearti al tuo brand.
- Varie: Applica o disattiva il branding a livello di agenzia
Scheda Temi
La scheda Temi ti permette di creare rapidamente form e survey dall'aspetto professionale utilizzando i preset. Usa i Temi per velocizzare la configurazione iniziale, poi utilizza Stili per perfezionare spaziatura e larghezze.
Per applicare un tema al tuo form o survey, passa il cursore sul tema desiderato e seleziona Usa tema. Nel pop-up, conferma la selezione cliccando Procedi.
Nota bene: Il cambio di tema comporta la perdita delle modifiche di stile correnti.
Pannello di stile del pulsante
Il Pannello di stile del pulsante centralizza tutti i controlli per l'aspetto del pulsante, così puoi applicare stili curati e coerenti senza codice personalizzato. Usa i preset per partire velocemente, poi perfeziona tipografia, spaziatura, bordi, raggio, ombre e larghezza.
Nota: I controlli precedenti del pulsante sono ora raggruppati in sezioni dedicate in questo pannello per uno stile più semplice e aggiornamenti più rapidi.
Aprire il Pannello di stile del pulsante
Apri un Form nel costruttore.
Clicca sull'elemento pulsante nel canvas.
Nella barra laterale destra, espandi Pulsante (oppure Stili → Pulsante).
Scegliere un tema per il pulsante (Galleria + Anteprima)
Clicca su Seleziona tema.
Sfoglia le categorie Riempito, Bordo e Solo testo.
Passa il cursore o seleziona un tema per vedere le modifiche in anteprima live sul canvas.
Clicca su Applica per impostare il tema sul pulsante selezionato.
Personalizzare gli stili del pulsante (Controlli raggruppati)
Scopo: Perfeziona il tema per adattarlo agli standard del brand senza CSS.
Colori e sfondo: Imposta i colori di testo, sfondo e bordo.
Tipografia: Scegli il font e il peso (supporta font personalizzati). Imposta dimensione, spaziatura delle lettere e trasformazione del testo.
Segnaposto screenshot: gruppo Tipografia.
Layout e allineamento: Allinea il pulsante a Sinistra / Centro / Destra. Attiva Larghezza intera per estenderlo al contenitore.
Segnaposto screenshot: gruppo Layout e allineamento.
Padding: Regola il padding superiore/inferiore e sinistro/destro (collega/scollega i valori).
Bordo e raggio degli angoli: Imposta larghezza e stile del bordo. Regola il raggio degli angoli per pulsanti arrotondati o squadrati.
Segnaposto screenshot: gruppo Bordo e raggio degli angoli.
Ombra: Attiva l'ombra, poi regola sfocatura/distanza/diffusione.
Ripristina o annulla
Clicca su Ripristina o Annulla per disfare le modifiche di stile. Riapri Seleziona tema per scegliere un punto di partenza diverso.
Scheda Avanzate
La scheda Avanzate offre opzioni aggiuntive per esigenze specifiche che vanno oltre i controlli di layout e tema principali. Usala quando hai bisogno di una personalizzazione più approfondita mantenendo il form gestibile. I tipi di controllo disponibili nella scheda Avanzate includono:
Form: Regola i bordi, gli angoli e l'ombra del contenitore del form
Campo di input: Personalizza gli elementi di input, inclusi colori del testo e del focus, bordi e angoli, larghezza, padding e ombre
Etichetta: Controlla la tipografia e il colore dell'etichetta
Etichetta breve: Configura tipografia e colore dell'etichetta breve
Segnaposto: Personalizza l'aspetto del testo segnaposto
CSS personalizzato: Aggiungi CSS personalizzato per un controllo preciso.
Nota bene: Il CSS personalizzato ha la precedenza su Stili e Temi e può influenzare lo stile dei temi.
Allineamento etichetta a livello di elemento
L'allineamento etichetta a livello di elemento ti permette di impostare una posizione dell'etichetta diversa per ogni campo, invece di applicare un unico allineamento globale all'intero form o survey. Usalo per perfezionare il ritmo visivo e la spaziatura, specialmente nei layout compatti.
Ecco cosa è importante sapere prima di usare l'allineamento etichetta a livello di elemento:
- Disponibile in Form, Survey e Quiz (solo per 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, pulsanti radio e altri
- Su mobile, l'allineamento passa automaticamente in alto (Top), garantendo un layout chiaro e intuitivo indipendentemente dalle impostazioni desktop
Come impostare l'allineamento etichetta a livello di elemento
- Nel Costruttore di Form o Survey, seleziona un singolo campo
- Nella barra laterale destra che appare, individua Allineamento etichetta
- Da qui, seleziona l'allineamento desiderato per quell'elemento usando le frecce (In alto, A sinistra, A destra o Predefinito form)
Domande frequenti
D: Le modifiche nella barra laterale destra si salvano automaticamente?
No, clicca Salva nel costruttore per confermare le modifiche.
D: Cambiare tema in seguito sovrascriverà la mia stilizzazione dettagliata?
Un nuovo Tema può ripristinare parti dello stile visivo. Ricontrolla la scheda Stili dopo aver cambiato tema. Il CSS personalizzato ha comunque la precedenza su Temi e Stili, quindi verifica i conflitti nel CSS.
D: Come posso testare rapidamente diversi preset di tema senza perdere il look attuale?
Dopo aver applicato un nuovo tema al form o al survey, puoi tornare all'aspetto precedente cliccando il pulsante Indietro nell'angolo in alto a destra del costruttore.
D: Cosa succede all'allineamento etichetta per singolo campo se passo al layout a due colonne o su riga singola?
L'allineamento etichetta a livello di elemento è disponibile solo con il layout a colonna singola. Cambiando layout si rimuove il controllo per singolo campo e le etichette tornano all'impostazione predefinita.
D: Se modifico l'allineamento globale dell'etichetta in seguito, cosa succede ai campi che ho già impostato?
I campi impostati su Predefinito form si aggiornano automaticamente al nuovo allineamento globale. I campi impostati esplicitamente su Sinistra/Destra/In alto mantengono la loro scelta per singolo campo.
Articoli correlati
- Come creare un survey stilizzato
- Form, Survey e Quiz: Modifica inline
- Editor mobile per Form, Survey e Quiz
- Come aggiungere e modificare rapidamente i Campi personalizzati nei Form e Survey