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.

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.

Anche la stilizzazione dei moduli utilizzando WPForms è un gioco da ragazzi, grazie alla sua interfaccia intuitiva, alle ampie opzioni di personalizzazione e alla capacità di creare moduli visivamente accattivanti e reattivi utilizzando l'editor a blocchi.

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.

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.

3. Abilita 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 Modern Markup in WPForms, naviga nella sezione Impostazioni all'interno di WPForms e seleziona la scheda Generale.

Scorri verso il basso fino alla sezione Generale per abilitare l'opzione Usa Modern Markup. Con questa opzione abilitata, sei pronto per stilizzare il tuo modulo tramite l'editor a blocchi.

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!

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!

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 stilizzare i campi del modulo, gli stili delle etichette e gli stili dei pulsanti per adattarli all'estetica del tuo marchio.

Inoltre, la sezione Avanzate offre la possibilità di copiare le impostazioni di stile tra i moduli, semplificando ulteriormente il processo di stilizzazione.

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:

Stili dei campi

Naviga nelle opzioni Stili Campo nelle impostazioni del blocco WPForms. Individua le impostazioni Dimensione, Raggio del Bordo e Colore.

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.

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

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.

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.

Crea subito il tuo modulo WordPress

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. 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.