Styling dei tuoi moduli nell'editor a blocchi

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 con il costruttore visivo di WPForms nell'editor a blocchi.

---

Prima di iniziare, assicurati che WPForms sia installato e attivato sul tuo sito WordPress e che tu abbia verificato la tua licenza.

Abilitazione del markup moderno

Il markup moderno in WPForms include una maggiore accessibilità e ti consente di personalizzare visivamente i tuoi moduli nell'editor a blocchi.

Per attivare lo styling dei moduli, dovrai abilitare il markup moderno dalla tua pagina delle impostazioni di WPForms. Per fare ciò, vai su WPForms » Impostazioni e seleziona la scheda Generale.

Successivamente, scorri fino alla sezione Generale e assicurati che l'opzione Includi styling del modulo sia impostata su Stile base e tema del modulo.

Dopo di che, seleziona la casella Usa markup moderno per abilitarlo.

Assicurati di salvare le modifiche dopo aver abilitato questa opzione.

Personalizzazione dei tuoi moduli

Dopo aver abilitato l'opzione di markup moderno, crea un nuovo modulo e aggiungi il modulo a una pagina o a un post.

Nell'editor a blocchi, fai clic sul modulo per aprire opzioni aggiuntive per il blocco WPForms.

Nelle impostazioni del blocco WPForms, troverai opzioni per personalizzare il tema colore, i campi del modulo, le etichette, i pulsanti e gli stili del contenitore e dello sfondo senza scrivere alcun CSS. Troverai anche opzioni aggiuntive per copiare le impostazioni di stile da un modulo all'altro nella sezione Avanzate.

Tratteremo ciascuna di queste opzioni 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.

Puoi anche rinominare questo tema per una facile identificazione dal campo Nome tema.

Per eliminare un tema personalizzato del modulo, fai semplicemente clic sul testo che dice Elimina tema accanto al nome del tema.

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 le impostazioni Colori. Questo ti consente di aggiornare i colori di sfondo, bordo, testo e menu a discesa dei tuoi campi.

Quando fai clic su una particolare opzione di colore, apparirà una sovrapposizione con i colori del tema disponibili.

Fai clic sulla campitura di colore per aprire il selettore di colori.

Se hai già un colore del marchio che desideri utilizzare per i tuoi moduli, vai avanti e incolla il codice colore esadecimale nel campo Hex.

Stili delle etichette

Nella sezione Stili delle etichette, troverai l'opzione per aggiornare le dimensioni e i colori delle etichette dei tuoi moduli. Le opzioni di dimensione disponibili includono Piccolo, Medio e Grande.

Nella sezione Colori, troverai l'opzione per aggiornare i colori delle etichette, delle sottoposizioni e dei 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.

Nel pannello Colori, troverai l'opzione per aggiornare i colori di sfondo e del 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 sezione Avanzate, vedrai il codice CSS che contiene tutti gli stili che hai aggiunto al modulo sotto Copia / Incolla impostazioni di stile.

Questa opzione ti consente di copiare gli stili da un modulo all'altro.

Se hai copiato le impostazioni di stile da un altro modulo, sarai in grado di incollarle rapidamente qui. Dopo aver incollato lo snippet di codice, il modulo utilizzerà gli stili del modulo precedente.

Se desideri reimpostare qualsiasi personalizzazione che hai aggiunto al tuo modulo, fai clic sul pulsante Reimposta impostazioni di stile. Ciò ripristinerebbe il tuo modulo al suo stato originale senza alcuna personalizzazione.

Puoi aggiungere facoltativamente classi CSS personalizzate che hai creato nella casella CLASSE(I) CSS AGGIUNTIVE. Per saperne di più, consulta il nostro tutorial su come aggiungere classi CSS personalizzate.

Dopo aver stilizzato il tuo modulo, assicurati di salvare le modifiche pubblicando la pagina o salvandola come bozza.

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 nell'editor a blocchi.

Non riesco a trovare l'opzione Usa markup moderno. Come abilito il markup moderno in WPForms?

Gli utenti con almeno un modulo sul loro sito web prima di aggiornare il plugin WPForms alla versione 1.8.1 vedranno l'opzione di markup moderno.

Se hai appena installato il plugin WPForms sul tuo sito WordPress, non vedrai l'opzione Usa markup moderno nella tua pagina delle impostazioni. Il tuo sito sarà impostato per utilizzare il markup moderno per impostazione predefinita.

Se desideri visualizzare questa opzione nella tua pagina delle impostazioni, dovrai aggiungere il seguente snippet di codice al tuo sito.

Come forzo WPForms a usare il markup moderno?

Se l'uso del campo Carta di Credito deprecato ti impedisce di abilitare il markup moderno, puoi aggirare questa restrizione aggiungendo un filtro personalizzato. Per forzare WPForms ad abilitare l'opzione di markup moderno, aggiungi il seguente snippet di codice al tuo sito web.

Dopo aver aggiunto il codice, potrai abilitare/disabilitare il markup moderno dalla tua pagina delle impostazioni di WPForms.

Come posso apportare modifiche di stile non disponibili nell'editor a blocchi?

Se desideri apportare altre modifiche agli stili dei tuoi moduli che non sono disponibili come opzioni nell'editor a blocchi, puoi utilizzare CSS Hero. Questo plugin ti consente di modificare l'aspetto del tuo sito sul frontend senza scrivere alcun codice.

Oppure, se desideri stilizzare i tuoi moduli con CSS, ti consigliamo di utilizzare WPCode per aggiungere i tuoi stili personalizzati al tuo sito.

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

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ù.