Riassunto AI
Desideri aggiungere immagini prima o dopo le etichette del tuo modulo? L'aggiunta di immagini alle etichette può far risaltare questi elementi con un tocco di stile sul tuo modulo, e questo può essere facilmente ottenuto con un po' di CSS.
In questo tutorial, ti guideremo attraverso come aggiungere immagini prima e dopo le etichette dei campi in WPForms.
Creazione del tuo modulo
Per iniziare, crea un nuovo modulo o modifica uno esistente per accedere al generatore di moduli. Per il nostro modulo, abbiamo aggiunto i campi modulo Nome, Email, Telefono, URL, Caricamento file e Paragrafo.
Aggiungere le tue immagini di sfondo prima delle etichette del modulo
Per questo tutorial, abbiamo già creato immagini per ciascuna di queste etichette e le abbiamo caricate nella Libreria multimediale di WordPress.
Se desideri aiuto per caricare immagini SVG in WordPress, ti preghiamo di consultare questo tutorial.
Aggiunta del CSS
Ora è il momento di aggiungere il CSS che unirà tutto. Se hai bisogno di aiuto per aggiungere CSS al tuo sito, ti preghiamo di consultare questo tutorial.
label[for="wpforms-1723-field_1"]::before,
label[for="wpforms-1723-field_2"]::before,
label[for="wpforms-1723-field_3"]::before,
label[for="wpforms-1723-field_4"]::before,
label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
content: " ";
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
}
label[for="wpforms-1723-field_1"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/avatar.svg);
}
label[for="wpforms-1723-field_2"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/envelope.svg);
}
label[for="wpforms-1723-field_3"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/phone-call.svg);
}
label[for="wpforms-1723-field_4"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/link.svg);
}
label[for="wpforms-1723-field_6"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/upload.svg);
}
label[for="wpforms-1723-field_5"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/chat.svg);
}
Nello snippet sopra, stiamo puntando al modulo con ID 1723. Dovrai aggiornare questo ID per farlo corrispondere al modulo a cui desideri aggiungere le immagini. Stiamo usando l'elemento CSS ::before per puntare all'area prima dell'etichetta di ciascun campo.
Il selettore field_1 punta all'ID del campo. Quindi, dovrai aggiornare questi valori per farli corrispondere agli ID dei campi che desideri puntare.
Nota: Ogni etichetta del modulo sopra nel CSS punta agli ID dei campi. Se hai bisogno di aiuto per trovare gli ID dei tuoi moduli o campi, ti preghiamo di consultare questo tutorial.
Sostituisci gli URL di background-image con il link alle immagini che hai caricato sul tuo sito WordPress. Una volta aggiunto il CSS, potrai vedere queste immagini sul tuo modulo.
Utilizzare un'immagine basata su font
Caricare immagini sul tuo sito non è l'unico modo per visualizzare immagini prima o dopo le etichette dei campi. Puoi facilmente aggiungere anche un'icona basata su font a queste etichette.
Per questo tutorial, abbiamo già impostato la famiglia di font che vogliamo utilizzare per queste icone.
Se desideri aiuto per impostare questo passaggio, ti preghiamo di consultare questo tutorial.
In questo tutorial, abbiamo utilizzato il plugin WordPress per il plugin Font Awesome.
label[for="wpforms-1723-field_1"]::before, label[for="wpforms-1723-field_2"]::before, label[for="wpforms-1723-field_3"]::before, label[for="wpforms-1723-field_4"]::before, label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
font-family:"Font Awesome 5 Free";
}
label[for="wpforms-1723-field_1"]::before {
content: "\f007";
}
label[for="wpforms-1723-field_2"]::before {
content: "\f199";
}
label[for="wpforms-1723-field_3"]::before {
content: "\f095";
}
label[for="wpforms-1723-field_4"]::before {
content: "\f35d";
}
label[for="wpforms-1723-field_6"]::before {
content: "\f382";
}
label[for="wpforms-1723-field_5"]::before {
content: "\f086";
}
Aggiungere le immagini dopo l'etichetta
Se desideri che le icone appaiano dopo l'etichetta, il CSS sarebbe leggermente diverso.
label[for="wpforms-1723-field_1"]::after, label[for="wpforms-1723-field_2"]::after, label[for="wpforms-1723-field_3"]::after, label[for="wpforms-1723-field_4"]::after, label[for="wpforms-1723-field_6"]::after,
label[for="wpforms-1723-field_5"]::after{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
font-family:"Font Awesome 5 Free";
margin: 0 0 0 5px;
}
label[for="wpforms-1723-field_1"]::after {
content: "\f007";
}
label[for="wpforms-1723-field_2"]::after {
content: "\f199";
}
label[for="wpforms-1723-field_3"]::after {
content: "\f095";
}
label[for="wpforms-1723-field_4"]::after {
content: "\f35d";
}
label[for="wpforms-1723-field_6"]::after {
content: "\f382";
}
label[for="wpforms-1723-field_5"]::after {
content: "\f086";
}
L'unica differenza rispetto a questo CSS è che stai usando ::after invece di ::before e abbiamo aggiunto un po' di margine a sinistra dell'etichetta per un po' di spaziatura.
Fatto! Ora hai imparato come posizionare immagini prima o dopo le etichette del tuo modulo.
Successivamente, desideri aggiungere un indice ai tuoi moduli lunghi? Dai un'occhiata al tutorial su Come aggiungere un indice per moduli lunghi.