Introduzione
Desiderate nascondere le etichette di scelta dell'immagine sui campi dei moduli a scelta multipla e a casella di controllo? L'opzione di visualizzare immagini per questi campi invece di semplici etichette è un ottimo modo per catturare l'attenzione del visitatore, ma forse volete lasciare che le immagini parlino da sole e rimuovere le etichette che appaiono sotto le immagini? Utilizzando un piccolo snippet CSS potete facilmente nascondere le etichette di queste immagini e in questo tutorial vi mostreremo esattamente come fare!
Creazione del modulo
Per iniziare, creeremo un nuovo modulo e aggiungeremo i nostri campi. Poiché sappiamo già che vogliamo usare le immagini per il campo Checkbox, aggiungeremo questo campo e le immagini che lo accompagnano.
Se avete bisogno di assistenza per la creazione del modulo, consultate questa utile guida. Inoltre, se avete bisogno di assistenza su come impostare un campo utilizzando le Scelte immagine, consultate questa documentazione.
Aggiunta di CSS per nascondere le etichette di scelta delle immagini
Ora che il modulo è stato creato, è possibile vedere le etichette sotto le immagini.
Poiché vogliamo nascondere le etichette, aggiungeremo dei CSS per nasconderle.
Se avete bisogno di aiuto per aggiungere i CSS al vostro sito, consultate questo tutorial.
È sufficiente copiare e incollare questo CSS nel vostro sito.
form.wpforms-form .wpforms-field-container ul.wpforms-image-choices span.wpforms-image-choices-label {
display: none;
}
Questo CSS non solo nasconde le etichette che appaiono sotto le immagini, ma rimuove anche qualsiasi margine (spaziatura) applicato automaticamente sotto le immagini.
Volete rimuovere anche gli spazi bianchi intorno alle scelte di immagine? Date un'occhiata al nostro articolo su Come rimuovere gli spazi bianchi intorno alle scelte di immagine.