Compatibilità:

WebSite X5 Evo e Pro

Due sezioni che non mancano praticamente mai nella struttura di un template sono l'Header e il Footer. 


L'Header è la parte alta del template, quella che è immediatamente visibile e che in genere ospita elementi come il logo, il menu di navigazione e, in molti casi, il campo di ricerca o i pulsanti per fare il login/logout. 


Il Footer, al contrario, è la sezione che chiude la pagina: può essere minimal e presentare solo la partita iva e i link alle policy, o essere decisamente più sviluppato e proporre anche i link alle diverse pagine del sito, i pulsati dei Social e la form per l'iscrizione a un'eventuale newsletter.


Oltre a queste due sezioni, la struttura del template può prevedere anche una Barra laterale posizionata a fianco dei contenuti, sul lato desto o sinistro della pagina. In genere questa sezione è destinata ad ospitare dei menu di sezione e, a volte, degli spazi pubblicitari.


Se scegli di utilizzare un template predefinito, tutti questi elementi sono già impostati dal template stesso 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 e definire tutto ciò che occorre per l'Header, il Footer e l'eventuale Barra laterale. 


Sia che tu debba inserire un nuovo elemento all'interno dell'Header, del Footer o della Barra laterale, sia che tu debba solo modificare un elemento già presente, la procedura che devi seguire non varia molto. Per comodità, ipotizziamo di lavorare con un template predefinito:

  • Vai al Passo 2 - Impostazioni del Modello e 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.
  • Rimani nella sezione Header. 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 puoi utilizzare le barre di scroll per portare in primo piano la parte che ti interessa.
  • 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.   

Come vedi, 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. 

  • 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.   


#tip -  Seleziona multipla. Per effettuare una selezione multipla puoi cliccare sugli Oggetti 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.


In caso di sito 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:

  • Quando accedi la prima volta alla finestra Contenuto del Modello, sulla Responsive Bar è selezionato l'intervallo relativo alla visualizzazione Desktop. Senza cambiare intervallo, componi l'Header seguendo i passi visti al paragrafo precedente.
  • Una volta soddisfatto del risultato raggiunto per la visualizzazione Desktop, clicca sulla Responsive Bar in modo da selezionare l'intervallo successivo.
  • 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.
  • Utilizza la Responsive Bar per selezionare, in ordine uno dopo l'altro, tutti gli intervalli e gestire la visualizzazione degli Oggetti nei diversi casi.  
  • 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. Per maggiori informazioni vedi Come si imposta il Modello di un sito responsive?