Come creare un banner per il sito web (3 modi semplici)

Siete alla ricerca di un modo semplice per creare un banner per un sito web in WordPress?

Un banner può mettere in evidenza i prodotti, i servizi o gli aggiornamenti offerti dal vostro sito web in modo accattivante. Può aumentare l’engagement degli utenti, incrementare il tasso di clic e incoraggiare i visitatori ad agire.

In questo articolo vi mostreremo come creare facilmente un banner per il vostro sito WordPress.

Che cos’è un banner per sito web?

Un banner è una visualizzazione grafica che si estende sulla parte superiore, inferiore o laterale di un sito web WordPress. Spesso include il nome di un marchio e il logo, insieme ad altri elementi di design, per promuovere un prodotto, un servizio o un evento specifico.

Ad esempio, se un negozio di e-commerce ha appena annunciato una vendita, può mostrare un banner in alto nelle sue pagine per informare i nuovi visitatori delle offerte di sconto e incoraggiarli a fare un acquisto.

Un banner ben progettato può dare una forte impressione e invitare i visitatori a esplorare il resto del sito. Inoltre, i banner possono essere utilizzati per promuovere prodotti affiliati, stabilire l’identità del brand, costruire una mailing list incoraggiando i visitatori a iscriversi alla vostra newsletter e indirizzare il traffico verso altre pagine del vostro sito.

Potete anche utilizzare i banner per promuovere i vostri account sui social media e incoraggiare i visitatori a seguire o mettere “Mi piace” alle vostre pagine.

Qual è la dimensione migliore per un banner di un sito web?

La dimensione ideale del banner di un sito web dipende dal layout e dagli obiettivi di marketing specifici del vostro blog WordPress.

Ad esempio, se si desidera visualizzare un banner rettangolare e sottile nella parte superiore dello schermo, è possibile utilizzare il formato Large Leaderboard, pari a 970 x 90.

Alcuni degli altri formati di banner più popolari e più utilizzati includono:

• Banner medio: 300 x 250
• Classifica: 728 x 90
• Grattacielo largo: 160 x 600
• Mezza pagina: 300 x 600
• Grande classifica: 970 x 90
• Cartellone: 970 x 250
• Rettangolo grande: 326 x 280
• Banner verticale: 120 x 240
• Banner completo: 468 x 60
• Mezzo banner: 234 x 60

Se si desidera mostrare un banner per un evento nella barra laterale, è possibile utilizzare le dimensioni Wide Skyscraper o Half-Page banner. Allo stesso modo, è possibile utilizzare la dimensione Medium per visualizzare un banner di forma quadrata sulla pagina.

Se volete visualizzare banner pubblicitari, potete consultare la nostra guida per principianti sulle dimensioni e i formati dei banner Google AdSense più performanti per WordPress.

Detto questo, vediamo come creare facilmente un banner sul vostro sito web WordPress. Per questo tutorial, tratteremo tre metodi per creare un banner; potete utilizzare i link sottostanti per passare al metodo che preferite:

Metodo 1: Creare un banner per il sito web utilizzando OptinMonster (consigliato)

OptinMonster è il miglior plugin per la creazione di banner per WordPress presente sul mercato, che vi permette di creare facilmente barre fluttuanti e banner popup per il vostro sito web.

È il miglior strumento di ottimizzazione delle conversioni e di generazione di lead che vi aiuta a trasformare i visitatori del sito web in abbonati e clienti.

Inoltre, molti dei template per banner di OptinMonster dispongono di campi optin che consentono di raccogliere nomi, indirizzi email e numeri di telefono dei visitatori del sito web.

Per maggiori dettagli, consultate la nostra recensione completa di OptinMonster.

Passo 1: Installare OptinMonster sul vostro sito web

Innanzitutto, è necessario registrare un account OptinMonster. Per farlo, basta visitare il sito web di OptinMonster e cliccare sul pulsante “Ottieni OptinMonster ora”.

Dopodiché, dovete installare e attivare il plugin gratuito OptinMonster sul vostro sito web WordPress. Per istruzioni dettagliate, potete consultare la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, la procedura di configurazione guidata di OptinMonster si aprirà nel pannello di amministrazione di WordPress.

Da qui, fate clic sul pulsante “Connetti il tuo account esistente” per collegare il vostro sito WordPress al vostro account OptinMonster.

Si aprirà una nuova finestra sullo schermo del computer.

Da qui, fate clic sul pulsante “Connetti a WordPress” per procedere.

Fase 2: Creare e personalizzare il banner

Ora che avete collegato il vostro account WordPress con OptinMonster, andate alla pagina OptinMonster ” Campagne dalla barra laterale dell’amministrazione di WordPress.

Da qui, fate clic sul pulsante “Crea la tua prima campagna” per iniziare a creare il banner del vostro sito web.

Si accede così alla pagina “Modelli”, dove si può iniziare a scegliere un tipo di campagna.

Ad esempio, se si desidera mostrare il banner come una barra nella parte superiore dello schermo, si può scegliere la campagna “Barra fluttuante”. Allo stesso modo, è possibile selezionare il tipo di campagna “Popup” per visualizzare il banner come popup.

Successivamente, sarà necessario selezionare un modello per la campagna scelta.

Per questa esercitazione, sceglieremo un modello per il tipo di campagna “Barra fluttuante”.

Successivamente, vi verrà chiesto di dare un nome alla campagna che state creando. È sufficiente digitare un nome a scelta e fare clic sul pulsante “Inizia a costruire” per procedere.

In questo modo si avvierà l’interfaccia drag-and-drop di OptinMonster sullo schermo, dove si potrà iniziare a personalizzare il banner. Da qui, è possibile trascinare e rilasciare i campi di vostra scelta dalla barra laterale a sinistra sul banner.

Ad esempio, se volete aggiungere le icone dei social media al vostro banner per aumentare i vostri follower, potete trascinare il blocco Social Media dalla barra laterale sinistra.

A questo punto, basta fare clic sul blocco per aprire le sue impostazioni nella colonna di sinistra.

Da qui è possibile modificare il titolo del pulsante, aggiungere l’URL del social media e persino cambiare la piattaforma del social media dal menu a discesa.

È inoltre possibile aggiungere altri blocchi per visualizzare video, immagini, testo o CTA nel banner del sito web.

Una volta fatto ciò, è necessario selezionare la posizione del banner.

Per impostazione predefinita, la barra fluttuante di OptinMonster viene visualizzata nella parte inferiore della schermata del sito web una volta iniziato lo scorrimento.

Tuttavia, è possibile modificare facilmente questa impostazione facendo clic sull’icona “Impostazioni” in fondo alla barra laterale a sinistra.

Si apriranno le impostazioni nella colonna di sinistra, dove si dovrà espandere la scheda “Impostazioni barra fluttuante”. Da qui è sufficiente attivare l’interruttore “Caricare la barra fluttuante all’inizio della pagina?” per visualizzare il banner in alto.

Passo 3: Aggiungere i trigger per il banner

Una volta progettato il banner, passare alla scheda “Regole di visualizzazione” in alto. Da qui è possibile aggiungere regole per la visualizzazione del banner.

Ricordate che dovete passare a questa scheda solo se volete aggiungere un trigger di visualizzazione specifico per il vostro banner. Altrimenti, potete passare al passo successivo.

Ad esempio, se si desidera mostrare il banner quando l’utente sta per lasciare il sito, è necessario scegliere l’opzione “Intento di uscita”.

Una volta fatto ciò, basta selezionare l’opzione “Su tutti i dispositivi” dal menu a discesa al centro. Se si desidera utilizzare questa regola di visualizzazione solo per i dispositivi mobili, è possibile scegliere anche questa opzione.

Quindi, scegliere la sensibilità dell’intento di uscita in base alle proprie esigenze e fare clic sul pulsante “Passo successivo”.

Si aprirà una nuova schermata. Qui è necessario assicurarsi che l’opzione “Optin” sia selezionata nel menu a discesa “Mostra la vista della campagna”.

Una volta fatto ciò, è sufficiente fare clic sul pulsante “Passo successivo”.

La regola di visualizzazione del banner viene ora visualizzata sullo schermo.

Se si desidera modificare qualcosa, è possibile fare clic sul pulsante “Modifica” per correggerlo.

Passo 4: Pubblicare il banner

A questo punto è possibile passare alla scheda “Pubblica” in alto e fare clic sul pulsante “Salva” nell’angolo in alto a destra dello schermo.

Dopodiché, è sufficiente fare clic sul pulsante “Pubblica” per visualizzare il banner sul proprio sito web.

A questo punto, visitate il vostro sito web per vedere il banner in cima allo schermo.

Ecco come appariva sul nostro sito demo.

Metodo 2: Creare un banner per il sito web con Canva (gratuito)

Se volete creare un banner per un sito web gratuitamente, questo metodo fa per voi.

Canva è un popolare strumento basato sul web che consente di creare tutti i tipi di grafica, tra cui banner, loghi, poster, copertine di libri e altro ancora. Offre anche una versione gratuita che si può utilizzare per creare il banner di un sito web.

Passo 1: creare un account Canva

Innanzitutto, è necessario visitare il sito web di Canva e fare clic sul pulsante “Iscriviti” per creare un account.

Se avete già un account Canva, potete semplicemente accedere.

Dopo la creazione dell’account, si accede alla pagina iniziale del proprio account Canva.

Da qui, si deve passare alla scheda “Modelli” dalla colonna di sinistra e poi cercare i modelli di banner utilizzando la casella di ricerca in alto.

In questo modo verranno visualizzati tutti i modelli di banner disponibili in Canva. Tuttavia, alcuni di questi modelli potrebbero essere bloccati perché si tratta di funzioni a pagamento.

Fase 2: Progettazione del banner del sito web

Una volta selezionato un modello, l’interfaccia di progettazione di Canva verrà lanciata sullo schermo.

Da qui è possibile personalizzare il banner secondo i propri gusti. È possibile modificare il contenuto esistente facendo clic sui blocchi e aggiungendo il proprio testo.

È anche possibile aggiungere diversi elementi grafici come adesivi, foto e video passando alla scheda “Elementi” nella colonna di sinistra.

Dopo aver aggiunto un elemento, è possibile modificarne l’animazione, la posizione e la trasparenza dal menu in alto.

È inoltre possibile caricare i file multimediali dal proprio computer passando alla scheda “Caricamenti” della colonna di sinistra.

Per aggiungere del testo al banner, basta passare alla scheda “Casella di testo” della colonna a sinistra.

A questo punto, è possibile utilizzare gli stili di testo predefiniti o diverse combinazioni di caratteri per aggiungere contenuti al banner.

È anche possibile aggiungere un invito all’azione con un link, selezionando il testo con il mouse. In questo modo verrà visualizzata un’icona di collegamento nella parte superiore del testo.

È sufficiente fare clic sull’icona e copiare e incollare il link che si desidera aggiungere.

Quindi, fare clic sul pulsante “Fatto” per salvarlo.

Passo 3: ottenere un codice di incorporamento per il banner

Una volta soddisfatti della personalizzazione del banner, basta fare clic sul pulsante “Condividi” nell’angolo in alto a destra dello schermo.

Si aprirà un menu di richiesta in cui dovrete selezionare l’opzione “Altro” in basso.

A questo punto si accede al menu “Tutte le opzioni”, dove si deve selezionare l’opzione “Incorpora”.

Una volta fatto ciò, si aprirà un nuovo prompt sullo schermo. Da qui, è sufficiente fare clic sul pulsante “Incorpora”.

Canva creerà ora un codice di incorporamento HTML per voi.

Una volta visualizzato sullo schermo, fare clic sul pulsante “Copia” sotto l’opzione “Codice HTML incorporato”.

Passo 4: Aggiungere il codice HTML di integrazione in WordPress

Ora potete visualizzare il vostro banner sulla pagina, sul post o sulla barra laterale di WordPress, a seconda delle vostre preferenze. Per questa esercitazione, mostreremo il nostro banner su una pagina di WordPress.

Per prima cosa, è necessario aprire la pagina o il post in cui si desidera aggiungere il banner.

Una volta lì, fare clic sul pulsante “Aggiungi blocco” (+) nell’angolo in alto a sinistra per trovare e aggiungere il blocco HTML personalizzato alla pagina.

Una volta fatto ciò, è sufficiente incollare il codice embed copiato nel blocco.

Infine, fare clic sul pulsante “Aggiorna” o “Pubblica” per salvare le modifiche.

Ora visitate il vostro sito web per vedere il banner di WordPress in azione.

Metodo 3: Creare un banner per il sito web usando Thrive Leads

È anche possibile creare un banner per il sito web utilizzando Thrive Leads. Si tratta di un popolare plugin popup per WordPress utilizzato da oltre 114.000 siti web.

Con Thrive Leads potete progettare banner di alta qualità che vi aiuteranno a catturare contatti sul vostro sito WordPress e a far crescere la vostra mailing list.

Passo 1: Installare Thrive Leads sul vostro sito WordPress

Innanzitutto, è necessario visitare il sito web di Thrive Themes e registrarsi per ottenere un account. Una volta fatto ciò, andate nella vostra dashboard.

Da qui, fare clic sul link “Scarica e installa il plugin Thrive Product Manager”.

Quindi, visitate il vostro sito web WordPress per installare e attivare il plugin Thrive Product Manager. Per istruzioni dettagliate, potete consultare la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, andate alla scheda Product Manager dalla dashboard di amministrazione di WordPress e fate clic sul pulsante “Accedi al mio account”.

Dopo aver inserito le credenziali di accesso, potrete vedere la vostra dashboard di Thrive Product Manager.

Da qui è possibile selezionare i prodotti che si desidera installare e utilizzare sul proprio sito. È sufficiente scegliere il plugin “Thrive Leads” e fare clic sul pulsante “Installa i prodotti selezionati”.

Fase 2: Creare un banner per il sito web

Dopo l’installazione del plugin, è necessario visitare la pagina Thrive dashboard ” Thrive Leads dalla barra laterale dell’amministrazione di WordPress.

Una volta arrivati, basta fare clic sul pulsante “Aggiungi nuovo” accanto all’opzione “Gruppi di contatti”.

Sullo schermo apparirà il popup “Aggiungi nuovo gruppo di contatti”, in cui si dovrà digitare un nome per il gruppo di contatti che si sta creando.

Assicuratevi di dare al gruppo principale un nome che vi aiuti a identificarlo.

Ad esempio, se state creando un banner per costruire la vostra lista di e-mail, potete nominare il vostro gruppo di lead “Campagna lista e-mail”.

Successivamente, il gruppo di contatti creato verrà aggiunto alla schermata. Da qui, fate clic sul pulsante “Aggiungi un nuovo tipo di modulo Opt-In”.

Si aprirà un nuovo prompt in cui si dovrà scegliere il tipo di banner che si desidera creare.

È possibile creare un banner slide-in, ribbon, widget, in-content, lightbox o scroll mat a seconda delle proprie esigenze.

Questi banner saranno come un modulo, in quanto raccoglieranno i dati dei vostri utenti, compresi gli indirizzi e-mail, i numeri di telefono e altro ancora.

In questa esercitazione creeremo un banner a nastro per il nostro sito.

Una volta scelto il tipo di design del banner del sito web, la richiesta scompare automaticamente dallo schermo.

Ora, per aprire la dashboard del vostro gruppo di contatti, dovete fare clic sul pulsante “Aggiungi” nell’angolo destro della scheda Gruppi di contatti.

In questo modo si accede alla dashboard dei gruppi di contatti, dove verranno visualizzati tutti i moduli e i rapporti sui contatti del gruppo dopo che la campagna è stata attivata.

Ad esempio, se si desidera creare un banner per acquisire indirizzi e-mail, tutte le informazioni degli utenti raccolte attraverso il banner saranno visualizzate qui.

Per ora è sufficiente fare clic sul pulsante “Crea modulo” per iniziare a costruire il banner.

Si aprirà un nuovo prompt in cui si dovrà indicare un nome per il modulo e fare clic sul pulsante “Crea modulo”.

Una volta creato il modulo, questo verrà visualizzato nella dashboard dei Gruppi di interesse.

Da qui, fate clic sul pulsante “Modifica design” nell’angolo destro per iniziare a costruire il vostro banner.

Passo 3: personalizzare il banner del sito web

L’editor visuale di Thrive viene ora lanciato in una nuova scheda sullo schermo.

Da qui, potete iniziare a selezionare un modello per il vostro banner dal prompt “Thrive Leads Library”.

È possibile utilizzare uno dei modelli già pronti così com’è o personalizzarlo ulteriormente con l’editor visuale. Una volta effettuata la scelta, è sufficiente fare clic sul pulsante “Scegli modello” per andare avanti.

Dopo aver aggiunto un modello per un banner a nastro, è possibile personalizzare facilmente gli elementi in esso contenuti facendo clic su ciascuno di essi. Si apriranno le impostazioni dell’elemento nella barra laterale a sinistra.

Ad esempio, se si desidera modificare il colore del pulsante nel modello, è necessario fare clic su di esso per aprire le impostazioni nella barra laterale.

Se volete aggiungere un elemento completamente nuovo al vostro banner, potete farlo cliccando sull’icona ‘+’ nell’angolo destro dello schermo.

Si aprirà la barra laterale “Aggiungi elementi” sulla destra, dove è possibile trascinare e rilasciare elementi di propria scelta sul banner.

Per esempio, se volete aggiungere i pulsanti degli account dei social media al vostro banner, dovrete trascinare e rilasciare l’elemento Social Follow dalla barra laterale destra.

Una volta soddisfatti, fare clic sul pulsante “Salva lavoro” nell’angolo in basso a sinistra per memorizzare le modifiche.

Dopodiché, è necessario tornare alla dashboard dei Gruppi di interesse.

Passo 4: Configurazione delle impostazioni del banner

Una volta tornati nella dashboard, è possibile modificare la posizione del banner facendo clic sull’opzione “Posizione” nella riga del modulo.

Si aprirà la finestra “Impostazioni di posizione”, dove è possibile scegliere la posizione del banner preferita dal menu a discesa.

Quindi, fare clic sul pulsante “Salva”.

Quindi, per configurare la frequenza di visualizzazione del banner, fare clic sull’opzione “Frequenza di visualizzazione” nella riga del modulo.

Si aprirà il prompt “Impostazioni di visualizzazione”, in cui è possibile utilizzare il cursore per determinare il numero di volte in cui il banner deve essere visualizzato sullo schermo.

Se si mantiene il numero 0, il banner sarà sempre visualizzato. Una volta effettuata la scelta, fare clic sul pulsante “Salva” per memorizzare le impostazioni.

Se si desidera aggiungere un trigger specifico per la visualizzazione del banner, è necessario fare clic sull’opzione ‘Trigger’ nella riga del modulo.

Verrà visualizzata la richiesta “Impostazioni di attivazione”. Qui è possibile scegliere un trigger per il banner dal menu a tendina, ad esempio dopo un certo periodo o quando un utente raggiunge il fondo della pagina.

Al termine, fare clic sul pulsante “Salva” per salvare le impostazioni.

Passo 5: Pubblicare il banner

Dopo aver configurato le impostazioni del banner, è necessario uscire dalla dashboard di Lead Groups e tornare alla dashboard di Thrive Leads facendo clic sul link in alto.

Una volta lì, espandete la scheda Gruppi di contatti e spostate l’interruttore “Visualizza su desktop” su “On”. Se si desidera visualizzare il banner anche sui dispositivi mobili, è possibile impostare l’interruttore “Visualizza su mobile” su “On”.

Successivamente, fare clic sull’icona dell’ingranaggio nell’angolo in alto a destra della scheda Gruppi di contatti per aprire le impostazioni di visualizzazione.

Qui è possibile selezionare le pagine del sito web su cui si desidera visualizzare il banner. Ad esempio, se si desidera che il banner venga visualizzato nella parte superiore di tutte le pagine e i post, è possibile selezionare la casella accanto a queste opzioni.

Infine, fare clic sul pulsante “Salva e chiudi” per salvare le modifiche.

Ora è possibile visitare il sito web per controllare il banner visualizzato nella parte superiore della pagina.

Ecco come appariva sul nostro sito web dimostrativo.

Bonus: Aggiungere banner di app intelligenti in WordPress

Se disponete di un’applicazione mobile per il vostro sito web, è una buona idea visualizzare i banner delle app intelligenti. Questi banner promuovono le vostre app e incoraggiano gli utenti di iPhone o iPad a scaricarle.

Una volta che i visitatori cliccano su questo banner, saranno portati all’app store, dove potranno scaricare la vostra applicazione. Se l’app è già installata sul dispositivo, il banner smart app chiederà invece di aprire l’app.

Con WPCode potete aggiungere facilmente un banner di un’app intelligente in WordPress. È il miglior plugin di snippets di codice per WordPress sul mercato che vi permette di aggiungere facilmente l’ID della vostra app al sito web.

Per ulteriori informazioni, consultate il nostro tutorial su come aggiungere facilmente un banner di un’app intelligente in WordPress.

Ci auguriamo che questo articolo vi abbia aiutato a capire come creare facilmente un banner per il sito WordPress. Potreste anche voler consultare la nostra guida per principianti su come personalizzare i colori sul vostro sito web WordPress e la nostra scelta dei migliori software di web design.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.