Stilizzazione dei moduli

Volete personalizzare facilmente l'aspetto dei vostri moduli WordPress? La nostra funzione di styling dei moduli vi consente di creare uno stile per i vostri moduli senza dover scrivere alcun CSS.

Questo tutorial vi mostrerà come creare uno stile per i vostri moduli con il costruttore visivo di WPForms nell'editor di blocchi.

Requisiti: Per poter creare lo stile dei moduli nell'editor di blocchi, è necessario disporre di quanto segue:

  • WordPress versione 6.0 o superiore
  • Editor di blocchi o tema con modifica completa del sito


Prima di iniziare, assicuratevi che WPForms sia installato e attivato sul vostro sito WordPress e che abbiate verificato la vostra licenza.

Abilitare il markup moderno

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

Nota: con WPForms versione 1.8.1 e successive, i nuovi utenti hanno il markup moderno abilitato per impostazione predefinita e l'opzione di disabilitazione non è visibile nella dashboard di WordPress. È sufficiente procedere per iniziare a personalizzare i moduli nell'editor di blocchi.

Per attivare lo stile dei moduli, è necessario abilitare il markup moderno dalla pagina delle impostazioni di WPForms. A tale scopo, andare su WPForms " Impostazioni e selezionare la scheda Generale.

Pagina di impostazione di WPForms

Quindi, scorrere la sezione Generale e assicurarsi che l'opzione Includi stili del modulo sia impostata su Stile base e tema del modulo.

Includere l'opzione di stile del modulo

Successivamente, selezionare la casella di controllo Usa markup moderno per attivarlo.

Utilizzare un markup moderno

Assicurarsi di salvare le modifiche dopo aver abilitato questa opzione.

Nota: I moduli con il campo Carta di credito deprecato non sono compatibili con il markup moderno. Se si utilizza questo campo, non sarà possibile utilizzare il markup moderno in WPForms. Per sapere come aggirare questa restrizione, consultare la sezione FAQ.

Personalizzazione dei moduli

Nota: se si utilizza Elementor e si desidera creare uno stile per i moduli dal costruttore di Elementor, consultare la nostra guida sulla personalizzazione dei moduli con Elementor per sapere come fare.

Dopo aver abilitato l'opzione markup moderno, creare un nuovo modulo e aggiungerlo a una pagina o a un post.

Nell'editor dei blocchi, fare clic sul modulo per aprire ulteriori opzioni per il blocco WPForms.

Stili di campo

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

Opzioni di stile disponibili

Di seguito illustreremo in dettaglio ciascuna di queste opzioni.

Temi

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

Per applicarlo, è sufficiente fare clic sul tema preferito e questo regolerà istantaneamente i colori dei campi, delle etichette, dei pulsanti, del contenitore o dello sfondo del modulo.

Stile del tema disponibile

Se si personalizzano le impostazioni individuali dopo aver selezionato un tema, le modifiche verranno salvate come nuovo tema di modulo personalizzato. Questo nuovo tema verrà aggiunto all'elenco dei temi disponibili e potrà essere applicato a qualsiasi modulo, proprio come si farebbe con qualsiasi altro tema di modulo.

È anche possibile rinominare il tema per una più facile identificazione dal campo Nome del tema.

Nome del tema

Per eliminare un tema di modulo personalizzato, è sufficiente fare clic sul testo Cancella tema accanto al nome del tema.

Elimina il tema

Nota: Per maggiori dettagli su come funzionano gli stili dei temi in WPForms, consultate il nostro tutorial sull'uso dei temi dei moduli.

Stili di campo

Nella sezione Stili di campo, si trovano le opzioni per regolare le dimensioni, il bordo, la dimensione del bordo, il raggio del bordo e i colori dei campi del modulo. Di seguito sono illustrate le opzioni disponibili per i campi.

  • Dimensione: Regola la dimensione complessiva dei campi del modulo. Le opzioni includono Piccolo, Medio e Grande.
  • Bordo: Questa impostazione consente di aggiungere o rimuovere un bordo dai campi del modulo. Le opzioni includono bordi pieni, tratteggiati o punteggiati.
  • Dimensione del bordo: Imposta lo spessore dei bordi dei campi. L'unità di misura predefinita è pixel (px), ma è possibile selezionare l'unità di misura più adatta alle proprie esigenze di progettazione.
  • Raggio del bordo: Utilizzare questa opzione per applicare angoli arrotondati ai campi del modulo per ottenere un aspetto più morbido e moderno. L'unità di misura predefinita è pixel (px), ma è possibile modificarla nell'unità di misura preferita.
Opzioni di stile di campo disponibili

Successivamente, si trovano le impostazioni dei Colori. Questo consente di aggiornare i colori dello sfondo, del bordo, del testo e del menu a discesa dei campi.

Colori di campo disponibili

Quando si fa clic su un'opzione di colore particolare, viene visualizzata una sovrapposizione con i colori del tema disponibili.

Cambiare il colore dello sfondo

Fare clic sul campione di colore per aprire il selezionatore di colori.

Selettore di colori

Se avete già un colore di marca che desiderate utilizzare per i vostri moduli, incollate il codice esadecimale del colore nel campo Hex.

Inserire il valore esadecimale

Stili di etichette

Nella sezione Stili di etichetta si trova l'opzione per aggiornare le dimensioni e i colori delle etichette del modulo. Le opzioni di dimensione disponibili sono Piccole, Medie e Grandi.

Dimensioni dell'etichetta

Nella sezione Colori si trova l'opzione per aggiornare i colori delle etichette, delle sottoetichette e dei messaggi di errore. Di seguito sono illustrate le opzioni di colore delle etichette disponibili.

Colori delle etichette
  • Etichetta: Questa opzione controlla il colore del testo dell'etichetta del campo principale.
  • Sottoetichetta e suggerimento: questa opzione controlla il colore delle sottoetichette dei campi e dei suggerimenti che appaiono quando WPForms suggerisce i valori agli utenti nel frontend.
  • Messaggio di errore: Il colore del testo che viene visualizzato se si verifica un errore quando gli utenti compilano il modulo.

Stili di pulsanti

Le impostazioni degli Stili dei pulsanti consentono di modificare le dimensioni, il bordo, il raggio del bordo e i colori dei pulsanti. Di seguito sono illustrate le opzioni disponibili per i pulsanti.

  • Dimensione: 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 pieno, tratteggiato o punteggiato.
  • Dimensione del bordo: Imposta lo spessore dei bordi dei pulsanti. L'unità di misura predefinita è pixel (px), ma è possibile selezionare l'unità di misura più adatta alle proprie esigenze di progettazione.
  • Raggio del bordo: Regola la rotondità degli angoli dei pulsanti per ottenere un aspetto più morbido o più netto. I pixel (px) sono l'unità di misura standard, con opzioni che possono essere modificate in base alle preferenze di progettazione.
Stili dei pulsanti

Nel pannello Colori si trova l'opzione per aggiornare i colori dello sfondo e del testo del pulsante.

Colori dei pulsanti

Nota: il colore di sfondo impostato per il pulsante verrà utilizzato anche come colore di accento predefinito. Ciò significa che il colore dello stato di attenzione per i campi, le barre di avanzamento, i pulsanti di opzione e le caselle di controllo utilizzerà il colore di sfondo del pulsante.

Stili di contenitori

Le impostazioni degli stili del contenitore consentono di personalizzare il padding, lo stile del bordo, la dimensione del bordo, il raggio del bordo, l'ombra e i colori del contenitore del modulo. Di seguito sono descritte in dettaglio le opzioni disponibili per il contenitore.

  • Imbottitura: Questa opzione imposta lo spazio all'interno dei bordi del contenitore del modulo. È possibile aumentare o diminuire questo valore per regolare la spaziatura intorno al contenuto del modulo.
  • Stile del bordo: Questa impostazione consente di scegliere il contorno del contenitore, con opzioni per un bordo pieno, tratteggiato o punteggiato.
  • Dimensione del bordo: Determina lo spessore del bordo del contenitore. L'unità di misura predefinita è pixel (px), ma è possibile selezionare l'unità di misura più adatta alle proprie esigenze di progettazione.
  • Raggio del bordo: Regola l'arrotondamento degli angoli del contenitore, aggiungendo un bordo più morbido o più definito all'aspetto del modulo. La misura predefinita è in pixel (px), ma può essere modificata per adattarsi al proprio stile.
  • Ombra: scegliete la dimensione dell'effetto ombra per il vostro contenitore per aggiungere profondità al design del modulo, con opzioni che vanno da nessuna a grande.
  • Colori: Aggiornare il colore del bordo del contenitore per allinearlo al tema visivo, migliorando l'estetica complessiva del modulo.
Stili di contenitori disponibili

Stili di sfondo

Le impostazioni degli stili di sfondo consentono di controllare l'immagine e il colore di sfondo del modulo.

Per iniziare, selezionare una fonte di immagini dal menu a discesa Immagine. Per le immagini già caricate sul vostro sito web o per caricarne di nuove, selezionate l'opzione Media Library. Per esplorare una selezione più ampia di immagini professionali, selezionare l'opzione Stock Photos .

Menu a discesa per le immagini

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

Pulsante Scegli immagine

Se si seleziona Libreria multimediale dal menu a tendina Immagine , si aprirà la galleria multimediale del sito web, che consentirà di scegliere un'immagine o di caricarne una nuova. Se si seleziona Stock Photos, verrà presentata una selezione di foto stock tra cui scegliere lo sfondo del modulo.

Nota: se è la prima volta che si seleziona Foto stock, verrà visualizzato un messaggio in sovraimpressione che invita a scaricare la libreria di immagini stock. Fare clic su Continua per iniziare il download, dopodiché si potrà scegliere tra una serie di foto stock.

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

  • Posizione: Questa impostazione consente di allineare l'immagine di sfondo all'interno del modulo, selezionando opzioni come Centro superiore, Centro inferiore e altre ancora, per ottenere il posizionamento perfetto.
  • Ripetizione: scegliere la modalità di ripetizione dell'immagine di sfondo. Le opzioni disponibili sono Nessuna ripetizione per un'immagine singola, Piastrella per ripetere l'immagine sull'intero sfondo, Ripeti orizzontale per ripetere la larghezza e Ripeti verticale per ripetere la lunghezza.
  • Dimensione: Regola il modo in cui l'immagine di sfondo si adatta al modulo. Copre assicura che l'immagine copra l'intero sfondo, adattandosi alle dimensioni del modulo. Se si seleziona Dimensioni, è possibile specificare l'esatta larghezza e altezza dell'immagine.
  • Colori: Questa opzione consente di selezionare un colore di sfondo, che sarà visibile quando non viene utilizzata alcuna immagine.

Styling avanzato

Nella sezione Avanzate, sotto la voce Copia / Incolla impostazioni di stile, viene visualizzato il codice CSS che contiene tutti gli stili aggiunti al modulo.

Impostazioni dello stile di copia e incolla

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

Se si sono copiate le impostazioni di stile da un altro modulo, è possibile incollarle rapidamente qui. Dopo aver incollato il frammento di codice, il modulo utilizzerà gli stili del modulo precedente.

Se si desidera ripristinare qualsiasi personalizzazione aggiunta al modulo, fare clic sul pulsante Ripristina impostazioni di stile. In questo modo si ripristina lo stato originale del modulo, senza alcuna personalizzazione dello stile.

Ripristino delle impostazioni di stile

È possibile aggiungere facoltativamente classi CSS personalizzate create nella casella CLASSI CSS AGGIUNTIVE. Per saperne di più, consultate il nostro tutorial sull'aggiunta di classi CSS personalizzate.

Classi CSS aggiuntive

Dopo aver creato il modulo, assicurarsi di salvare le modifiche pubblicando la pagina o salvandola come bozza.

Salvare la pagina come bozza

Nota: se si incorpora il modulo personalizzato in un'altra pagina, esso manterrà le impostazioni di stile configurate.

Verifica dei moduli

L'ultimo passo consiste nell'eseguire un rapido test per assicurarsi che il modulo appaia e funzioni come ci si aspetta.

Per testarlo, dovrete semplicemente inviare una voce al vostro modulo. Per saperne di più, consultate la nostra lista di controllo completa per il test dei moduli.

Domande frequenti

Di seguito, abbiamo risposto ad alcune delle domande più frequenti che riceviamo sullo stile dei moduli nell'editor di blocchi.

Attenzione! Alcune delle FAQ contenute in questo documento contengono codice PHP e sono destinate agli sviluppatori. Offriamo questo codice come cortesia, ma non forniamo supporto per le personalizzazioni del codice o per lo sviluppo da parte di terzi.

Se preferite un approccio più semplice all'aggiunta di codice personalizzato al vostro sito, consultate la guida di WPBeginner all'uso di WPCode.

Non riesco a trovare l'opzione Usa markup moderno. Come posso attivare Modern Markup in WPForms?

Gli utenti che hanno 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 avete appena installato il plugin WPForms sul vostro sito WordPress, non vedrete l'opzione Usa markup moderno nella pagina delle impostazioni. Il vostro sito sarà impostato per utilizzare il markup moderno per impostazione predefinita.

Se si desidera mostrare questa opzione nella pagina delle impostazioni, è necessario aggiungere al sito il seguente frammento di codice.

Come posso forzare WPForms a usare un markup moderno?

Se l'uso del campo Carta di credito deprecato impedisce di abilitare il markup moderno, è possibile aggirare questa restrizione aggiungendo un filtro personalizzato. Per forzare WPForms ad abilitare l'opzione di markup moderno, aggiungete il seguente frammento di codice al vostro sito web.

Dopo aver aggiunto il codice, si potrà abilitare/disabilitare il markup moderno dalla pagina delle impostazioni di WPForms.

Come posso apportare modifiche allo stile non disponibili nell'editor dei blocchi?

Se si desidera apportare altre modifiche agli stili dei moduli che non sono disponibili come opzioni nell'editor di blocchi, è possibile utilizzare CSS Hero. Questo plugin consente di modificare l'aspetto del sito sul frontend senza scrivere alcun codice.

In alternativa, se desiderate creare uno stile per i vostri moduli con i CSS, vi consigliamo di usare WPCode per aggiungere gli stili personalizzati al vostro sito.

Ecco fatto! Ora sapete come personalizzare l'aspetto dei vostri moduli WordPress utilizzando WPForms e l'editor di blocchi.

Poi, volete usare le icone per migliorare la visualizzazione del vostro modulo? Consultate il nostro tutorial sull'uso delle icone per capire come fare.

Il miglior plugin per la creazione di moduli di WordPress con trascinamento e rilascio

Facile, veloce e sicuro. Unitevi agli oltre 6 milioni di proprietari di siti web che si fidano di WPForms.

Per completare questo modulo, abilitare JavaScript nel browser.