Styling dei tuoi moduli

Vuoi personalizzare facilmente l'aspetto dei tuoi moduli WordPress? La nostra funzione di styling dei moduli ti consente di stilizzare i tuoi moduli senza scrivere alcun CSS.

Questo tutorial ti mostrerà come stilizzare i tuoi moduli nell'editor di moduli di WPForms.

---

Personalizzazione dei temi dei tuoi moduli

Per iniziare, dovrai prima creare un nuovo modulo o modificare uno esistente per accedere all'editor di moduli.

Una volta aperto l'editor di moduli, vai su Impostazioni » Temi per accedere alle impostazioni di personalizzazione del tuo modulo.

Qui a sinistra, troverai opzioni per personalizzare il tema dei colori, i campi del modulo, le etichette, i pulsanti e gli stili del contenitore e dello sfondo senza scrivere alcun CSS.

La sezione Anteprima sulla destra visualizza un layout di esempio con campi comuni, in modo da poter vedere immediatamente come appariranno le modifiche di stile.

Tratteremo ciascuna delle opzioni disponibili in modo più dettagliato di seguito.

Temi

L'impostazione Temi ti consente di scegliere un tema colore predefinito per aggiornare automaticamente lo stile dei campi, delle etichette, dei pulsanti, del contenitore e dello sfondo del tuo modulo.

Per applicare, fai semplicemente clic sul tuo tema preferito e questo regolerà istantaneamente i colori dei campi, delle etichette, dei pulsanti, del contenitore o dello sfondo del tuo modulo.

Se personalizzi le singole impostazioni dopo aver selezionato un tema, queste modifiche verranno salvate come un nuovo tema personalizzato del modulo. Questo nuovo tema verrà aggiunto al tuo elenco di temi disponibili e potrà essere applicato a qualsiasi modulo proprio come faresti con qualsiasi altro tema del modulo.

Stili dei campi

Nella sezione Stili dei campi, troverai le opzioni per regolare dimensioni, bordo, spessore del bordo, raggio del bordo e colori per i tuoi campi del modulo. Di seguito abbiamo spiegato le opzioni di campo disponibili.

• Dimensioni: Regola le dimensioni complessive dei tuoi campi del modulo. Le opzioni includono Piccolo, Medio e Grande.
• Bordo: Questa impostazione ti consente di aggiungere o rimuovere un bordo dai tuoi campi del modulo. Le opzioni includono bordi Solidi, Tratteggiati o Puntinati.
• Spessore del bordo: Imposta lo spessore dei bordi dei tuoi campi. L'unità predefinita è pixel (px), ma puoi selezionare l'unità che meglio si adatta alle tue esigenze di progettazione.
• Raggio del bordo: Usalo per applicare angoli arrotondati ai tuoi campi del modulo per un aspetto più morbido e moderno. L'unità predefinita è pixel (px), ma puoi cambiarla nell'unità che preferisci.

Successivamente, troverai opzioni per aggiornare i colori dello Sfondo, del Bordo e del Testo dei tuoi campi modulo.

Per cambiare un colore, fai clic sull'etichetta corrispondente per aprire il selettore di colori. Puoi scegliere un colore visivamente o inserire un codice esadecimale specifico per un controllo preciso.

Stili delle etichette

Nella sezione Stili etichetta, troverai l'opzione per aggiornare la dimensione delle etichette del tuo modulo. Le opzioni di dimensione disponibili includono Piccola, Media e Grande.

Troverai anche l'opzione per aggiornare i colori per etichette, sottoetichette e messaggi di errore. Di seguito abbiamo spiegato le opzioni di colore delle etichette disponibili.

• Etichetta: Questa opzione controlla il colore del testo della tua etichetta principale del campo.
• Sottotitolo e Suggerimento: Questa opzione controlla il colore delle sottoposizioni e dei suggerimenti dei campi che appaiono quando WPForms suggerisce valori agli utenti nel frontend.
• Messaggio di errore: Il colore del testo che viene visualizzato se si verifica un errore durante la compilazione del modulo da parte degli utenti.

Stili dei pulsanti

Le impostazioni Stili pulsante consentono di modificare le dimensioni, il bordo, lo spessore del bordo, il raggio del bordo e i colori dei pulsanti. Di seguito abbiamo spiegato le opzioni dei pulsanti disponibili.

• Dimensioni: Questa opzione imposta le dimensioni del pulsante. Le opzioni includono Piccolo, Medio e Grande.
• Bordo: Questa impostazione consente di delineare i pulsanti con un bordo Solido, Tratteggiato o Puntinato.
• Spessore bordo: Imposta lo spessore dei bordi dei pulsanti. L'unità predefinita è pixel (px), ma è possibile selezionare l'unità più adatta alle proprie esigenze di progettazione.
• Raggio del bordo: Questo regola la rotondità degli angoli del pulsante per un aspetto più morbido o più netto. I pixel (px) sono l'unità standard, con opzioni per passare a seconda delle preferenze di progettazione.

Troverai anche l'opzione per aggiornare i colori di sfondo e testo del tuo pulsante.

Stili del contenitore

Le impostazioni Stili contenitore consentono di personalizzare il padding, lo stile del bordo, lo spessore del bordo, il raggio del bordo, l'ombra e i colori del contenitore del modulo. Di seguito abbiamo dettagliato le opzioni del contenitore disponibili.

• Padding: Questa opzione imposta lo spazio all'interno dei bordi del contenitore del modulo. È possibile aumentare o diminuire questo valore per regolare lo spazio attorno al contenuto del modulo.
• Stile bordo: Questa impostazione consente di scegliere il contorno del contenitore, con opzioni per un bordo Solido, Tratteggiato o Puntinato.
• Spessore bordo: Determina lo spessore del bordo del contenitore. L'unità predefinita è pixel (px), ma è possibile selezionare l'unità più adatta alle proprie esigenze di progettazione.
• Raggio del bordo: Questo regola la rotondità degli angoli del contenitore, aggiungendo un bordo più morbido o più definito all'aspetto del modulo. La misurazione predefinita è in pixel (px) ma può essere modificata per adattarsi al tuo stile.
• Ombra: Scegli la dimensione dell'effetto ombra per il tuo contenitore per aggiungere profondità al design del tuo modulo, con opzioni che vanno da nessuna a grande.
• Colori: Aggiorna il colore del bordo del tuo contenitore per allinearlo al tuo tema visivo, migliorando l'estetica generale del modulo.

Stili di sfondo

Le impostazioni Stili di sfondo ti consentono di controllare l'immagine e il colore di sfondo del tuo modulo.

Per iniziare, seleziona una sorgente immagine dal menu a discesa Immagine. Per le immagini già caricate sul tuo sito web o per caricarne di nuove, seleziona l'opzione Libreria multimediale. Per esplorare una selezione più ampia di immagini professionali, seleziona l'opzione Foto stock.

Dopo aver effettuato la selezione, fai clic sul pulsante Scegli immagine per procedere.

Se selezioni Libreria multimediale dal menu a discesa Immagine, si aprirà la galleria multimediale del tuo sito web, permettendoti di scegliere un'immagine o caricarne una nuova. Se viene selezionato Foto stock, ti verrà presentata una selezione di foto stock tra cui scegliere per lo sfondo del tuo modulo.

Una volta selezionata l'immagine, la sezione Stili di sfondo offre ulteriori opzioni di personalizzazione:

• Posizione: Questa impostazione ti consente di allineare l'immagine di sfondo all'interno del modulo selezionando opzioni come In alto al centro, In basso al centro e altre per ottenere il posizionamento perfetto.
• Ripetizione: Scegli come si ripete la tua immagine di sfondo. Le opzioni sono Nessuna ripetizione per un'immagine singola, Affianca per ripetere l'immagine su tutto lo sfondo, Ripeti orizzontalmente per ripetere lungo la larghezza e Ripeti verticalmente per ripetere lungo l'altezza.
• Dimensioni: Questo regola come la tua immagine di sfondo si adatta al modulo. Copri assicura che l'immagine copra l'intero sfondo, adattandosi alle dimensioni del modulo. Se viene selezionato Dimensioni, puoi specificare la larghezza e l'altezza esatte per la tua immagine.
• Colori: Questa opzione ti consente di selezionare un colore di sfondo, che sarà visibile quando non viene utilizzata alcuna immagine.

Styling avanzato

Nella scheda Avanzate, troverai due utili opzioni per stilizzare ulteriormente i tuoi moduli.

• La casella CSS personalizzato ti consente di aggiungere le tue classi CSS per ulteriori personalizzazioni. Per saperne di più, consulta il nostro tutorial su come aggiungere classi CSS personalizzate.
• La sezione Copia / Incolla impostazioni di stile visualizza il codice CSS per tutti gli stili che hai applicato nell'editor di moduli. Puoi copiare questo codice per riutilizzare gli stessi stili su un altro modulo.

Dopo aver stilizzato il tuo modulo, puoi continuare a modificare i campi se necessario. Una volta terminato, fai clic su Salva, quindi utilizza il pulsante Anteprima per vedere il tuo modulo effettivo con gli stili applicati.

Test dei tuoi moduli

L'ultimo passaggio consiste nell'eseguire un rapido test per assicurarsi che il tuo modulo appaia e funzioni come previsto.

Per metterlo alla prova, dovrai semplicemente inviare un'iscrizione al tuo modulo. Per saperne di più, consulta la nostra checklist completa per il test dei moduli.

Domande frequenti

Di seguito, abbiamo risposto ad alcune delle domande più frequenti che riceviamo riguardo allo stile dei tuoi moduli.

Il mio modulo manterrà i suoi stili quando lo incorporo in pagine diverse?

Sì. Quando stilizzi un modulo nell'editor di WPForms, queste impostazioni vengono salvate con il modulo e si applicano per impostazione predefinita ovunque il modulo sia incorporato.

Se utilizzi l'editor a blocchi o Elementor per applicare ulteriori modifiche di stile durante l'incorporamento del modulo, tali modifiche influenzeranno solo quella pagina specifica. Gli stili originali dell'editor rimangono invariati per tutte le altre istanze.

Ciò ti consente di utilizzare lo stesso modulo in tutto il tuo sito, personalizzandone facoltativamente l'aspetto pagina per pagina.

Posso usare le opzioni di stile del costruttore di moduli con page builder come Divi?

Sì. Le opzioni di stile disponibili nell'editor di moduli di WPForms (Impostazioni » Temi) vengono salvate con il modulo e si applicano ovunque sia incorporato, comprese le pagine create con Divi, Elementor o qualsiasi altro page builder. Non è necessaria alcuna configurazione aggiuntiva.

Se desideri stilizzare i tuoi moduli utilizzando l'editor a blocchi, avrai bisogno dell'attivazione del markup moderno. Per maggiori dettagli, consulta la nostra guida su come stilizzare i tuoi moduli nell'editor a blocchi. Tieni presente che le opzioni di stile dell'editor a blocchi sono disponibili solo quando utilizzi l'editor a blocchi di WordPress o Elementor; non sono accessibili dall'interno dell'editor visivo di Divi.

Ecco fatto! Ora sai come personalizzare l'aspetto dei tuoi moduli WordPress utilizzando WPForms.

Successivamente, vorresti usare le icone per migliorare la visualizzazione del tuo modulo? Assicurati di consultare il nostro tutorial su come usare le scelte icona per saperne di più.