Riassunto AI
La maggior parte dei moduli WordPress sono di testo semplice, il che va benissimo per un modulo di contatto di base. Ma un po' di raffinatezza visiva può fare una grande differenza, che si tratti del tuo logo in alto, di una foto del prodotto o di scelte di risposta basate su immagini che sono più facili da scansionare rispetto alle opzioni di testo semplice.
Aggiungere un'immagine a un modulo WordPress è più facile di quanto potresti aspettarti e non avrai bisogno di scrivere alcun codice. Ti guiderò attraverso l'intero processo passo dopo passo, dall'installazione del plugin all'inserimento della tua immagine e alla pubblicazione del modulo completato.
Crea Ora il Tuo Modulo Immagini WordPress! 🙂
Come aggiungere un'immagine a WordPress
Il processo per aggiungere immagini a WordPress varia a seconda di dove esattamente stai inserendo un'immagine. In questo tutorial, ti mostreremo alcuni degli scenari più comuni per caricare immagini in WordPress.
Passaggio 1: Installa il plugin WPForms Pro
WPForms è il plugin per moduli più facile da usare per principianti per WordPress, con oltre 2.100 modelli di moduli e un costruttore drag-and-drop, così puoi iniziare da un modello pronto all'uso invece che da una pagina vuota.
Ciò che mi piace di più di WPForms per questo è il campo Contenuto. Ti offre un piccolo editor visivo direttamente all'interno del costruttore di moduli, così puoi caricare un'immagine, aggiungere un'intestazione o inserire un logo senza lasciare la pagina o toccare alcun codice HTML.
Il campo Contenuto è una funzionalità a pagamento, quindi avrai bisogno di una licenza WPForms Pro per usarlo, che sblocca anche la libreria completa di modelli insieme ai pagamenti, ai sondaggi e agli altri componenti aggiuntivi che probabilmente vorrai man mano che i tuoi moduli crescono.
Per iniziare, procedi e acquista la licenza WPForms Pro. Una volta acquistata, installa e attiva il plugin sul tuo sito. Se non hai mai aggiunto un plugin prima, la nostra guida su come installare WPForms ti guiderà attraverso il processo.
Aggiorna subito a WPForms Pro!
Passaggio 2: Crea il Tuo Modulo
Con WPForms attivo, è ora di costruire il modulo che conterrà la tua immagine. Dal tuo pannello di controllo WordPress, vai su WPForms » Aggiungi Nuovo per aprire il costruttore di moduli.
Nella schermata di configurazione, dai un nome al tuo modulo e scegli un modello da cui iniziare. Userò il modello Modulo di Contatto Semplice, quindi passaci sopra con il mouse e fai clic su Usa Modello.
Il modello viene caricato nel costruttore con tutti i campi standard già presenti, pronti per essere personalizzati.
Passaggio 3: Inserisci un'Immagine nel Tuo Modulo
Per aggiungere la tua immagine, userai il campo Contenuto, che ti permette di inserire immagini, intestazioni e testo formattato ovunque nel tuo modulo. Se vuoi una spiegazione completa di ciò che può fare, la documentazione del campo Contenuto lo copre.
Trova il campo Contenuto nel pannello di sinistra e trascinalo sul tuo modulo. Sto aggiungendo un logo in alto, quindi inserirò il campo sopra gli altri campi.
Fai clic sul campo che hai appena aggiunto per aprire le sue Opzioni Campo a sinistra, dove troverai un piccolo editor visivo per aggiungere contenuti.
Appena sopra l'editor, fai clic sul pulsante Aggiungi Media.
Quindi fai clic su Seleziona File per caricare un'immagine dal tuo computer, oppure scegli una già presente nella tua Libreria Media.
Una volta caricata la tua immagine, puoi compilare dettagli come il testo alternativo e il titolo. Quando sei pronto, fai clic su Inserisci nel Modulo in basso.
L'immagine viene aggiunta al campo, anche se non apparirà subito nell'anteprima del modulo. Fai clic sul pulsante Aggiorna Anteprima sotto l'editor per farla apparire.
Ecco come appare il modulo una volta che l'immagine è al suo posto e l'anteprima è stata aggiornata.
Se desideri un maggiore controllo sull'aspetto del tuo contenuto, fai clic sul pulsante Espandi Editor in basso a destra.
Da lì puoi cambiare l'allineamento, aggiungere un elenco puntato e formattare il testo allo stesso modo in cui faresti in un post.
Quando tutto sembra a posto, fai clic su Salva nell'angolo in alto a destra del builder. Questo stesso campo Contenuto è quello che useresti per aggiungere un'immagine di intestazione o un logo, quindi copre la maggior parte dei tocchi visivi di cui un modulo ha bisogno.
Passaggio 4: Pubblica il Tuo Modulo
Con l'immagine al suo posto, l'ultimo passaggio è inserire il modulo nel tuo sito. WPForms ha una procedura guidata di incorporamento integrata che gestisce questo in pochi clic.
Inizia facendo clic sul pulsante Incorpora nella parte superiore del generatore di moduli.
Si apre una finestra che chiede dove vorresti che il modulo andasse. Farò clic su Crea nuova pagina per metterlo su una nuova pagina.
Dai un nome alla nuova pagina, quindi fai clic su Iniziamo.
WPForms ti porta nell'editor di WordPress con il tuo modulo già incorporato. Quando sei soddisfatto, fai clic su Pubblica per renderlo live.
Il tuo modulo è ora live, con la tua immagine che appare esattamente dove l'hai posizionata.
Altri Modi per Aggiungere Immagini ai Tuoi Moduli
Il campo Contenuto copre la maggior parte delle situazioni, ma WPForms ti offre un paio di altri modi per lavorare con le immagini. Questi sono facoltativi, quindi usa quello che si adatta a ciò che stai costruendo.
Aggiungi Scelte di Immagini ai Campi del Modulo
Questo funziona con campi come Scelta multipla, Caselle di controllo e Elementi multipli, ed è una funzionalità gratuita, quindi puoi provarla anche su WPForms Lite.
Puoi vedere l'elenco completo dei campi supportati nella guida alle scelte con immagine. Per attivarla, apri le Opzioni campo del campo e attiva l'interruttore Usa scelte con immagine.
Quindi otterrai un pulsante Carica immagine per ogni scelta. Fai clic su di esso per aggiungere un'immagine a quell'opzione.
Ripeti l'operazione per il resto delle tue scelte e un semplice elenco si trasforma in un set di opzioni visive su cui i tuoi visitatori possono toccare.
Se preferisci usare icone anziché le tue immagini, attiva invece l'interruttore Usa scelte con icona e scegli dalla libreria di icone integrata.
Per un esempio specifico, ecco come aggiungere un'immagine accanto ai pulsanti radio nei tuoi moduli.
Aggiungi Immagini con Codice HTML
Se preferisci lavorare con il codice, o vuoi inserire un'immagine già ospitata online, il campo HTML è un'altra opzione. Per questo avrai bisogno dell'URL dell'immagine.
Se la tua immagine non è ancora online, caricala prima. Vai su Media » Aggiungi nuovo file multimediale nella tua dashboard.
Fai clic su Seleziona file e scegli l'immagine dal tuo computer.
Una volta terminato il caricamento, fai clic su Copia URL negli appunti per ottenere il link.
Ora apri il modulo che vuoi modificare, o creane uno nuovo. Per modificare un modulo esistente, vai su WPForms » Tutti i moduli.
Seleziona il modulo che desideri dalla pagina Panoramica moduli.
Nel builder, trascina il campo HTML sul tuo modulo.
Fai clic sul campo per aprire le sue Opzioni campo a sinistra.
Puoi aggiungere un Etichetta per aiutarti a identificare il campo in seguito, anche se non verrà visualizzato nel front-end. Per visualizzare la tua immagine, trascinala in un tag immagine nella casella Codice. Il formato è simile a <img src="[URL del file della tua immagine]">, con il tuo URL al posto del segnaposto.
A differenza del campo Contenuto, il campo HTML non verrà visualizzato in anteprima all'interno del builder. Per controllare il tuo lavoro, fai clic sul pulsante Anteprima in alto per vedere l'intero modulo.
Da lì, pubblica il modulo nello stesso modo in cui ti ho mostrato prima.
Domande frequenti sull'aggiunta di immagini ai moduli WordPress
L'aggiunta di immagini ai tuoi moduli solleva alcune domande comuni. Ecco risposte rapide a quelle che sento più spesso.
Puoi aggiungere gratuitamente un'immagine a un modulo WordPress?
Sì, in parte. Le scelte di immagini per i campi selezionabili funzionano nel plugin gratuito WPForms Lite. Il campo Contenuto, che è il modo più semplice per aggiungere un logo o un'immagine autonoma, è una funzionalità a pagamento che inizia con il piano Basic.
Come posso consentire ai visitatori di caricare le proprie immagini sul mio modulo?
Questo è un campo diverso chiamato Caricamento file, che consente alle persone di allegare immagini o documenti quando inviano. Puoi vedere come funziona nella pagina delle funzionalità di caricamenti di file.
Come aggiungo un logo al mio modulo?
Usa il campo Contenuto in cima al tuo modulo e carica il tuo logo come immagine. Per una guida focalizzata solo su questo, segui la nostra guida su come aggiungere un'immagine di intestazione o un logo a un modulo WordPress.
Successivamente, Consenti ai visitatori di inviare le proprie immagini
Ora che puoi aggiungere immagini ai tuoi moduli, potresti voler invertire la rotta e consentire ai tuoi visitatori di caricare le proprie immagini su WordPress tramite un modulo. È altrettanto semplice da configurare.
Vuoi continuare a perfezionare l'aspetto dei tuoi moduli? Dai un'occhiata alla nostra guida su come stilizzare WPForms usando l'editor a blocchi, che ti mostra come progettare i tuoi moduli senza alcun codice.
Crea Ora il Tuo Modulo Immagini WordPress! 🙂
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.
Ciao.
Quando voglio inserire un'immagine nel mio modulo, questa non si adatta alle dimensioni del modulo, è sempre troppo grande.
Come posso renderla più "reattiva"?
Grazie!
Ciao Guillaume, mi scuso per il problema! Per rendere le immagini reattive potresti aggiungere dimensioni in % e regolare la dimensione, ad esempio
Tuttavia, per assicurarci di rispondere alla tua domanda nel modo più completo possibile, potresti contattare il nostro team di supporto con maggiori dettagli su ciò che desideri fare?
Grazie! :)
Come possono gli utenti caricare la loro immagine nel modulo? dal loro computer o usando la webcam
Ciao Sohaib, ottima domanda! Puoi prima salvare l'immagine sul tuo computer (incluse quelle catturate con la webcam) e poi seguire le istruzioni dal Passo 2 facendo riferimento a questo stesso articolo.
Spero che questo aiuti! :)
Come possono i miei CLIENTI pubblicare le loro foto sul mio sito web tramite un modulo che ho creato, ad esempio per vendere un'auto o un'attrezzatura?
Ciao Carl! Il modo più semplice per consentire ai tuoi clienti di creare i propri annunci sarebbe tramite il nostro addon Post Submissions, specialmente con il nostro editor Rich Text Field rilasciato di recente 🙂
Con questi due combinati, i tuoi utenti saranno in grado di progettare il loro annuncio come preferiscono, inviare il modulo e questo verrà aggiunto direttamente al tuo sito (o in attesa della tua approvazione).
Spero che questo aiuti a chiarire 🙂 Se hai ulteriori domande in merito, ti preghiamo di contattarci se hai un abbonamento attivo. In caso contrario, non esitare a porci alcune domande nei nostri forum di supporto.
Come posso cambiare il logo di ricerca del modulo widget?
Ciao Cory! Mi scuso, ma non sono sicuro di aver capito a cosa ti riferisci.
Quando hai un momento, ti preghiamo di contattare il nostro team qui se hai un abbonamento attivo.
Se non ce l'hai, non esitare a contattarci sui nostri forum di supporto.
Grazie!
Ho aggiunto l'immagine nel mio modulo usando l'HTML, ma non recupera l'immagine nell'email.
Ho aggiunto un paio di immagini nell'intestazione in modo da poter stampare l'invio del modulo insieme ai loghi in alto, ma senza successo.
Ciao Aman!
Grazie per averci contattato!
Il motivo per cui non passiamo campi HTML, campi Divisore di Sezione o descrizioni (gli ultimi due sono essenzialmente campi HTML) è che queste aree consentono HTML completo, il che significa che sarà comune che contengano elementi che interrompono le notifiche via email o causano problemi di consegna.
Tuttavia, abbiamo un filtro che ti consentirà di includere campi non di input nelle tue email. Ecco il nostro tutorial con tutti i dettagli, più il codice di cui avresti bisogno: https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
Abbiamo anche un utile tutorial con i dettagli su come aggiungere codice personalizzato come questo al tuo sito: https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (per un'opzione particolarmente semplice, consiglio l'opzione del plugin Code Snippets).
Oppure, se preferisci evitare PHP, potresti considerare di modificare il corpo delle tue notifiche per includere il testo di cui hai bisogno. Potresti farlo costruendo il contenuto della notifica in modo più personalizzato utilizzando testo normale, HTML e Smart Tag.
Questa opzione offre probabilmente il massimo controllo, poiché puoi scegliere esattamente quali dettagli includere nella tua notifica.
Mi scuso se questo non è esattamente quello che stavi cercando, ma spero che una di queste idee possa funzionare per te. Potresti per favore farmi sapere se hai altre domande?
Grazie!
Posso far sì che un utente utilizzi la fotocamera del proprio dispositivo per scattare una foto e caricarla in un unico passaggio, invece di scattare prima una foto, salvarla sul proprio desktop e poi caricare la foto. Idealmente, vorrei che l'utente caricasse una foto da una libreria se ha una foto esistente, ma se preferisce, può semplicemente scattare una foto dalla fotocamera e caricarla. C'è un modo per farlo in WPForms?
Ciao Anil! Il campo Caricamento File, quando viene utilizzato da un dispositivo mobile, può offrire all'utente la possibilità di caricare un'immagine direttamente dalla propria fotocamera. Tuttavia, dipende dal fatto che il dispositivo mobile dell'utente sia stato configurato per consentire al browser di accedere alla sua fotocamera. In caso contrario, l'opzione non sarà disponibile.
Spero che questo aiuti a chiarire 🙂 Se hai ulteriori domande in merito, ti preghiamo di contattarci se hai un abbonamento attivo. In caso contrario, non esitare a porci alcune domande nei nostri forum di supporto.
Ciao,
WP-Forms gestisce i dati di registrazione dell'utente allo stesso modo di WooCommerce? Se un utente effettua il checkout dal mio negozio e-commerce e registra un account, i suoi dati vengono duplicati, una volta in WooCommerce, una volta nella registrazione di WP Forms?
Ciao Ann, il nostro componente aggiuntivo per la registrazione utente non fornisce un'interfaccia per gestire o modificare gli utenti esistenti e si concentra esclusivamente sul processo di creazione dell'account. Tuttavia, non supportiamo alcuna integrazione con WooCommerce.
Detto questo, per assicurarci di rispondere alla tua domanda nel modo più completo possibile ed evitare qualsiasi confusione, potresti contattare il nostro team?
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi per favore invia un ticket di supporto. Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie.
WPForms supporta i media gib? O l'incorporamento di uno shortcode da un plugin di visualizzazione 3D?
Ciao Melissa – Saremmo felici di aiutarti! Quando hai un momento, scrivici in supporto in modo che possiamo assisterti.
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi per favore invia un ticket di supporto.
Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Come aggiungo un'immagine sul pulsante di invio wpforms in WordPress?
Finora hai mostrato solo come aggiungere icone. Ma ho un'immagine personalizzata che vorrei aggiungere.
Ciao Aser – Per aggiungere un'immagine al pulsante di invio, puoi considerare l'uso del seguente CSS:
.wpforms-submit-container .wpforms-submit { background-image: url('image_url'); background-size: cover; padding-left: 40px; }E nel caso ti fosse utile, ecco un tutorial dettagliato su come aggiungere CSS personalizzato come questo al tuo sito.
Il mio codice è simile a questo:
.wpforms-submit-container .wpforms-submit { background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’); background-size: cover; padding-left: 40px; }
Tuttavia, l'URL non viene rilevato, il che significa che l'immagine non viene visualizzata. Non sono sicuro se hai capito cosa intendo, ma voglio che un'immagine .png sia visibile accanto al testo "Invia" all'interno del pulsante di invio, sulla sinistra.
Ho trovato questo codice dal tuo tutorial che visualizza le icone Fantastique e fa quasi quello che voglio, ma non riesco ad aggiungere un URL all'immagine di mia scelta.
.wpforms-form button[type=submit]:hover { background-color: #ac2428 !important; }
.wpforms-form button[type=submit]:before { content: ‘\f1d8’; /* Unicode per l'icona, assicurati di mantenere le virgolette e la barra rovesciata */ margin-right: 10px !important; /* Distanza tra icona e testo del pulsante */ }
Ciao Aser – Saremmo felici di aiutarti! Quando hai un momento, scrivici in supporto in modo che possiamo assisterti.
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi per favore invia un ticket di supporto.
Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Come allineare un'immagine a sinistra di un modulo?
Ciao JM – Se desideri visualizzare un'immagine a sinistra e i campi a destra, puoi considerare l'uso del campo layout.
Ciao, ho una domanda per sapere se posso acquistare il tuo modulo per creare il form di cui ho bisogno. La prima riga contiene 6 pulsanti di opzione sopra i quali c'è un'immagine (quindi 6 immagini) ma che non sono "etichette". Quando si fa clic su un'immagine, si apre un popup che mostra l'immagine più grande e il testo esplicativo. È possibile farlo con WP-Forms? Grazie in anticipo
Ciao Françoise, saremmo felici di aiutarti! Quando hai un momento, per favore invia una richiesta di supporto in modo che possiamo assisterti.