Riassunto AI
Vuoi sapere come aggiungere immagini di sfondo ai tuoi moduli? È facile personalizzare il tuo modulo con un'immagine o una sfumatura di colore come sfondo utilizzando il CSS!
Questo tutorial ti mostrerà come aggiungere un'immagine di sfondo al tuo modulo.
In Questo Articolo
Nota: I passaggi di questo tutorial richiedono l'aggiunta di una classe CSS al tuo sito. Se preferisci un approccio più diretto che non comporti l'aggiunta di CSS personalizzato, consulta il nostro tutorial su l'utilizzo dei temi dei moduli per saperne di più.
1. Scelta di un'immagine di sfondo
Per iniziare, dovrai scegliere un'immagine da utilizzare come sfondo del tuo modulo. Puoi utilizzare qualsiasi immagine dalla tua libreria multimediale o da qualsiasi punto di Internet a cui il tuo sito può accedere.
Considerazioni da fare
Per la massima leggibilità, assicurati un contrasto sufficiente tra l'immagine di sfondo e qualsiasi testo o campo nel tuo modulo.
Ad esempio, evita di usare testo chiaro su uno sfondo chiaro. Usa invece testo più scuro su sfondi più chiari e testo più chiaro su sfondi scuri.
2. Scelta di un modulo
Successivamente, scegli il modulo che desideri personalizzare. Se hai ancora bisogno di creare un modulo, aggiungine uno nuovo facendo clic su WPForms » Aggiungi nuovo.
Puoi scegliere tra uno dei tanti modelli di modulo disponibili per iniziare.
Se nessuno dei modelli predefiniti soddisfa i tuoi requisiti, puoi comunque scegliere un modello simile e personalizzarlo nel Form Builder.
3. Aggiunta di un'immagine di sfondo al tuo modulo
Nel Form Builder, vai su Impostazioni » Generali » Avanzate.
Da qui, inserisci un nome di classe in Classe CSS del modulo. Sentiti libero di usare qualsiasi nome per la tua classe, ma consigliamo di aggiungere wpf- come prefisso. Questo aiuta a evitare conflitti tra il tuo codice CSS personalizzato e qualsiasi tema o plugin sul tuo sito.
Nota: Per evitare problemi, assicurati che il nome della tua classe inizi con una lettera. Ricorda inoltre che i nomi delle classi in CSS sono sensibili alle maiuscole. Per maggiori informazioni, consulta la nostra guida introduttiva allo stile e i tutorial su come aggiungere classi a WPForms.
Utilizzo di un'immagine esistente
Se desideri utilizzare un'immagine dalla tua libreria multimediale, avrai bisogno dell'URL completo dell'immagine. Per ottenerlo, innanzitutto, vai su Media » Libreria dalla dashboard di amministrazione di WordPress.
Da qui, fai clic sull'immagine che desideri utilizzare.
Nella finestra di dialogo che si apre, fai clic su Copia URL negli appunti.
Questo copierà l'URL dell'immagine negli appunti.
Nota: Per le immagini provenienti da altre fonti su Internet, copia l'URL facendo clic con il pulsante destro del mouse sull'immagine e selezionando Copia indirizzo immagine.
Il testo del menu che vedi potrebbe essere leggermente diverso a seconda del browser scelto. Tuttavia, svolgerà la stessa funzione del clic su Copia URL negli appunti nella libreria multimediale.
Una volta fatto ciò, torna alla dashboard di amministrazione di WordPress e vai su Aspetto » Personalizza, quindi scegli CSS aggiuntivo.
Successivamente, crea una classe personalizzata con la proprietà background-image e incolla l'URL che hai copiato in precedenza.
Abbiamo scritto un esempio di tale classe qui sotto. Ricorda di sostituire /path/wpforms-backdrop.png con l'URL effettivo della tua immagine.
Le tue impostazioni dovrebbero apparire più o meno così.
Una volta che sei sicuro che il tuo codice sia corretto, fai clic su Pubblica per salvare le modifiche.
Se non ci sono errori nel tuo codice, il tuo modulo avrà ora un'immagine di sfondo. Ecco un esempio di modulo che utilizza il codice sopra:
Utilizzare un gradiente come immagine di sfondo
Con CSS, i gradienti di colore possono essere utilizzati come immagini e questa soluzione funziona anche con i tuoi moduli. I gradienti sono ampiamente personalizzabili e possono utilizzare un numero qualsiasi di colori.
Poiché i gradienti sono autogenerati, non hai bisogno di un'immagine sorgente dalla tua libreria multimediale o da qualsiasi altra parte su Internet. Ciò offre il vantaggio di una maggiore velocità e unicità. Inoltre, non dovrai preoccuparti che l'immagine sorgente scompaia.
Ci sono tre tipi di gradienti disponibili in CSS:
conic-gradient()linear-gradient()radial-gradient()
Nota: Se desideri saperne di più sull'utilizzo dei gradienti in CSS, ti consigliamo di leggere questa pagina sul Mozilla Developer Network.
In questo esempio, ti mostreremo come utilizzare un semplice gradiente lineare come sfondo per il tuo modulo. Scrivi semplicemente la tua classe come hai fatto prima, ma invece di usare un URL, useremo la funzione CSS linear-gradient().
Per vedere come funziona, controlla l'esempio di codice qui sotto:
.wpf-custom-background {
background-image: linear-gradient(#0299ed, #FFFFFF) !important;
/*Padding isn't necessary, but highly recommended*/
padding: 15px 35px !important;
}
Questo produrrà un gradiente dal blu tenue al bianco come immagine di sfondo del tuo modulo:
Nota: Se preferisci utilizzare una soluzione senza codice per generare i tuoi gradienti, puoi utilizzare risorse online, come CSS Gradient (cssgradient.io).
Domande frequenti
Di seguito, abbiamo risposto ad alcune delle domande più frequenti sull'aggiunta di un'immagine di sfondo ai moduli.
Come aggiungo un'immagine di sfondo ai miei moduli che utilizzano l'addon Moduli Conversazionali?
Se aggiungi un'immagine di sfondo utilizzando il metodo descritto sopra, non verrà applicata al modulo. Questo perché i moduli conversazionali utilizzano un'opzione di stile diversa.
Per aggiungere un'immagine di sfondo a un modulo che utilizza l'addon Moduli Conversazionali, dovrai utilizzare il selettore CSS #wpforms-conversational-form-page. Ecco un esempio di codice. Assicurati di sostituire il percorso nella proprietà url() con l'immagine effettiva che intendi utilizzare.
#wpforms-conversational-form-page {
background-image: url(/path/wpforms-backdrop.png) !important;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
}
Tutto qui! Ora sai come aggiungere un'immagine di sfondo ai tuoi moduli in WPForms.
Successivamente, vorresti sapere come stilizzare i tuoi moduli senza usare il codice? Dai un'occhiata alla nostra guida alla personalizzazione di WPForms con CSS Hero.