Utilizzo dei temi dei moduli

Siete pronti a migliorare il design complessivo dei vostri moduli senza dover scrivere alcun CSS personalizzato? La funzione temi dei moduli di WPForms fornisce design già pronti che potete facilmente applicare ai vostri moduli.

Questo tutorial spiega come utilizzare i temi dei moduli in WPForms.

Nota: la funzione temi dei moduli è disponibile solo nell'editor di blocchi. Per accedervi è necessario avere un sito con il supporto dell'editor di blocchi. Per maggiori dettagli, consultate il nostro tutorial sullo stile di WPForms senza CSS personalizzati.


Prima di iniziare, assicuratevi che WPForms sia installato e attivato sul vostro sito WordPress.

Accesso ai temi dei moduli

Per accedere ai temi dei moduli in WPForms, è necessario creare un nuovo modulo o modificarne uno esistente per accedere al costruttore di moduli.

È anche possibile utilizzare uno dei nostri modelli di modulo per iniziare facilmente. Dopo aver selezionato un modello, sarà possibile aggiungere nuovi campi o modificare quelli esistenti nel modello selezionato.

Una volta terminata la personalizzazione delle opzioni e delle impostazioni dei campi del modulo, assicuratevi di salvare le modifiche e di incorporare il modulo in una pagina o in un post del vostro sito.

Personalizzazione dei temi dei moduli

Nell'editor di blocchi, sono presenti opzioni per lo stile e la personalizzazione dei moduli di WordPress. La sezione Temi comprende tutti gli stili di tema disponibili per WPForms.

Stile dei temi

Nota: se si utilizza la versione Lite di WPForms, si avrà accesso solo agli stili del tema Classic e Default. Per accedere agli stili dei temi premium è necessario passare a una licenza Pro o superiore.

Nelle prossime sezioni, mostreremo alcuni dei temi dei moduli che WPForms mette a disposizione. Questo vi darà una panoramica di come appariranno una volta applicati al vostro sito.

Moderno (predefinito)

Questo è il tema applicato di default a tutti i moduli del sito. Utilizza un colore blu per elementi come il pulsante di invio e la barra di avanzamento.

Tema moderno predefinito

Dopo aver selezionato un tema, è possibile aggiornare gli stili del tema in modo simile a come si fa per lo stile del modulo nell'editor dei blocchi.

Una volta aggiornato uno dei temi, viene creata una copia del tema originale con i nuovi stili aggiunti. Questo nuovo tema avrà il nome (Copy) aggiunto al nome del tema. Nel nostro esempio, il nome è Default (Copy).

Copia del tema predefinito

È possibile rinominare il tema personalizzato aggiornando il testo nel campo Nome tema.

Aggiornare il nome del tema

Sotto il campo Nome del tema, si trova il link Elimina tema. Questo link è utile se si desidera eliminare i temi dei moduli personalizzati sul proprio sito.

Cancellare il tema

Facendo clic su di esso, apparirà un messaggio in sovrimpressione che chiederà di confermare o meno l'azione di eliminazione. È sufficiente fare clic sul pulsante Sì, Elimina per procedere.

Nota: questo passaggio è irreversibile e non sarà possibile accedere al tema personalizzato dopo averlo eliminato dal sito.

Confermare l'eliminazione

Classico

Lo stile classico del tema utilizza un CSS molto minimale con un colore d'accento grigio per il pulsante di invio.

Tema classico

Oceano

Il tema del modulo Oceano è simile allo stile Moderno, con un colore d'accento verde scuro per gli elementi del modulo come i pulsanti e i cursori numerici.

Tema dell'oceano

Mandarino

Lo stile Tangerine utilizza opzioni di stile simili per i campi. Tuttavia, applica un colore d'accento arancione agli elementi del modulo, come pulsanti, barre di avanzamento, cursori numerici, ecc.

Tema mandarino

Aero

Il design Aero applica un colore di sfondo grigio chiaro al contenitore del modulo con un colore d'accento blu. Inoltre, al contenitore viene applicata un'ombra di riquadro. Questo conferisce al modulo un aspetto moderno ed elevato.

Tema Aero

Calcestruzzo

Lo stile Concrete utilizza un colore d'accento rosa per gli elementi del modulo come i pulsanti, la paginazione e i cursori numerici. Aggiunge inoltre un'immagine di sfondo scura di cemento al contenitore del modulo.

Tema concreto

La prima volta che si seleziona un tema che richiede un'immagine di sfondo, è necessario scaricare l'immagine prima che gli stili vengano applicati. Verrà visualizzato un messaggio in sovrimpressione che richiede di scaricare l'immagine. Fare clic su Continua per scaricarla e importarla.

Installare lo sfondo per i temi

Nota: scaricando l'immagine di sfondo di un tema, si scaricano anche tutte le immagini stock di cui il tema ha bisogno. Non sarà quindi necessario ripetere la procedura se si sceglie un tema con un'immagine di sfondo diversa.

Se lo si desidera, è possibile aggiornare l'immagine di sfondo dalla sezione Stili di sfondo.

Sezione Stili di sfondo

È possibile scegliere tra la libreria multimediale del sito o le foto stock come fonte di immagini. Se si seleziona l'opzione Foto stock, sarà possibile scegliere tra le immagini stock disponibili facendo clic sull'immagine esistente.

Selezionare la foto stock

La sezione Stili di sfondo contiene anche opzioni per personalizzare le dimensioni, la posizione e la ripetizione dell'immagine.

Opzioni degli stili di sfondo

Se si desidera rimuovere l'immagine di sfondo, fare clic sul pulsante Rimuovi immagine.

Fare clic sul pulsante Rimuovi immagine

Eleganza

Lo stile del tema Elegance applica un raggio di bordo intorno al contenitore del modulo. Utilizza anche un'immagine di sfondo per il widget contenitore del modulo. Conferisce un aspetto accattivante e moderno.

Tema dell'eleganza

Fresco

Lo stile del tema Fresh aggiunge un'immagine di sfondo con foglie verdi fresche. Inoltre, utilizza il verde come colore d'accento per gli elementi del modulo, come i pulsanti.

Tema fresco

Malinconia

Questo stile di tema del modulo agisce come un tema in modalità scura con uno sfondo scuro intorno al contenitore del modulo. Utilizza un colore d'accento verde per gli elementi del modulo, come i pulsanti e i campi del cursore numerico.

Tema della tristezza

Corridoio

Il tema Hallway utilizza un colore d'accento scuro per gli elementi del modulo, come pulsanti, cursori numerici, ecc. Applica inoltre un'immagine di sfondo al contenitore del modulo.

Tema del corridoio

Lush

Questo tema per moduli applica ombreggiature e angoli arrotondati al contenitore del modulo. Inoltre, utilizza un'immagine stock come sfondo del widget contenitore.

Tema lussureggiante

Monstera

Il tema Monstera utilizza un design moderno con un colore d'accento verde e angoli arrotondati per il contenitore del modulo. Inoltre, applica un'immagine stock di bell'aspetto come sfondo del contenitore del modulo.

Tema Monstera

Gamma

Questo tema per moduli utilizza un design moderno con l'immagine di un tramonto come sfondo. Applica anche stili come i bordi, il raggio dei bordi e le ombre dei riquadri al contenitore del modulo.

Tema del modulo di gamma

Primavera

Il tema Spring form aggiunge l'ombra del riquadro al contenitore del modulo e utilizza un'immagine stock sfumata come sfondo. Utilizza inoltre un colore d'accento blu per gli elementi del modulo, come il pulsante di invio.

Tema del modulo di primavera

Vintage

Questo tema per moduli ha un aspetto e un'atmosfera vintage. Utilizza un colore di sfondo personalizzato per il contenitore del modulo e un colore d'accento giallo per gli elementi del modulo.

Tema della forma vintage

Dopo aver scelto un tema per il modulo, è necessario pubblicare la pagina o salvarla come bozza per salvare le modifiche.

Salva le modifiche

Una volta fatto, si può incorporare il modulo in qualsiasi parte del sito e manterrà gli stili configurati nella sezione Temi.

Domande frequenti

Queste sono le risposte ad alcune delle domande più frequenti sull'uso dei temi dei moduli in WPForms.

Posso applicare gli stili dei temi dei moduli ai modelli dei moduli?

Assolutamente sì. Una volta selezionato il modello di modulo che si desidera utilizzare, procedere all'incorporazione in una pagina con l'editor di blocchi abilitato. Nell'editor di blocchi, si potrà scegliere tra gli stili di tema disponibili per progettare il modello di modulo. Per maggiori dettagli, consultare la sezione Personalizzazione dei temi dei moduli.

Ecco fatto! Avete imparato come accedere e usare i temi dei moduli in WPForms.

Poi, volete imparare ad accettare pagamenti attraverso i vostri moduli WordPress? Il nostro tutorial sulla creazione di un modulo di pagamento illustra tutti i passaggi in dettaglio.

Il miglior plugin per la creazione di moduli di WordPress con trascinamento e rilascio

Facile, veloce e sicuro. Unitevi agli oltre 6 milioni di proprietari di siti web che si fidano di WPForms.

Per completare questo modulo, abilitare JavaScript nel browser.