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

Vuoi imparare come aggiungere un'immagine o un logo nell'intestazione di un modulo in WordPress?

Aggiungere un'immagine è un ottimo modo per personalizzare il tuo modulo, dare agli utenti un'idea di cosa tratta il modulo o presentare un logo per la tua attività.

Fortunatamente, è facile farlo con WPForms. Il campo contenuto in WPForms semplifica il processo di caricamento di testo e media, come immagini o loghi, direttamente nei tuoi moduli.

In questo post, ti guideremo attraverso il processo di utilizzo del campo contenuto per aggiungere un'immagine nell'intestazione di un modulo in WordPress.

Aggiungi subito un'immagine nell'intestazione del tuo modulo

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

Personalizzare il tuo modulo con un'immagine personalizzata nell'intestazione è un modo semplice per integrare il tuo sito WordPress con un design coerente e coeso. Poiché il nostro generatore di moduli drag-and-drop rende la personalizzazione dei moduli un gioco da ragazzi, puoi utilizzare le tue immagini in una varietà di stili.

Inoltre, l'uso di un'immagine darà agli utenti del tuo sito un'idea chiara di cosa aspettarsi dal tuo sito e dal modulo. Le immagini aiutano anche a portare interesse visivo ai tuoi moduli e a collegarli con lo schema di colori generale e il tema di design del tuo sito.

L'immagine dell'intestazione può riflettere l'argomento dei contenuti del tuo modulo, oppure potrebbe essere un'immagine che rappresenta la tua attività o organizzazione, come un logo.

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

In questa guida passo passo, ti mostreremo come modificare l'intestazione nei moduli di WordPress senza alcun codice. Questo tutorial è perfetto per i principianti e non richiede l'uso di CSS personalizzato, un page builder o il personalizzatore di WordPress.

Segui semplicemente questo indice per tutti i passaggi che ti mostreremo:

1. Installa il plugin WPForms

Innanzitutto, devi installare il plugin WPForms. Dai un'occhiata a tutte le licenze WPForms qui, oppure scarica il plugin dalla tua bacheca di WordPress.

Per utilizzare la funzionalità di caricamento del campo Contenuto per aggiungere un'immagine nell'intestazione del modulo, dovrai selezionare una licenza aggiornata come Pro, Plus o Elite.

Ecco un tutorial utile su come installare un plugin di WordPress.

2. Seleziona il modello di modulo di contatto semplice

Una volta configurato il plugin sul tuo sito, naviga su WPForms nella tua bacheca di WordPress e fai clic su Aggiungi nuovo.

Da qui, troverai un'ampia selezione di modelli tra cui scegliere per creare il tuo modulo.

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 Modulo di contatto semplice.

Questo ci porterà a una nuova pagina, dove utilizzeremo il generatore di moduli facile da usare per personalizzare questo modello.

3. Aggiungi il campo contenuto

Ora che siamo nel generatore di moduli, aggiungeremo il campo contenuto dalle selezioni nella scheda Campi.

Fai semplicemente clic su Contenuto e trascina il campo dove lo desideri sul tuo modulo.

Stiamo trascinando il campo contenuto in cima alla pagina in modo che il media caricato funga da sezione di intestazione nel nostro modulo.

Una volta posizionato il campo contenuto nell'area di anteprima, faremo clic su di esso per accedere alle sue Opzioni campo e aggiungere il nostro media e modificare il testo utilizzando l'editor semplice nel riquadro di sinistra.

Puoi modificare il tuo contenuto visivamente o utilizzare l'editor di testo per modificarlo utilizzando HTML.

Ottimo! Ora siamo pronti per caricare la nostra immagine e inserire del testo nel modulo.

4. Carica il logo/immagine della tua azienda

Successivamente, faremo clic su Aggiungi media per caricare la nostra immagine nel campo contenuto.

Sarai in grado di caricare una nuova immagine o selezionarne una dalla tua Libreria multimediale. Sono accettati file JPG e PNG.

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 garantire che la nostra immagine funga da intestazione del modulo, siamo andati alla scheda Avanzate e 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 all'interno del campo di testo.

Abbiamo anche la possibilità di modificare il testo nel campo. Abbiamo modificato il testo qui per essere un breve messaggio per i visitatori e un invito a compilare il modulo di contatto.

Come il media sopra, puoi formattare liberamente il testo con il 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 essa.

Ci sono molti modi per personalizzare i dettagli dei campi sul modulo come ritieni opportuno, e puoi visualizzare in anteprima le tue modifiche man mano che procedi.

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

Eccellente! Ora siamo pronti per incorporare il modulo in qualsiasi pagina desideriamo!

5. Salva e incorpora il modulo

Premi il pulsante Salva nell'angolo in alto a destra del modulo per vedere le modifiche riflesse nell'anteprima della pagina.

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

Ora, faremo clic sul pulsante Incorpora in alto per aggiungere questo modulo in una nuova pagina del nostro sito Web WordPress.

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

Abbiamo l'opzione di Seleziona pagina esistente o Crea nuova pagina. Per questo tutorial, stiamo creando una nuova pagina, quindi faremo clic su Crea nuova pagina.

Dopodiché, ci verrà 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 in una pagina appena creata per il nostro sito Web WordPress. Da qui, possiamo visualizzare in anteprima la pagina, salvare la pagina come bozza o pubblicarla.

Ti consigliamo di configurare le impostazioni del blocco sul lato destro dell'editor per nascondere il titolo del modulo, se non l'hai già fatto. Non vuoi che distragga dall'immagine dell'intestazione del tuo modulo.

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

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

Fantastico!  Ora hai aggiunto con successo un'intestazione del modulo con un'immagine o un logo al tuo sito WordPress.

Aggiungi subito un'immagine nell'intestazione del tuo modulo

Successivamente, Interrompi lo spam dei moduli di contatto in WordPress.

Con un nuovo modulo accattivante personalizzato con l'immagine di intestazione scelta, inviterai molti visitatori del sito a compilare il tuo modulo.

Ma non vuoi raccogliere spam con il tuo nuovo modulo.

Per impedire agli spammer di compilare i tuoi moduli, consulta questo articolo su come prevenire l'invio di spam nei tuoi moduli 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.