Abbiamo visto come creare il template e inserire gli elementi nell’header con Elementor Pro. Vediamo ora di personalizzare l’header al fine di renderla graficamente più gradevole e in linea con il brand.
Tabella dei Contenuti
Stile header con Elementor
Iniziamo ora a vedere più da vicino alcune impostazioni base di Elementor.
Sezioni e colonne di Elementor
Le sezioni sono dei blocchi al cui interno possiamo inserire i vari componenti utili per il nostro sito. Ogni sezione può essere composta da una o più colonne.
- Sezione
- Colonna
Nel nostro caso, la sezione header è composta da tre colonne: una per il logo, una per il menu e una per le icone social.
Impostare larghezza colonne
La larghezza delle colonne si può gestire in due modi: allargando o stringendo la colonna manualmente con il mouse oppure selezionando la colonna e digitando l’ampiezza desiderata nel campo LARGHEZZA COLONNA (%). Personalmente preferisco il secondo in quanto più rapido e preciso.
Ora che sai come fare, personalizza l’ampiezza delle colonne nel modo che ritieni più opportuno.
In questo tutorial, modificheremo le colonne così:
- logo: 25%
- menu: 60%
- social: 15%
I colori in Elementor
Dal tuo template Header:
- Seleziona l’intera sezione
- Nel pannello MODIFICA SEZIONE clicca su STILE
- Come TIPO DI SFONDO seleziona classico o gradiente
- Scegli il colore (o i colori) tramite gli appositi picker ed eventualmente il tipo di sfumatura e le relative opzioni
Personalizzare il logo
L’elemento LOGO non necessita di particolari personalizzazioni, almeno in questo caso. Mi sono limitato a ridurne leggermente la dimensione e a creare un effetto opacità sull’hover.
Per selezionare il logo, clicca sull’ICONA CON LA MATITA che appare quando vai con il mouse sopra l’elemento.
Nel tuo pannello di sinistra apparirà la sezione MODIFICA LOGO SITO.
Sotto STILE:
- Imposta la larghezza massima per il logo*
- Seleziona HOVER e imposta un effetto OPACITÀ
Questo è un semplice esempio ma ci sono molte altre impostazioni che ti permettono di personalizzare un elemento.
Personalizzare il menu
Il menu è un elemento all’interno della nostra sezione header. Per selezionarlo, clicca sull’icona con la matita che appare quando vai con il mouse sopra l’elemento.
Nel tuo pannello di sinistra apparirà la sezione MODIFICA MENU NAVIGAZIONE.
Sotto CONTENUTO:
- Seleziona l’allineamento che preferisci per le voci del menu (ho impostato CENTRA alla voce Allinea)
- Scegli il tipo di indicatore che vuoi utilizzare ed eventualmente un’animazione (ho scelto l’indicatore LINEA SOPRA)
Sotto STILE:
- Clicca sulla matita di fianco a TIPOGRAFIA
- Personalizza il testo del menu come desideri (nel tutorial ho cambiato solo la dimensione del font a 18px e la trasformazione in maiuscolo.
Sotto STILE:
- Scegli il colore del testo per lo stato NORMALE
- Imposta i colori per lo stato HOVER (quando il mouse è sopra l’elemento) e lo stato ATTIVA (quando la voce del menu è selezionata)
Personalizzare le icone social
Esattamente come per gli altri due elementi, per modificare le icone social sarà necessario cliccare sull’icona con la matita per selezionare l’elemento.
Sotto CONTENUTO:
- Aggiungi o rimuovi le icone social che ti servono
- Assicurati di aver inserito il collegamento nel campo LINK
- Scegli la forma e l’allineamento delle icone
Sotto STILE:
- Scegli i colori
- Imposta la dimensione
- Se lo desideri, imposta colori e animazione per quando si passa sopra l’icona col mouse.
Conclusioni
A questo punto siamo arrivati al termine del tutorial su come personalizzare gli stili header e non ci resta che osservare il risultato ottenuto.
Ovviamente, questo è soltanto uno dei tantissimi possibili risultati.
Considera anche che, dopo che avrai preso un po’ di confidenza con il plugin Elementor, ti basterà una manciata di minuti per realizzare l’header del sito.
L’ultimo passaggio prima di procedere con la pubblicazione del template, sarà quello di controllare come l’header viene visualizzata su un dispositivo mobile e adattarla di conseguenza.
