Compatibilità:

WebSite X5 Evo e Pro

Nella realizzazione di un sito web, l’aspetto grafico e funzionale delle pagine dipende in larga parte dalla struttura del Modello. Per ottenere un sito coerente, professionale e facilmente navigabile, è quindi importante comprendere il ruolo delle principali sezioni che lo compongono.

  • Header: è la parte superiore del sito, immediatamente visibile all’apertura della pagina. Generalmente contiene logo, menu principale, strumenti di navigazione, campo di ricerca e pulsanti strategici come login o contatti. 
  • Footer: è la sezione conclusiva della pagina. Può limitarsi a contenuti essenziali come partita IVA, copyright e policy, oppure includere menu aggiuntivi, link rapidi, social network, moduli newsletter e informazioni di contatto.
  • Barra laterale: non sempre presente, è una colonna posizionata lateralmente rispetto ai contenuti principali, a destra o a sinistra. Viene spesso utilizzata per menu di sezione, contenuti di supporto, banner o spazi promozionali.

Saper configurare correttamente queste aree ti permette di personalizzare il template in modo più efficace, migliorando struttura, usabilità ed esperienza utente su tutto il sito.



Perché Header, Footer e Barra laterale sono importanti

Una corretta gestione di queste sezioni consente di:

  • rafforzare identità visiva e branding;
  • migliorare navigazione e accessibilità;
  • uniformare la struttura di tutte le pagine;
  • facilitare l’accesso ai contenuti principali;
  • migliorare usabilità ed esperienza utente.


Come modificare Header, Footer e Barra laterale

Se scegli di utilizzare un template predefinito, tutti gli elementi del Modello sono già impostati ma dovrai comunque modificarli per personalizzarli con i tuoi dati: per esempio dovrai sostituire l'immagine di placeholder utilizzata con quella del tuo vero logo. Se invece decidi di creare un template da zero, dovrai impostare tu la struttura del modello. 


In entrambe i casi, saper modificare correttamente queste aree ti permette di costruire un sito più coerente, professionale ed efficace. Per comodità, ipotizziamo di lavorare con un template predefinito:

1. Accedi al Contenuto del Modello

  • Vai al Passo 2 - Impostazioni del Modello.
  • Clicca sulla voce Contenuto del Modello. Questa finestra è organizzata nelle sezioni Header, Footer e Barra laterale: i comandi e le opzioni disponibili in tutte e tre le sezioni sono identici.
  • Seleziona la sezione che desideri modificare: per esempio, Header. 

2. Visualizza e gestisci gli Oggetti presenti

  • L'area di lavoro mostra in scala 1:1 l'immagine utilizzata come sfondo e tutti gli Oggetti che su di essa sono stati inseriti. Se lo spazio non è sufficiente, utilizza le barre di scroll per portare in primo ciò che ti interessa.
  • Da qui puoi modificare elementi esistenti, aggiungere nuovi Oggetti, eliminare contenuti superflui, riposizionare gli elementi.

3. Modifica o aggiungi contenuti

  • Se, per esempio, vuoi modificare l'immagine del logo, clicca sull'Oggetto Immagine corrispondente per selezionarlo, quindi clicca sul pulsante  per accedere alla finestra con le impostazioni.
  • Se, invece, vuoi aggiungere un titolo, clicca sull'icona relativa all'Oggetto Titolo e trascinala sull'area di lavoro. Agisci sulle ancore di selezione per posizionare e dimensionare adeguatamente l'oggetto quindi fai doppio click in sua corrispondenza per accedere alla finestra delle impostazioni.   

Per comporre l'Header hai a disposizione la lista completa degli Oggetti: non ti resta che scegliere quali utilizzare ed inserirli sull'area di lavoro. 

4. Ottimizza disposizione e gerarchia visiva

  • Per posizionare con maggior precisione gli Oggetti inseriti clicca sul pulsante Disponi e utilizza i comandi per agire su: posizione, dimensione, allineamento e distribuzione.
  • Se hai degli Oggetti che si sovrappongono, utilizza i pulsanti Porta in primo piano e Porta in secondo piano per definire l'ordine di visualizzazione.   


Le stesse modalità operative si applicano in modo identico anche a Footer e Barra laterale.


#tip -  Seleziona multipla. Per velocizzare il lavoro puoi selezionare più Oggetti contemporaneamente tenendo premuto il tasto CTRL o il tasto SHIFT. In alternativa, puoi cliccare sull'area di lavoro e, tenendo premuto il tasto sinistro del mouse, spostarti in modo da disegnare un rettangolo di selezione che includa tutti gli Oggetti desiderati.


Come adattare Header e Footer nei siti responsive

Se stai lavorando alla creazione di un sito responsive (hai attivato l'opzione Sito Responsive presente in Passo 2 - Impostazioni Modello > Risoluzioni e Responsive Design), nelle sezioni in cui lavori alla definizione di Header, Footer e Barra laterale hai a disposizione la Responsive Bar che ripropone tutti i breakpoint impostati e, in base a questi, identifica degli intervalli.


Per gestire la visualizzazione di Header, Footer e Barra laterale per ogni breakpoint devi procedere in questo modo:

1. Configura la versione Desktop

  • Sulla Responsive Bar seleziona l'intervallo relativo alla visualizzazione Desktop.
  • Componi l'Header seguendo i passi visti al paragrafo precedente.

2. Controlla ogni breakpoint tramite Responsive Bar

  • Clicca sulla Responsive Bar in modo da selezionare progressivamente ogni intervallo successivo.
  • Verifica la disposizione degli Oggetti, controlla gli spazi e adatta le dimensioni.

3. Gestisci gli Oggetti nascosti

  • Lo spazio a disposizione si riduce: valuta se è ancora possibile mantenere tutti gli Oggetti. Per fare in modo che un Oggetto non venga più visualizzato selezionalo e clicca sul pulsante Gestione Oggetti nascosti: puoi scegliere che l'Oggetto venga nascosto solo nella visualizzazione corrente, oppure che venga nascosto anche in tutte le visualizzazioni inferiori.
  • Per rendere nuovamente visibile un Oggetto che avevi nascosto, seleziona sulla Responsive Bar l'intervallo su cui vuoi agire, clicca sul pulsante e seleziona il comando Gestione Oggetti nascosti per questa visualizzazione: dall'elenco degli Oggetti nascosti seleziona quello che ti interessa e clicca per renderlo di nuovo visibile.  


#tip. Nei breakpoint inferiori conviene semplificare Header, Footer e Barra laterale, mantenendo solo gli elementi realmente essenziali per evitare sovraccarico visivo. Per maggiori informazioni vedi Modello Responsive. Come adattare il layout del sito ai diversi dispositivi? 


Suggerimenti pratici

Per ottenere risultati migliori:

  • mantieni una struttura coerente tra tutte le pagine;
  • privilegia chiarezza e semplicità;
  • evita sovraccaricare Header e Footer;
  • verifica sempre leggibilità e navigazione;
  • usa selezione multipla per lavorare più rapidamente;
  • controlla ogni breakpoint;
  • testa il sito in Anteprima locale.


In sintesi

Header, Footer e Barra laterale sono componenti fondamentali per costruire un sito ben organizzato, professionale e facilmente navigabile.


Con WebSite X5 puoi modificarli in modo visuale, personalizzando struttura, contenuti e comportamento responsive senza intervenire sul codice.


Una corretta progettazione del Modello ti consente di ottenere siti più efficaci, coerenti e performanti su qualsiasi dispositivo.