In un sito web, anche in uno sviluppato con WordPress ed Elementor, l'header è più di una semplice "barra" posta in cima ad una pagina. È la porta d'ingresso che accoglie i visitatori. Li orienta e li invita ad esplorare il resto del sito. Questo elemento cruciale fornisce non solo informazioni come il logo, il menu di navigazione e i contatti, svolge anche un ruolo fondamentale nel coinvolgere gli utenti fin dal primo istante.
L'importanza di un header ben progettato
L'header è il primo elemento visibile all'apertura di una pagina e può influenzare immediatamente sull'opinione dei visitatori sulla credibilità e l'affidabilità di un sito. Quindi, oltre ad essere esteticamente accattivante, un header ben progettato dovrebbe essere funzionale e intuitivo. Facilitando la navigazione e l'accesso alle informazioni chiave.
Esso costituisce un punto di riferimento costante per gli utenti mentre esplorano il sito, aiutandoli a orientarsi e a trovare rapidamente ciò che cercano. In questa guida mostreremo passo dopo passo come creare un header personalizzato utilizzando WordPress ed Elementor.
Scelta del tema e installazione di Elementor in WordPress
Il primo step riguarda la scelta del tema per il sito. In questo caso il consiglio è quello di utilizzare il tema "Astra", uno dei più scaricati grazie alla sua adattabilità. Inoltre, questo tema garantisce una maggiore compatibilità con numerosi plugin e template. Infatti, per poter inserire un custom header, come in questo caso, è consigliabile utilizzare un tema compatibile.
Per scaricare ed attivare il tema Astra bisogna aprire la sezione "Aspetto" dal menù laterale della bacheca di WordPress. Successivamente si deve selezionare la voce "Temi", quindi tramite l'opzione "Aggiungi nuovo tema" sarà possibile ricercare "Astra". Attiviamolo con l'apposita voce che verrà mostrata subito dopo l'installazione.
Una volta completato questo passaggio possiamo proseguire con l'attivazione di Elementor. Per installarlo si deve selezionare Aggiungi nuovo plugin" e poi cliccare "Attiva". Verrà avviata una breve guida subito dopo l'installazione del plugin. Una volta completati gli step di configurazione iniziale saremo quindi in grado di personalizzare le pagine del sito con Elementor.
Custom Headers & Footers: un plugin smart
Nella sezione plugin procediamo con l'installazione di un secondo add-on: Custom headers & footers. Con esso saremo in grado di creare, configurare e sostituire le sezioni header e footer del nostro sito tramite template personalizzabili. Il suo funzionamento si collega all'editor Elementor perché permette di realizzare header in modo smart ed intuitivo.
Una volta conclusa l'installazione ed attivazione del plugin, troveremo le impostazioni di quest'ultimo nella barra laterale sotto la voce "Aspetto".
Un template personalizzato
Per procedere con la creazione di un template header personalizzato selezioniamo la voce "Add new" nella parte alta della schermata: si aprirà una pagina in cui possiamo assegnare un titolo al template e definirne le condizioni di visualizzazione. Una volta selezionato il tipo di header, scegliamo quando vogliamo visualizzare il template e se impostare delle condizioni particolari in cui nasconderlo.
Una volta selezionati gli appositi basterà cliccare su "Pubblica". Successivamente si dovrà scegliere "Modifica con Elementor" per iniziare la personalizzazione del template appena creato. Si aprirà l'interfaccia di Elementor con un contenitore vuoto in cui inserire gli elementi che vogliamo far apparire nell'header.
Creazione e personalizzazione di un header con Elementor
Quando si progetta un header personalizzato con Elementor è essenziale considerare gli elementi che lo compongono. Ogni parte dell'header svolge un ruolo importante nell'esperienza dell'utente e per l'efficacia del design. Innanzitutto bisogna valutare una struttura ideale da seguire per organizzare le modifiche e gli elementi da inserire:
Il logo rappresenta ad esempio l'identità di un'azienda. Esso viene posizionato strategicamente nell'header poiché fornisce un riferimento visivo immediato per i visitatori.
Per poterlo inserire all'interno del template è sufficiente digitare nella barra di ricerca degli elementi posta sul lato sinistro della schermata la dicitura "site logo". Qui verrà mostrato l'elemento messo a disposizione dal plugin precedentemente installato e che, una volta inserito, permetterà di scegliere un'immagine da utilizzare come logo. Inoltre è possibile personalizzare il logo modificando lo stile e parametri come grandezza, margini o rientri. Potete scegliere liberamente dove posizionare il logo nella navbar ma è uso comune scegliere di affiancare il logo al menu di navigazione sul lato sinistro dell'header.
Successivamente è consigliabile inserire il menu di navigazione, uno degli elementi più critici dell'header. Offre agli utenti un modo intuitivo per esplorare il sito e accedere alle diverse sezioni o pagine. Un menu ben strutturato e facilmente accessibile migliora l'usabilità e riduce il tempo necessario per trovare le informazioni desiderate.
Per poterlo inserire selezioniamo l'elemento "Navigation menu" messo a disposizione da "Custom header & footer".
È importante specificare che per poter inserire un menu di navigazione, quest'ultimo deve essere prima creato con le varie pagine del sito. Per fare ciò è sufficiente selezionare "Aspetto" dalla bacheca di WordPress e successivamente "Menù". A questo punto si aprirà una schermata in cui creare un nuovo menu, assegnandogli un nome e aggiungendo le pagine che vogliamo contenga. Inoltre sarà possibile scegliere la posizione del menu ed eventuali sottomenu che possono mostrare delle pagine al passaggio del mouse.
Possiamo poi proseguire con la personalizzazione dell'header riprendendo dall'inserimento del menu appena creato nell'apposito elemento "Navigation menù". È possibile configurare l'aspetto e il funzionamento dell'elemento menu grazie alle voci su stile e contenuto, modificando ad esempio la posizione o il comportamento del sub-menu.
Pulsante di azione
L'ultimo elemento che consiglio di inserire è un pulsante che richiami un'azione in modo da guidare gli utenti verso comportamenti specifici: ad esempio "Contattaci", "Registrati" o "Acquista Ora". Posizionati strategicamente nell'header, i pulsanti possono aumentare il coinvolgimento dell'utente e convertire le visite in azioni come contatti, iscrizioni o vendite. Nell'esempio si è scelto di inserire un pulsante sul lato destro dell'header come prolungamento del menu di navigazione.
Una volta completata la personalizzazione del template è possibile pubblicarlo cliccando su "Aggiorna" in basso a sinistra per salvare le modifiche effettuate. L'header verrà implementato e sostituito nelle pagine del sito secondo le regole di visualizzazione definite precedentemente nella pagina di impostazioni del plugin.
Ogni elemento dell'header contribuisce alla costruzione di un'esperienza utente coesa e coinvolgente: una sua realizzazione smart ed intuitiva offre un'introduzione al sito più completa e curata e aiuta l'utente a muoversi meglio all'interno delle varie pagine.
Grazie a questa guida sarete in grado di creare un header personalizzato all'interno del vostro sito WordPress da implementare e configurare in modo facile e immediato con l'utilizzo dell'editor Elementor e del plugin "Custom header & footer".
