Come creare un header su Elementor fissato con effetto di trasparenza
Come creare un header fissato con effetto di trasparenza su Elementor : La Guida completa per dare subita una buona impressione al tuo sito
In questa pratica guida ti mostro come creare un header con elementor che abbia : le informazioni necessarie, sia facilmente navigabile e che sia esteticamente gradevole.
Hai da poco iniziato a costruire il tuo nuovo sito annotandoti gli effetti grafici e gli stili che potrebbero dare un immagine moderna e vincente e sei giunto alla fatidica domanda “e ora come lo faccio l’header?”
Se vuoi cliccando sul tasto play puoi vedere il video completo in soli 4 minuti e 41″ altrimenti continua a leggere
Indice su Tutorial Header Elementor
Se non vuoi leggere tutto l’articolo seleziona solo cosa ti interessa :
- Quali elementi sono irrinunciabili per un header
- Premessa per un uso professionale di Elementor
- Come creare un header da zero su Elementor
- Come inserire il Logo su Elementor
- Come inserire il Menu e il tasto di ricerca
- Come creare un header con effetto di trasparenza su Elementor
- Come creare un header fisso in alto allo scroll su Elementor
- Sistemazioni spaziatura per versione Responsive
- Conclusione
Quali elementi sono irrinunciabili per un header
Prima di andare a vedere quali elementi sono irrinunciabili per un header perfetto, vediamo che cos’è .
Per header si intende la parte superiore dell’impaginazione di un sito web ed è anche il primo elemento che il visitatore vedrà quando apre il tuo sito web.
L’header contiene i tratti distintivi del sito internet come il logo, il motto aziendale, e il menu per agevolare la navigazione all’interno dello stesso.
Solitamente la visibilità dell’header, dovendo contenere in sintesi le informazioni principali che caratterizzano il sito viene ripetuto in ugual modo su ogni pagina, come per il footer.
Quali sono gli elementi irrinunciabili ? Gli elementi irrinunciabili sono fondamentalmente 2 : Il Logo e il Menu
Il Logo
In base ai casi, il logo può essere anche una semplice scritta. Sta all’imprenditore valutare con una strategia di branding quale sia il più appropriato.
Qualora utilizzassi un immagine cerca di ridurre al massimo il suo peso, questo perché l’header è, come visto prima, il primo elemento che viene visualizzato in fase di output dal server che trasmette i dati.
Maggiore sarà il peso e maggiore saranno i tempi di caricamento. E a Google un sito lento non piace…
Il Menu
Semplicemente fondamentale e prima di creare un header, il menu va pianificato e costruito con criterio con l’idea di consentire la migliore navigazione possibile soprattutto nei confronti dei visitatori che non hanno ancora mai visto il tuo sito.
Nel menu solitamente è bene inserire il tasto home, che solitamente è già contenuto nel logo del sito, una sezione ai contatti e una alla pagina chi siamo sul quale creare lo storytelling per presentarsi al meglio ai nostri visitatori.
Il contenuto presente nel menu può essere : una singola pagina o articolo, una singola categoria oppure un link personalizzato per direzionare i tuoi possibili clienti se sezioni specifiche del tuo sito.
Solo il logo e il menu ? La risposta è si questi sono gli elementi che non possono mancare, mentre per gli altri sono opzionali come ad esempio i tasti social o il tasto con la lente di ingrandimento come in questo sito.
Premessa per un uso professionale di Elementor
Premessa prima di iniziare ti avviso che queste tutorial è stato creato avvalendomi di Elementor PRO quindi se hai ancora la versione FREE potresti non visualizzare tutte le opzioni contenute nelle foto e nelle descrizioni.
In passato prima di passare alla versione PRO ho inserito decine e decine di plugin per migliorare le performance con il risultato che gli altri plugin spesso sono molto pesanti, hanno opzioni che già hai e ti danno poco di più,
Adesso invece ho un solo plugin, Elementor PRO col vantaggio di non appesantire WordPress e soprattutto non ho bisogno di altro.
Come creare un header da zero su Elementor
Per creare un header da zero devi andare nella sezione “Template” nel backend (1) del tuo WordPress, se scorri all’interno del tuo menu lo dovresti trovare sotto l’icona di Elementor.
Una volta arrivato sulla sezione template clicca su nuovo (2) e comparirà una nuova schermata.
La nuova schermata ti chiede di impostare quale template vuoi utilizzare, selezionando la casella “header” e infine dando un nome.
Senza troppi giri di parole e per ricordartelo in modo semplice, puoi chiamarlo tranquillamente header.
Una volta salvato ti appariranno due opzioni ovvero prendere un modello già preimpostato (3) e modificarlo a proprio piacere oppure crearlo da zero.
In questa guida ti mostrerò come creare un header da zero.
Come inserire il Logo su Elementor
Posizionare il Logo all’interno dell’header su Elementor è un gioco da ragazzi.
Ti basta selezionare e trascinare l’icona (1) con su scritto “logo sito” nella posizione che preferisci.
Se non hai ancora creato un tuo logo devi andare (2) nel menu di WordPress > Aspetto > Personalizza > Denominazione del sito e caricare il tuo logo (3).
Una volta caricato sarà sempre disponibile con la funzione drag & drop come visto prima.
Come inserire il menu e il tasto di ricerca
Come hai fatto per il Logo, anche il menu va trascinato dai comandi a sinistra dello schermo verso la nuova sezione che stai creando (1).
Anche il menu deve essere impostato prima per essere dinamicamente presente anche su Elementor.
Inoltre ai fini SEO ti consiglio di inserire anche il tasto di ricerca nell’header con la stessa modalità fatta fino ad ora.
Inserendo la lente di ingrandimento su tutto il sito darai la possibilità ai tuoi visitatori di trovare qualsiasi informazione
E questo a Google piace 🙂
Come creare un header con effetto di trasparenza su Elementor
L’effetto di trasparenza è uno degli effetti più richiesti con elementor ma più in generale con qualsiasi tipo di page builder.
Con l’effetto di trasparenza puoi creare un header che ti permette di vedere anche dietro. o anche creare oggetti o elementi in movimento sfruttando la flessibilità per ogni situazione di Elementor PRO.
Detto ciò vai sull’intero blocco evidenziato in azzurro e ti compariranno i tre elementi contrassegnati con un “+” una “x” e i 6 punti al centro, clicca su di essi (1).
Cliccando sui sei puntini prendi il comando dell’intera sezione.
Dopodiché vai sul tasto “stile” (2) e ti compariranno più opzioni come “sfondo”, “sfondo overlay” “bordo” “separatore sagomato” e “tipografica”
Andando direttamente sul primo sottomenu (ovvero sfondo) clicca sul colore e scegli il colore bianco.
Infine una volta scelto il colore bianco (o quello più congeniale al tuo design) appena sotto la finestra puoi notare due barre.
Trascinando il cursore della barra posta sopra il tasto “cancella” (3) modifichi il valore dell’opacità, ovvero la trasparenza. Potendo decidere così con precisione massima quanto tarare la tua trasparenza.
Come creare un header fisso in alto allo scroll su Elementor
Su Elementor l’effetto fisso o fix quando si scrolla una pagina è un elemento molto utile perché permette di porre l’attenzione necessaria sugli elementi che vuoi che siano sempre visibili e a portata di click per il visitatore.
Pensa oltre all’header che vedi oggi in esempio, a quante volte hai visto siti su mobili che in basso hanno i tasti social fissi per permetterti in qualsiasi momento di condividere i tuoi post.
Sapere gestire questa funzione è a maggior ragione fondamentale.
Per impostare il tuo header fissato allo scroll ti basterà andare a prendere il comando della sezione con i sei puntini come fatto prima.
Andare nel menu “Avanzato” (1) e sottomenu “Effetti di movimento” (2) dopodiché ti basterà cliccare sul menu a tendina “Fisso” e scegliere l’opzione “In alto”
Sistemazioni spaziatura per sito Responsive
Quando crei un qualsiasi contenuto, quindi un post, un popup o un header come nel nostro caso, devi sempre verificare le spaziature e la visibilità corretta sia sulla versione tablet che su quella mobile.
Uno dei principi cardine e imprescindibile che vuole Google ai fini dell’ottimizzazione sui motori di ricerca è che i siti siano 100% responsive.
Con responsive si intende appunto che qualsiasi contenuto visto da desktop o da mobile, non rendere faticosa la lettura e la navigabilità.
Ti ricordi quando nel 2010 esplose l’iphone 4 e a seguire tutti gli altri smartphone, ti ricordi come la maggior parte dei siti non erano organizzati e vedevi tutti gli articoli piccolissimi ? Ecco questo significa responsive, evitare di dover zommare l’intero schermo per leggere.
Sul tema Responsive Elementor è già predisposto con le spaziature standard e il 90% dei contenuti viene direttamente spalmato o ristretto in base al device utilizzato.
Il rimanente 10% è da considerare come piccole sistemazioni per migliorare l’estetica e la funzionalità.
Sistemazioni Responsive :
Per effettuare manualmente le sistemazioni responsive sulle spaziature su mobile o tablet devi andare sulla barra in basso a sinistra e vicino al tasto “pubblica” dopo l’icona dell’occhio trovi l’icona con un desktop stilizzato (1).
Cliccando su di esso puoi scegliere graficamente su quale device lavorare.
Dopodiché vai a selezionare i singoli layout (2) di logo, menu e barra di ricerca con il tasto grigio a sinistra della sezione e vai sul sotto menu “larghezza colonna”
Di default ogni layout occupa il 100% quindi nella veste mobile questo crea solitamente un header vistosamente troppo spesso rispetto all’intero schermo.
Perciò gestendo la percentuale (3) di ogni elemento, nell’esempio riportato ho assegnato 40% al logo, 30% al menu e 30% al tasto di ricerca, puoi assegnare il giusto spazio per avere l’header su un unica riga.
Conclusione della guida su come creare un header su elementor
Eccoci arrivati alla conclusione della guida su come creare un header su elementor sia con l’effetto di trasparenza che con l’elemento fisso.
Spero di esserti stato utile sia per la realizzazione del tuo header che per gli approfondimenti, se vuoi aggiungere o chiedere qualche informazione a questo articolo non esitare a commentare qui sotto.
Ci vediamo al prossimo tutorial
Namaste
Non hai ancora installato il plugin elementor sul tuo WordPress ? Scopri la guida su come fare
