Un banner di grande impatto visivo è una delle prime cose che i visitatori notano quando arrivano sul tuo sito. Definisce il tono del tuo brand, comunica il tuo messaggio e incoraggia le conversioni, rendendolo uno strumento potente per mettere in risalto i tuoi prodotti, servizi o aggiornamenti importanti.
Nel corso degli anni, abbiamo utilizzato diversi tipi di banner su WPBeginner per promuovere la nostra newsletter, evidenziare le offerte del Black Friday, condividere corsi gratuiti, mostrare i nostri servizi professionali e altro ancora.
Attraverso queste campagne, abbiamo notato che i banner catturano costantemente l'attenzione delle persone, incoraggiano i clic sui pulsanti di call-to-action e generano lead per la nostra attività.
In questo articolo, ti mostreremo come creare facilmente un banner per il tuo sito web WordPress. In questo modo, potrai sfruttare tutti questi vantaggi per migliorare la tua attività.
Cos'è un banner per siti web?
Un banner è un'immagine grafica che si estende sulla parte superiore, inferiore o laterale di un sito web WordPress. Spesso include il nome del brand 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 nella parte superiore delle sue pagine per informare i nuovi visitatori sulle offerte di sconto e incoraggiarli a effettuare un acquisto.
Un banner ben progettato può fare una forte impressione e invitare i visitatori a esplorare il resto del tuo sito. Inoltre, i banner possono essere utilizzati per promuovere prodotti affiliati, stabilire l'identità del marchio, creare una lista email incoraggiando i visitatori a iscriversi alla tua newsletter e indirizzare traffico verso altre pagine del tuo sito.
Puoi anche usare i banner per promuovere i tuoi account sui social media e incoraggiare i visitatori a seguire o mettere "mi piace" alle tue pagine.
Qual è la dimensione migliore per un banner del sito web?
La dimensione ideale di un banner per il sito web dipende dal layout e dagli obiettivi di marketing specifici del tuo blog WordPress.
Ad esempio, se desideri visualizzare un banner rettangolare e sottile nella parte superiore dello schermo, puoi utilizzare la dimensione Large Leaderboard, che è 970 x 90.
Alcune delle altre dimensioni di banner più popolari e più utilizzate includono:
- Medium Banner: 300 x 250
- Leaderboard: 728 x 90
- Wide Skyscraper: 160 x 600
- Half-Page: 300 x 600
- Large Leaderboard: 970 x 90
- Billboard: 970 x 250
- Large Rectangle: 326 x 280
- Vertical Banner: 120 x 240
- Full Banner: 468 x 60
- Half Banner: 234 x 60
Se vuoi mostrare un banner per un evento nella barra laterale, puoi utilizzare le dimensioni del banner Wide Skyscraper o Half-Page. Allo stesso modo, puoi anche utilizzare la dimensione del banner Medium per visualizzare un banner di forma quadrata sulla tua pagina.
Se stai cercando di visualizzare banner pubblicitari, potresti voler consultare la nostra guida per principianti sulle dimensioni e formati dei banner Google AdSense più performanti per WordPress.
Detto questo, vediamo come puoi creare facilmente un banner sul tuo sito WordPress. Per questo tutorial, copriremo tre metodi per creare un banner, e puoi usare i link qui sotto per passare al metodo di tua scelta:
- Metodo 1: Crea un banner per il sito web utilizzando OptinMonster (Consigliato)
- Metodo 2: Crea un banner per il sito web utilizzando Canva (Gratuito)
- Metodo 3: Crea un Banner per il Sito Web con Thrive Leads
- Bonus: Aggiungi Smart App Banner in WordPress
Metodo 1: Crea un banner per il sito web utilizzando OptinMonster (Consigliato)
OptinMonster è il miglior plugin per creare banner WordPress sul mercato che ti permette di creare facilmente banner a barra mobile e popup per il tuo sito web.
È il miglior strumento di ottimizzazione delle conversioni e di generazione di lead che ti aiuta a trasformare i visitatori del sito web in iscritti e clienti.
Inoltre, molti dei modelli di banner di OptinMonster hanno campi di opt-in che ti permettono di raccogliere nomi, indirizzi email e numeri di telefono dei visitatori del tuo sito web.
Nel corso degli anni, abbiamo utilizzato lo strumento più volte per aggiungere banner e creare campagne di lead generation di successo su WPBeginner. Per maggiori dettagli, consulta la nostra recensione completa di OptinMonster.
Passaggio 1: Installa OptinMonster sul Tuo Sito Web
Innanzitutto, dovrai registrarti per un account OptinMonster. Per farlo, visita semplicemente il sito web di OptinMonster e fai clic sul pulsante 'Ottieni OptinMonster Ora'.
Dopodiché, dovrai installare e attivare il plugin gratuito OptinMonster sul tuo sito WordPress. Per istruzioni dettagliate, potresti voler consultare la nostra guida per principianti su come installare un plugin WordPress.
Dopo l'attivazione, la procedura guidata di configurazione di OptinMonster si aprirà nel tuo pannello di amministrazione di WordPress.
Da qui, fai clic sul pulsante ‘Collega il tuo account esistente’ per collegare il tuo sito WordPress al tuo account OptinMonster.
Questo aprirà una nuova finestra sullo schermo del tuo computer.
Da qui, fai clic sul pulsante 'Connetti a WordPress' per procedere.
Passaggio 2: Crea e personalizza il tuo banner
Ora che hai collegato il tuo account WordPress con OptinMonster, vai alla pagina OptinMonster » Campagne dalla barra laterale di amministrazione di WordPress.
Da qui, fai clic sul pulsante 'Crea la tua prima campagna' per iniziare a creare il design del banner del tuo sito web.
Questo ti indirizzerà alla pagina 'Modelli', dove puoi iniziare scegliendo un tipo di campagna.
Ad esempio, se vuoi mostrare il tuo banner come una barra nella parte superiore dello schermo, puoi scegliere la campagna 'Barra fluttuante'. Allo stesso modo, puoi selezionare il tipo di campagna 'Popup' per visualizzare il tuo banner come un popup.
Dopodiché, dovrai anche selezionare un modello per la campagna che hai scelto.
Per questo tutorial, sceglieremo un modello per il tipo di campagna 'Barra fluttuante'.
Successivamente, ti verrà chiesto di dare un nome alla campagna che stai creando. Digita semplicemente un nome a tua scelta e fai clic sul pulsante 'Inizia a costruire' per proseguire.
Questo avvierà l'interfaccia drag-and-drop di OptinMonster sul tuo schermo, dove puoi iniziare a personalizzare il tuo banner. Da qui, puoi trascinare e rilasciare i campi di tua scelta dalla barra laterale sinistra sul banner.
Ad esempio, se desideri aggiungere icone dei social media al tuo banner per aumentare i tuoi follower, puoi trascinare e rilasciare il blocco Social Media dalla barra laterale sinistra.
Successivamente, fai clic sul blocco per aprire le sue impostazioni nella colonna di sinistra.
Da qui, puoi cambiare il titolo del pulsante, aggiungere il tuo URL dei social media e persino cambiare la tua piattaforma social dal menu a discesa.
Puoi anche aggiungere altri blocchi per visualizzare video, immagini, testo o CTA nel design del banner del tuo sito web.
Una volta fatto ciò, devi selezionare la posizione del banner.
Per impostazione predefinita, la barra mobile di OptinMonster viene visualizzata in basso sullo schermo del tuo sito web non appena inizi a scorrere.
Tuttavia, puoi facilmente modificare questa impostazione facendo clic sull'icona 'Impostazioni' in fondo alla barra laterale sinistra.
Questo aprirà le impostazioni nella colonna di sinistra, dove dovrai espandere la scheda ‘Impostazioni barra mobile’. Da qui, basta attivare l'interruttore ‘Carica barra mobile in cima alla pagina?’ per visualizzare il banner in alto.
Passaggio 3: Aggiungi trigger per il tuo banner
Una volta progettato il tuo banner, passa alla scheda ‘Regole di visualizzazione’ in alto. Da qui, puoi aggiungere regole per la visualizzazione del tuo banner.
Ricorda che devi passare a questa scheda solo se desideri aggiungere un trigger di visualizzazione specifico per il tuo banner. Altrimenti, puoi passare al passaggio successivo.
Ad esempio, se desideri mostrare il tuo banner quando l'utente sta per abbandonare il tuo sito, allora devi scegliere l'opzione ‘Intento di uscita’.
Una volta fatto ciò, seleziona semplicemente l'opzione ‘Su tutti i dispositivi’ dal menu a discesa centrale. Se desideri utilizzare questa regola di visualizzazione solo per i dispositivi mobili, puoi anche scegliere tale opzione.
Dopodiché, scegli la Sensibilità all'intento di uscita secondo le tue preferenze e fai clic sul pulsante ‘Passaggio successivo’.
Questo ti porterà a una nuova schermata. Qui, devi assicurarti che l'opzione ‘Optin’ sia selezionata per il menu a discesa ‘Mostra la visualizzazione della campagna’.
Una volta fatto ciò, fai semplicemente clic sul pulsante ‘Passaggio successivo’.
La tua regola di visualizzazione per il banner verrà ora mostrata sullo schermo.
Se desideri modificare qualcosa qui, puoi fare clic sul pulsante ‘Modifica’ per correggerlo.
Passaggio 4: Pubblica il tuo banner
Ora puoi passare alla scheda ‘Pubblica’ in alto e fare clic sul pulsante ‘Salva’ nell'angolo in alto a destra dello schermo.
Dopodiché, fai semplicemente clic sul pulsante ‘Pubblica’ per visualizzare il banner sul tuo sito web.
Ora, visita il tuo sito web per vedere il banner in cima al tuo schermo.
Questo è come appariva sul nostro sito demo.
Metodo 2: Crea un banner per il sito web utilizzando Canva (Gratuito)
Se vuoi creare un banner per siti web gratuitamente, allora questo metodo fa per te.
Canva è uno strumento web popolare per creare ogni tipo di grafica, inclusi banner, loghi, poster, copertine di libri e altro ancora. Offre anche una versione gratuita che puoi utilizzare per creare un design di banner per siti web.
Passaggio 1: Crea un account Canva
Innanzitutto, visita il sito web di Canva e fai clic sul pulsante 'Iscriviti' per creare un account.
Se hai già un account Canva, puoi semplicemente accedere.
Dopo la creazione dell'account, verrai reindirizzato alla pagina principale del tuo account Canva.
Da qui, devi passare alla scheda 'Modelli' dalla colonna di sinistra e quindi cercare modelli di banner utilizzando la casella di ricerca in alto.
Questo mostrerà tutti i modelli di banner disponibili in Canva. Tuttavia, alcuni di questi modelli potrebbero essere bloccati perché sono funzionalità a pagamento.
Passaggio 2: Progetta il tuo banner per siti web
Una volta selezionato un modello, l'interfaccia di progettazione di Canva verrà avviata sullo schermo.
Da qui, puoi personalizzare il tuo banner secondo i tuoi gusti. Puoi cambiare il contenuto esistente facendo clic sui blocchi e aggiungendo il tuo testo.
Puoi persino aggiungere diversi elementi grafici come adesivi, foto e video passando alla scheda 'Elementi' nella colonna di sinistra.
Dopo aver aggiunto un elemento, puoi modificarne ulteriormente l'animazione, la posizione e la trasparenza dal menu in alto.
Puoi anche caricare file multimediali dal tuo computer passando alla scheda 'Caricamenti' dalla colonna di sinistra.
Per aggiungere testo al tuo banner, passa alla scheda ‘Casella di testo’ nella colonna a sinistra.
Una volta lì, puoi utilizzare stili di testo predefiniti o diverse combinazioni di font per aggiungere contenuti al tuo banner.
Puoi persino aggiungere una call to action con un link selezionando il testo con il mouse. Questo visualizzerà un'icona di link in cima al testo.
Fai semplicemente clic su quell'icona e copia e incolla il link che desideri aggiungere.
Dopodiché, fai clic sul pulsante ‘Fatto’ per salvarlo.
Passaggio 3: Ottieni un codice di incorporamento per il banner
Una volta che sei soddisfatto della personalizzazione del tuo banner, fai semplicemente clic sul pulsante ‘Condividi’ nell'angolo in alto a destra dello schermo.
Questo aprirà un menu a comparsa in cui devi selezionare l'opzione ‘Altro’ in basso.
Ora verrai portato al menu ‘Tutte le opzioni’, dove dovrai selezionare l'opzione ‘Incorpora’.
Una volta fatto ciò, si aprirà un nuovo menu a comparsa sullo schermo. Da qui, fai semplicemente clic sul pulsante ‘Incorpora’.
Canva creerà ora un codice di incorporamento HTML per te.
Una volta visualizzato sullo schermo, fai clic sul pulsante ‘Copia’ sotto l'opzione ‘Codice di incorporamento HTML’.
Passaggio 4: Aggiungi il codice di incorporamento HTML in WordPress
Ora puoi visualizzare il tuo banner sulla tua pagina, post o barra laterale di WordPress secondo le tue preferenze. Per questo tutorial, mostreremo il nostro banner su una pagina WordPress.
Innanzitutto, devi aprire la pagina o il post in cui desideri aggiungere il banner.
Una volta lì, fai 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ò, incolla semplicemente il codice di incorporamento che hai copiato nel blocco.
Infine, fai clic sul pulsante 'Aggiorna' o 'Pubblica' per salvare le modifiche.
Ora, visita il tuo sito web per vedere il banner di WordPress in azione.
Metodo 3: Crea un Banner per il Sito Web con Thrive Leads
Puoi anche creare un banner per il tuo sito web utilizzando Thrive Leads. È un popolare plugin per popup di WordPress utilizzato da oltre 114.000 siti web.
Con Thrive Leads, puoi progettare banner di alta qualità che ti aiuteranno a catturare lead sul tuo sito WordPress e a far crescere la tua lista email.
Abbiamo testato a fondo questo strumento in tempo reale e lo abbiamo trovato super facile da usare per i principianti, con un'interfaccia intuitiva e modelli accattivanti. Per i dettagli, consulta la nostra recensione di Thrive Themes Suite.
Passaggio 1: Installa Thrive Leads sul tuo sito web WordPress
Innanzitutto, devi visitare il sito web Thrive Themes e registrarti per un account. Una volta fatto ciò, vai alla tua dashboard membro.
Da qui, fai clic sul link 'Scarica e installa il plugin Thrive Product Manager'.
Successivamente, visita il tuo sito web WordPress per installare e attivare il plugin Thrive Product Manager. Per istruzioni dettagliate, potresti voler consultare la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, vai alla scheda Product Manager dalla dashboard di amministrazione di WordPress e fai clic sul pulsante 'Accedi al mio account'.
Dopo aver inserito le tue credenziali di accesso, potrai vedere la tua dashboard di Thrive Product Manager.
Da qui, puoi selezionare i prodotti che desideri installare e utilizzare sul tuo sito. Scegli semplicemente il plugin ‘Thrive Leads’ e fai clic sul pulsante ‘Installa prodotti selezionati’.
Passaggio 2: Crea un banner per il sito web
Dopo l'installazione del plugin, devi visitare la pagina Thrive dashboard » Thrive Leads dalla barra laterale di amministrazione di WordPress.
Una volta lì, fai clic sul pulsante ‘Aggiungi nuovo’ accanto all’opzione ‘Gruppi di lead’.
Questo visualizzerà il popup ‘Aggiungi nuovo gruppo di lead’ sullo schermo, dove dovrai digitare un nome per il gruppo di lead che stai creando.
Assicurati di nominare il gruppo di lead in modo che ti aiuti a identificarlo.
Ad esempio, se stai creando un banner per creare la tua lista di email, puoi nominare il tuo gruppo di lead ‘Campagna Lista Email’.
Dopodiché, il gruppo di lead che hai creato apparirà sullo schermo. Per accedervi, fai clic sul pulsante ‘Aggiungi nuovo tipo di modulo di opt-in’.
Questo aprirà una nuova finestra di dialogo in cui dovrai scegliere il tipo di banner che desideri creare.
Puoi creare un banner a comparsa, a nastro, widget, in-content, lightbox o scroll mat secondo le tue preferenze.
Questi banner saranno simili a un modulo in quanto raccoglieranno dati dai tuoi utenti, inclusi indirizzi email, numeri di telefono e altro.
Per questo tutorial, creeremo un banner a nastro per il nostro sito.
Dopo aver scelto un tipo di design del banner del sito web, la finestra di dialogo scomparirà automaticamente dallo schermo.
Ora, per aprire la dashboard del tuo gruppo di lead, devi fare clic sul pulsante ‘Aggiungi’ nell’angolo destro della tua scheda Gruppi di lead.
Questo ti porterà alla dashboard dei tuoi Gruppi di lead, dove tutti i moduli e i report sui lead per il gruppo verranno visualizzati dopo che la tua campagna sarà attiva.
Ad esempio, se vuoi creare un banner per acquisire indirizzi email, tutte le informazioni utente che raccogli tramite il banner verranno visualizzate qui.
Per ora, devi solo fare clic sul pulsante ‘Crea modulo’ per iniziare a costruire il tuo banner.
Questo aprirà una nuova finestra di dialogo in cui dovrai fornire un nome per il modulo e fare clic sul pulsante ‘Crea modulo’.
Una volta creato il tuo modulo, verrà visualizzato nella dashboard dei tuoi Gruppi di lead.
Da qui, fai clic sul pulsante ‘Modifica design’ nell'angolo destro per iniziare a creare il tuo banner.
Passaggio 3: Personalizza il banner del tuo sito web
L'editor visivo di Thrive verrà ora avviato in una nuova scheda sullo schermo.
Da qui, puoi iniziare selezionando un modello per il tuo banner dal prompt ‘Libreria Thrive Leads’.
Puoi quindi utilizzare uno dei modelli predefiniti così com'è o personalizzarlo ulteriormente con l'editor visivo. Dopo aver fatto la tua scelta, fai semplicemente clic sul pulsante ‘Scegli modello’ per procedere.
Dopo aver aggiunto un modello per un banner a nastro, puoi facilmente personalizzare gli elementi al suo interno facendo clic su ciascuno di essi. Questo aprirà le impostazioni dell'elemento nella barra laterale a sinistra.
Ad esempio, se desideri cambiare il colore del pulsante nel tuo modello, devi fare clic su di esso per aprire le sue impostazioni nella barra laterale.
Se desideri aggiungere un elemento completamente nuovo al tuo banner, puoi farlo anche facendo clic sull'icona ‘+’ nell'angolo destro dello schermo.
Questo aprirà la barra laterale ‘Aggiungi elementi’ sulla destra, dove puoi trascinare e rilasciare gli elementi di tua scelta sul banner.
Ad esempio, se desideri aggiungere pulsanti per account di social media al tuo banner, dovrai trascinare e rilasciare l'elemento Social Follow dalla barra laterale destra.
Una volta soddisfatto, fai clic sul pulsante ‘Salva lavoro’ nell'angolo in basso a sinistra per memorizzare le tue modifiche.
Dopodiché, devi tornare alla dashboard dei tuoi gruppi di lead.
Passaggio 4: Configura le impostazioni del banner
Una volta tornato alla tua dashboard, puoi cambiare la posizione del tuo banner facendo clic sull'opzione ‘Posizione’ nella riga del modulo.
Questo aprirà la finestra di dialogo ‘Impostazioni posizione’, dove potrai scegliere la tua posizione preferita per il banner dal menu a discesa.
Dopo di che, fai clic sul pulsante ‘Salva’.
Successivamente, per configurare la frequenza di visualizzazione del banner, fai clic sull'opzione ‘Frequenza di visualizzazione’ nella riga del modulo.
Questo aprirà la finestra di dialogo ‘Impostazioni di visualizzazione’, dove potrai utilizzare il cursore per determinare quante volte il banner deve essere visualizzato sullo schermo.
Se mantieni il numero 0, il banner verrà visualizzato in ogni momento. Dopo aver fatto la tua scelta, fai clic sul pulsante ‘Salva’ per memorizzare le tue impostazioni.
Se desideri aggiungere un trigger specifico per la visualizzazione del tuo banner, devi fare clic sull'opzione ‘Trigger’ nella riga del modulo.
Questo visualizzerà la finestra di dialogo ‘Impostazioni trigger’. Qui, puoi scegliere un trigger per il tuo banner dal menu a discesa, ad esempio dopo un certo periodo di tempo o quando un utente raggiunge il fondo della pagina.
Una volta terminato, fai clic sul pulsante ‘Salva’ per salvare le tue impostazioni.
Fase 5: Pubblica il tuo banner
Dopo aver configurato le impostazioni del banner, devi uscire dalla tua dashboard Lead Groups e tornare alla dashboard Thrive Leads facendo clic sul link in alto.
Una volta lì, espandi la tua scheda Lead Groups e attiva l'interruttore ‘Visualizza su desktop’ su ‘Attivato’. Se desideri visualizzare il tuo banner anche sui dispositivi mobili, puoi attivare l'interruttore ‘Visualizza su mobile’ su ‘Attivato’.
Successivamente, fai clic sull'icona dell'ingranaggio nell'angolo in alto a destra della scheda Lead Groups per aprire le impostazioni di visualizzazione.
Qui, puoi selezionare le pagine del sito web su cui desideri che il banner venga visualizzato. Ad esempio, se desideri che il banner venga visualizzato in cima a tutte le pagine e ai post, puoi selezionare la casella accanto a queste opzioni.
Infine, fai clic sul pulsante ‘Salva e chiudi’ per salvare le modifiche.
Ora, puoi visitare il tuo sito web per controllare il banner visualizzato in cima alla pagina.
Questo è come appariva sul nostro sito demo.
Bonus: Aggiungi Smart App Banner in WordPress
Se hai un' app mobile per il tuo sito web, allora è una buona idea visualizzare banner intelligenti per le app. Questi banner promuoveranno le tue app e incoraggeranno gli utenti di iPhone o iPad a scaricarle.
Una volta che i visitatori cliccano su questo banner, verranno reindirizzati all'app store, dove potranno scaricare la tua app. Se l'app è già installata sul loro dispositivo, il banner intelligente dell'app chiederà loro di aprire l'app invece di scaricarla.
Puoi aggiungere facilmente un banner intelligente per le app in WordPress con WPCode. A nostro parere, è il miglior plugin per snippet di codice WordPress sul mercato. Ti permette di aggiungere facilmente l'ID della tua app al sito web.
Per maggiori informazioni, consulta il nostro tutorial su come aggiungere facilmente un banner intelligente per le app in WordPress.
Speriamo che questo articolo ti abbia aiutato a imparare come creare facilmente un banner per siti web per WordPress. Potresti anche voler consultare la nostra guida per principianti su come personalizzare i colori sul tuo sito web WordPress e le nostre migliori scelte per il miglior software di web design.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Ralph
Usavo creare banner come semplici jpeg/png in Canva e inserire immagini cliccabili con link a dove dovessero reindirizzare. Tuttavia, questa è sempre stata una scelta scadente. Ciò che appare bene sul desktop appare male su mobile e viceversa.
Le immagini forse si ridimensionano e si adattano allo schermo, ma non si adattano come i normali banner codificati che sono molto migliori. Il primo metodo sembra davvero promettente e professionale, il che spero mi aiuterà ad aumentare le mie conversioni.