Layout dell'Header

Scopo: Presentare e descrivere le diverse tipologie di header (intestazione) predefinite disponibili nel template di default, indicando per ciascuna il file .html da utilizzare.
Destinatari: Webmaster, sviluppatori front-end, amministratori.
Quando serve: Durante la fase di setup del sito, per scegliere lo stile dell'intestazione che meglio si adatta al proprio brand.

Introduzione all'Header

L'Header è la parte superiore del tuo sito web e uno degli elementi più importanti per l'identità del brand e la navigazione dell'utente. Contiene il logo, il menu principale, la barra di ricerca e il carrello. Il template di default offre diverse tipologie di header predefiniti, ognuno con uno stile e una disposizione degli elementi differente.

Note

Dove si gestisce il file dell'Header?
Per cambiare il file .html del tuo header, devi modificare il Layout Generale.

1. Vai in Vai in CMS > Template > Template Grafici.

2. Seleziona il tab Layout generale.

3. Clicca sul pulsante Template header.

4. Nel file explorer che si apre, naviga nella cartella classB e seleziona il file .html corrispondente al layout che desideri utilizzare

Di seguito trovi il catalogo degli header disponibili, suddivisi per tipologia.

Header Classic

Questa tipologia presenta un layout tradizionale e versatile, con il logo a sinistra e la navigazione a destra.

Nome Header	Descrizione	File da Utilizzare
Header classic default	La versione base, pulita e funzionale, con sfondo bianco.	classB_page_header_classic.html
Header classic colored	Utilizza il colore primario della skin come sfondo per l'header, creando un forte impatto di brand.	classB_page_header_classic_colored.html
Header classic colored con hellobar	Aggiunge una sottile barra promozionale (hellobar) sopra l'header colorato, ideale per annunci o contatti rapidi.	classB_page_header_classic_colored_hellobar.html
Header classic dark	Un layout elegante e moderno con uno sfondo scuro (nero o grigio antracite) e testi chiari.	classB_page_header_classic_dark.html
Header classic dark con hellobar	La versione con sfondo scuro, arricchita dalla barra promozionale superiore.	classB_page_header_classic_dark_hellobar.html
Header classic light	Un design minimale con uno sfondo bianco o grigio molto chiaro, per un look pulito e arioso.	classB_page_header_classic_light.html
Header classic light con hellobar	Aggiunge la barra promozionale alla versione light dell'header.	classB_page_header_classic_light_hellobar.html

Header Center

Questa tipologia posiziona il logo al centro, sopra il menu di navigazione, per un look più simmetrico e d'impatto.

Nome Header	Descrizione	File da Utilizzare
Header center colored	La versione con logo centrato e sfondo che utilizza il colore primario della skin.	classB_header_center_colored.html
Header center colored con hellobar	Aggiunge la barra promozionale superiore al layout con logo centrato e sfondo colorato.	classB_header_center_colored_hellobar.html
Header center dark	Il layout con logo centrato su uno sfondo scuro, per un'estetica elegante e sofisticata.	classB_header_center_dark.html
Header center dark con hellobar	La versione con sfondo scuro e logo centrato, arricchita dalla barra promozionale.	classB_header_center_dark_hellobar.html
Header center light	La versione minimale e pulita, con logo centrato su uno sfondo bianco o molto chiaro.	classB_header_center_light.html
Header center light con hellobar	Aggiunge la barra promozionale alla versione light dell'header con logo centrato.	classB_header_center_light_hellobar.html

Header Fullwidth

Questa tipologia estende l'header a tutta la larghezza dello schermo, spesso con uno sfondo trasparente che si sovrappone allo slider sottostante.

Nome Header	Descrizione	File da Utilizzare
Header fullwidth light	La versione base di questo layout, con testi e logo chiari, progettata per integrarsi con gli elementi della pagina sottostante.	classB_header_fullwidth_ligth.html
Header fullwidth con hellobar	Aggiunge una sottile barra promozionale in cima all'header a tutta larghezza.	classB_header_fullwidth_ligth_hellobar.html

Header Search

Questa tipologia mette in grande evidenza la barra di ricerca, rendendola l'elemento centrale dell'header.

Nome Header	Descrizione	File da Utilizzare
Header search colored	La versione con barra di ricerca prominente, inserita in un header con lo sfondo del colore primario della skin.	classB_header_search_colored.html
Header search colored con hellobar	Aggiunge la barra promozionale superiore al layout con ricerca in evidenza e sfondo colorato.	classB_header_search_colored_hellobar.html
Header search dark	Il layout con barra di ricerca centrale su uno sfondo scuro, per un look moderno e d'impatto.	classB_header_search_dark.html
Header search dark con hellobar	La versione con sfondo scuro e ricerca centrale, arricchita dalla barra promozionale.	classB_header_search_dark_hellobar.html
Header search light	La versione minimale e pulita, con la barra di ricerca come elemento focale su uno sfondo bianco o molto chiaro.	classB_header_search_ligth.html
Header search light con hellobar	Aggiunge la barra promozionale alla versione light dell'header con ricerca in evidenza.	classB_header_search_ligth_hellobar.html

FAQ & Esempi pratici

Ho selezionato l'Header classic colored, ma lo sfondo rimane bianco. Perché non prende il colore della mia skin?

Assicurati di aver associato correttamente la tua Skin nel Layout Generale. L'header colored non ha un colore proprio, ma "legge" la variabile del colore primario (--primary-color) definita nel file CSS della Skin. Se nel campo Skin è impostato "Nessun template", l'header non saprà quale colore utilizzare e rimarrà bianco o trasparente.

Vorrei usare l'Header Fullwidth con uno sfondo trasparente sopra il mio slider, ma vedo comunque uno sfondo bianco. Come risolvo?

L'Header Fullwidth è progettato per essere trasparente, ma il suo aspetto finale dipende dal CSS. Probabilmente una regola CSS sta applicando uno sfondo bianco al .header-body. Per risolvere, dovrai aggiungere una regola nel tuo file Css custom per forzare la trasparenza, ad esempio:

codeCSS

#header.header-full-width .header-body {

background: transparent !important;

}

Che cos'è esattamente la "hellobar" e a cosa serve?

La hellobar è quella sottile striscia posizionata nella parte più alta del sito, sopra l'header principale. È uno strumento di marketing molto efficace. Puoi usarla per comunicazioni rapide e importanti come:

Annunciare una promozione ("Spedizione gratuita sopra i 50€").

Mostrare contatti utili (numero di telefono, email).

Inserire link ai social media.

Ho un catalogo con migliaia di prodotti. Quale header mi consigliate per migliorare l'esperienza di ricerca dei miei clienti?

Senza dubbio, uno degli header della tipologia Header Search. Questi layout mettono la barra di ricerca in una posizione centrale e prominente, incoraggiando gli utenti a cercare direttamente ciò di cui hanno bisogno invece di navigare tra le categorie. È la scelta migliore per gli e-commerce con un vasto assortimento.

Ho scelto un header dark ma il mio logo, che è scuro, scompare. Come posso fare?

Hai due opzioni, una semplice e una avanzata:

Semplice: Prepara una versione del tuo logo in negativo (bianco o chiaro) con sfondo trasparente e caricala in Anagrafica Azienda.

Avanzata (con CSS): Se vuoi usare due loghi diversi (uno scuro per gli header chiari e uno chiaro per quelli scuri), dovrai modificare il file .html dell'header per includere entrambi i loghi e poi usare il CSS per mostrare/nascondere quello corretto in base alla classe dell'header (es. .header-dark).

Posso combinare elementi di header diversi? Ad esempio, il logo centrato dell'Header Center ma con la navigazione dell'Header Classic?

Non è possibile farlo semplicemente scegliendo un file. Richiede una personalizzazione del codice. Dovresti scaricare i file .html di entrambi gli header, aprirli con un editor di codice e "fondere" le parti che ti interessano (il blocco del logo da uno e il blocco della navigazione dall'altro) in un nuovo file .html personalizzato.

Ho impostato l'header ... con hellobar, ma la barra è vuota. Dove inserisco il testo o i link?

Il file .html dell'header con hellobar definisce solo lo "spazio" per la barra. Il contenuto vero e proprio va inserito modificando quel file .html. Aprilo in modalità Edit e troverai una sezione

(o simile) dove potrai inserire il tuo testo, i link o le icone.

Qual è la differenza tra Header Classic e Header Light? Sembrano molto simili.

Sono simili, ma hanno sottili differenze di stile. L'Header Classic è il layout più standard e robusto. L'Header Light è spesso una sua evoluzione più minimale, magari con bordi più sottili, font più leggeri o un'altezza leggermente ridotta, pensato per un design più "arioso" e moderno.