Riassunto AI
Vuoi aggiungere un'immagine al tuo sito WordPress?
Le immagini sono una parte essenziale di ogni contenuto online. Migliorano l'aspetto visivo del tuo sito web e rendono i tuoi contenuti più leggibili.
In questo tutorial, ti guiderò attraverso il processo di aggiunta di un'immagine in diverse parti del tuo sito 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.
Ecco le istruzioni scritte se preferisci leggere.
Crea subito il tuo modulo immagine WordPress
Scenario n. 1: Aggiungere un'immagine a un post di WordPress
Se stai creando un nuovo post o una nuova pagina in WordPress, è probabile che dovrai aggiungere alcune immagini per far risaltare i tuoi contenuti.
Per aggiungere un'immagine al tuo post, dovrai prima accedere all'editor dei post di WordPress navigando su Post » Tutti i post dal menu di amministrazione.
Questo ti porterà immediatamente all'editor Gutenberg di WordPress. Una volta nell'editor, fai semplicemente clic sul pulsante '+' per aprire l'elenco dei blocchi disponibili e quindi seleziona il blocco Immagine.
Quando il blocco Immagine viene inserito nell'area di contenuto, vedrai le opzioni per caricare una nuova immagine dal tuo computer, selezionare un'immagine già caricata dalla Libreria multimediale o inserire un'immagine da un URL.
Se stai aggiungendo una nuova immagine che non esiste già nella libreria, fai clic sul pulsante Carica.
Quindi, seleziona l'immagine che desideri caricare dal tuo computer e dovrebbe apparire immediatamente nel tuo post.
Ecco quanto è facile aggiungere un'immagine a un post del blog di WordPress!
Il processo per inserire immagini nelle pagine è simile. Dovrai solo seguire lo stesso processo dopo aver fatto clic sull'opzione di menu Aggiungi nuova pagina dalla barra laterale di amministrazione nel tuo WordPress.
Scenario n. 2: Aggiungere un'immagine a un modulo WordPress
Se vuoi aggiungere un'immagine a un modulo WordPress, dovrai prima installare un plugin per moduli con una funzionalità di caricamento immagini semplice.
WPForms è uno dei pochi plugin per moduli per WordPress che rendono incredibilmente facile inserire un'immagine ovunque all'interno del tuo modulo.
Installa WPForms
Se non hai ancora installato WPForms sul tuo sito, ti consigliamo di ottenere la licenza WPForms Pro.
Per assistenza con l'installazione del plugin, puoi consultare la nostra guida all'installazione di WPForms.
Una volta installato il plugin, passa al passaggio successivo in cui ti mostriamo come creare un modulo.
Crea un nuovo modulo
Nella dashboard di WordPress, vai su WPForms » Aggiungi nuovo.
Vedrai la finestra di configurazione del modulo aprirsi in pochi secondi. Qui puoi nominare il tuo modulo e scegliere tra un modello predefinito per iniziare rapidamente.
Useremo il Modulo di Contatto Semplice per questo tutorial passando il cursore sopra di esso e facendo clic su Usa Modello.
Il modello del modulo verrà ora caricato sullo schermo con tutti i campi necessari già aggiunti.
Possiamo personalizzare questo modulo per aggiungere un'immagine abbastanza facilmente, come mostrato nel passaggio successivo.
Inserisci un'immagine nel tuo modulo WordPress
Per inserire un'immagine, dovrai aggiungere il campo Contenuto al tuo modulo. Trascina e rilascia semplicemente il campo Contenuto dal riquadro di sinistra a quello di destra.
Aggiungeremo un logo in cima al modulo, quindi posizioneremo il campo Contenuto in cima.
Dopo aver aggiunto il campo, fai clic su di esso per aprire le Opzioni del campo nel riquadro di sinistra, che ti consente di utilizzare l'editor visivo per inserire contenuti.
Successivamente, dovrai fare clic sul pulsante Aggiungi Media appena sopra l'editor visivo.
Ora, fai clic sul pulsante Seleziona File.
Ora puoi selezionare qualsiasi file immagine da caricare e inserire nel tuo modulo. Una volta caricato, puoi inserire dettagli come il testo alternativo e il titolo. Quindi, fai clic sul pulsante Inserisci nel Modulo in basso.
Facendo ciò, l'immagine verrà inserita all'interno del tuo modulo. L'immagine non apparirà immediatamente nel modulo, anche se puoi vederla nell'editor a sinistra.
Dovrai solo premere il pulsante Aggiorna Anteprima sotto l'editor visivo per vedere l'immagine nel modulo.
Ecco come dovrebbe apparire dopo aver aggiunto l'immagine utilizzando il campo Contenuto e aggiornato l'anteprima.
Puoi anche accedere a opzioni di formattazione aggiuntive facendo clic sul pulsante Espandi Editor in basso a destra dell'editor.
Ad esempio, puoi regolare l'allineamento del tuo contenuto, aggiungere un elenco puntato per il testo e altro ancora.
Eccellente! Ora che hai aggiunto un'immagine al tuo modulo, procedi e premi il pulsante Salva in alto a destra del costruttore di moduli.
Tutto ciò che rimane ora è pubblicare questo modulo sul tuo sito in modo che i tuoi visitatori possano accedervi.
Pubblica il tuo modulo online
WPForms viene fornito con una procedura guidata di incorporamento facile che rende la pubblicazione un processo rapido e semplice.
Inizia facendo clic sul pulsante Incorpora in alto nel costruttore di moduli.
Vedrai quindi apparire una finestra modale che ti chiede dove vuoi incorporare il tuo modulo. Selezioneremo Crea Nuova Pagina per incorporare un modulo in una nuova pagina.
Dopo di che, inserisci un nome per la tua pagina e fai clic su Iniziamo.
La procedura guidata ti porterà all'editor di WordPress, dove troverai il tuo modulo incorporato.
Quando sei pronto, premi il pulsante Pubblica in alto a destra per rendere live il tuo modulo.
E questo è tutto! Ora hai creato con successo un modulo con un'immagine aggiunta.
C'è molto di più che puoi fare con WPForms quando si tratta di aggiungere elementi grafici. Ti mostreremo alcuni suggerimenti bonus di seguito.
Bonus: Altri modi per usare le immagini nei moduli WordPress
La flessibilità di WPForms rende possibili molte cose interessanti quando si tratta di aggiungere media ai tuoi moduli.
Ti mostreremo alcuni suggerimenti che possono aiutarti a rendere i tuoi moduli ancora più belli, insieme a metodi alternativi per inserire immagini.
Aggiungere immagini a campi selezionati
Questo aprirà l'area di caricamento della Libreria multimediale. Fai clic sul pulsante Seleziona file per procedere.
Ma sapevi che puoi anche usare le immagini per accompagnare elementi selezionabili in campi come Caselle di controllo e Elementi multipli?
Per utilizzare immagini per le opzioni in un campo Elementi multipli, puoi fare clic sul pulsante di attivazione/disattivazione Usa scelte immagine nelle Opzioni campo.
Dopo aver attivato Scelte immagine, potrai caricare immagini per ogni scelta nel tuo campo. Fai clic sul pulsante Carica immagine per aggiungere facilmente qualsiasi immagine.
Puoi ripetere questa operazione per ogni scelta per trasformare un modulo semplice in qualcosa di più coinvolgente visivamente.
Infatti, non sei limitato solo al caricamento di immagini personalizzate per le scelte. WPForms ti dà anche accesso a un'enorme libreria di icone precaricate che puoi aggiungere alle tue scelte.
Per utilizzare icone per le tue scelte, fai clic sul pulsante di attivazione/disattivazione Usa scelte icona.
Provalo. È facile da fare e i tuoi visitatori apprezzeranno di più la compilazione dei tuoi moduli quando ci saranno elementi visivi che catturano la loro attenzione!
Aggiungere immagini con codice HTML
In precedenza, ti abbiamo mostrato come inserire rapidamente un'immagine nel tuo modulo WordPress utilizzando il campo Contenuto.
Tuttavia, se preferisci lavorare direttamente con il codice HTML, puoi inserire immagini anche con un metodo tecnicamente più complesso.
Affinché ciò funzioni, è necessario che l'immagine che desideri aggiungere al tuo modulo sia già caricata nella tua Libreria multimediale e che il suo URL ti sia noto.
In caso contrario, puoi caricarne una e ottenere l'URL ora. Dalla tua dashboard di WordPress, fai clic su Media » Aggiungi nuovi media.
Questo aprirà l'area di caricamento della Libreria multimediale. Fai clic sul pulsante Seleziona file per procedere.
Ora, scegli il file che desideri caricare dal tuo computer. Al termine del caricamento del file, potrai vedere il suo URL.
Fai clic sul pulsante Copia URL negli appunti per ottenere il link.
Ora, apri un modulo esistente a cui desideri aggiungere l'immagine o creane uno nuovo come abbiamo mostrato in precedenza in questo tutorial.
Puoi modificare un modulo esistente andando su WPForms » Tutti i moduli.
Ora, seleziona il modulo in cui desideri inserire la tua immagine dalla pagina Panoramica moduli.
All'interno del generatore di moduli, trascina e rilascia il campo HTML nell'area a destra dove si trova il tuo modulo.
Dopo averlo fatto, fai clic sul campo HTML che hai appena inserito nel tuo modulo per aprire le sue Opzioni campo a sinistra.
Puoi usare l'opzione Etichetta per dare un nome al campo HTML in modo da poterlo identificare più facilmente nel modulo, ma questo non sarà visibile sul frontend.
Infine, l'immagine che desideri inserire dovrà essere aggiunta all'interno di un tag img nella casella Codice. Puoi usare questo formato per aggiungere la tua immagine: <img src="[inserisci l'URL del file della tua immagine]">
Nota che, a differenza del campo Contenuto, il campo HTML non può caricare il codice per aggiornare l'anteprima all'interno del generatore di moduli. Ma puoi usare il pulsante Anteprima in alto per visualizzare un'anteprima dell'intero modulo.
Questo è utile per verificare se il codice HTML inserito funziona correttamente.
Puoi quindi procedere e pubblicare il modulo seguendo gli stessi passaggi che abbiamo delineato sopra.
E questo è tutto! Ora sei pronto per aggiungere un'immagine al tuo sito WordPress, sia che tu debba farlo per un post o per un modulo.
Crea subito il tuo modulo immagine WordPress
Successivamente, Accetta immagini inviate dagli utenti
WPForms rende anche facile per i tuoi visitatori caricare le proprie immagini su WordPress, quindi assicurati di controllare anche questo.
Stai cercando altri modi per progettare e stilizzare i tuoi moduli? Dai un'occhiata a questo articolo su come stilizzare WPForms usando l'editor a blocchi. Questa guida ti mostrerà come progettare il tuo modulo come un professionista usando controlli semplici e senza alcun codice!
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. 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 X per altri tutorial e guide gratuiti 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 al pulsante di invio di 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.