Volete personalizzare l'aspetto dei vostri moduli WordPress? In WPForms potete aggiungere facilmente classi e stili CSS personalizzati per dare ai vostri moduli l'aspetto che desiderate.
Questo tutorial vi mostrerà come aggiungere classi CSS personalizzate per lo stile di specifici elementi del modulo, nonché come aggiungere qualsiasi CSS personalizzato al vostro sito WordPress.
In questo articolo
Nota: se siete alle prime armi con i CSS, la nostra guida per principianti sullo stile dei moduli con i CSS è il posto migliore per iniziare.
Cos'è una classe CSS?
Le classi CSS sono un modo per individuare gli elementi che si desidera stilizzare sul proprio sito web.
In WPForms, ai campi vengono assegnate automaticamente diverse classi CSS. Per esempio, se un campo è impostato su una classe Dimensione del campo di Grande, gli verrà assegnata la classe CSS wpforms-field-large.
Aggiungendo una classe CSS personalizzata, si può facilmente indirizzare un campo specifico del modulo o applicare gli stessi stili a più campi.
Nota: se desiderate creare uno stile per i vostri moduli senza usare classi CSS personalizzate o scrivere codice, consultate il nostro tutorial sullo stile dei moduli.
Aggiunta di classi CSS personalizzate in WPForms
In WPForms è possibile aggiungere classi CSS personalizzate ai singoli campi del modulo, al pulsante di invio o al contenitore intorno al modulo.
Aggiunta di classi CSS ai singoli campi del modulo
Per aggiungere una classe CSS personalizzata a un campo del modulo, è necessario creare un nuovo modulo o modificare un modulo esistente.
Nel pannello di anteprima del costruttore di moduli, fare clic sul campo per aprire le opzioni del campo. Quindi, aprire la scheda Avanzate e cercare il campo denominato Classi CSS.
Quando si assegna un nome a una classe CSS, si possono usare solo lettere o numeri e non sono ammessi spazi. I nomi delle classi sono sensibili alle maiuscole e minuscole, quindi si consiglia di utilizzare lettere minuscole. Se si desidera che il nome della classe contenga più di una parola, includere un trattino (-) o un trattino basso (_) invece di uno spazio.
Per evitare di incorrere in problemi, iniziate sempre i nomi delle classi con una lettera.
Per questo esempio, daremo un nome alla nostra classe CSS wpf-blue-background.
Aggiungendo wpf- all'inizio delle nostre classi, è meno probabile che si aggiunga un nome di classe già utilizzato dal tema del sito. Questo ci aiuterà a evitare conflitti di stile e a far sì che i nostri stili vengano applicati con successo.
Quando si è pronti, aggiungere il wpf-blue-background alla classe CSS Classi CSS campo.
Se lo si desidera, è possibile aggiungere altre classi a questo campo. Per farlo, basta aggiungere uno spazio tra i nomi delle classi. Ad esempio:
wpf-blue-background wpf-bold-font wpf-xl-margin
Nota: il campo Classi CSS può essere utilizzato anche per visualizzare i campi del modulo in un layout a più colonne e in un layout a colonna singola su dispositivi mobili.
Aggiunta di classi CSS al contenitore di un modulo o a un pulsante di invio
Per alcuni stili, può essere utile puntare al contenitore del modulo o al pulsante di invio.
Ad esempio, si può desiderare che i pulsanti di invio per tutti i moduli di iscrizione del sito siano stilizzati in un modo e che i pulsanti di invio in tutti i moduli di contatto generali siano stilizzati in un modo diverso. Un modo semplice per ottenere questo risultato è aggiungere la stessa classe CSS a tutti i pulsanti di invio che si desidera siano stilizzati allo stesso modo.
Per aggiungere un nome di classe CSS personalizzato per una delle due opzioni, aprire il costruttore di moduli e andare su Impostazioni " Generale". Da qui, nella sezione Avanzate, si potranno vedere i campi per la Classe CSS del modulo e per la Classe CSS del pulsante di invio.
Se si desidera aggiungere più di un nome di classe, è sufficiente separare ogni nome con uno spazio.
Nota: se lo si desidera, è possibile utilizzare una classe CSS integrata nel modulo per visualizzare il modulo su una sola riga.
Creazione e aggiunta di stili CSS per il sito
Ora che avete aggiunto una classe CSS personalizzata a un campo del vostro modulo, potete creare gli stili che desiderate applicare.
Creazione di stili CSS
I CSS sono uno strumento potente che offre un'ampia gamma di opzioni di stile. Per istruzioni su come iniziare a creare CSS, consultare la nostra Guida ai CSS per principianti.
Per il nostro esempio, aggiungeremo semplicemente uno sfondo blu a qualsiasi campo con la classe wpf-blue-background. Quando si punta a un nome di classe all'interno dei CSS, questo deve sempre iniziare con un punto (.), ad esempio .wpf-blue-background.
Poiché molti stili vengono già applicati al modulo, è bene rendere il CSS più specifico. Per farlo, basta aggiungere .wpforms-form davanti al nome della classe personalizzata.
Ecco il nostro esempio di CSS:
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
Se gli stili personalizzati non vengono applicati correttamente, è possibile includere !important prima del punto e virgola.
Nota: l 'uso di !important è necessario solo se gli stili non vengono applicati altrimenti. La nostra guida sulla risoluzione dei problemi dei CSS contiene maggiori dettagli.
Aggiunta di CSS al sito WordPress
Un modo semplice e veloce per aggiungere CSS personalizzati al vostro sito è il Theme Customizer di WordPress. Si tratta di un'opzione popolare perché è disponibile in quasi tutti i temi e dispone di un'area di anteprima dal vivo.
Per accedere all'area CSS del Theme Customizer, andare su Appearance " Customize e selezionare la scheda Additional CSS.
Quindi, aggiungere lo snippet CSS personalizzato. Quando si è pronti, fare clic su Pubblica.
Ecco come appare ora il nostro modulo di esempio con la classe CSS e gli stili CSS applicati:
Nota: gli stili personalizzati non vengono visualizzati? Consultate la nostra guida alla risoluzione dei problemi dei CSS per conoscere i problemi e le soluzioni più comuni.
Un altro modo per aggiungere CSS personalizzati che rimangano coerenti con le modifiche al tema è utilizzare WPCode. Per sapere come applicare i CSS personalizzati con WPCode, compreso l'uso della sua libreria di snippet di codice CSS precostituiti, consultate la nostra guida sull'uso degli snippet di codice.
Se volete vedere altri metodi per aggiungere i CSS, consultate il tutorial di WPBeginner su come aggiungere CSS personalizzati a WordPress.
Ecco fatto! Ora è possibile aggiungere classi CSS personalizzate per creare lo stile di aree specifiche dei moduli.
Volete anche visualizzare e modificare gli stili dei moduli incorporati? Consultate il nostro tutorial sulla personalizzazione dei singoli campi del modulo per tutti i dettagli.