Riassunto AI
Desideri aggiungere stili personalizzati ai tuoi moduli o applicare più stili del tema? WPForms, per impostazione predefinita, includerà ampie stilizzazioni per garantire che i tuoi moduli abbiano un aspetto ottimale con qualsiasi tema di WordPress. Tuttavia, questo può rendere più difficile l'applicazione di CSS personalizzato o la visualizzazione degli stili del tema.
Questo tutorial spiegherà come scegliere il livello di stilizzazione del tema incluso nei tuoi moduli utilizzando l'impostazione "Includi stilizzazione moduli" in WPForms.
In Questo Articolo
Regolazione dell'impostazione "Includi stilizzazione moduli"
Per modificare la quantità di CSS inclusa da WPForms, vai su WPForms » Impostazioni nel menu di amministrazione di WordPress.
Nella sezione Generale, troverai il menu a discesa Includi stilizzazione moduli. Per impostazione predefinita, questo menu a discesa sarà impostato su Stilizzazione di base e del tema del modulo.
Nota: Il risultato di ogni opzione di stilizzazione disponibile può variare in modo significativo da tema a tema. Per i migliori risultati, consigliamo di mantenere l'opzione predefinita Stilizzazione di base e del tema del modulo.
Se decidi di provare qualsiasi altra opzione di stilizzazione, assicurati di fare clic sul pulsante Salva impostazioni per memorizzare le modifiche.
Nota:
- Se desideri stilizzare i tuoi moduli nell'editor a blocchi senza scrivere alcun codice CSS, abilita l'opzione Usa markup moderno. Consulta la nostra guida alla stilizzazione dei moduli per saperne di più.
- I nuovi utenti con la versione 1.8.1 o superiore di WPForms hanno l'impostazione Markup Moderno abilitata per impostazione predefinita. Inoltre, l'opzione per disabilitarla è nascosta nella dashboard di WordPress per i nuovi utenti. Consulta la nostra guida se desideri sapere come mostrare questa opzione nella tua pagina delle impostazioni.
Abilitazione della stilizzazione di base e del tema del modulo
Utilizzando Stilizzazione di base e del tema del modulo, verranno incluse due livelli di CSS: stili di base e stili del tema del modulo.
Il tema del modulo include gli stili più aggressivi e generalmente sovrascriverà gli stili che il tuo tema WordPress potrebbe tentare di applicare. Questo è il modo migliore per garantire che i tuoi moduli abbiano un aspetto ottimale, indipendentemente dal tema scelto.
Per esempi di questa impostazione di stilizzazione, diamo un'occhiata a come appare un modulo semplice su due temi comuni: Twenty Twenty e Astra.
Ventimila Venti
Astra
Come puoi vedere in queste immagini, i moduli in entrambi i temi hanno molti degli stessi stili. Ad esempio, hanno lo stesso colore del pulsante di invio, sfondi bianchi nei campi di input e le stesse dimensioni dei font. Ognuno di questi stili, e molti altri, proviene dalla stilizzazione del tema del modulo.
Tuttavia, questi moduli hanno ancora alcuni stili diversi. Ad esempio, Twenty Twenty rende il testo del pulsante di invio in grassetto e ogni modulo eredita il font utilizzato dal tema di WordPress.
Abilitazione solo della stilizzazione di base
L'opzione Solo stilizzazione di base non includerà gli stili del tema del modulo. Invece, includerà solo gli stili di base per WPForms.
Nella maggior parte dei casi, la differenza più notevole con questa impostazione riguarda gli stili dei pulsanti. Gli stili di base di WPForms non includono stili per i pulsanti, quindi tutta la stilizzazione dei pulsanti proverrà dal tema del tuo sito.
Tuttavia, molti altri stili saranno ora gestiti anche dal tuo tema. Con la maggior parte dei temi, noterai probabilmente differenze di stile abbastanza significative con questa impostazione.
Utilizzeremo gli stessi temi di cui sopra come esempi di questa impostazione negli screenshot seguenti. Noterai che alcune nuove differenze includono ora la dimensione del carattere delle etichette dei campi, il grassetto delle sotto-etichette, il colore di sfondo dei campi di input e gli stili dei pulsanti.
Ventimila Venti
Astra
Problemi comuni di stile di base e come risolverli
Quando si utilizza solo l'impostazione di stile di base, potrebbero sorgere alcuni problemi, a seconda dei layout dei moduli e di altre funzionalità che hai abilitato. Di seguito, abbiamo spiegato come risolvere i problemi più comuni.
Nota: Vuoi aggiungere stili personalizzati al pulsante del tuo modulo, ma evitare problemi con l'impostazione "solo stile di base"? Dai un'occhiata al nostro tutorial sullo stile del pulsante di invio in modo da poter utilizzare invece la nostra impostazione di stile di base e tema del modulo.
Layout multicolonna
Con l'impostazione "solo stile di base" attiva, i layout multicolonna generalmente non funzioneranno correttamente. Per risolvere questo problema, dovrai tornare all'opzione Stile di base e tema del modulo o aggiungere il seguente CSS al tuo sito:
Nota: Se non sei sicuro di come utilizzare snippet CSS personalizzati, consulta il tutorial di WPBeginner su come aggiungere CSS personalizzato al tuo sito.
Rimozione della stilizzazione del modulo (nessuna stilizzazione)
L'opzione Nessuno stile impedirà il caricamento di tutti gli stili WPForms per i tuoi moduli incorporati. Ciò significa che gli unici stili che vedrai nei tuoi moduli proverranno dal tuo tema WordPress.
Nota: L'opzione Nessuno stile è destinata solo agli sviluppatori e richiederà un CSS personalizzato estensivo.
Inoltre, molte opzioni del modulo non funzioneranno più correttamente con questa impostazione. Ad esempio, tutti i layout dei moduli verranno rimossi e le pagine dei moduli multipagina saranno tutte visibili contemporaneamente.
Ecco fatto! Ora conosci tutto ciò che ti serve per determinare l'opzione di stile del modulo migliore per il tuo sito.
Successivamente, vuoi scoprire come personalizzare il pulsante di invio del tuo modulo? Assicurati di consultare il nostro tutorial sullo stile del pulsante di invio per i dettagli sulla personalizzazione dei colori, delle dimensioni del pulsante e altro ancora.