Volete sapere come aggiungere immagini di sfondo ai vostri moduli? È facile creare uno stile per il vostro modulo con un'immagine o una sfumatura di colore come sfondo utilizzando i CSS!
Questa esercitazione mostra come aggiungere un'immagine di sfondo al proprio modulo.
In questo articolo
Nota: i passaggi di questa esercitazione richiedono l'aggiunta di una classe CSS al sito. Se si preferisce un approccio più semplice che non preveda l'aggiunta di CSS personalizzati, si può consultare il nostro tutorial sull'uso dei temi dei moduli.
1. Scelta dell'immagine di sfondo
Per iniziare, è necessario scegliere un'immagine da utilizzare come sfondo del modulo. È possibile utilizzare qualsiasi immagine dalla propria libreria multimediale o da qualsiasi altro sito Internet a cui sia possibile accedere.
Considerazioni da fare
Per garantire la massima leggibilità, assicurate un contrasto sufficiente tra l'immagine di sfondo e il testo o i campi del modulo.
Ad esempio, evitate di utilizzare testo chiaro su uno sfondo chiaro. Utilizzate invece testi più scuri su sfondi più chiari e testi più chiari su sfondi scuri.
2. Scegliere un modulo
Quindi, scegliere il modulo che si desidera personalizzare. Se dovete ancora creare un modulo, aggiungetene uno nuovo cliccando su WPForms " Aggiungi nuovo.
Per iniziare, potete scegliere uno dei tanti modelli di modulo disponibili.
Se nessuno dei modelli predefiniti soddisfa le vostre esigenze, potete scegliere un modello simile e personalizzarlo nel Form Builder.
3. Aggiunta di un'immagine di sfondo al modulo
Nel Form Builder, andare su Impostazioni " Generale " Avanzate.
Da qui, inserire il nome della classe in Classe CSS del modulo. Siate liberi di usare qualsiasi nome per la vostra classe, ma vi consigliamo di aggiungere wpf- come prefisso. In questo modo si evitano conflitti tra il codice CSS personalizzato e i temi o i plugin presenti sul sito.
Nota: per evitare problemi, assicurarsi che il nome della classe inizi con una lettera. Inoltre, ricordate che i nomi delle classi nei CSS sono sensibili alle maiuscole e alle minuscole. Per ulteriori informazioni, consultate la nostra guida introduttiva sullo stile e i tutorial sull'aggiunta di classi a WPForms.
Utilizzo di un'immagine esistente
Se si desidera utilizzare un'immagine dalla libreria multimediale, è necessario l'URL completo dell'immagine. Per ottenerlo, andate innanzitutto su Media " Library dalla dashboard di amministrazione di WordPress.
Da qui, fare clic sull'immagine che si desidera utilizzare.
Nella finestra di dialogo che si apre, fare clic su Copia URL negli appunti.
L'URL dell'immagine viene copiato negli appunti.
Nota: per le immagini provenienti da altre fonti su Internet, copiare l'URL facendo clic con il pulsante destro del mouse sull'immagine e facendo clic su Copia indirizzo immagine.
Il testo del menu potrebbe essere leggermente diverso a seconda del browser scelto. Tuttavia, la funzione è la stessa che si ottiene facendo clic su Copia URL negli appunti nella libreria multimediale.
Una volta fatto questo, tornate alla dashboard di amministrazione di WordPress e andate su Aspetto " Personalizza, quindi scegliete CSS aggiuntivo.
Successivamente, creare una classe personalizzata con la proprietà background-imagee incollare l'URL copiato in precedenza.
Di seguito abbiamo scritto un esempio di classe di questo tipo. Ricordarsi di sostituire /path/wpforms-backdrop.png con l'URL effettivo dell'immagine.
Le impostazioni dovrebbero essere simili a queste.
Quando si è sicuri che il codice è corretto, fare clic su Pubblica per salvare le modifiche.
Se non ci sono errori nel codice, il modulo avrà ora un'immagine di sfondo. Ecco un esempio di modulo che utilizza il codice precedente:
Utilizzo di un gradiente come immagine di sfondo
Con i CSS, i gradienti di colore possono essere utilizzati come immagini e questa soluzione funziona anche con i moduli. I gradienti sono ampiamente personalizzabili e possono utilizzare qualsiasi numero di colori.
Poiché i gradienti sono autogenerati, non è necessaria un'immagine di partenza dalla libreria multimediale o da qualsiasi altra parte di Internet. Questo offre il vantaggio di una maggiore velocità e unicità. Inoltre, non dovrete preoccuparvi della scomparsa dell'immagine di partenza.
Nei CSS sono disponibili tre tipi di gradienti:
conic-gradient()linear-gradient()radial-gradient()
Nota: se volete saperne di più sull'uso dei gradienti nei CSS, vi consigliamo di leggere questa pagina del Mozilla Developer Network.
In questo esempio, vi mostreremo come utilizzare un semplice gradiente lineare come sfondo per il vostro modulo. È sufficiente scrivere la classe come in precedenza, ma invece di utilizzare un URL, useremo la funzione CSS linear-gradient().
Per vedere come funziona, date un'occhiata all'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;
}
In questo modo si otterrà un morbido gradiente blu-bianco come immagine di sfondo del modulo:
Nota: se si preferisce utilizzare una soluzione priva di codice per generare i gradienti, si possono 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 posso aggiungere un'immagine di sfondo ai miei moduli che utilizzano l'addon Conversational Forms?
Se si aggiunge un'immagine di sfondo con il metodo descritto sopra, questa non verrà applicata al modulo. Questo perché i moduli di conversazione utilizzano un'opzione di stile diversa.
Per aggiungere un'immagine di sfondo a un modulo che utilizza l'opzione Addon "Conversational Formsè necessario utilizzare l'opzione #wpforms-conversational-form-page selettore CSS. Ecco un esempio di codice. Assicurarsi di sostituire il percorso nel campo url() con l'immagine effettiva che si intende 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;
}
Questo è tutto! Ora sapete come aggiungere un'immagine di sfondo ai vostri moduli in WPForms.
Poi, vi piacerebbe sapere come personalizzare i vostri moduli senza usare il codice? Consultate la nostra guida alla personalizzazione di WPForms con CSS Hero.