Un modulo WordPress semplice e goffo può far sembrare incompiuto anche il sito web dal design migliore e farlo apparire completamente fuori luogo. La parte peggiore? I visitatori potrebbero sentirsi insicuri nel compilarlo se non corrisponde al resto del tuo sito.
Durante il nostro percorso nella gestione di un blog WordPress, abbiamo imparato che moduli ben progettati e brandizzati possono fare una grande differenza.
Infatti, quando abbiamo abbinato i nostri moduli ai colori e al layout del nostro sito, abbiamo visto un enorme aumento nelle richieste di moduli.
In questa guida, ti mostreremo due modi semplici ma potenti per personalizzare e stilizzare i tuoi moduli WordPress, in modo che non solo abbiano un bell'aspetto, ma funzionino anche meglio. 🚀
Perché personalizzare e stilizzare i tuoi moduli WordPress?
Quando aggiungi un modulo al tuo sito web WordPress utilizzando un plugin, noterai che il suo layout è solitamente semplice e dall'aspetto anonimo.
Ad esempio, se aggiungi un modulo di registrazione al tuo sito web utilizzando un plugin per moduli di registrazione utenti, vedrai che il suo layout è un po' noioso. Questo può non riuscire a catturare l'attenzione del tuo visitatore e persino scoraggiarlo dal compilare il modulo.
Personalizzare i tuoi moduli può renderli più attraenti abbinandoli al tuo tema WordPress e al tuo branding.
Questo può portare a più conversioni perché i moduli WordPress stilizzati sono più facili da navigare e possono incoraggiare più utenti a compilarli.
I moduli stilizzati possono anche aumentare la consapevolezza del tuo brand tra gli utenti. Ad esempio, puoi utilizzare il logo del tuo sito web e i colori distintivi della tua azienda per rendere il tuo modulo più memorabile ed efficace.
Detto questo, ti mostreremo come personalizzare e stilizzare facilmente i tuoi moduli WordPress, passo dopo passo. Tratteremo due metodi in questo post e puoi utilizzare i collegamenti rapidi qui sotto per passare a quello che desideri utilizzare:
- Metodo 1: Come personalizzare e stilizzare i moduli WordPress con WPForms (metodo senza codice)
- Metodo 2: Come stilizzare i moduli WordPress con CSS (personalizzazione avanzata)
- Suggerimento bonus 🧑💻: Come creare facilmente pagine web personalizzate
Iniziamo!
Metodo 1: Come personalizzare e stilizzare i moduli WordPress con WPForms (metodo senza codice)
Puoi facilmente personalizzare e stilizzare i tuoi moduli WordPress utilizzando WPForms. È il miglior plugin per moduli di contatto WordPress sul mercato, utilizzato da oltre 6 milioni di siti web.
Noi stessi utilizziamo WPForms per molti tipi di moduli e puoi saperne di più sul plugin nella nostra recensione dettagliata di WPForms.
WPForms viene fornito con un costruttore drag-and-drop che rende super facile creare qualsiasi tipo di modulo. Ha persino una vasta libreria di oltre 2.000 temi predefiniti e opzioni di personalizzazione integrate per il tuo modulo che non richiedono alcuna codifica.
Ha anche strumenti di intelligenza artificiale per aiutarti a creare moduli personalizzati da zero utilizzando un semplice prompt e generare scelte multiple per campi come menu a discesa, pulsanti di opzione o caselle di controllo.
Innanzitutto, devi installare e attivare il plugin WPForms. Per istruzioni dettagliate, consulta la nostra guida passo passo su come installare un plugin WordPress.
📝 Nota: WPForms ha anche una versione gratuita che puoi utilizzare per questo tutorial. Tuttavia, utilizzeremo il plugin premium perché ha più impostazioni e opzioni.
Dopo l'attivazione, visita la pagina WPForms » Impostazioni dalla barra laterale di amministrazione di WordPress per inserire la tua chiave di licenza.
Puoi trovare queste informazioni nel tuo account sul sito web di WPForms.
Una volta fatto ciò, accedi alla schermata WPForms » Aggiungi Nuovo dalla dashboard di WordPress.
Questo ti porterà alla pagina ‘Seleziona un modello’, dove puoi iniziare digitando un nome per il tuo modulo. Dopodiché, puoi scegliere qualsiasi modello di modulo desideri e fare clic sul pulsante ‘Usa modello’ sotto di esso.
Ai fini di questo tutorial, creeremo e aggiungeremo un semplice modulo di contatto al nostro sito web.
Questo lancerà il modello nell'editor di moduli di WPForms, dove vedrai un'anteprima del modulo sulla destra e i campi del modulo nella colonna di sinistra.
Da qui, puoi trascinare e rilasciare qualsiasi campo modulo a tua scelta nel modulo secondo le tue preferenze. Puoi anche riorganizzare o eliminare i campi.
Per istruzioni dettagliate, consulta il nostro tutorial su come creare un modulo di contatto in WordPress.
Una volta terminato con il tuo modulo, fai semplicemente clic sul pulsante ‘Salva’ in alto per uscire dall'editor di moduli.
Dopodiché, devi visitare la pagina WPForms Impostazioni dal pannello di amministrazione di WordPress e selezionare la casella ‘Usa markup moderno’. Se non lo fai, le impostazioni di personalizzazione di WPForms non saranno disponibili nell'editor a blocchi.
Non dimenticare di fare clic sul pulsante 'Salva modifiche' per memorizzare le impostazioni.
Successivamente, apri la pagina o il post in cui desideri aggiungere il modulo che hai appena creato.
Da qui, devi fare clic sul pulsante ‘+’ per aggiungere un blocco nell'angolo in alto a sinistra per aprire il menu dei blocchi e aggiungere il blocco WPForms.
Una volta fatto ciò, seleziona semplicemente il modulo che desideri aggiungere al tuo sito dal menu a discesa all'interno del blocco stesso.
Ora che hai aggiunto il modulo, è il momento di personalizzarlo e stilizzarlo.
Per fare ciò, devi aprire il pannello dei blocchi sul lato destro dello schermo e scorrere fino alla sezione ‘Temi’.
Da qui, puoi scegliere da una libreria di oltre 40 temi predefiniti per dare istantaneamente al tuo modulo un aspetto accattivante.
Successivamente, puoi scorrere fino alla sezione ‘Stili dei campi’ per personalizzare ulteriormente il tuo modulo.
Puoi selezionare la dimensione dei tuoi campi modulo dal menu a discesa e persino impostare la dimensione del bordo e il raggio.
Successivamente, puoi cambiare il colore dello sfondo, del testo e del bordo dei campi del modulo utilizzando lo strumento contagocce.
Qui, puoi usare i colori distintivi del tuo brand o altri colori utilizzati nel resto del tuo blog WordPress per creare un modulo visivamente accattivante.
Una volta fatto ciò, scorri verso il basso fino alla sezione 'Stili delle etichette', dove puoi selezionare la dimensione del carattere delle etichette dal menu a discesa.
Dopodiché, puoi anche cambiare il colore del carattere delle etichette dei campi, delle sotto-etichette e dei messaggi di errore che verranno visualizzati nel tuo modulo.
Per personalizzare il pulsante nel tuo modulo, scorri verso il basso fino alla sezione 'Stili del pulsante' e seleziona la sua dimensione dal menu a discesa.
Puoi anche impostare un raggio del bordo e cambiare il colore dello sfondo e del testo del pulsante di invio del modulo.
Una volta terminata la personalizzazione del modulo, fai semplicemente clic sul pulsante 'Aggiorna' o 'Pubblica' in alto per salvare le tue impostazioni.
Ora, puoi visitare il tuo sito WordPress per vedere il modulo stilizzato in azione.
Metodo 2: Come stilizzare i moduli WordPress con CSS (personalizzazione avanzata)
Se non vuoi utilizzare le opzioni di personalizzazione offerte da WPForms o desideri applicare personalizzazioni diverse con CSS, puoi anche utilizzare uno snippet CSS personalizzato.
Per fare ciò, per prima cosa, dovrai creare un modulo utilizzando WPForms, che è il costruttore di moduli numero 1 sul mercato.
Utilizza un generatore drag-and-drop e include oltre 2.000 modelli per aiutarti a creare rapidamente moduli, inclusi moduli di contatto, moduli di caricamento file, moduli di registrazione, moduli RSVP e molto altro!
Per istruzioni dettagliate, puoi consultare il nostro tutorial su come creare un modulo di contatto in WordPress o vedere il metodo 1.
Una volta creato un modulo, è il momento di personalizzarlo utilizzando WPCode. È il miglior plugin per snippet di codice WordPress sul mercato, che offre il modo più semplice e sicuro per aggiungere codice CSS per stilizzare il tuo modulo WordPress.
Alcuni dei nostri siti web aziendali utilizzano WPCode per aggiungere e gestire snippet di codice personalizzati, e ha funzionato eccezionalmente bene. Consulta la nostra recensione completa di WPCode per i dettagli sullo strumento.
Per prima cosa, dovrai installare e attivare il plugin WPCode. Per istruzioni dettagliate, potresti voler consultare la nostra guida per principianti su come installare un plugin WordPress.
📝 Nota: WPCode dispone di una versione gratuita che puoi utilizzare per questo tutorial. Tuttavia, utilizzeremo il piano premium.
Dopo l'attivazione, visita la pagina Snippet di codice » + Aggiungi snippet dalla dashboard di WordPress.
Una volta lì, fai semplicemente clic sul pulsante 'Usa snippet' sotto l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.
Questo ti porterà alla pagina ‘Crea snippet personalizzato’, dove puoi iniziare digitando un nome per il tuo snippet di codice.
Successivamente, seleziona l'opzione 'Snippet CSS' dal menu a discesa nell'angolo destro dello schermo.
Successivamente, copia e incolla 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 ciò, dovrai sostituire lo shortcode predefinito in alto con lo shortcode del modulo che desideri personalizzare.
Per fare ciò, visita la pagina WPForms » Tutti i moduli dalla dashboard di WordPress e copia il numero ID di WPForms del modulo che desideri stilizzare.
Successivamente, incolla il numero ID del modulo accanto alla riga wpforms- nel codice. Ora, tutto il codice verrà eseguito solo in questo modulo specifico.
Successivamente, puoi facilmente cambiare il codice esadecimale per il colore di sfondo, aggiungere un font a tua scelta e configurare il padding e i raggi del bordo del modulo modificando lo snippet di codice.
Una volta fatto ciò, scorri verso il basso fino alla sezione 'Inserimento' e seleziona la modalità 'Inserimento automatico'.
Il codice verrà eseguito automaticamente sul tuo sito dopo l'attivazione.
Infine, scorri di nuovo in cima alla pagina e imposta l'interruttore su 'Attivo'.
Dopodiché, fai clic sul pulsante 'Salva snippet' per memorizzare le tue impostazioni
Ora, il modulo WordPress verrà automaticamente personalizzato in base allo snippet CSS e potrai visualizzarlo.
Tuttavia, se non hai ancora aggiunto il modulo al tuo sito web, apri una pagina o un post nell'editor a blocchi.
Una volta lì, fai clic sul pulsante '+' nell'angolo in alto a sinistra per aprire il menu dei blocchi e aggiungere il blocco WPForms.
Dopodiché, seleziona il modulo che hai stilizzato utilizzando lo snippet CSS dal menu a discesa nel blocco stesso.
Infine, fai clic sul pulsante 'Aggiorna' o 'Pubblica' per salvare le tue impostazioni.
Ora, puoi visitare il tuo sito WordPress per vedere il modulo personalizzato in azione.
Suggerimento bonus 🧑💻: Come creare facilmente pagine web personalizzate
Stilizzare i moduli WordPress è solo un modo per rendere il tuo sito più attraente e visivamente interessante. Puoi anche progettare le tue pagine web completamente personalizzate utilizzando SeedProd.
È il miglior plugin per la creazione di pagine WordPress sul mercato. Ti permette di creare pagine attraenti senza usare codice.
Alcuni dei nostri marchi partner hanno costruito interi siti web utilizzando SeedProd. È un potente costruttore drag-and-drop che va oltre le semplici landing page! Scopri di più sullo strumento nella nostra recensione completa di SeedProd.
SeedProd dispone anche di modelli e kit di siti predefiniti, opzioni di personalizzazione semplici, palette di colori e blocchi di pagina avanzati. Inoltre, puoi incorporare facilmente i tuoi moduli WPForms all'interno dell'editor SeedProd.
Per maggiori dettagli, puoi consultare il nostro tutorial su come creare una landing page in WordPress.
🌟 Pro Tip: Puoi persino usare SeedProd per creare una pagina di lista d'attesa virale, una pagina di vendita, una pagina di manutenzione, una pagina di "prossimamente" e molto altro ancora.
Speriamo che questo articolo ti abbia aiutato a capire come personalizzare e stilizzare i tuoi moduli WordPress. Potresti anche voler consultare il nostro tutorial su come aggiungere un campo codice coupon ai moduli WordPress e il nostro confronto tra WPForms, Gravity Forms e Formidable Forms.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Mrteesurez
Parte dei motivi per cui mi piace WPForms è il fatto che è flessibile e altamente personalizzabile con modelli integrati o utilizzando codice CSS, è sufficiente identificare l'ID del modulo specifico che si sta personalizzando.
Un modulo ben progettato e personalizzato attira gli utenti e posiziona il tuo modulo come professionale.
Grazie per la guida.
Supporto WPBeginner
Prego!
Amministratore
Jiří Vaněk
Grazie per il tutorial. Ho inserito un modulo di contatto sul sito web usando WPForms e l'ho lasciato nel suo stato predefinito. In realtà, non pensavo nemmeno di poterlo personalizzare in qualche modo. Grazie a questo articolo, ho avuto diverse idee su come renderlo più accattivante graficamente. Grazie
Ralph
Grazie per questa guida.
Ora il mio modulo di contatto avrà un aspetto migliore e più professionale rispetto allo spazio bianco predefinito con linee grigio chiaro. Questo migliorerà il design del mio sito web!
Supporto WPBeginner
Glad we could help improve your site’s design
Amministratore