Come creare un header con Elementor? Tutorial in italiano

In questo articolo scopriamo come creare un header con Elementor, un nuovo tutorial in italiano di tornatutto.

Autore

Alessio Realini

Data

Tutorial

Di cosa parliamo in questo articolo

In questo articolo scopriamo come creare un header con Elementor, un nuovo tutorial in italiano di tornatutto. Con questa semplice guida passo passo riuscirai a realizzare la testata del tuo sito in maniera veloce, professionale e responsive per tutti i dispositivi. Tutto questo utilizzando Elementor PRO, il page builder WordPress più utilizzato ad oggi sul mercato.

Se vuoi saperne di più sui prezzi di Elementor PRO, quali sono i piani e cosa consigliamo, ti suggeriamo di leggere questo articolo che abbiamo già pubblicato. In alternativa abbiamo scritto anche quali sono 5 esempi per capire cosa è possibile fare con questo page builder WordPress. Di recente abbiamo anche condiviso un altro tutorial che spiega come installare e attivare le versioni free e PRO di Elementor sul proprio sito.

Ad ogni modo, partiamo con questa guida su come creare un header con Elementor. Vedrai che è molto semplice e ti garantirà un risultato eccellente. Ti ricordiamo che puoi acquistare la licenza di Elementor PRO tramite il nostro link affiliato che ci garantirà un piccolo contributo a sostegno del progetto tornatutto!

Come creare un header con Elementor: che cos’è un header?

Prima di scoprire come creare questo elemento nel nostro sito, una piccola parentesti per chi si sta affacciando al mondo del web design. Infatti, per tanti che leggeranno questo articolo, la parola “header” potrà risultare nuova.

Il primo aspetto più importante è capire che l’header è un template, un modello insomma che viene visualizzato solitamente in una o più parti del nostro sito web. In italiano “header” andrebbe tradotto in testata del sito, quella sezione che vediamo sempre comparire in alto e che solitamente contiene il logo aziendale e il menù di navigazione (i due elementi più importanti).

Il Theme Builder di Elementor PRO. L’area dove puoi gestire, creare ed eliminare tutti i tuoi template

Lo stile dell’header può ovviamente cambiare così come gli elementi che contiene: possiamo ad esempio aggiungere le icone dei nostri social (anche se questa è una soluzione spesso sconsigliata) i nostri contatti tipo telefono, email o indirizzo, oppure possiamo aggiungere nell’header le notifiche dell’ecommerce e le categorie di prodotto (spedizione gratuita sopra una certa cifra, sconti, promo o i nuovi arrivi).

Quindi, ricapitolando, l’header in un sito è un template che appare in alto e solitamente serve a contenere almeno il logo della nostra attività e il menù di navigazione che ci permette per l’appunto di spostarci tra le varie pagine e aree del nostro sito WordPress.

Meglio usare il tema Hello o il plugin Elementor PRO?

Altra piccola parentesti. Nella maggior parte dei casi, i temi WordPress offrono la possibilità di creare header e footer senza doversi appoggiare a Elementor PRO. Con la licenza PRO di questo page builder, però, ti consigliamo di installare un tema snello con poche funzionalità come Hello Elementor, il tema ufficiale sviluppato sempre da Elementor. Così avrai la possibilità di utilizzare tutti gli strumenti che Elementor PRO ti mette a disposizione senza dover appesantire il tuo sito con un tema “classico”.

Per rispondere alla domanda, quindi, ti suggeriamo di usare il plugin Elementor PRO per creare tutti i template del tuo sito, incluso l’header.

Come creare un header con Elementor: la guida

Ora che abbiamo capito cos’è un header, possiamo proseguire e scoprire come realizzarne uno nel nostro sito con Elementor PRO. Proseguendo in questo tutorial in italiano, diamo per scontato che tu abbia già acquistato la licenza di Elementor PRO e che l’abbia installato e correttamente attivato nel tuo sito. Se non l’hai fatto, puoi seguire quest’altro tutorial che abbiamo già pubblicato.

In questa sezione puoi creare un nuovo template con Elementor PRO

Di seguito la lista di azioni per creare un nuovo header:

  • Dalla dashboard, clicca su “Template”;
  • Una volta su Template, clicca su “Template salvati”;
  • Da qui, clicca sul pulsante in alto “Add new template”;
  • Si aprirà un popup di Elementor, seleziona “Testata” dal menù a discesa;
  • Dai un nome parlante al tuo template: ad esempio “Main Header”;
  • Alla fine clicca sul pulsante “Crea template”.
Il popup che ti appare quando clicchi su “Add new template” nella pagina “Template salvati”

Dopo aver cliccato su “Crea template” ti si aprirà l’editor di Elementor con un popup aperto di default, la libreria di Elementor dalla quale puoi scegliere un header già pronto. Sono i kit di Elementor PRO che possono tornare utili a velocizzare la realizzazione di questi template o di intere sezioni del nostro sito.

La libreria di Elementor dove scegliere template già pronti realizzati dal team di Elementor. A destra in alto la X che chiude il popup per continuare in autonomia.

Proseguiamo con la guida passo passo:

  • Chiudi la libreria di Elementor cliccando sulla X che trovi in alto a destra (come indicato nell’immagine qui in alto);
  • Clicca sul + che vedi nell’editor, seleziona il layout “Flexbox” e scegli la struttura con la freccia che punta a destra (“Direzione riga”);
Il contenitore Flexbox “Direzione riga” che devi selezionare
  • Clicca sul + all’interno del contenitore che è stato aggiunto automaticamente da Elementor o sul + che trovi in alto a sinistra;
  • Inserisci gli elementi/widget “Logo Sito” e “WordPress Menu” nel contenitore. Dovresti essere a questo punto come indicato nell’immagine in basso;
La situazione dopo aver inserito i due widget nel contenitore
  • Ora clicca sul contenitore e in Layout > Elementi > Giustifica il contenuto seleziona “Spaziare intermedio” (la quarta icona da sinistra);
  • subito dopo in Layout > Elementi > Allinea elementi seleziona “Centra” (la seconda icona da sinistra);
Le impostazioni Flexbox da inserire per creare un header con Elementor
  • ora clicca sul pulsante in alto a destra (o in basso se non hai attivato il nuovo editor) di colore fucsia “Pubblica”;
  • si aprirà un popup che ti chiede dove vuoi visualizzare il template. Clicca su “Aggiungi condizione”;
  • In automatico Elementor include tutto il sito, non devi fare nulla se vuoi visualizzare questo header in tutto il sito per l’appunto;
  • per concludere clicca sul pulsante in basso a destra del popup “Salva & chiudi” come indicato nell’immagine in basso.
L’ultimo step: le condizioni di visualizzazione di questo template header

Ora puoi chiudere l’editor di Elementor. Hai correttamente creato un header con Elementor nel tuo sito web. Ovviamente puoi crearne più di uno o puoi modificare questo layout andando ad aggiungere più widget e funzionalità. Molto dipende da cosa stai cercando e le finalità del tuo sito.

Questo tutorial in italiano su come realizzare un header con Elementor PRO si conclude qui. Ti ricordiamo che se non l’hai ancora acquistato, puoi effettuare l’acquisto di una licenza di Elementor PRO usando il nostro link affiliato. Ci aiuterai a produrre nuovi contenuti e tutorial in italiano di qualità per questo e per altri page builder, plugin e temi WordPress.

Alessio Realini

Fondatore di tornatutto.it e web designer WordPress freelance dal 2021. Mi occupo di ideare e realizzare siti web, contenuti SEO per i miei clienti o per agenzie di comunicazione. Dal 2023 mi occupo di formazione con corsi online per piattaforme e realtà nel campo digital.

Lascia il primo commento