Come personalizzare e abbellire i moduli di WordPress (2 metodi semplici)

Se avete aggiunto dei moduli al vostro sito web, personalizzarli in corrispondenza del design del sito è un’ottima idea. Può aiutare a catturare l’attenzione delle persone, ad aumentare l’engagement e a garantire un’interazione perfetta con il pubblico.

Che si tratti di un modulo di contatto, di registrazione o di un sondaggio, il fatto che sia in corrispondenza con l’estetica del sito può fare la differenza.

Nel corso degli anni abbiamo aggiunto vari moduli al nostro sito web, personalizzandoli sempre in corrispondenza dei colori del nostro brand. Questo non solo migliora la consapevolezza del brand, ma rende anche i moduli più attraenti dal punto di vista visivo. Di conseguenza, abbiamo notato un aumento degli utenti che compilano i moduli.

In questo articolo vi mostreremo come personalizzare e stilizzare facilmente i moduli di WordPress, passo dopo passo.

Perché personalizzare e modellare i vostri moduli di WordPress?

Quando aggiungete un modulo al vostro sito web WordPress utilizzando un plugin, noterete che il suo layout è solitamente semplice e chiaro.

Ad esempio, se aggiungete un modulo di registrazione al vostro sito web utilizzando un plugin per i moduli di registrazione degli utenti, vedrete che il suo layout è un po’ noioso. Questo può non catturare l’attenzione del visitatore e persino scoraggiarlo dal compilare il modulo.

Personalizzare i moduli può renderli più attraenti grazie alla corrispondenza con il tema e il brand di WordPress.

Questo può portare a un aumento delle conversioni, perché i moduli WordPress in stile sono più facili da navigare e possono incoraggiare un maggior numero di utenti a compilarli.

I moduli con stile possono anche aumentare la consapevolezza del vostro marchio tra gli utenti. Ad esempio, potete utilizzare il logo del vostro sito web e i colori aziendali per rendere il vostro modulo più memorabile ed efficace.

Detto questo, vediamo come personalizzare e stilizzare facilmente i moduli di WordPress, passo dopo passo. In questo post tratteremo due metodi, e potete usare i link rapidi qui sotto per passare a quello che volete usare:

Metodo 1: Come personalizzare e abbellire i moduli di WordPress con WPForms (metodo senza codice)

Con WPForms potete personalizzare e stilizzare facilmente i vostri moduli WordPress. È il miglior plugin per moduli di contatto WordPress sul mercato, utilizzato da oltre 6 milioni di siti web.

WPForms è dotato di un builder con trascina e rilascia che rende super facile la creazione di qualsiasi tipo di modulo. Dispone anche di una libreria di temi già pronti e di opzioni personalizzate per il modulo che non richiedono alcuna codifica.

Per saperne di più, consultate la nostra recensione dettagliata di WPForms.

Per prima cosa, è necessario installare e attivare il plugin WPForms. Per istruzioni dettagliate, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, visitare la pagina WPForms ” Impostazioni dalla barra laterale dell’amministrazione di WordPress per inserire la chiave di licenza.

Potete trovare queste informazioni nel vostro account sul sito web di WPForms.

Una volta fatto ciò, andate alla schermata WPForms ” Aggiungi nuovo dalla dashboard di WordPress.

Si accede così alla pagina “Seleziona un modello”, dove si può iniziare a digitare un nome per il modulo. Dopodiché, si può scegliere il modello di modulo desiderato e fare clic sul pulsante “Usa modello” sotto di esso.

Per questo tutorial, creeremo e aggiungeremo un semplice modulo di contatto al nostro sito web.

Questo lancerà il modello nel costruttore di moduli di WPForms, dove si vedrà un’anteprima del modulo sulla destra e i campi del modulo nella colonna di sinistra.

Da qui, è possibile trascinare e rilasciare qualsiasi campo del modulo di propria scelta, secondo le proprie preferenze. È anche possibile riorganizzare o eliminare i campi.

Per istruzioni dettagliate, consultate il nostro tutorial su come creare un modulo di contatto in WordPress.

Una volta terminato il modulo, è sufficiente fare clic sul pulsante “Salva” in alto per uscire dal costruttore di moduli.

Dopodiché, è necessario visitare lapagina delleimpostazioni di WPForms dalla dashboard di WordPress e cliccare sul checkbox “Usa markup moderno”. Se non si esegue questa operazione, le impostazioni personalizzate di WPForms non saranno disponibili nell’editor a blocchi.

Non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

Quindi, aprire la pagina o il post in cui si desidera aggiungere il modulo appena creato.

Da qui, è necessario fare clic sul pulsante Aggiungi blocco ‘+’ nell’angolo in alto a sinistra per aprire il menu dei blocchi e aggiungere il blocco WPForms.

Una volta fatto ciò, è sufficiente selezionare il modulo che si desidera aggiungere al sito dal menu a discesa all’interno del blocco stesso.

Ora che il modulo è stato aggiunto, è il momento di personalizzarlo e di dargli uno stile.

Per farlo, è necessario aprire il pannello di blocco sul lato destro dello schermo e scorrere fino alla sezione “Temi”. Da qui, è possibile scegliere tra una libreria di oltre 40 temi predefiniti per dare immediatamente al proprio modulo un aspetto splendido.

Successivamente, si può scendere alla sezione “Stili di campo” per personalizzare ulteriormente il modulo.

È possibile selezionare la dimensione dei campi del modulo dal menu a discesa e persino impostare la dimensione e il raggio del bordo.

Successivamente, è possibile modificare il colore dello sfondo, del testo e del bordo dei campi del modulo utilizzando lo strumento di selezione dei colori.

In questo caso, è possibile utilizzare i colori caratteristici del brand o altri colori utilizzati sul resto del blog WordPress per creare un modulo visivamente accattivante.

Una volta fatto ciò, scorrere fino alla sezione “Stili delle etichette”, dove è possibile selezionare la dimensione dei caratteri delle etichette dal menu a discesa.

Successivamente, è possibile modificare il colore dei caratteri delle etichette dei campi, delle sottoetichette e dei messaggi di errore che verranno visualizzati nel modulo.

Per personalizzare il pulsante nel modulo, scorrere verso il basso fino alla sezione “Stili del pulsante” e selezionare le dimensioni dal menu a discesa.

È inoltre possibile impostare il raggio del bordo e modificare lo sfondo e il colore del testo del pulsante di invio del modulo.

Una volta terminata la personalizzazione del modulo, è sufficiente fare clic sul pulsante “Aggiorna” o “Pubblica” in alto per memorizzare le impostazioni.

Ora potete visitare il vostro sito per vedere il modulo WordPress stilizzato in azione.

Metodo 2: Come modellare i moduli di WordPress con i CSS (personalizzazione avanzata)

Se non volete usare le opzioni di personalizzazione offerte da WPForms o volete applicare diverse personalizzazioni con i CSS, potete anche usare uno snippet CSS personalizzato.

Per farlo, dovrete innanzitutto creare un modulo utilizzando WPForms, che è il costruttore di moduli numero 1 sul mercato.

Si tratta di un costruttore drag-and-drop dotato di molti modelli che si possono utilizzare per creare moduli di contatto, moduli per il caricamento di file, moduli di registrazione, moduli RSVP e molto altro.

Per istruzioni dettagliate, potete consultare il nostro tutorial su come creare un modulo di contatto in WordPress oppure vedere il metodo 1.

Una volta creato un modulo, è il momento di personalizzarlo utilizzando WPCode, il miglior plugin di snippets di codice per WordPress sul mercato.

È il modo più semplice e sicuro per aggiungere codice CSS per lo styling dei moduli di WordPress.

Per prima cosa, è necessario installare e attivare il plugin WPCode. Per istruzioni dettagliate, potete consultare la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, visitare la pagina Code Snippets ” + Add Snippet dalla dashboard di WordPress.

Una volta arrivati, basta fare clic sul pulsante “Usa snippet” sotto l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.

Si accede così alla pagina “Crea snippet personalizzato”, dove si può iniziare a digitare un nome per il proprio snippet di codice.

Quindi, selezionare l’opzione ‘CSS Snippet’ dal menu a discesa nell’angolo destro dello schermo.

Quindi, copiare e incollare il seguente codice nella casella “Anteprima codice”:

#wpforms-0000 .wpforms-form {
    background-color: #ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Una volta fatto questo, dovrete sostituire lo shortcode predefinito in alto con lo shortcode del modulo che volete personalizzare.

Per farlo, visitate la pagina WPForms ” Tutti i moduli dalla dashboard di WordPress e copiate il numero ID WPForms del modulo che desiderate stilizzare.

Quindi, incollare il numero ID del modulo accanto alla riga wpforms- nel codice. Ora, tutto il codice sarà eseguito solo in questo modulo specifico.

Poi, si può facilmente modificare il codice esadecimale del colore di sfondo, aggiungere una famiglia di caratteri a scelta e configurare il padding e i raggi dei bordi del modulo modificando lo snippet di codice.

Una volta fatto ciò, scorrere fino alla sezione “Inserimento” e selezionare la modalità “Inserimento automatico”.

Il codice verrà eseguito automaticamente sul vostro sito al momento dell’attivazione.

Infine, scorrere indietro fino alla parte superiore della pagina e spostare l’interruttore su “Attivo”.

Quindi, fare clic sul pulsante “Salva snippet” per memorizzare le impostazioni.

A questo punto, il modulo di WordPress verrà automaticamente personalizzato in base allo snippet CSS e sarà possibile visualizzarlo.

Tuttavia, se non avete ancora aggiunto il modulo al vostro sito web, aprite una pagina o un post nell’editor dei blocchi.

Una volta lì, fare clic sul pulsante “+” nell’angolo in alto a sinistra per aprire il menu dei blocchi e aggiungere il blocco WPForms.

Successivamente, selezionare il modulo che è stato stilizzato utilizzando lo snippet CSS dal menu a discesa del blocco stesso.

Infine, fare clic sul pulsante “Aggiorna” o “Pubblica” per memorizzare le impostazioni.

Ora, potete visitare il vostro sito WordPress per vedere il modulo personalizzato in azione.

Bonus: Come creare pagine personalizzate per il sito web

Lo styling dei moduli di WordPress è solo un modo per rendere il vostro sito più attraente e visivamente interessante. Potete anche progettare le vostre pagine web completamente personalizzate utilizzando SeedProd.

È il miglior plugin per la creazione di pagine di WordPress presente sul mercato. Permette di creare pagine attraenti senza utilizzare alcun codice.

SeedProd è dotato di un costruttore drag-and-drop, di modelli e kit di siti già pronti, di facili opzioni di personalizzazione, di tavolozze di colori e di blocchi di pagina avanzati. Inoltre, è possibile incorporare facilmente i moduli WPForms nell’editor di SeedProd.

Potete usare SeedProd anche per creare una pagina di lista d’attesa virale, una pagina di vendita, una pagina di manutenzione, una pagina coming soon e molto altro ancora.

Per maggiori dettagli, potete consultare il nostro tutorial su come creare una landing page in WordPress.

Ci auguriamo che questo articolo vi abbia aiutato a capire come personalizzare e rendere più belli i vostri moduli WordPress. Vi consigliamo di consultare anche il nostro tutorial su come aggiungere un campo per il codice coupon ai moduli WordPress e il nostro confronto tra WPForms e Gravity Forms e Formidable Forms.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.