Supporto prioritario
Help Center / Tema Hello Biz / Personalizza il tuo header hello biz

Personalizza il tuo header hello biz

Ultimo aggiornamento: Agosto 24, 2025

Cos'è l'header hello biz?

Le intestazioni appaiono nella parte superiore delle pagine del tuo sito. Di solito contengono il logo del tuo sito, i link di navigazione per un accesso rapido alle pagine importanti e un pulsante CTA.

Visualizza tutte le opzioni disponibili per l’Header.

Personalizzazione del tuo header

Per personalizzare il tuo Header:

  1. Vai all’area di amministrazione di WP.
  2. Nel pannello, clicca su Hello Biz.

  3. Nella sezione Parti del sito sotto Header clicca su Modifica.
    L’Editor di Elementor si apre con l’Header visibile.
    Le opzioni dell’Header appaiono nel pannello.

Personalizza le opzioni dell’header

L’Header ha cinque sezioni:

  • Layout: Seleziona un layout di base per la tua intestazione.
  • Identità del sito: Usa un logo o il nome dell’attività per identificare il sito.
  • Navigazione: Crea collegamenti rapidi alle pagine del sito.
  • Pulsante Contatto: Facoltativamente, aggiungi un pulsante che offra ai visitatori un modo semplice per contattarti.
  • Invito all’azione: Offri ai visitatori un modo rapido per interagire con te.
  1. Nella sezione Layout, dai al tuo header una struttura di base selezionando un design di base.
  2. Nella sezione Identità del sito nel campo Brand, il menu a discesa dovrebbe essere nella posizione predefinita di Logo del sito.

    La selezione di un logo fa parte della personalizzazione del tuo sito.
    Puoi cambiare il tuo logo cliccando su Cambia Logo del sito nel pannello. Per i dettagli, vedi Aggiungere immagini e icone.

    Se preferisci utilizzare il nome del sito nell’intestazione, usa il menu a tendina per scegliere Nome del sito.
  3. La navigazione controlla i collegamenti rapidi alle “altre pagine del sito. Per ora, lasceremo” le impostazioni predefinite. Vedi sotto per tutte le opzioni di navigazione.
    Il pulsante Contatto offre agli utenti la possibilità di contattarci o di navigare verso il nostro pub. Daremo agli utenti un modo semplice per trovarci usando Waze.

  4. Apri il campo Pulsante Contatto e attiva su Sì.

  5. Seleziona Waze dal menu a tendina Piattaforma.
    La sezione Call to Action controlla il pulsante nell’intestazione. Dato che questa è un’intestazione per uno sports bar, metteremo qui un link al modulo di prenotazione.

  6. Apri la sezione Invito all’azione.

  7. Nella casella di testo CTA Primario, inserisci Prenota ora.

  8. Nel campo Link inserisci l’URL del modulo di prenotazione.
    Ora cambiamo lo stile del pulsante Invito all’azione in modo che cambi quando gli utenti ci passano sopra con il mouse.

  9. Fai clic sulla scheda Stile.
  10. Apri la sezione Invito all’azione.
  11. Clicca su Hover.
    Cliccare su Hover significa che stai modificando lo stile quando gli utenti passano il mouse sul pulsante.

  12. Clicca sull’icona del globo accanto a Colore testo e seleziona Accento.

  13. Clicca sull’icona del globo accanto a Colore e seleziona Primario.
    Quando gli utenti passano il mouse sul pulsante, i colori di sfondo e del testo si invertiranno.

Impostazioni per l'intestazione

Puoi personalizzare i tuoi widget utilizzando contenuto, stile e altri parametri avanzati, offrendoti una grande flessibilità nell’adattarli alle tue esigenze. Fai clic sulle schede sottostanti per visualizzare tutte le impostazioni disponibili per questo widget.

Scheda Contenuto

Aggiungi, elimina e modifica elementi e controlli dell’Header.

Scegli uno dei layout di base. Potrai definire lo stile di questo layout usando le altre sezioni delle schede Contenuto e Stile.

Brand: Usa il menu a discesa per scegliere:

  • Logo del sito: visualizza il tuo logo nell’header.
  • Nome del sito: Visualizza il nome della tua azienda nell’Header. Puoi usare il menu a discesa per cambiare il tag HTML del nome del sito. Consigliamo di usare il tag predefinito.
  • Cambia logo del sito: Se stai usando un logo, clicca per selezionare un logo diverso. Per i dettagli, vedi Aggiungere immagini e icone.

Questo aiuta le app di accessibilità a identificare il menu. Puoi cambiare il nome del menu ma consigliamo di usare quello predefinito.

L’Header usa il menu di WordPress per creare i suoi collegamenti rapidi. Se hai più di un menu di WordPress, usa il menu a discesa per selezionare quale menu usare. Per i dettagli, vedi Crea un menu di navigazione

Controlla la navigazione quando il sito è accessibile da un dispositivo mobile.

Menù: Per impostazione predefinita, il menu è rappresentato da un’icona a hamburger. Per cambiarlo:

  • Clicca sull’icona di caricamento per caricare e usare il tuo file svg.
  • Clicca sull’icona a hamburger per aprire la libreria di icone e scegliere un’icona da lì.

Punto di interruzione: utilizzare il menu a tendina per scegliere:

  • Mobile: Fai in modo che l’Header usi le sue impostazioni mobili quando accessibile da un dispositivo con larghezza inferiore a 767 pixel.
  • Tablet: Fai in modo che l’Header usi le sue impostazioni mobili quando accessibile da un dispositivo con larghezza inferiore a 1024 pixel.
  • Nessuno: Non usare le impostazioni mobili dell’Header.

Icona indicatore sottomenu: I menu a volte contengono sottomenu. Ad esempio, il menu per Contattaci può contenere voci di sottomenu come: Prenotazioni, feste e opportunità di lavoro. Per impostazione predefinita, questi sottomenu sono indicati da una freccia in giù, ma questo può essere cambiato:

  • Clicca su nessuna icona per rimuovere questo indicatore.
  • Clicca sull’icona della freccia in giù per aprire la libreria di icone e scegliere un’icona da lì.

Attiva On se desideri aggiungere un’icona (o icone) di contatto alla tua intestazione.

Puoi attivare una serie di app o azioni dalla tua intestazione. Queste azioni/app sono chiamate Piattaforma:

  • Email: consente ai visitatori di inviarti un’email. Se utilizzi questa opzione, dovrai aggiungere:
    • Icona: Scegli un’immagine per rappresentare l’invio di un’email.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona Email dal menu a discesa.
    • Email: L’indirizzo email a cui viene inviata l’email.
    • Oggetto: Crea una riga oggetto predefinita per l’email.
    • Messaggio: Crea una riga oggetto predefinita per l’email.
  • Telefono: Permette ai visitatori di chiamare facilmente la tua attività. Se lo usi, dovrai aggiungere:
    • Icona: Scegli un’immagine per rappresentare l’effettuazione di una telefonata.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona Telefono dal menu a discesa.
    • Numero: Il numero di telefono che stanno chiamando.
  • SMS: Permette ai visitatori di inviarti messaggi.
    • Icona: Scegli un’immagine per rappresentare l’invio di un SMS.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona SMS dal menu a discesa.
    • Numero: Il numero di telefono a cui stanno inviando messaggi.
  • WhatsApp: Permette ai visitatori di inviarti messaggi WhatsApp
    • Icona: Scegli un’immagine per rappresentare l’invio di un messaggio WhatsApp.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona WhatsApp dal menu a discesa.
    • Numero: Il numero di telefono a cui stanno inviando messaggi.
  • Messenger: Permette ai visitatori di inviarti messaggi Facebook.
    • Icona: Scegli un’immagine per rappresentare l’invio di un messaggio.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona Messenger dal menu a discesa.
    • Nome utente: Il nome utente Facebook della tua attività. Qui vengono inviati i messaggi.
  • Viber: Permette ai visitatori di inviarti messaggi Viber o di chiamarti tramite Viber.
    • Icona: Scegli un’immagine per rappresentare l’invio di un messaggio Viber o l’effettuazione di una chiamata Viber.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona Viber dal menu a discesa.
    • Numero: Il numero Viber a cui stanno inviando messaggi o chiamando.
    • Azione: Usa il menu a discesa per scegliere se i visitatori Chatteranno o Chiameranno con Viber.
  • Mappa: Apri Google Maps per guidare i visitatori alla tua posizione.
    • Icona: Scegli un’immagine per rappresentare l’avvio di Google Maps.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona Mappe dal menu a discesa.
    • Link: Link all’app Google Maps. Per i dettagli vedi Integrazione Google Maps.
  • Waze: Apri l’app Waze per guidare i visitatori alla tua posizione.
    • Icona: Scegli un’immagine per rappresentare l’avvio di Waze.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona Waze dal menu a discesa.
    • Link: Link all’app Waze.
  • URL: Icona con un link a una pagina web.
    • Icona: Scegli un’immagine per rappresentare un link.
    • Etichetta: Dai un nome all’azione/app. Questo aiuterà i programmi di accessibilità a capire cosa rappresenta l’icona.
    • Piattaforma: Seleziona URL dal menu a discesa.
    • Link: L’URL della pagina a cui verranno inviati i visitatori.

Per impostazione predefinita, nessun’icona appare sul pulsante. Puoi cambiarlo:

  • Clicca sull’icona di caricamento per caricare e usare il tuo file svg.
  • Clicca sull’icona del punto per aprire la libreria di icone e scegliere un’icona da lì.

Attiva su Mostra per aggiungere un secondo pulsante CTA.

Inserisci il testo che vuoi appaia sul pulsante.

Inserisci l’URL a cui vuoi che i visitatori accedano quando fanno clic sul pulsante.

Per impostazione predefinita, nessun’icona appare sul pulsante. Puoi cambiarlo:

  • Clicca sull’icona di caricamento per caricare e usare il tuo file svg.
  • Clicca sull’icona del punto per aprire la libreria di icone e scegliere un’icona da lì.

Attiva su Mostra per aggiungere un secondo pulsante CTA.

Scheda Stile

Determina l’aspetto e lo stile dell’Header.

Controlla la larghezza del logo se stai usando un logo o allinea il nome del sito se stai usando il nome del sito.

  • Normale: Determina come il logo o il nome del sito appaiono per impostazione predefinita.
  • Hover: Determina come il logo o il nome del sito appaiono quando ci si passa sopra con il mouse.

Quando usi un logo, determina:

  1. Filtri CSS: Una serie di cursori che ti permette di controllare:
    1. Sfocatura: Applica un effetto di messa a fuoco morbida sfocando gli elementi in base al raggio in pixel.
    2. Luminosità: Regola la luminosità di un elemento modificando la sua intensità luminosa.
    3. Contrasto: Aumenta o riduce il contrasto di colore di immagini ed elementi per una migliore distinzione visiva.
    4. Saturazione: Regola i colori di immagini o elementi aumentando o diminuendo la loro intensità di colore.
    5. Tonalità: Il filtro tonalità CSS regola i colori ruotando la loro tonalità attorno allo spettro.
  2. Bordo: Usa l’interruttore per determinare se il logo avrà una linea attorno. Se aggiungi un bordo, dovrai impostare la larghezza e il colore del bordo.
  3. Forma: Imposta una forma per il logo:
    1. Rotondo: I pulsanti appaiono con angoli arrotondati.
    2. Arrotondato: I pulsanti appaiono con bordi uniformemente curvi.
    3. Angolare: Pulsanti rettangolari.
    4. Personalizzato: Regola il raggio, usando i quattro contatori per regolare ogni singolo angolo. Scopri di più su questi metodi di misurazione.
  4. Ombra della casella: Clicca sull’icona della matita per aggiungere un’ombra all’interruttore. Scopri di più su ombre.

Quando usi il nome del tuo sito, imposta:

  1. Tipografia: Quando usi il nome del sito, imposta il tipo e la dimensione del carattere. Per i dettagli, vedi Tipografia.
  2. Ombra del testo: Ombra del testo: Aggiungi profondità al tuo testo con le ombre. Per i dettagli, vedi Cos’è Ombra, Ombra del testo e Ombra della casella?
  3. Colore testo: Quando usi il nome del sito, imposta il colore del carattere. Per i dettagli, vedi Scegli un colore o Usa caratteri e colori globali.

Imposta il tipo e la dimensione del carattere del menu. Per i dettagli, vedi Tipografia.

  • Normale: Determina come il menu di navigazione appare per impostazione predefinita.
  • Hover: Determina come il menu di navigazione appare quando ci si passa sopra con il mouse.
  • Attivo: Determina come il menu di navigazione appare quando selezionato.

Imposta il colore del menu di navigazione. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.

Usa il cursore per impostare la distanza tra i singoli elementi del menu.

Layout: Se c’è un sottomenu, usa il menu a discesa per determinare se gli elementi del sottomenu appariranno:

  • Orizzontalmente, dall’alto verso il basso.
  • Verticalmente, da un lato all’altro.

Forma: Se c’è un sottomenu, determina la forma del sottomenu:

  • Arrotondato: I pulsanti appaiono con angoli smussati.
  • Bordi arrotondati: I pulsanti appaiono con bordi uniformemente curvi.
  • Squadrato: Pulsanti rettangolari.

Puoi vedere come apparirà il tuo sito su diversi dispositivi facendo clic sulle icone Mobile, Tablet e Desktop nella barra dell’editor superiore.

Allineamento testo: Quando il sito viene visualizzato da un dispositivo mobile, determina se gli elementi del menu appaiono all’inizio dell’intestazione o al centro dell’intestazione.

Divisore: attiva Sì se vuoi aggiungere un divisore tra gli elementi del menu quando il sito viene visualizzato da un dispositivo mobile. Se aggiungi un divisore, potrai anche scegliere:

Colore: Il colore del divisore. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.

Spessore: Lo spessore dei divisori.

Dimensione icona di attivazione/disattivazione: su dispositivo mobile il menu viene sostituito da un’icona di attivazione/disattivazione. I visitatori toccano l’interruttore per aprire il menu. Utilizzare il cursore per regolare le dimensioni dell’icona.

Normale/attivo:

  • Normale: Determina come appare per impostazione predefinita l’interruttore che visualizza il menu.
  • Al passaggio del mouse: Determina come appare l’interruttore che visualizza il menu al passaggio del mouse.

Colore icona interruttore: Determina il colore dell’interruttore che visualizza il menu. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.

Tipo: Usa il menu a discesa per determinare se il Contatto verrà visualizzato come Icona o Etichetta.

  • Normale: Determina come appare per impostazione predefinita il pulsante o il link.
  • Al passaggio del mouse: Determina come appare il pulsante o il link al passaggio del mouse.

Determina l’aspetto dell’icona:

  • Colore: Imposta il colore dell’icona. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Dimensione: Imposta la dimensione dell’icona.
  • Spaziatura: Determina la quantità di spazio tra il pulsante di contatto e la CTA.
  • Visualizzazione reattiva: Imposta l’aspetto del menu su mobile:
    1. Navbar: Il pulsante di contatto appare accanto al menu hamburger.
    2. Menu a discesa: Il pulsante di contatto appare nel menu hamburger.

Imposta l’aspetto dell’etichetta del pulsante di contatto:

  • Colore: Imposta il colore dell’etichetta. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Spaziatura: Imposta la quantità di spazio tra l’etichetta e il pulsante CTA.
  • Visualizzazione reattiva: Imposta l’aspetto del menu su mobile:
    1. Navbar: L’etichetta del pulsante di contatto appare accanto al menu hamburger.
    2. Menu a discesa: L’etichetta del pulsante di contatto appare nel menu hamburger.

Usa il menu a discesa per selezionare Estendi se vuoi che il pulsante CTA si estenda per l’intera larghezza dell’intestazione quando visualizzato da un dispositivo mobile.

Tipo: Usa il menu a discesa per determinare se la CTA apparirà come pulsante o come link.

Imposta il tipo e la dimensione del font del pulsante o del link. Per i dettagli, vedi Tipografia.

  • Normale: Determina come appare per impostazione predefinita il pulsante o il link.
  • Al passaggio del mouse: Determina come appare il pulsante o il link al passaggio del mouse.

Imposta il colore del testo del pulsante o del link. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.

(Solo pulsante)

Usa per passare tra:

  • Sfondo a tinta unita (Classico)
  • Sfondo sfumato (Gradiente).

Per i dettagli, vedi Crea uno sfondo.

Il colore dello sfondo. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.

(Solo pulsante)

Attiva Sì per aggiungere un bordo al pulsante CTA. Se aggiungi un bordo, dovrai determinare:

  • Colore: Per i dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Forma:
    • Arrotondato: I pulsanti appaiono con angoli smussati.
    • Bordi arrotondati: I pulsanti appaiono con bordi uniformemente curvi.
    • Squadrato: Pulsanti rettangolari.

Clicca sull’icona della matita per aggiungere un’ombra all’interruttore. Scopri di più su le ombre.

Aggiungi spazio tra i bordi del pulsante e il testo. Per i dettagli, vedi Padding e margini.

Usa il menu a discesa per selezionare Estendi se vuoi che il pulsante CTA si estenda per l’intera larghezza dell’intestazione quando visualizzato da un dispositivo mobile.

Tipo di sfondo: Imposta uno sfondo per l’intestazione. Usa le icone per passare da uno sfondo a tinta unita (Classico) a uno sfondo sfumato (Gradiente). Per i dettagli, vedi Crea uno sfondo.

Colore: Il colore dello sfondo. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.

Attiva Sì per aggiungere un bordo all’intestazione. Se aggiungi un bordo, dovrai determinare:

Clicca sull’icona della matita per aggiungere un’ombra all’intestazione. Scopri di più su le ombre.

Aggiungi spazio tra il bordo dell’intestazione e il contenuto. Per i dettagli, vedi Padding e margini.

Scheda Avanzate

Controlla il posizionamento del tuo widget, inserisci link, aggiungi codice personalizzato e altro ancora.

La maggior parte delle opzioni disponibili nella scheda Avanzate si trovano in Impostazioni scheda Avanzate.

Comportamento è una funzione aggiuntiva. Ti permette di selezionare:

Fluttuante: Attiva Sì per permettere all’intestazione di fluttuare sopra altri contenuti della pagina.

Se attivi Fluttuante Sì, avrai queste opzioni:

  • Offset: La distanza tra la parte superiore dell’intestazione e la parte superiore dello schermo.
  • Larghezza: Imposta la larghezza dell’area fluttuante.
  • Forma: Imposta l’area fluttuante come:
    • Arrotondato: Angoli smussati.
    • Bordi arrotondati: Bordi uniformemente curvi.
    • Squadrato: rettangolare.

Fisso: la proprietà fisso mantiene l’intestazione visibile anche quando il visitatore scorre il contenuto. Le opzioni sono:

  • Scorrendo verso l’alto: L’intestazione diventa fissa non appena il visitatore inizia a scorrere la pagina verso l’alto.
  • Sempre: L’intestazione è sempre fissa.
  • Mai: L’intestazione non è fissa.

Scopri di più sulle impostazioni della scheda Avanzate.

In questa pagina

Condividi questo articolo

Hosted with