Styling di WPForms con CSS personalizzato (Guida per principianti)

Desideri poter aggiungere stili personalizzati ai tuoi moduli? CSS è uno strumento potente che ti permette di dare ai tuoi moduli uno stile unico e individuale.

Questo tutorial ti guiderà nella creazione di CSS personalizzato per stilizzare i tuoi moduli, con molti esempi inclusi.

---

Cos'è il CSS?

CSS sta per Cascading Style Sheets, ed è il codice letto dai browser web per stilizzare quasi tutto ciò che vedi su Internet. Controlla tutto, dalla dimensione e stile del carattere ai colori e agli effetti hover. Senza di esso, la maggior parte del web sembrerebbe un file di testo molto noioso.

Lettura del CSS

A differenza di molti altri tipi di codice, il CSS è abbastanza facile da imparare anche senza alcuna esperienza di codifica. Il primo passo è semplicemente capire i tre componenti principali del CSS:

• Selettori: il 'bersaglio' a cui vuoi applicare gli stili
• Proprietà: lo stile specifico che vuoi cambiare, come la dimensione del carattere o il colore
• Valori: l'effetto di stile specifico che vuoi applicare

Ad esempio, dai un'occhiata a questo snippet di CSS che imposta la dimensione del titolo del tuo modulo:

.wpforms-form .wpforms-title {
    font-size: 26px !important;
}

Il selettore in questo esempio è .wpforms-form .wpforms-title e applicherà il tuo CSS al titolo di tutti i moduli WPForms sul tuo sito.

Quindi, tra le parentesi graffe, c'è una proprietà CSS in questo esempio: font-size. Questa proprietà ha un valore di 26 pixel.

Se decidiamo di voler ingrandire il testo del titolo del nostro modulo (diciamo 35 pixel), dovremmo solo cambiare quel valore nel CSS:

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

Scelta di un selettore CSS

Il primo passo per scrivere CSS è identificare il selettore corretto per indirizzare una parte specifica del tuo modulo. Ci sono due modi per scegliere un selettore:

1) Copiare un selettore dal nostro elenco

Abbiamo creato un elenco completo di selettori per ogni campo disponibile nei nostri moduli, così puoi semplicemente scegliere il selettore per qualsiasi area a cui desideri applicare il CSS.

2) Utilizzare gli strumenti per sviluppatori nel tuo browser

Questo approccio più avanzato potrebbe presentare una leggera curva di apprendimento, ma è un'ottima opzione se vuoi creare un sacco di CSS personalizzato.

Gli strumenti per sviluppatori ti permettono di ispezionare qualsiasi parte della pagina web per vedere quale CSS viene applicato. Puoi anche testare le modifiche al CSS al volo e vederle applicate direttamente nel tuo browser. WPBeginner ha un'ottima guida all'uso degli strumenti per sviluppatori che dovrebbe aiutarti a iniziare, incluso un video passo-passo sull'uso degli strumenti per sviluppatori di Chrome.

Utilizzo di proprietà e valori CSS

Ora che sai come scegliere un selettore CSS, possiamo discutere come modificare stili specifici con proprietà e valori CSS.

Di seguito troverai alcune proprietà CSS di base che potrebbero esserti utili per i tuoi moduli. Inoltre, troverai esempi di modifiche di stile che puoi apportare combinando selettori, proprietà e valori per creare uno snippet CSS completo.

Fai semplicemente clic sul link in questo elenco per passare alla sezione di cui hai bisogno:

• font-family
• colore
• dimensione-del-carattere
• colore-di-sfondo
• spaziatura
• bordo
• raggio-del-bordo

font-family

• • Definizione: Lo stile del carattere predefinito
  • Esempio: Per modificare il carattere predefinito del titolo nei moduli del tuo sito in Arial, useresti:

.wpforms-form .wpforms-title {
    font-family: 'Arial', sans-serif !important;
}

colore

• • Definizione: Colore del carattere
  • Esempio: Per rendere blu il titolo di tutti i moduli del tuo sito, potresti usare:

.wpforms-form .wpforms-title {
    color: #007acc !important;
}

dimensione-del-carattere

• • Definizione: Quanto sarà grande il carattere (le unità possono essere px, em o rem)
  • Esempio: Per rendere il titolo di tutti i moduli del tuo sito 35px, useresti:

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

colore-di-sfondo

• • Definizione: Il colore che riempirà lo sfondo dell'area del selettore
  • Esempio: Per rendere l'intero sfondo di un modulo grigio chiaro, potresti usare il seguente CSS:

.wpforms-form {
    background-color: #eee !important;
}

spaziatura

• • Definizione: La distanza tra l'elemento selettore e il suo bordo
  • Esempio: Hai notato come l'esempio sopra non abbia alcuna distanza tra il testo e i bordi della casella colorata? Oltre al colore di sfondo, aggiungiamo 20 pixel di padding in alto e in basso del modulo, nonché 15 pixel di padding sui lati destro e sinistro. Lo faremo aggiungendo padding: 20px 15px; al CSS dell'esempio precedente:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
}

bordo

• • Definizione: Determina lo stile e lo spessore del bordo di un elemento
  • Esempio: Aggiungiamo un bordo spesso 3 pixel, una linea solida e grigio scuro al nostro esempio sopra. Lo faremo aggiungendo border: 3px solid #666; al CSS esistente per .wpforms-form:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
}

raggio-del-bordo

• • Definizione: Quanto saranno arrotondati gli angoli di un elemento (0px è un bordo squadrato, numeri più alti sono più arrotondati)
  • Esempio: Continueremo a costruire sull'esempio sopra, aggiungendo un border-radius di 20 pixel per arrotondare gli angoli dei nostri moduli. Possiamo farlo aggiungendo border-radius: 20px; al CSS che abbiamo già creato:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Stilizzazione di un singolo modulo

Utilizzando i selettori CSS descritti sopra, puoi applicare facilmente gli stessi stili a tutti i moduli WPForms sul tuo sito. Se desideri applicare alcuni stili solo a un singolo modulo, tuttavia, dovrai aggiungere l'ID del modulo al selettore.

Per trovare facilmente l'ID del modulo, puoi cercarlo nel suo shortcode. Questo può essere visto nell'editor della pagina/post, oppure puoi andare su WPForms » Tutti i moduli e guardare nella colonna Shortcode.

In questo esempio, il nostro modulo ha un ID di 4. Per applicare i nostri stili precedenti solo a questo singolo modulo, dovremmo aggiungere #wpforms-4 all'inizio del selettore. Ecco il nostro CSS modificato:

#wpforms-4 .wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Una volta creato il tuo snippet CSS, il passo successivo è aggiungerlo al tuo sito. Puoi imparare come farlo seguendo la guida di WPBeginner per aggiungere CSS personalizzato a WordPress.

Fatto! Ora puoi creare stili CSS personalizzati per i tuoi moduli. Per altri esempi di CSS per creare design di moduli personalizzati, consulta il nostro articolo sui bellissimi design di moduli che puoi copiare.

Successivamente, desideri aggiungere stili personalizzati al pulsante di invio dei tuoi moduli? Dai un'occhiata al nostro tutorial sulla personalizzazione del pulsante di invio per dettagli ed esempi.