Forma Styling
Auto Form Builder ti offre il controllo completo sullo stile dei moduli. Abbina i colori del tuo marchio, usa i tuoi font, regola la spaziatura e progetta moduli che si integrino perfettamente con il tuo sito.
Perché lo stile del modulo è importante
Il tuo sito web ha un marchio. I tuoi moduli dovrebbero rifletterlo.
Quando i moduli hanno un aspetto diverso dal resto del sito, i visitatori esitano. Si chiedono se si trovano ancora sullo stesso sito web. Questa esitazione costa conversioni.
I moduli con stile comunicano anche professionalità. Un modulo curato comunica ai visitatori che tieni ai dettagli e, se tieni al design del modulo, probabilmente tieni anche ai loro dati.
Come funziona lo stile dei moduli
Auto Form Builder include un editor di stile visivo integrato nell'interfaccia di creazione dei moduli.
- Seleziona cosa personalizzareScegli tra contenitore del modulo, etichette di campo, campi di input, pulsanti o messaggi di errore.
- Regola le impostazioniUtilizza selettori di colore, cursori e menu a discesa per modificare i valori. Nessuna sintassi CSS da imparare o ricordare.
- Anteprima immediataOgni modifica appare immediatamente nell'anteprima live. Guarda esattamente come apparirà il tuo modulo prima di pubblicarlo.
- Salva come predefinitiApplica automaticamente il tuo stile ai nuovi moduli. Crea una volta, riutilizza ovunque.
Cosa puoi personalizzare
Colore
Controlla ogni colore del tuo modulo. Colori di sfondo per il contenitore del modulo e per i singoli campi. Colori del testo per etichette, segnaposto e testo di input. Colori dei bordi per gli stati predefiniti, di focus e di errore. Colori dei pulsanti per sfondo, testo ed effetti al passaggio del mouse.
Tipografia
Scegli i font per le etichette e i campi di input. Regola le dimensioni dei font in modo indipendente: etichette più grandi per enfatizzare, testo di supporto più piccolo per le informazioni secondarie. Controlla lo spessore del font per etichette in grassetto o testo di input più chiaro.
Spaziatura e disposizione
Imposta la spaziatura tra i campi per creare spazio. Regola la spaziatura interna dei campi per un comodo inserimento del testo. Controlla i margini attorno all'intero modulo per posizionarlo perfettamente nel layout della pagina.
Bordi e angoli
Definisci la larghezza, lo stile e il colore del bordo. Arrotonda gli angoli per un look moderno o mantienili netti per un design minimalista. Applica diversi stili di bordo a diversi stati del modulo: bordi sottili per impostazione predefinita, bordi evidenti per il focus.
Bottoni
Progetta pulsanti di invio che si adattino al tuo brand. Scegli il colore di sfondo, il colore del testo, il raggio del bordo, la spaziatura interna, la dimensione e lo spessore del carattere. Personalizza gli stati di passaggio del mouse e di attivazione in modo che i pulsanti siano reattivi e facili da cliccare.
ModuloContenitore
Definisci lo stile dell'involucro generale del modulo. Aggiungi un colore di sfondo o mantienilo trasparente. Applica ombreggiature ai riquadri per aumentare la profondità. Imposta il raggio del bordo per i contenitori dei moduli arrotondati. Controlla la larghezza massima per evitare che i moduli si estendano troppo.
Scenari comuni di stile dei moduli
Linee guida per la corrispondenza del marchio
La tua azienda ha colori specifici: #0F2D5F per il colore primario, #F59E0B per gli accenti. Inserisci questi valori nell'editor di stile. I pulsanti dei moduli utilizzano il colore accento. Le etichette dei moduli utilizzano il colore primario. Perfetta coerenza del brand.
Crea moduli ad alto contrasto
Sito web con sfondo scuro? Crea moduli chiari che risaltino. Sfondo chiaro? Utilizza moduli con bordi e ombre sottili per definire l'area del modulo senza interferire visivamente.
Design Forme Minime
Rimuovi i bordi, riduci la spaziatura, usa sfondi trasparenti. Crea moduli che sembrino integrati nella pagina, anziché chiusi in un riquadro.
Crea moduli di invito all'azione audaci
Pulsanti grandi, colori vivaci, spaziatura generosa. Crea moduli che catturino l'attenzione per le tue pagine di lead generation più importanti.
Moduli adatti a qualsiasi tema
Auto Form Builder funziona con tutti i temi WordPress. I tuoi moduli personalizzati si adattano a qualsiasi contesto di design.
Utilizzi Woodmart, Astra, GeneratePress, Divi o qualsiasi altro tema? I tuoi moduli avranno un aspetto nativo. L'editor di stile ti offre un controllo sufficiente per adattarsi a qualsiasi sistema di progettazione.
Nessun conflitto di temi. Nessun problema di ereditarietà degli stili. Solo moduli che hanno esattamente l'aspetto che desideri.
Nessun CSS richiesto
Non è necessario scrivere codice CSS personalizzato per definire lo stile dei moduli. L'editor visuale gestisce tutto.
Ma se desideri il controllo CSS, Auto Form Builder supporta CSS personalizzato per ogni modulo. Aggiungi override per casi limite o applica stili avanzati non disponibili nell'editor visuale. Gli utenti esperti avranno la flessibilità di cui hanno bisogno.
