Riassunto AI
Vuoi aggiungere immagini alle etichette delle caselle di controllo nei tuoi moduli? Puoi migliorare l'aspetto visivo del tuo modulo aggiungendo immagini di sfondo o icone basate su font alle etichette delle caselle di controllo utilizzando i CSS. Per impostazione predefinita, tutte le etichette dei moduli visualizzeranno solo il testo che hai all'interno del modulo.
Questa guida ti mostrerà due metodi diversi per raggiungere questo obiettivo.
Seguendo le istruzioni nell'articolo, è abbastanza facile usare immagini e testo per le etichette del tuo campo modulo Casella di controllo utilizzando un'immagine o anche icone basate su font.
Impostazione del modulo
Innanzitutto, crea il tuo modulo e aggiungi un campo modulo Casella di controllo. Se hai bisogno di aiuto per creare il tuo modulo, consulta la nostra guida su come creare il tuo primo modulo.
Prendi nota dell'ID del tuo modulo e dell'ID del campo, poiché ti serviranno quando aggiungerai i CSS. Se non sei sicuro di come trovare questi ID, consulta la nostra guida su come trovare gli ID dei moduli e dei campi.
Aggiunta di immagini di sfondo
Il primo metodo utilizza immagini di sfondo caricate nella tua libreria multimediale di WordPress. Se non sei sicuro di come aggiungere CSS personalizzati al tuo sito, consulta il nostro tutorial su come aggiungere CSS al tuo sito.
Se desideri aggiungere un'immagine di sfondo alle etichette del campo modulo Casella di controllo, utilizza il seguente CSS.
Sostituisci i seguenti valori nel codice CSS:
- Riga 1: Sostituisci 1000 con l'ID del tuo modulo
- Riga 1: Sostituisci field_25 con l'ID del tuo campo
- Riga 4: Sostituisci l'URL con il percorso della tua immagine
- Righe 6-7: Regola altezza e larghezza nelle righe 6-7 in base alle dimensioni della tua immagine
Per ogni opzione aggiuntiva della casella di controllo, copia l'intero blocco CSS e cambia choice-1 in choice-2, choice-3 e così via. Puoi anche usare immagini diverse per ogni scelta cambiando l'URL dell'immagine di sfondo.
Utilizzo di icone basate su font
Il secondo metodo utilizza icone font, che possono essere più leggere e flessibili delle immagini di sfondo. Innanzitutto, assicurati di avere una libreria di icone font installata nel tuo tema WordPress. Se hai bisogno di aiuto con questo, consulta la guida di WPBeginner su come aggiungere font icona a WordPress.
Puoi anche usare immagini per le etichette delle caselle di controllo utilizzando un font basato su icone font-family.
Proprio come con il CSS precedente, stiamo prendendo di mira l'ID del modulo 1000 e l'ID del campo 25. Nel CSS sottostante vedrai -1000- che si riferisce all'ID del modulo.
ul#wpforms-583-field_3 li.choice-1 label:before,
ul#wpforms-583-field_3 li.choice-2 label:before,
ul#wpforms-583-field_3 li.choice-3 label:before,
ul#wpforms-583-field_3 li.choice-4 label:before,
ul#wpforms-583-field_3 li.choice-5 label:before {
font-family: dashicons;
content: "\f173";
display: inline-block;
color: #000000;
font-size: 16px;
margin: 0px 5px;
position: relative;
top: 2px;
}
Domande frequenti
D: Posso usare questo CSS per il campo modulo Scelta multipla?
R: Assolutamente! Queste stesse classi CSS sono utilizzate anche per il campo modulo Scelta multipla. Ricorda solo di aggiornare gli ID del modulo e del campo nel tuo CSS.
D: Perché questo non sembra funzionare per il mio modulo?
R: Assicurati di aver aggiornato il CSS per utilizzare i tuoi ID del modulo e del campo. Una volta confermato questo e la tua immagine non viene visualizzata, assicurati di controllare l'URL dell'immagine che stai tentando di aggiungere nel tuo CSS.
Per assistenza nella ricerca degli ID dei tuoi moduli e campi, consulta questa utile documentazione.
D: Posso usarlo per il campo a discesa?
R: Al momento, questo CSS funzionerà correttamente solo con i seguenti campi:
- Casella di controllo
- Scelta multipla
- Checkbox di pagamento
- Scelta multipla di pagamento
Ciò è dovuto principalmente al modo in cui i browser moderni eseguono il rendering dei campi a discesa e del markup HTML.
E questo è tutto! Hai aggiunto correttamente un'immagine alle etichette della tua Checkbox. Desideri anche personalizzare l'aspetto delle icone di Valutazione? Dai un'occhiata al nostro tutorial su Come personalizzare l'aspetto delle icone di valutazione.