Come aggiungere un'immagine eroica in WordPress (funziona per tutti i temi)

Vuoi rendere il tuo sito WordPress più professionale? Un'immagine eroica è la tua migliore opzione.

Un'immagine eroica è ciò che le persone vedono per prime quando atterrano sul tuo sito. E hai solo circa 3 secondi per catturare la loro attenzione, quindi è importante farlo bene.

Costruiamo siti web WordPress da oltre un decennio ormai, e ricordiamo quando le immagini eroiche sono diventate una cosa importante.

All'epoca, abbiamo lottato proprio come tutti gli altri. Le immagini sembravano strane: troppo grandi sul desktop, schiacciate sul cellulare o semplicemente rotte. Ma ora l'abbiamo ridotto a una scienza.

Ti mostreremo i modi più semplici per aggiungere un'immagine eroica al tuo sito WordPress. Sia che ti piaccia usare i page builder o preferisca l'editor a blocchi, ti abbiamo coperto.

Prima di tutto: prepara la tua immagine eroica per WordPress

Prima di aggiungere un'immagine eroica al tuo sito WordPress, devi crearne una che catturi l'attenzione dei tuoi visitatori. Una grande sezione eroica inizia con un'immagine straordinaria che mostra di cosa tratta il tuo sito.

Canva è uno strumento popolare per la progettazione di grafiche per siti web. È facile da usare e viene fornito con tonnellate di modelli per creare la tua immagine eroica. Se non sei un fan di Canva, abbiamo un elenco di alternative a Canva che puoi controllare per trovarne una che funzioni per te.

Quando crei la tua immagine eroica, vorrai tenere a mente alcune cose.

Innanzitutto, pensa alle dimensioni. Le immagini hero di solito non sono troppo alte e spesso coprono l'intera larghezza della tua home page.

Una dimensione comune per le immagini hero di WordPress è di circa 1920 pixel di larghezza per 400-600 pixel di altezza (o talvolta di più). Ma questo può cambiare a seconda del tuo tema WordPress.

Successivamente, pensa al messaggio che vuoi inviare. La tua immagine hero dovrebbe mostrare rapidamente di cosa tratta il tuo sito web. Potrebbe essere un'immagine hero di un prodotto, una fotografia che rappresenta il tuo marchio o persino un impressionante video di sfondo a schermo intero.

Ad esempio, abbiamo deciso di mettere in evidenza il nostro fondatore, Syed Balkhi, nell'immagine hero della nostra home page. Mostra che c'è una persona reale dietro il nostro marchio che è dedicata ad aiutare gli utenti WordPress ad avere successo, che è ciò di cui WPBeginner si occupa.

Inoltre, lascia un po' di spazio per il testo. Molte sezioni hero hanno un titolo o un pulsante. Assicurati che ci sia spazio per questi e che siano facili da leggere.

È una buona idea guardare altri siti web nel tuo settore per esempi di sezioni hero. Questo può darti idee per il tuo design. Alcune delle voci nei nostri esempi di siti web WordPress possono servire come grande ispirazione.

Fatto questo, vediamo come aggiungere effettivamente l'immagine principale.

Come aggiungere un'immagine principale a WordPress

Durante la ricerca per questo tutorial, ci siamo resi conto rapidamente che aggiungere un'immagine principale ai temi classici di WordPress non è sempre semplice. Il processo può variare ampiamente a seconda del tuo tema, poiché alcuni hanno sezioni principali integrate mentre altri no.

Prendi ad esempio il tema Sydney. Viene fornito con una sezione principale pronta all'uso, il che rende le cose molto più facili.

Se stai cercando di aggiungere un'immagine principale al tuo sito esistente, ma il tuo tema non ha una funzionalità integrata per questo, allora questo può essere frustrante.

Per coloro che stanno appena iniziando e non hanno problemi a scegliere un nuovo tema, consigliamo di passare a uno con una sezione hero integrata, poiché potrebbe farti risparmiare tempo a lungo termine.

Se stai cercando raccomandazioni sui temi, puoi consultare le nostre scelte esperte dei migliori e più popolari temi WordPress sul mercato. Ancora meglio, potresti usare un page builder con un tema che ha una sezione hero, e ti mostreremo come fare nel metodo 3.

Prima di apportare modifiche importanti, suggeriamo sempre di utilizzare un sito di staging per testare a fondo i nuovi temi. In questo modo, puoi essere sicuro di fare la scelta giusta per il tuo sito.

Se non sei sicuro di come fare, consulta la nostra guida su come cambiare correttamente un tema WordPress.

Soddisfatto del tuo attuale tema classico? Nessun problema. Salta al metodo 4, dove ti mostreremo come aggiungere una sezione hero utilizzando un plugin. Questo approccio funziona con qualsiasi tema, quindi puoi creare un'immagine hero straordinaria senza stravolgere l'intero design del tuo sito.

Puoi utilizzare i collegamenti rapidi qui sotto per saltare al tuo metodo preferito:

• Metodo 1: Utilizzo del Personalizzatore del Tema (Solo Temi Classici)
• Method 2: Using Full Site Editor (Block Themes Only)
  • Passaggio 1: Apri l'Editor del Sito Completo
  • Passaggio 2: Aggiungi il Blocco Copertina alla Tua Pagina/Modello
  • Passaggio 3: Configura l'Immagine nel Tuo Blocco Copertina
  • Passaggio 4: Aggiungi Blocchi al Tuo Blocco Copertina
• Method 3: Using a Page Builder (Custom Landing Pages/Themes)
  • Passaggio 1: Configura SeedProd
  • Passaggio 2: Personalizza la Tua Sezione Hero
  • Passaggio 3: Aggiungi e personalizza altri blocchi alla tua sezione Hero
• Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
  • Passaggio 1: Configura il plugin Hero Banner
  • Passaggio 2: Trova il selettore CSS della sezione Header del tuo tema
  • Passaggio 3: Aggiungi il tuo shortcode a WPCode
• Domande frequenti sulle immagini Hero

Metodo 1: Utilizzo del Personalizzatore del Tema (Solo Temi Classici)

Se stai utilizzando un tema classico che ha una sezione hero come Sydney, puoi personalizzare la tua immagine hero tramite il Personalizzatore del tema. Vai su Aspetto » Personalizza nella tua bacheca di WordPress per iniziare.

💡 Nota rapida: Se il Personalizzatore del tema è mancante nella tua bacheca, allora probabilmente stai usando un tema a blocchi e dovresti saltare al metodo 2.

La barra laterale dovrebbe avere diverse opzioni per personalizzare il tuo tema classico.

In Sydney, l'impostazione per personalizzare la tua sezione hero si chiama 'Hero Area', ma questo menu specifico varierà a seconda del tema. Fai clic su di esso.

Il tema Sydney ha 3 menu per creare la tua sezione hero: Hero Type, Hero Slider e Hero Media.

Utilizzeremo solo i primi due perché sono sufficienti per aggiungere una sezione hero al nostro scopo.

Per prima cosa, seleziona 'Hero Type'.

In Hero Type, ti verrà chiesto di scegliere quale tipo di media aggiungerai alla tua sezione hero.

Puoi scegliere tra uno slider a schermo intero, un video, un'immagine o nessun header.

Selezioneremo uno slider a schermo intero per la sezione hero sulla nostra pagina principale e sull'intero sito web. Il motivo è che ci consente di creare uno slider con più immagini per l'hero e aggiungere testo e un pulsante sopra le immagini.

Ora, torna al menu Hero Area e seleziona 'Hero Slider'.

Qui, apri la scheda 'Prima diapositiva' e fai clic sul pulsante 'Seleziona immagine'.

Questo aprirà la tua libreria multimediale di WordPress, dove puoi caricare una nuova immagine o selezionarne una esistente per la tua sezione hero.

Una volta caricata un'immagine, puoi scorrere verso il basso e sostituire il testo nei campi titolo e sottotitolo.

Dovresti vedere le modifiche apportate riflesse automaticamente nell'anteprima della pagina.

Se desideri aggiungere più di un'immagine alla sezione hero, puoi ripetere gli stessi passaggi con il resto delle slide.

Altrimenti, puoi scorrere verso il basso fino al menu 'Pulsante slider'.

Qui, puoi cambiare l'URL e il testo per il pulsante di invito all'azione.

Dopodiché, scorri di nuovo verso il basso fino alla scheda 'Impostazioni slider'.

Qui puoi regolare la velocità dello slider, scegliere di visualizzare lo stesso testo su tutte le slide e rendere il comportamento dello slider reattivo.

Se desideri cambiare il colore del pulsante, torna al menu principale del Personalizzatore del tema.

Successivamente, fai clic su 'Generale'.

Ora dovresti vedere diversi menu per personalizzare le impostazioni generali del tuo tema.

Qui, fai semplicemente clic su 'Pulsanti'.

Ora puoi scorrere verso il basso fino alle sezioni 'Stato predefinito' e 'Stato al passaggio del mouse', dove puoi cambiare il colore del pulsante a seconda del suo stato.

Per modificare il colore, fai semplicemente clic sullo strumento selezionatore di colori e scegli un nuovo colore.

La maggior parte dei temi WordPress ti consente anche di personalizzare i colori e la tipografia del tuo design. Tuttavia, le modifiche che apporti si applicheranno solitamente all'intero sito web, non solo alla tua sezione hero, quindi tienilo presente.

In ogni caso, ecco come appare la nostra immagine hero, creata con il tema Sydney:

Metodo 2: Utilizzo dell'Editor del Sito Completo (Solo temi a blocchi)

Se utilizzi un tema a blocchi, puoi utilizzare il blocco Copertina dell'Editor del Sito Completo per creare facilmente un'immagine hero in WordPress. Non è necessario alcun plugin.

Passaggio 1: Apri l'Editor del Sito Completo

Innanzitutto, vai su Aspetto » Editor nel tuo pannello di amministrazione di WordPress.

Ora vedrai i menu principali dell'editor.

Supponiamo che tu voglia aggiungere la tua immagine hero solo alla tua homepage.

In tal caso, fai semplicemente clic sull'anteprima del tema sul lato destro della pagina.

Se desideri aggiungere l'immagine hero a un'altra pagina, a un modello di pagina personalizzato o a uno schema di blocchi, puoi leggere la nostra guida su Modifica completa del sito di WordPress per maggiori informazioni.

Passaggio 2: Aggiungi il Blocco Copertina alla Tua Pagina/Modello

Poiché la sezione hero è solitamente posizionata sopra la piega (la parte superiore della tua pagina che appare quando i visitatori atterrano sul sito), devi assicurarti di essere nella posizione corretta. La sezione hero si trova tipicamente subito sotto l'intestazione.

Una volta fatto ciò, dovrai eliminare i blocchi esistenti in quella posizione o aggiungere un nuovo blocco Gruppo subito sopra quei blocchi esistenti.

Nel nostro caso, rimuoveremo semplicemente i blocchi che erano già sulla nostra homepage. Se desideri fare lo stesso, puoi fare clic sul pulsante 'Vista elenco' sul lato sinistro della pagina.

Quindi, individua il/i blocco/i che devi eliminare per fare spazio alla tua sezione hero. Dopo averlo individuato, fai semplicemente clic sul pulsante a tre punti e seleziona 'Elimina'.

Ora, seleziona il blocco che si trovava subito sotto il/i blocco/i che hai appena eliminato.

Quindi, fai clic sul pulsante a tre punti e scegli 'Aggiungi prima'. Questo aggiungerà un blocco subito sopra quel blocco e sotto la sezione dell'intestazione.

A questo punto, puoi fare clic sul pulsante '+' che appare nella presunta sezione hero.

Devi aggiungere un blocco Gruppo qui, poiché ciò ti consentirà di gestire l'immagine dell'eroe, il testo, il pulsante e altri elementi come un singolo blocco quando necessario.

Ora puoi selezionare un contenitore per aggiungere i tuoi blocchi.

Per dimostrazione, abbiamo scelto il contenitore Gruppo di base.

Successivamente, fai clic sul pulsante '+' all'interno del blocco Gruppo.

Qui, procedi e seleziona il blocco 'Copertina'.

Dopodiché, vedrai 3 opzioni per aggiungere l'immagine di sfondo dell'eroe: caricarla dal tuo computer, aggiungerla dalla tua libreria multimediale o utilizzare la tua immagine in evidenza.

Nel nostro esempio, faremo clic su 'Libreria multimediale' e selezioneremo un'immagine esistente.

Se il caricamento dell'immagine ha successo, vedrai subito la tua immagine dell'eroe. Tuttavia, ci sono alcune regolazioni che devi apportare.

Passaggio 3: Configura l'Immagine nel Tuo Blocco Copertina

Innanzitutto, seleziona il blocco 'Copertina' stesso in modo che la sua barra degli strumenti appaia sopra di esso.

Quindi, fai clic sul pulsante 'Allinea' e scegli 'Larghezza intera'.

Successivamente, puoi fare clic sull'icona del duotone per cambiare il filtro duotone applicato alla tua immagine.

Se non ti piace, puoi disattivarlo in seguito, cosa che ti mostreremo come fare.

Dopodiché, puoi fare clic sull'icona della posizione del contenuto per cambiare dove appariranno il tuo testo e il tuo pulsante sull'immagine.

Abbiamo deciso di andare sul lato sinistro centrale, poiché il punto focale dell'immagine è sulla destra.

Ora, fai clic sull'icona 'Impostazioni' e passa alla scheda 'Blocco'.

Qui, scorri verso il basso fino alle Impostazioni. È qui che puoi facoltativamente aggiungere un effetto parallasse alla tua immagine ('Sfondo fisso') o utilizzare uno sfondo ripetuto.

Puoi anche scorrere verso l'alto e passare all'icona degli stili.

È qui che puoi impostare l'opacità dell'overlay su 0 in modo che la tua immagine non utilizzi alcun filtro.

Se si desidera modificare l'altezza dell'immagine, è possibile inserire un numero in pixel nel campo 'Altezza minima della copertina'.

Abbiamo deciso di impostare la nostra immagine a 400 pixel.

Sentiti libero di personalizzare altre impostazioni come bordo e ombra, spaziatura dei blocchi, padding e margin, tipografia e così via.

Passaggio 4: Aggiungi Blocchi al Tuo Blocco Copertina

Ora siamo pronti per aggiungere altri elementi alla tua immagine hero. Dovresti vedere un testo 'Scrivi titolo' sopra l'immagine.

Ecco un consiglio da professionista: Invece di aggiungere un'intestazione direttamente, fai clic sul pulsante '+' e aggiungi prima un altro blocco Gruppo. Pensa a questo blocco Gruppo come a un contenitore per il tuo testo e pulsante.

Metterli all'interno di un contenitore rende molto più facile controllarne l'allineamento e lo stile insieme come un'unica unità.

Quindi, scegli il contenitore desiderato come nel passaggio precedente.

Una volta fatto ciò, puoi fare clic nuovamente sul pulsante '+' per aggiungere un blocco Intestazione.

Ora puoi inserire il titolo della tua pagina.

Sentiti libero di cambiare il colore del testo, le dimensioni e le dimensioni nella barra laterale delle impostazioni del blocco, se preferisci.

Dopo averlo fatto, puoi premere il tasto 'Invio'.

A questo punto, sentiti libero di aggiungere un sottotitolo subito sotto l'intestazione.

Infine, puoi aggiungere un pulsante di invito all'azione alla tua immagine principale.

Per farlo, premi di nuovo il tasto ‘Invio’, fai clic sul pulsante ‘+’ e seleziona il blocco ‘Pulsanti’.

Successivamente, inserisci semplicemente il testo del pulsante.

E per aggiungere un link al pulsante, fai clic sull'icona del link nella barra degli strumenti e inserisci il tuo URL nel campo appropriato.

Quindi, fai clic sul pulsante freccia.

Se hai bisogno di suggerimenti e trucchi per creare pulsanti ad alta conversione, puoi consultare la nostra guida alle migliori pratiche per gli inviti all'azione.

E questo è praticamente tutto. Puoi aggiungere altri elementi alla tua immagine principale o personalizzarla secondo le tue preferenze.

Una volta che sei soddisfatto dell'aspetto della sezione principale, fai semplicemente clic su ‘Salva’.

Ecco come appare il nostro blocco Copertina:

Metodo 3: Utilizzo di un Page Builder (Pagine di destinazione/Temi personalizzati)

Supponiamo che tu sia nelle prime fasi di configurazione del tuo sito web. Oppure, stai cercando di creare una pagina di destinazione personalizzata senza essere limitato dalle limitazioni del tuo tema. In tal caso, ti consigliamo di utilizzare un page builder che viene fornito con modelli con sezioni principali, come SeedProd.

SeedProd è un page builder drag-and-drop che abbiamo spesso utilizzato per creare pagine personalizzate per WPBeginner e per i nostri altri siti di marca, tra cui Duplicator e OptinMonster.

Sebbene sia facile da usare, offre anche molte funzionalità di modifica di WordPress integrate che il Personalizzatore del tema, l'Editor del sito completo e Gutenberg non hanno per impostazione predefinita.

Grazie a ciò, siamo stati in grado di risparmiare tempo e denaro sull'installazione di plugin di terze parti solo per aggiungere funzionalità speciali ai nostri temi o landing page.

SeedProd è disponibile in versione gratuita e a pagamento. Puoi assolutamente usare la versione gratuita per creare una landing page personalizzata, ma le opzioni di template e blocchi sono piuttosto limitate. Per questo motivo, consigliamo di passare a un piano a pagamento per maggiori funzionalità, incluso il generatore di contenuti AI.

Per maggiori informazioni, consulta la nostra recensione di SeedProd e il nostro confronto tra Elementor vs. Divi vs. SeedProd, che sono tutti page builder popolari.

Passaggio 1: Configura SeedProd

Per utilizzare SeedProd, devi installare il plugin WordPress fornito nel tuo account SeedProd nella tua area amministrativa. Una volta che il plugin è attivo, ti verrà chiesto di inserire la tua chiave di licenza, che puoi ottenere dalla tua pagina account SeedProd.

Dopo averla inserita, fai semplicemente clic sul pulsante 'Verifica chiave'.

Con SeedProd, hai 2 opzioni: puoi aggiungere una sezione hero a una landing page o a determinate pagine all'interno di un tema personalizzato.

Per configurare la tua landing page o il tuo tema, puoi leggere queste guide:

• Come creare un tema WordPress personalizzato senza codice
• Come creare una landing page in WordPress
• Come creare una squeeze page in WordPress che converte
• Come creare bellissime pagine "Coming Soon" in WordPress

Per il resto del tutorial, utilizzeremo il template Vendite Menu.

Passaggio 2: Personalizza la Tua Sezione Hero

Una volta scelto un modello per il tuo tema o landing page, accederai all'editor di SeedProd.

L'interfaccia di editing di SeedProd è composta da un'anteprima della pagina sul lato destro e una barra laterale sinistra dove puoi aggiungere altri blocchi, personalizzare un blocco/sezione, annullare/ripetere le modifiche, visualizzare i livelli della tua pagina e visualizzare in anteprima il tuo sito su dispositivi mobili o tablet.

Poiché il tema SeedProd include già una sezione hero, il nostro lavoro è già a metà. Quello che dobbiamo fare è semplicemente sostituire l'immagine, personalizzarla e aggiungere altri blocchi alla sezione hero se necessario.

In alternativa, potresti trovare altri design di sezioni hero passando dalla barra laterale Blocchi alla barra laterale Sezioni sul lato sinistro. Quindi, naviga su 'Hero' e fai clic sul pulsante '+' sul modello di sezione hero che desideri aggiungere alla tua pagina.

SeedProd lo inserirà quindi nella tua pagina.

Cambiamo prima l'immagine principale.

Per fare ciò, fai clic sulla sezione più in alto che include l'immagine principale. Saprai di aver selezionato la cosa giusta quando apparirà una casella viola 'Modifica: Sezione' nella barra laterale sinistra.

Ora, passa il mouse sopra l'immagine di sfondo nella barra laterale.

Quindi, fai clic sull'icona 'Media'. Dopodiché, puoi caricare la tua immagine principale dal tuo computer o dalla libreria multimediale.

Successivamente, devi scegliere la posizione di sfondo che funziona meglio per la tua immagine.

Troviamo che l'opzione 'Posizione personalizzata' ci dia il miglior controllo sul posizionamento dei punti focali, quindi sceglieremo quell'opzione.

L'opzione Posizione personalizzata ti offre diversi modi per configurare lo sfondo.

Per le posizioni X e Y, puoi cambiare come l'immagine è posizionata verticalmente e orizzontalmente.

L'impostazione Allegato ha 2 opzioni: Scroll (non-parallax) e Fixed (parallax).

Se la tua immagine è più piccola della sezione principale ma vuoi che l'intera sezione sia riempita dall'immagine, allora puoi ripetere l'immagine in tutta la sezione. Altrimenti, scegli semplicemente 'Nessuna ripetizione'.

Per quanto riguarda la dimensione dell'immagine principale di WordPress, puoi scegliere l'opzione 'Auto' se vuoi che l'immagine si regoli automaticamente alla sezione principale.

Sentiti libero di giocare con queste impostazioni per vedere cosa funziona meglio per la tua immagine.

Un'altra cosa che puoi fare è attenuare l'immagine di sfondo in modo che il tuo testo risalti meglio.

Per fare ciò, puoi trascinare il cursore 'Attenua sfondo' al livello di opacità desiderato.

Se vuoi cambiare il colore di sfondo sovrapposto, fai semplicemente clic sul pulsante del selettore di colori 'Colore sovrapposto'.

Quindi, seleziona semplicemente il tuo colore preferito.

Scorriamo ora verso l'alto e passiamo alle impostazioni 'Avanzate'. È qui che puoi aggiungere tutti i tipi di effetti interessanti alla tua sezione principale.

Ad esempio, puoi aprire la scheda ‘Sfondo particelle’ e aggiungere uno sfondo animato con particelle alla tua immagine. Questo può rendere la tua sezione hero molto più impressionante e unica.

Successivamente, puoi aggiungere un divisore di forma personalizzata sul lato superiore e/o inferiore della tua sezione hero andando nel menu ‘Divisore di forma’.

Fare ciò può aggiungere più interesse visivo alla tua sezione hero. Inoltre, se aggiungi un divisore di forma divertente in basso, puoi incoraggiare gli utenti a scorrere la tua landing page e saperne di più sulla tua offerta.

Passaggio 3: Aggiungi e personalizza altri blocchi alla tua sezione Hero

Con la tua immagine hero pronta, aggiungiamo altri blocchi alla sezione hero.

Dato che la nostra ha già un blocco titolo, ci faremo clic sopra e lo personalizzeremo. Quando selezionato, dovresti vedere che la barra laterale sinistra ora ha un banner arancione che dice ‘Modifica: Titolo’.

La cosa interessante di SeedProd è che ha un generatore di contenuti AI integrato.

Quindi, se non sei sicuro di quale titolo usare, potresti fare clic sul pulsante ‘Modifica con AI’ per trovare alcune idee.

Dovresti ora vedere una finestra popup dove puoi scrivere i tuoi contenuti con l'IA.

Vogliamo generare un titolo completamente nuovo, quindi faremo clic sul pulsante ‘Nuovo prompt’ per farlo.

Successivamente, basta dire all'IA che tipo di contenuto vuoi creare.

Quindi, fai clic sul pulsante ‘Genera testo’.

L'IA genererà quindi il contenuto per te.

Ma puoi ancora modificarlo cambiando il tono, semplificando il linguaggio, rendendo il testo più lungo o più corto, e persino traducendolo in oltre 50 lingue.

Una volta che sei soddisfatto di come appare l'intestazione, fai clic su 'Inserisci'.

Ora, puoi scorrere verso il basso la barra laterale sinistra.

Qui puoi cambiare l'allineamento del testo, la dimensione del carattere e il tag dell'intestazione per adattarli alle tue preferenze.

Se vuoi che il testo risalti ancora di più, scorri verso l'alto e passa alla scheda 'Avanzate'.

Nel menu Stili, fai clic su 'Modifica' nelle impostazioni Tipografia. Qui, puoi liberamente cambiare la famiglia di caratteri, l'altezza della linea, lo spazio tra le lettere e la maiuscola/minuscola del testo.

Puoi anche scorrere un po' più in basso e aggiungere un'ombra al testo dell'intestazione.

Qui, abbiamo deciso di creare un'ombra colorata personalizzata per far risaltare ancora di più il testo.

Per aggiungere una sottointestazione sotto l'intestazione, puoi semplicemente fare clic sul pulsante 'Blocchi' nella barra laterale sinistra.

Questo ti porterà alla libreria dei blocchi.

Ora, trascina e rilascia il blocco 'Testo' proprio sotto l'intestazione.

Le impostazioni per il blocco Testo sono piuttosto simili a quelle del blocco Intestazione, quindi puoi ripetere gli stessi passaggi precedenti per creare la sottointestazione.

Per aggiungere un pulsante di invito all'azione, devi trascinare e rilasciare il blocco 'Pulsante' sulla pagina.

Di solito viene posizionato subito sotto la sottointestazione.

Fatto ciò, procedi e inserisci il testo del tuo pulsante nel campo appropriato.

Puoi anche aggiungere un sottotesto subito sotto il testo principale del pulsante per fornire maggiore contesto.

Quindi, scorri verso il basso e aggiungi un link al tuo pulsante.

Sentiti libero di cambiare anche l'allineamento e la dimensione del pulsante.

Ora, torna indietro nella barra laterale e passa alla scheda 'Modelli'.

Qui puoi cambiare lo stile del tuo pulsante in modo che si abbini meglio al tuo design WordPress.

Se non ti piacciono i design dei modelli predefiniti, passa alla scheda 'Avanzate'.

Qui puoi cambiare la tipografia, lo stile, il colore, il padding, l'effetto ombra, ecc. del pulsante.

Sentiti libero di continuare a personalizzare il tuo modello finché non ti sembra buono.

Quando sei soddisfatto, fai clic sul pulsante 'Salva' in alto e seleziona 'Pubblica' per rendere la pagina live.

E questo è tutto per l'aggiunta di un'immagine hero con un page builder.

Ecco come appare la sezione hero sul nostro sito demo:

Metodo 4: Utilizzo del plugin Hero Banner + Shortcode (Tutti i temi)

Questo metodo finale funziona tecnicamente con tutti i temi, ma lo consigliamo soprattutto a persone che utilizzano un tema classico senza una sezione hero integrata.

Per seguire questo metodo, dovrai installare il plugin Hero Banner Ultimate. Per istruzioni passo passo, puoi consultare la nostra guida su come installare un plugin WordPress per principianti.

Passaggio 1: Configura il plugin Hero Banner

Una volta che il plugin è attivo, vai su Hero Banner » Aggiungi Hero Banner.

Successivamente, assegna un titolo al tuo banner principale. Questo fungerà da titolo.

Una volta fatto, inserisci del testo nell'editor visivo classico che fungerà da sottotitolo. Sentiti libero di cambiare la formattazione e il colore qui.

Ora, scorri verso il basso fino alla sezione ‘Hero Banner – Settings’.

Qui, puoi scegliere un layout del banner. Sebbene non sia possibile visualizzare in anteprima il layout in tempo reale nelle impostazioni del plugin, è facile passare da uno all'altro in seguito sulla tua pagina effettiva per trovare quello che ti piace di più.

Sceglieremo il Layout 1 per il nostro tutorial.

Per quanto riguarda il Tipo di Banner, puoi selezionare ‘Background Image’ per un'immagine principale, ma puoi anche scegliere ‘Background Video’ se hai un video a larghezza intera da usare come principale.

Successivamente, non dimenticare di fare clic su ‘Upload Image’ per aggiungere la tua immagine dal computer o dalla libreria multimediale.

A questo punto, puoi impostare la dimensione dell'immagine di sfondo su ‘Cover’ in modo che l'immagine sia a larghezza intera.

Vorrai anche scegliere ‘Scroll’ per l'attacco dell'immagine di sfondo per disabilitare qualsiasi effetto parallasse.

Scendi fino a raggiungere l'impostazione del colore del banner.

Qui è dove puoi cambiare il colore del titolo (Title Color) e del sottotitolo (Content Color). Semplicemente fai clic sullo strumento contagocce per farlo.

Inoltre, potresti voler aggiungere un colore di sovrapposizione sopra l'immagine, il che può essere utile per regolare la leggibilità del testo rispetto all'immagine.

Abbiamo deciso di usare il colore nero, con un'opacità di 0,5.

Configureremo le impostazioni di call-to-action.

Qui, puoi inserire il testo e il link per il tuo pulsante. Puoi anche cambiare il colore in ‘Button – 1 Class.’

Tutto quello che devi fare ora è scorrere di nuovo verso l'alto.

Successivamente, fai clic su ‘Publish.’

Andiamo ora su Hero Banner » Hero Banner. Dovresti ora vedere che la tua immagine principale è stata creata e il plugin ha generato uno shortcode per te per visualizzarla.

Prendi nota di questo shortcode, poiché ci servirà in seguito.

Passaggio 2: Trova il selettore CSS della sezione di intestazione del tuo tema

Per visualizzare l'immagine hero, dobbiamo trovare un 'indirizzo' specifico per la sezione di intestazione del tuo tema.

Questo si chiama selettore CSS e dice al nostro plugin esattamente dove posizionare l'immagine hero. Non preoccuparti, non dovrai scrivere alcun codice da solo.

Per fare ciò, visita il tuo sito web sul front-end. Quindi, fai clic destro sulla sezione di intestazione e seleziona 'Ispeziona'.

Sul lato destro, devi trovare quale selettore CSS sta utilizzando la sezione di intestazione. Puoi passare il cursore su tutti questi frammenti di codice finché non vedi che la sezione di intestazione è evidenziata sul front-end.

Ecco un esempio:

Se l'intera sezione di intestazione viene evidenziata mentre passi il cursore sul codice, sei sulla strada giusta.

Ora, fai clic destro su quel frammento di codice e seleziona Copia » Copia selettore.

Dopo averlo fatto, puoi incollare il selettore in un posto sicuro, come un editor di testo, o semplicemente tenere aperta questa scheda.

Passaggio 3: Aggiungi il tuo shortcode a WPCode

Il passo successivo è installare WPCode, che è un plugin per snippet di codice.

Tecnicamente, non è necessario utilizzare un plugin per inserire frammenti di codice personalizzato nei file del tuo tema. Ma abbiamo voluto farlo per mantenere le cose al sicuro, poiché incollare codice in un file del tema può presentare alcuni errori imprevisti.

Abbiamo trovato WPCode estremamente utile per gestire frammenti di codice personalizzato senza rompere il tuo sito.

Innanzitutto, installa il plugin WordPress nella tua area amministrativa. Una volta che il plugin è attivo, naviga su Frammenti di codice » + Aggiungi frammento, seleziona ‘Aggiungi il tuo codice personalizzato (Nuovo frammento)’ e fai clic sul pulsante ‘+ Aggiungi frammento personalizzato’.

Ora, diamo un nome al tuo nuovo frammento di codice. Può essere qualcosa di semplice, come ‘Shortcode Banner Eroe’.

Successivamente, cambia il Tipo di codice in ‘Snippet PHP.’

Nella casella Anteprima codice, incolla il seguente frammento:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode 

Assicurati di sostituire [hbupro_banner id="XXX"] con il tuo shortcode Banner Eroe che hai visto in precedenza.

Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’.

Qui, il Metodo di inserimento dovrebbe essere ‘Inserimento automatico’ e la Posizione dovrebbe essere ‘Dopo elemento HTML’.

Quindi, incolla il selettore che hai copiato in precedenza nel campo ‘Selettore CSS’. Nel nostro caso, era #masthead, ma questo varierà a seconda del tema.

Fatto ciò, puoi attivare il pulsante ‘Inattivo’ in modo che diventi ‘Attivo’ e fare clic sul pulsante ‘Salva Snippet’.

E questo è tutto!

Se visualizzi il tuo sito web, dovresti ora vedere l'immagine del banner principale subito sotto l'intestazione:

Domande frequenti sulle immagini Hero

Ecco un elenco di alcune domande comuni che i nostri lettori pongono frequentemente riguardo alle immagini principali:

Qual è la dimensione migliore per un'immagine principale di WordPress?

Un ottimo punto di partenza per le dimensioni delle immagini principali è 1920 pixel di larghezza per 400-600 pixel di altezza. Ciò garantisce che appaia nitida sulla maggior parte degli schermi desktop senza occupare troppo spazio verticale.

Tuttavia, la dimensione perfetta dipende spesso dal tuo tema WordPress specifico. Raccomandiamo sempre di testare come appare la tua immagine sia sui dispositivi desktop che mobili.

Posso usare un video nella mia sezione principale?

Assolutamente. Usare un video di sfondo può rendere il tuo sito web più dinamico e catturare immediatamente l'attenzione dei visitatori. La maggior parte dei page builder come SeedProd e il blocco Copertina predefinito di WordPress includono opzioni semplici per aggiungere un video di sfondo invece di un'immagine statica.

Come rendo la mia immagine principale adatta ai dispositivi mobili?

I temi e i page builder moderni sono progettati per essere reattivi, quindi ridimensioneranno automaticamente la tua immagine principale per gli schermi più piccoli. La chiave è scegliere un'immagine che abbia ancora un bell'aspetto quando viene ritagliata.

È anche molto importante comprimere la tua immagine prima di caricarla. Ciò garantisce che si carichi rapidamente per i visitatori con connessioni mobili più lente.

Un'immagine principale è la stessa cosa di uno slider?

Sono simili ma non esattamente uguali. Un'immagine eroica è tipicamente una singola immagine banner di grandi dimensioni nella parte superiore di una pagina web. D'altra parte, uno slider ruota attraverso più immagini o video. Puoi usare uno slider all'interno della tua sezione eroica, come abbiamo mostrato nel metodo per i temi classici.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un'immagine eroica in WordPress. Potresti anche voler consultare la nostra guida su come aggiungere un'animazione di precaricamento a WordPress e le nostre scelte degli esperti dei migliori strumenti per creare e vendere prodotti digitali.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.