Riassunto AI
Pronto a migliorare il design generale dei tuoi moduli senza scrivere alcun CSS personalizzato? La funzionalità dei temi dei moduli in WPForms fornisce design pronti all'uso che puoi applicare facilmente al tuo modulo.
Questo tutorial spiega come utilizzare la funzionalità dei temi dei moduli in WPForms.
Prima di iniziare, assicurati che WPForms sia installato e attivato sul tuo sito WordPress.
Accesso ai Temi dei Moduli
Per accedere alla funzionalità dei temi dei moduli in WPForms, dovrai prima creare un nuovo modulo o modificare uno esistente per accedere all'editor dei moduli.
Puoi anche utilizzare uno dei nostri modelli di modulo per iniziare facilmente. Dopo aver selezionato un modello, potrai aggiungere nuovi campi o modificare campi esistenti nel modello selezionato.
Una volta terminate le personalizzazioni delle opzioni e delle impostazioni dei campi del tuo modulo, assicurati di salvare le modifiche e incorporare il modulo in una pagina o in un post sul tuo sito.
Personalizzazione dei Temi dei Moduli
Nell'editor a blocchi, vedrai opzioni per stilizzare e personalizzare i tuoi moduli WordPress. La sezione Temi include tutti gli stili di tema disponibili che WPForms fornisce.
Nelle sezioni successive, presenteremo alcuni dei temi dei moduli che WPForms fornisce "out of the box". Questo ti darà una panoramica di come appariranno quando applicati sul tuo sito.
Moderno (Predefinito)
Questo è il tema applicato a tutti i moduli sul tuo sito per impostazione predefinita. Utilizza un colore d'accento blu per elementi come il pulsante di invio e la barra di avanzamento.
Dopo aver selezionato un tema, puoi aggiornare gli stili del tema in modo simile a come faresti quando stilizzi il tuo modulo nell'editor a blocchi.
Una volta aggiornato uno dei temi, viene creata una copia del tema originale con i nuovi stili che hai aggiunto. Questo nuovo tema avrà (Copia) aggiunto al nome del tema. Per il nostro esempio, il nome è Predefinito (Copia).
Puoi rinominare il tema personalizzato aggiornando il testo nel campo Nome tema.
Sotto il campo Nome tema, troverai il link Elimina tema. Questo link è utile se desideri eliminare temi dei moduli personalizzati sul tuo sito.
Quando fai clic su di esso, apparirà un overlay che ti chiederà di confermare se desideri procedere con l'azione di eliminazione. Fai semplicemente clic sul pulsante Sì, Elimina per procedere.
Classico
Lo stile del tema classico utilizza un CSS molto minimale con un colore di accento grigio per il pulsante di invio.
Oceano
Il tema del modulo oceanico ha un aspetto simile allo stile Moderno con un colore di accento verde acqua scuro per gli elementi del modulo come pulsanti e cursori numerici.
Tangerine
Lo stile Tangerine utilizza opzioni di stile simili per i campi. Tuttavia, applica un colore di accento arancione agli elementi del modulo come pulsanti, barre di avanzamento, cursori numerici, ecc.
Aero
Il design Aero applica un colore di sfondo grigio chiaro al contenitore del modulo con un colore di accento blu. Ha anche un'ombra di casella applicata al contenitore. Questo conferisce al modulo un aspetto moderno ed elevato.
Cemento
Lo stile Concrete utilizza un colore di accento rosa per gli elementi del modulo come pulsanti, paginazione e cursori numerici. Aggiunge anche un'immagine di sfondo in cemento scuro al contenitore del modulo.
La prima volta che selezioni un tema che richiede un'immagine di sfondo, dovrai scaricare l'immagine prima che gli stili vengano applicati. Apparirà una sovrapposizione che ti chiederà di scaricare l'immagine. Fai clic su Continua per scaricarla e importarla.
Nota: Il download dell'immagine di sfondo per un tema scaricherà anche tutte le immagini stock richieste da altri temi. Quindi non dovrai ripetere il processo se selezioni un tema con un'immagine di sfondo diversa.
Se lo desideri, puoi aggiornare l'immagine di sfondo dalla sezione Stili di sfondo.
Puoi scegliere tra la libreria multimediale del tuo sito o foto stock come origine dell'immagine. Se selezioni l'opzione Foto stock, potrai scegliere tra le immagini stock disponibili facendo clic sull'immagine esistente.
La sezione Stili di sfondo contiene anche opzioni per personalizzare le dimensioni, la posizione e la ripetizione dell'immagine.
Se desideri rimuovere l'immagine di sfondo, fai clic sul pulsante Rimuovi immagine.
Eleganza
Lo stile del tema Elegance applica un raggio del bordo attorno al contenitore del modulo. Utilizza anche un'immagine di sfondo per il widget del contenitore del modulo. Dandogli un aspetto moderno e accattivante.
Fresco
Lo stile del tema Fresh aggiunge un'immagine di sfondo con foglie verdi fresche. Utilizza anche il verde come colore di accento per gli elementi del modulo come i pulsanti.
Cupo
Questo stile del tema del modulo funge da tema in modalità scura con uno sfondo scuro attorno al contenitore del modulo. Utilizza un colore di accento verde per gli elementi del modulo come pulsanti e campi del cursore numerico.
Corridoio
Il tema Hallway utilizza un colore di accento scuro per gli elementi del modulo come pulsanti, cursori numerici, ecc. Applica anche un'immagine di sfondo al contenitore del modulo.
Lussureggiante
Questo tema del modulo applica ombreggiature e angoli arrotondati al contenitore del modulo. Utilizza anche un'immagine stock come sfondo del widget contenitore.
Monstera
Il tema Monstera utilizza un design moderno con un colore di accento verde e angoli arrotondati per il contenitore del modulo. Applica anche un'immagine stock dall'aspetto gradevole come sfondo del contenitore del modulo.
Intervallo
Questo tema del modulo utilizza un design moderno con un'immagine di tramonto come sfondo. Applica anche stili come bordi, raggio del bordo e ombreggiature al contenitore del modulo.
Primavera
Il tema Spring form aggiunge un'ombra a scatola al contenitore del modulo e utilizza un'immagine stock sfumata come sfondo. Utilizza anche un colore d'accento blu per gli elementi del modulo come il pulsante di invio.
Vintage
Questo tema del modulo ha un aspetto vintage. Utilizza un colore di sfondo personalizzato per il contenitore del modulo e un colore d'accento giallo per gli elementi del modulo.
Dopo aver scelto un tema per il tuo modulo, dovrai pubblicare la pagina o salvarla come bozza per salvare le modifiche.
Una volta fatto, puoi incorporare il modulo in qualsiasi parte del tuo sito e manterrà gli stili che hai configurato nella sezione Temi.
Domande frequenti
Queste sono le risposte ad alcune delle domande più frequenti sull'utilizzo dei temi dei moduli in WPForms.
Posso applicare gli stili dei temi dei moduli ai modelli di modulo?
Assolutamente. Una volta selezionato il modello di modulo che desideri utilizzare, procedi a incorporarlo in una pagina con l'editor a blocchi abilitato. Nell'editor a blocchi, potrai scegliere tra gli stili di tema disponibili per progettare il tuo modello di modulo. Vedi la sezione personalizzazione dei temi dei moduli per maggiori dettagli.
Ecco fatto! Ora hai imparato come accedere e utilizzare i temi dei moduli in WPForms.
Successivamente, vorresti imparare ad accettare pagamenti tramite i tuoi moduli WordPress? Il nostro tutorial su come creare un modulo di pagamento copre tutti i passaggi in dettaglio.