How to Customize the Labels for Image Choices

Visualizza Markdown

Vuoi migliorare l'aspetto visivo delle etichette delle tue Scelte Immagine in WPForms? Sia che tu stia utilizzando Scelte Immagine per campi Casella di controllo o Scelta multipla, puoi creare effetti di hover coinvolgenti e stilizzare le tue etichette usando CSS.

Questa guida ti mostrerà diversi modi per personalizzare le etichette delle Scelte Immagine per creare un'esperienza di modulo più interattiva e visivamente accattivante.

Configurazione del tuo modulo

Iniziamo creando un modulo e aggiungendo i nostri campi. Includeremo anche un campo Casella di controllo che utilizza Scelte Immagine.

Se hai bisogno di aiuto per creare un modulo con Scelte Immagine, consulta la nostra guida su come impostare le Scelte Immagine.

Personalizzazione delle Etichette delle Scelte Immagine

Questi esempi CSS ti aiuteranno a creare vari effetti visivi per le tue etichette delle Scelte Immagine. Per tutti gli esempi, ricorda di sostituire form#wpforms-form-1000 con l'ID del tuo modulo. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta la nostra guida su come trovare gli ID dei moduli e dei campi.

Sovrapponi le Etichette all'Hover

Questo stile crea un elegante effetto di sovrapposizione in cui le etichette appaiono sopra l'immagine quando gli utenti passano il mouse:

con questo CSS puoi facilmente stilizzare le etichette in modo che appaiano sopra le immagini quando passi il mouse

Aggiungi Bordi ed Effetti Box

Utilizza le proprietà border e box per creare cornici, bordi o angoli arrotondati attorno alle etichette.

form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
}

in questo esempio CSS, stiamo inserendo un bordo attorno all'etichetta

Ruota le Immagini all'Hover

Applicando la regola CSS transform, introdurremo un delizioso tocco alle tue immagini. Al passaggio del mouse, ruoteranno elegantemente, iniettando un elemento interattivo giocoso nel tuo modulo. Questo effetto coinvolgente cattura i visitatori mentre navigano attraverso la tua selezione di immagini.

form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
    transform: rotate(10deg);
}

in questo esempio applichiamo un effetto di inclinazione quando si passa il mouse sull'immagine

Ombra Box all'Hover

Migliorando le tue immagini con un tocco di profondità e dimensione, implementeremo un effetto di ombra box all'hover e rimuoveremo il bordo predefinito all'hover. Mentre i tuoi visitatori scorrono ogni immagine, un'ombra sottile emergerà con grazia, conferendo al tuo modulo un accattivante senso di profondità e interattività.

form#wpforms-form-1000 .wpforms-image-choices label:hover {
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

con questo esempio CSS, forniamo un'ombra sulla casella al passaggio del mouse

Combina Effetti Multipli (Bordo, Etichette e Ombra Box all'Hover)

In quest'ultimo esempio, combineremo parte del CSS che abbiamo già utilizzato.

Quando passi il mouse sull'immagine ora, vedrai l'etichetta sopra l'immagine.

con questo CSS possiamo combinare un po' di tutto

E questi sono solo alcuni esempi di quanto facilmente puoi personalizzare le etichette per le Scelte Immagine. Vuoi anche rimuovere lo spazio bianco che vedi attorno alle immagini? Dai un'occhiata al nostro articolo su Come rimuovere lo spazio bianco attorno alle Scelte Immagine.

Come personalizzare le etichette per le scelte di immagini

Riassunto AI