Nell’articolo precedente abbiamo visto come creare l’header con l’utilizzo del plugin Elementor Page Builder Pro. Adesso non ci resta che inserire al suo interno le informazioni desiderate.
In questo semplice tutorial, andremo ad arricchire l’header con i seguenti componenti:
- Logo
- Menu di navigazione
- Social links
Di cosa parliamo qui?
Inserire logo nell’header
Per inserire il logo nel sito a livello globale, è bene fare un passo indietro.
Devi uscire dall’interfaccia di Elementor del template Header e tornare all’area di amministrazione WordPress (puoi anche semplicemente aprire l’admin WordPress in un’altra tab del browser).
Ora che sei di nuovo nell’area WordPress, segui queste istruzioni per caricare il logo del sito.
Dal tuo admin WordPress:
- Vai in ASPETTO > PERSONALIZZA (si aprirà l’interfaccia di personalizzazione WordPress)
- Clicca su DENOMINAZIONE DEL SITO
- Clicca su SELEZIONA IL LOGO (si aprirà la libreria dei media)
- Carica il logo nella libreria, clicca su SELEZIONA e poi il pulsante in alto PUBBLICA
Una volta caricato il logo, puoi tornare all’interfaccia di Elementor.
Dal pannello ELEMENTI > SITO, trascina l’elemento Logo Sito all’interno della sezione header.
Automaticamente vedrai apparire il logo precedentemente caricato.
Inserire menu di navigazione
Dal tuo admin WordPress:
- Vai in ASPETTO > MENU
- Assegna un nome al tuo menu, ad esempio “Menu Primario“
- Clicca su CREA MENU
- Spunta la casella “Primary” per la posizione di visualizzazione
- Seleziona dalla colonna AGGIUNGI VOCI AL MENU le pagine da inserire e poi clicca su AGGIUNGI AL MENU.
- Clicca sul pulsante SALVA MENU
Torniamo ora all’interfaccia di Elementor.
Dal pannello dell’interfaccia ELEMENTI > SITO, trascina l’elemento MENU NAVIGAZIONE all’interno della sezione header.
Ora seleziona il menu che hai creato (esempio Menu Primario) dalla tendina Menu che trovi nel pannello MODIFICA MENU NAVIGAZIONE, alla voce Menu.
Automaticamente appariranno nell’header le voci del menu appena creato.
Avrai notato che i testi risultano praticamente illeggibili, ma niente paura. Tra non molto ci occuperemo anche di questo.
Ma prima, aggiungiamo le icone per collegare i canali social.
Aggiungere i link ai social
Nel modello header utilizzato appare sulla destra un numero di telefono con icona. Per questo tutorial abbiamo però deciso di inserire soltanto 3 elementi: logo, menu e icone social. Dunque, procediamo eliminando l’elemento che non ci interessa.
Al suo posto inseriamo l’elemento ICONE SOCIAL
Inserito l’elemento ICONE SOCIAL, potrai facilmente aggiungere o rimuovere i canali di tuo interesse tramite il pannello MODIFICA ICONE SOCIAL.
Abbiamo aggiunto all’header tutte le informazioni che ci occorrono. Adesso arriva la parte più divertente ovvero quella di personalizzare la grafica dell’header.
