Come aggiungere un'immagine di intestazione o un logo a un modulo in WordPress

Vuoi aggiungere un'immagine nell'intestazione del tuo modulo? Forse è il tuo logo, un banner che si abbina al tuo sito o una foto che mostra ai visitatori di cosa tratta il modulo.

Qualunque cosa tu stia immaginando, un semplice blocco di campi grigi non rende giustizia al tuo marchio. Ho visto molti bellissimi siti web con moduli che sembrano presi in prestito da altri siti.

La soluzione è il campo Contenuto in WPForms. Ti consente di inserire immagini, loghi e testo direttamente nei tuoi moduli, senza bisogno di codice.

In questo post, ti guiderò attraverso l'intero processo di aggiunta di un'immagine di intestazione del modulo in WordPress, passo dopo passo.

Aggiungi subito un'immagine nell'intestazione del tuo modulo

Perché dovrei aggiungere un'immagine nell'intestazione di un modulo?

Un'immagine di intestazione del modulo personalizzata è uno dei modi più veloci per far sembrare che il tuo modulo appartenga effettivamente al tuo sito web. Invece di un set generico di campi, i visitatori vedono prima il tuo marchio, il che crea fiducia prima ancora che digitino una singola lettera.

Stabilisce anche le aspettative. Un'immagine di intestazione o un logo dà alle persone un'idea chiara di chi stanno contattando e perché, e lega il tuo modulo allo schema di colori generale e al tema di design del tuo sito.

La tua intestazione potrebbe riflettere l'argomento del modulo, o potrebbe semplicemente essere il logo della tua attività. E se desideri lo stesso aspetto del marchio su ogni modulo che crei, puoi creare modelli di modulo personalizzati in modo che ogni nuovo modulo inizi già con la tua intestazione.

Anche i loghi sono di tutte le dimensioni. Se ti stai chiedendo quanto dovrebbe essere grande il tuo, consulta la nostra guida sulla migliore dimensione del logo per i siti.

Come aggiungere un'immagine di intestazione o un logo a un modulo in WordPress

In questa guida passo passo, ti mostrerò come aggiungere un'immagine di intestazione o un logo ai tuoi moduli WordPress senza toccare alcun codice. Questo tutorial è perfetto per i principianti e non avrai bisogno di CSS personalizzato, di un page builder o del Customizer di WordPress.

Passaggio 1: Installa il plugin WPForms Basic

WPForms è il modo più semplice per creare moduli brandizzati in WordPress. Hai a disposizione un generatore drag-and-drop e oltre 2.100 modelli tra cui scegliere, quindi non ti troverai mai a fissare un modulo vuoto chiedendoti da dove iniziare.

Ciò che mi piace di più di WPForms per questo particolare lavoro è che il campo Contenuto funziona proprio come l'editor di WordPress che già conosci. Aggiungere il tuo logo a un modulo è esattamente come aggiungere un'immagine a un post del blog, fino al pulsante Aggiungi media.

Avrai bisogno di una licenza per utilizzare il campo Contenuto, poiché non è incluso in Lite. La buona notizia è che si sblocca con Basic, il primo livello a pagamento, quindi non devi spendere per un piano più costoso solo per personalizzare i tuoi moduli.

Per iniziare, acquista la licenza Basic. Quindi, installa WPForms sul tuo sito web. Se hai bisogno di aiuto, segui queste istruzioni su come aggiungere un plugin a WordPress.

Ottieni subito WPForms Basic!

Passaggio 2: Seleziona il Modello di Modulo di Contatto Semplice

Una volta configurato il plugin sul tuo sito, vai su WPForms » Aggiungi nuovo nella tua bacheca di WordPress.

Da qui, troverai un'enorme libreria di modelli di moduli tra cui scegliere.

Ma prima, diamo un nome al modulo. Per questo tutorial, chiameremo il nostro modulo "Contattaci", che verrà visualizzato in cima al modulo.

Ora, selezioneremo il modello Modulo di contatto semplice.

Questo ci porta direttamente al generatore di moduli drag-and-drop, dove personalizzeremo il modello.

Passaggio 3: Aggiungi il campo Contenuto

Ora che siamo nel generatore di moduli, trova il campo Contenuto nella scheda Campi.

Fai semplicemente clic su Contenuto, quindi trascina e rilascia il campo dove preferisci nel tuo modulo.

Stiamo trascinando il campo Contenuto in cima al modulo in modo che i media caricati agiscano come sezione di intestazione.

Quando il campo è posizionato nell'area di anteprima, fai clic su di esso per aprire le sue Opzioni campo. Qui è dove aggiungerai i tuoi media e modificherai il testo utilizzando l'editor nel pannello di sinistra.

Puoi modificare il tuo contenuto visivamente o passare all'editor di testo per lavorare in HTML. Per una panoramica completa di tutto ciò che questo campo può fare, consulta la nostra guida completa all'uso del campo Contenuto.

Ottimo! Ora siamo pronti per caricare la nostra immagine e aggiungere del testo al modulo.

Passaggio 4: Carica il logo o l'immagine della tua azienda

Successivamente, fai clic su Aggiungi media per caricare la tua immagine nel campo Contenuto.

Potrai caricare una nuova immagine o selezionarne una dalla tua Libreria multimediale. Sono accettati file JPG e PNG.

Un paio di rapidi suggerimenti prima di caricare. Per i loghi, usa un PNG con uno sfondo trasparente in modo che il tuo logo non sia all'interno di una casella bianca, e una larghezza di circa 200 pixel è un buon punto di partenza. Per le immagini di intestazione in stile banner, scegli qualcosa di almeno largo quanto il tuo modulo, circa 700-800 pixel per la maggior parte delle aree di contenuto di WordPress, in modo che rimanga nitido a grandezza naturale.

Non hai ancora un logo? Questi generatori di loghi AI possono crearne uno solido in pochi minuti.

Con il nostro logo personalizzato al suo posto, possiamo quindi modificare le opzioni di personalizzazione come la dimensione dell'immagine, l'orientamento e altri dettagli.

Per assicurarci che la nostra immagine funga da vera intestazione del modulo, siamo andati alla scheda Avanzate e abbiamo impostato la Dimensione campo su Grande.

Quindi, tornando alla scheda Generale, ci siamo assicurati che l'immagine sia centrata nel campo utilizzando le opzioni di formattazione nell'editor di testo.

Possiamo anche modificare il testo nel campo. Qui abbiamo scritto un breve messaggio di benvenuto per i visitatori, più un invito amichevole a compilare il modulo di contatto.

Come il media sopra, puoi formattare liberamente il testo nel campo Contenuto. Fai clic su Espandi editor sotto la casella di testo per ulteriori opzioni di modifica.

Per il nostro logo qui, abbiamo centrato il testo con il resto dell'immagine.

Potresti voler personalizzare anche gli altri campi del modulo.

Ad esempio, abbiamo aumentato la dimensione del campo Nome a Grande per corrispondere alla larghezza della nostra immagine di intestazione sopra di esso.

Ci sono molti modi per mettere a punto i campi del tuo modulo e puoi visualizzare in anteprima le modifiche man mano che procedi.

Assicurati di fare clic su Aggiorna anteprima per vedere le modifiche apportate al campo Contenuto.

La nostra intestazione ha un bell'aspetto, quindi inseriamo questo modulo in una pagina.

Passaggio 5: Salva e incorpora il modulo

Premi il pulsante Salva nell'angolo in alto a destra del costruttore di moduli per bloccare le tue modifiche.

Sia che tu controlli l'anteprima della pagina o meno, dovrai fare clic su Salva prima di andare avanti.

Ora, fai clic sul pulsante Incorpora in alto per aggiungere questo modulo a una pagina del tuo sito web WordPress.

Dopo aver fatto clic su Incorpora, sceglieremo dove inserire il nuovo modulo.

Puoi selezionare una pagina esistente o crearne una nuova. Per questo tutorial, stiamo creando una nuova pagina, quindi faremo clic su Crea nuova pagina.

Successivamente, ci viene richiesto di nominare la nuova pagina.

La chiameremo "Contattaci" poiché questo è il nome che abbiamo dato a questo modulo quando abbiamo selezionato il modello.

Ora possiamo vedere il modulo su una pagina appena creata per il nostro sito web WordPress. Da qui, possiamo visualizzare in anteprima la pagina, salvarla come bozza o pubblicarla.

Ancora una raccomandazione. Nelle impostazioni del blocco sul lato destro dell'editor, nascondi il titolo del modulo in modo che non competa con la tua nuova immagine di intestazione.

Assicurati solo che l'interruttore Mostra titolo sia in posizione disattivata.

Quando sei pronto, fai clic su Pubblica per rendere questa pagina live sul tuo sito.

Fantastico! Ora hai un modulo con un'immagine di intestazione o un logo personalizzato, e il tutto probabilmente ti ha richiesto meno di dieci minuti.

Domande frequenti sull'aggiunta di un'immagine di intestazione del modulo in WordPress

L'aggiunta di un'immagine di intestazione o di un logo ai tuoi moduli WordPress tende a sollevare le stesse domande. Ecco risposte rapide a quelle che sentiamo più spesso.

Perché non riesco a trovare il campo Contenuto in WPForms?

Il campo Contenuto è disponibile in WPForms Basic e versioni superiori, quindi non apparirà nell'elenco dei campi se stai usando la versione gratuita Lite. Esegui l'aggiornamento a qualsiasi licenza a pagamento e il campo apparirà nel costruttore di moduli.

Qual è la dimensione ideale per un'immagine di intestazione del modulo?

Per un logo, circa 200 pixel di larghezza con uno sfondo trasparente in formato PNG funziona bene. Per un'intestazione in stile banner, abbina la larghezza del tuo modulo, che di solito è compresa tra 700 e 800 pixel in un'area di contenuto standard di WordPress. Iniziare vicino alla dimensione di visualizzazione mantiene la tua immagine nitida.

Posso aggiungere immagini altrove nel mio modulo?

Certamente. Il campo Contenuto può essere inserito ovunque nel tuo modulo e puoi usarne più di uno. Se desideri immagini accanto alle tue domande o in altri punti creativi, ecco come aggiungere immagini ovunque nei tuoi moduli WordPress.

Posso personalizzare il mio modulo per farlo corrispondere al marchio del mio sito?

Sì. Se incorpori il tuo modulo con il blocco WPForms, puoi modificare colori, sfondi e stili dei campi direttamente nell'editor a blocchi senza scrivere CSS. La nostra guida su come personalizzare i tuoi moduli illustra ogni opzione.

Posso cambiare l'intestazione del mio sito invece dell'intestazione del modulo?

Questo tutorial riguarda l'area dell'intestazione di un modulo. Se desideri aggiornare l'intestazione del tuo intero sito web, questa è controllata dal tuo tema e ne parliamo nella nostra guida su come modificare l'intestazione del tuo sito in WordPress.

Successivamente, Interrompi lo spam dei moduli di contatto in WordPress

Con una nuova e accattivante intestazione sul tuo modulo, inviterai molti più visitatori a compilarlo. Tuttavia, non vorrai che metà di queste voci siano spazzatura.

Per tenere lontani gli spammer dal tuo nuovo e splendente modulo, consulta la nostra guida su come prevenire l'invio di spam nei tuoi moduli WordPress.

Crea ora il tuo modulo personalizzato

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 Twitter per altri tutorial e guide gratuite su WordPress.