Come stilizzare WPForms usando l'Editor a Blocchi

Stai cercando di stilizzare WPForms utilizzando l'editor a blocchi per moduli visivamente accattivanti e facili da usare sul tuo sito WordPress?

WPForms è un plugin intuitivo che semplifica la creazione e la gestione dei moduli offrendo ampie opzioni di personalizzazione. Sfruttando l'editor a blocchi, puoi stilizzare facilmente i tuoi moduli per migliorare l'esperienza utente.

Segui questo tutorial passo passo per imparare a stilizzare WPForms utilizzando l'editor a blocchi e migliorare la funzionalità generale del tuo sito.

Crea subito il tuo modulo WordPress

Perché devi stilizzare i tuoi moduli?

Stilizzando i tuoi moduli, puoi migliorare l'estetica del tuo sito web, assicurando che contribuisca a un'esperienza utente positiva. Ecco alcuni altri motivi chiave per cui la stilizzazione dei moduli è fondamentale per il tuo sito web:

• Branding Coerente: Creare un modulo brandizzato che corrisponda al design e alla combinazione di colori del tuo sito web garantisce un'immagine del brand coerente.
• Migliore Esperienza Utente: Moduli ben progettati rendono facile per gli utenti navigare/inviare le informazioni richieste, portando a tassi di completamento dei moduli più elevati.
• Design Responsivo: Un modulo ben stilizzato si adatta senza sforzo a varie dimensioni dello schermo e dispositivi, garantendo un'esperienza utente fluida per tutti i visitatori.
• Conversioni Aumentate: Un modulo visivamente accattivante può catturare l'attenzione di un utente e motivarlo a completare l'azione desiderata, che si tratti di iscriversi a una newsletter, effettuare un acquisto o inviare una richiesta.
• Accessibilità Migliorata: Stilizzare i tuoi moduli con etichette chiare, spaziatura adeguata e colori contrastanti può migliorare l'accessibilità per gli utenti ipovedenti, garantendo che il tuo sito web si rivolga a un pubblico più ampio.

Ora che comprendi l'importanza di stilizzare i tuoi WPForms, è ora di approfondire il processo passo dopo passo per stilizzare efficacemente i tuoi moduli utilizzando l'editor a blocchi e sfruttare al meglio il plugin WPForms.

Come stilizzare WPForms usando l'Editor a Blocchi

Segui questi passaggi per imparare come stilizzare i tuoi WPForms utilizzando l'editor a blocchi di Gutenberg senza la necessità di scrivere alcun CSS personalizzato.

Passaggio 1: Installa e attiva WPForms

WPForms semplifica il processo di creazione e gestione dei moduli sul tuo sito web. Il plugin crea senza sforzo vari moduli, inclusi moduli di contatto, sondaggi, quiz e moduli di registrazione, senza conoscenze di codifica, e ti offre oltre 2.100 modelli pronti all'uso da cui iniziare.

Ciò che mi piace di più dello styling di WPForms è che ogni controllo si trova nella barra laterale del blocco, proprio accanto al modulo che stai modificando. Modifica un raggio del bordo o il colore di un pulsante e il modulo si aggiorna mentre guardi, quindi non rimani mai bloccato in un ciclo di salvataggio, aggiornamento e controllo.

Inoltre, non è necessaria una licenza a pagamento per nulla di tutto ciò. Lo styling dei moduli e la libreria completa di oltre 40 temi sono disponibili in WPForms Lite, la versione gratuita, quindi ogni passaggio di questa guida funziona allo stesso modo, sia che tu stia usando Lite o Pro.

Per iniziare con WPForms, devi installare il plugin sul tuo sito WordPress. Una volta attivato, segui i semplici passaggi seguenti per creare e personalizzare lo stile del tuo modulo.

Ottieni WPForms Gratis Ora

Passaggio 2: Crea un modulo o usa un modello

Iniziamo a creare il tuo modulo! Dalla tua dashboard di WordPress, vai su WPForms e fai clic sul pulsante Aggiungi Nuovo.

Quando richiesto, dai al tuo modulo un nome che rifletta il suo scopo. Quindi, hai la possibilità di scegliere un modello preesistente o Crea Modulo Vuoto.

Successivamente, WPForms aprirà la sua intuitiva interfaccia Form Builder, dove puoi personalizzare il tuo modulo aggiungendo, modificando, eliminando o riposizionando qualsiasi campo del modulo.

Dopo aver configurato i campi del modulo, dovrai impostare le Notifiche Email per avvisarti quando qualcuno compila il modulo e preme il pulsante di invio.

Puoi anche configurare il Messaggio di Conferma che gli utenti vedono una volta inviato il modulo per migliorare l'esperienza utente.

Prima di procedere al passaggio successivo, salva le impostazioni del modulo per evitare di perdere i tuoi progressi. Fai clic sul pulsante Salva situato in cima allo schermo.

Passaggio 3: Abilita il markup moderno

Per migliorare l'accessibilità e abilitare la personalizzazione visiva dei moduli all'interno dell'editor a blocchi, WPForms offre Modern Markup.

Per abilitare il Markup Moderno in WPForms, vai su WPForms » Impostazioni e seleziona la scheda Generale.

Scorri verso il basso fino alla sezione Generale, dove due impostazioni lavorano insieme per attivare lo styling dell'editor a blocchi. Inizia con l'impostazione Includi Stile Modulo e impostala su Stile di base e tema del modulo.

Questa è l'opzione che carica il CSS da cui dipendono i tuoi controlli di styling e, quando è impostata su qualcosa di più restrittivo, le tue modifiche o non appariranno nell'editor a blocchi o non verranno trasferite al front-end.

Successivamente, abilita l'opzione Usa Markup Moderno. Con questa opzione abilitata, sei pronto per stilizzare il tuo modulo tramite l'editor a blocchi. Salva le modifiche prima di lasciare la pagina.

WPForms versione 1.8.1 e successive abilitano modern markup per impostazione predefinita per i nuovi utenti, e l'opzione per disabilitarlo non è disponibile.

Quindi, se stai usando l'ultima versione del plugin e non vedi questa impostazione, sei già a posto e puoi iniziare a stilizzare i tuoi moduli.

Inizia a personalizzare i tuoi moduli nell'editor a blocchi per sfruttare le funzionalità di modern markup, ma prima, incorporiamo il modulo sul tuo sito!

Passaggio 4: Incorpora il modulo sul tuo sito

Per incorporare il modulo che hai creato in precedenza, apri una pagina esistente o creane una nuova. Cerca il pulsante Aggiungi Blocco e cerca il blocco WPForms.

Dopo aver inserito il blocco WPForms nella tua pagina o post, seleziona il modulo desiderato dal menu a discesa. Ora possiamo iniziare a stilizzare il tuo modulo con l'editor a blocchi!

Passaggio 5: Modifica gli stili dall'editor a blocchi

Apri la pagina o il post che contiene il tuo WPForms nell'editor a blocchi. Fai clic sul blocco WPForms per aprire le opzioni aggiuntive.

Scoprirai una varietà di opzioni per lo styling di temi, campi modulo, etichette, pulsanti e il contenitore e lo sfondo in cui si trova il tuo modulo, tutto per abbinare l'estetica del tuo brand.

La sezione Avanzate ti consente anche di copiare le impostazioni di stile tra i moduli, il che fa risparmiare tempo quando diversi moduli necessitano dello stesso trattamento.

Scopri come utilizzare queste varie opzioni di stilizzazione di seguito per personalizzare l'aspetto del tuo modulo e abbinarlo al design del tuo sito web in pochissimo tempo:

Temi

Il pannello Temi è il percorso più rapido per un modulo ridisegnato. WPForms viene fornito con oltre 40 temi di moduli predefiniti, e l'applicazione di uno richiede un singolo clic.

Ogni tema porta il proprio mix di colori, bordi, sfondo e stile dei pulsanti, quindi sceglierne uno ricolorare i tuoi campi, etichette, pulsanti, contenitore e sfondo insieme.

Se preferisci sfogliare prima di impegnarti in uno, puoi vedere ogni tema fianco a fianco. Una volta applicato un tema e poi modificata qualsiasi impostazione individuale, WPForms salva la tua versione come un nuovo tema personalizzato e la aggiunge al tuo elenco di temi.

Usa il campo Nome tema per rinominare un tema personalizzato in modo da poterlo distinguere in seguito. Per eliminarne uno che non desideri più, fai clic sul testo Elimina tema accanto al nome del tema.

Stili dei campi

Apri le opzioni Stili dei campi nelle impostazioni del blocco WPForms. Qui troverai i controlli per Dimensione, Bordo, Spessore bordo, Raggio bordo e Colori.

Dimensione

Per regolare la dimensione dei tuoi campi modulo, seleziona la dimensione desiderata dall'impostazione Dimensione. Le dimensioni disponibili includono Piccolo, Medio e Grande.

Raggio del bordo

Per regolare il bordo dei tuoi campi modulo, usa l'impostazione Raggio del Bordo per impostare il valore del raggio desiderato. I tuoi moduli possono ora avere bordi piacevoli e arrotondati grazie a questo.

Per impostazione predefinita, l'unità per la dimensionamento degli elementi del modulo in WPForms è impostata su pixel (px). Fai clic sull'Unità di Misura per rivelare un menu a discesa con diverse opzioni, come:

• Pixel (PX)
• Percentuale (%)
• Quadrato Em (EM)
• Roentgen equivalente uomo (REM)
• Larghezza viewport (VW)
• Altezza viewport (VH)

Colori

Per regolare il colore di sfondo, del bordo e del testo dei tuoi campi modulo, apri l'impostazione Colori nelle impostazioni del blocco WPForms.

Fai clic sull'opzione colore specifica che desideri aggiornare, come il colore di sfondo. Apparirà una sovrapposizione che mostra i colori del tema disponibili tra cui scegliere.

Successivamente, fai clic sul campione di colore per aprire il Selettore colore, dove puoi perfezionare ulteriormente il colore.

Un codice colore esadecimale può essere incollato nella casella Hex se hai già in mente un colore del marchio per i tuoi moduli.

Stili delle etichette

Ora puoi modificare la dimensione e il colore del carattere delle etichette del tuo modulo qui nella sezione Stili etichetta. Le dimensioni disponibili vanno da Piccolo a Grande.

Per aggiornare i colori delle etichette, delle sottoposizioni e dei messaggi di errore, vai alla sezione Colori. Di seguito è riportata una descrizione delle opzioni di colore delle etichette disponibili.

• Etichetta: Questa impostazione determina il colore dell'etichetta principale per il tuo campo.
• Sottotitolo e Suggerimento: Questa impostazione determina la tonalità utilizzata per le sottoposizioni e i suggerimenti dei campi quando WPForms fornisce suggerimenti di valori sul frontend.
• Messaggio di errore:  Il colore del testo che appare se un utente commette un errore durante la compilazione del modulo.

Stili dei pulsanti

Per modificare il design dei pulsanti del tuo modulo in WPForms, vai su Stili pulsante. Fai clic sul menu a discesa sotto Dimensione per aprirlo e seleziona la dimensione del pulsante.

Se desideri conferire al pulsante un raggio del bordo, tutto ciò che devi fare è inserire il valore desiderato nel campo etichettato Raggio del bordo.

Successivamente, nella sezione etichettata Colori, troverai l'opportunità di modificare sia il colore di sfondo che il colore del testo del tuo pulsante.

Nella maggior parte dei casi, il colore di sfondo del pulsante servirà anche come colore d'accento. Di conseguenza, il colore di sfondo del pulsante verrà utilizzato anche come colore primario per caselle di controllo, pulsanti di opzione, barre di avanzamento e campi.

Stili del contenitore

Stili contenitore governa la casella in cui si trova il tuo modulo anziché i campi al suo interno. Qui puoi dare a un modulo un po' di respiro, un bordo definito o un leggero sollevamento dalla pagina sottostante.

• Spaziatura interna: Imposta lo spazio all'interno dei bordi del contenitore, tra il bordo della casella e il contenuto del modulo. Aumentala quando i campi sembrano troppo vicini ai bordi.
• Stile bordo: Delinea il contenitore con un bordo Continuo, Tratteggiato o Punteggiato.
• Spessore bordo: Determina quanto è spesso quel contorno. I pixel sono l'impostazione predefinita anche qui, e si applicano le stesse opzioni di unità.
• Raggio bordo: Arrotonda gli angoli del contenitore. Valori più alti danno una forma più morbida a scheda, mentre valori più bassi mantengono gli angoli netti.
• Ombra: Aggiunge profondità dietro il contenitore, con dimensioni che vanno da nessuna a grandi. Una piccola ombra è solitamente sufficiente per sollevare un modulo da uno sfondo semplice.
• Colori: Imposta il colore del bordo del contenitore in modo che il suo contorno si integri armoniosamente con il resto del tuo design.

Stili di sfondo

Stili sfondo ti dà il controllo su ciò che si trova dietro il tuo modulo, sia un colore piatto che un'immagine intera. Per iniziare con un'immagine, apri il menu a discesa Immagine e scegli da dove dovrebbe provenire.

Libreria multimediale apre i tuoi caricamenti, quindi scegli questa opzione quando l'immagine è già presente sul tuo sito o desideri caricarne una nuova. Immagini stock apre invece una libreria di immagini professionali.

La prima volta che scegli Immagini stock, WPForms mostra una sovrapposizione che ti chiede di scaricare la libreria di immagini stock. Fai clic su Continua su quella notifica e le foto saranno disponibili per la navigazione.

Una volta effettuata la selezione, fai clic su Scegli immagine per selezionare il file effettivo. Con un'immagine impostata, compaiono altre quattro impostazioni nel pannello:

• Posizione: Allinea l'immagine all'interno del modulo utilizzando opzioni come In alto al centro e In basso al centro, in modo da controllare quale parte della foto viene visualizzata.
• Ripetizione: Decide come l'immagine viene affiancata. Nessuna ripetizione la mostra una volta, Ripeti la ripete su tutto lo sfondo, e Ripeti orizzontalmente e Ripeti verticalmente la ripetono lungo un singolo asse.
• Dimensione: Controlla come l'immagine si adatta. Copri la ridimensiona per riempire lo sfondo indipendentemente dalle dimensioni del modulo, e Dimensioni ti consente di inserire una larghezza e un'altezza esatte.
• Colori: Imposta un colore di sfondo semplice, che è ciò che viene visualizzato quando non viene utilizzata alcuna immagine.

Styling avanzato

Nelle impostazioni Avanzate, puoi accedere al codice CSS che include tutti gli stili personalizzati che hai applicato al tuo modulo.

Se desideri semplicemente spostare tali stili su un altro modulo, cerca l'opzione per copiare e incollare le impostazioni di stile.

Nel caso in cui desideri annullare le modifiche apportate al tuo modulo, fai clic sul pulsante Ripristina impostazioni stile. Ciò ripristinerà il tuo modulo al suo stile predefinito, annullando qualsiasi personalizzazione precedente.

Il campo CLASSE(I) CSS aggiuntive è dove puoi inserire liberamente qualsiasi altra classe CSS che hai sviluppato. Leggi la nostra guida su come implementare nuove classi CSS per saperne di più.

Passaggio 6: Testa e pubblica il modulo

Ora è il momento di salvare le modifiche pubblicando la pagina o salvandola come bozza. Infine, esegui un rapido test per assicurarti che il tuo modulo abbia l'aspetto e funzioni come ti aspetti.

Una volta salvata la pagina, fai clic su Anteprima per vedere il modulo effettivo con gli stili applicati. L'editor a blocchi si avvicina molto, ma l'anteprima mostra ciò che i tuoi visitatori vedranno effettivamente.

Domande frequenti sullo stile di WPForms nell'editor a blocchi

Ecco le risposte alle domande più frequenti sullo stile dei moduli WPForms, sul markup moderno e sui temi dei moduli.

Perché non vedo opzioni di stile per il mio blocco WPForms?

Due impostazioni controllano questo, ed entrambe si trovano sotto WPForms » Impostazioni » Generali. Includi stile modulo deve essere impostato su Stile base e tema modulo, e Usa markup moderno deve essere abilitato.

Se hai installato WPForms dalla versione 1.8.1 o successiva, il markup moderno è già attivo e la casella di controllo non apparirà affatto, quindi controlla prima l'impostazione dello stile.

L'unico vero blocco è il campo Carta di Credito deprecato, che non è compatibile con il markup moderno, quindi un modulo che lo utilizza ancora non può essere stilizzato nell'editor a blocchi finché quel campo non viene sostituito.

Ho bisogno di WPForms Pro per stilizzare i miei moduli?

No. Lo stile del modulo e tutti gli oltre 40 temi del modulo funzionano su WPForms Lite, la versione gratuita, quindi ogni passaggio di questa guida funziona su un'installazione gratuita.

Pro aggiunge funzionalità come i componenti aggiuntivi per i pagamenti, i sondaggi e la logica condizionale sui pagamenti, anche se nulla di tutto ciò è necessario per cambiare l'aspetto dei tuoi moduli.

Il mio modulo manterrà i suoi stili se lo incorporo in un'altra pagina?

Gli stili applicati nell'editor di WPForms sotto Impostazioni » Temi vengono salvati con il modulo e lo seguono ovunque, coprendo gli embed tramite shortcode, il blocco WPForms e il modulo Divi. Gli stili applicati nell'editor a blocchi rimangono solo per quell'unico embed.

Quindi puoi stilizzare un modulo una volta nell'editor per un aspetto coerente in tutto il tuo sito, quindi sovrascrivere i colori su una singola landing page senza toccare l'originale.

Posso stilizzare WPForms senza l'editor a blocchi?

Sì. L'editor di WPForms ha gli stessi pannelli sotto Impostazioni » Temi, e qualsiasi cosa imposti lì si applica a tutto il sito.

Elementor ha i propri controlli di stile, quindi puoi personalizzare i tuoi moduli in Elementor invece, e quelle modifiche rimangono su quella pagina.

Divi funziona in modo diverso, poiché il suo modulo WPForms espone solo le impostazioni di dimensionamento e spaziatura di Divi, quindi stilizza il modulo nell'editor e l'embed Divi lo rileva.

Come apporto modifiche di stile che l'editor a blocchi non offre?

Aggiungi le tue classi nella casella Classi CSS aggiuntive sotto il pannello Avanzate, quindi scrivi il CSS per abbinarle.

La guida CSS personalizzata collegata nella sezione Stile avanzato sopra copre le classi che WPForms applica già, che è ciò a cui vorrai puntare.

Successivamente, Crea moduli interattivi che aumentano il coinvolgimento

Cerchi altri modi per personalizzare il tuo WPForms? Dai un'occhiata a questi suggerimenti per portare i tuoi moduli al livello successivo. Sia che tu stia cercando di migliorare l'aspetto o la funzionalità del tuo modulo, ti abbiamo coperto.

Stilizza i tuoi moduli WordPress ora

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.