Contenuto Header e Footer

Passo 2 - Modello > Personalizzazione >

Contenuto Header e Footer

Previous pageReturn to chapter overviewNext page
Mostra/Nascondi testo nascosto 

Dopo aver scelto di lavorare a un Modello Predefinito, a un Modello Personale o a un Modello Vuoto attraverso la finestra Scelta del Modello e dopo aver definito lo Personalizzazione del Modello, grazie alle funzioni proposte in questa finestra è possibile personalizzare ulteriormente il Modello stesso lavorando sia sull'Header che sul Footer, aggiungendo svariati tipi di contenuto, fra cui: Testi, Immagini, Animazioni, Gallerie, Codice HTML, Campi di Ricerca e Collegamenti.

Nello specifico è possibile lavorare sull'Header e sull Footer del Modello grafico sia per la Visualizzazione Desktop sia, nel caso si stia lavorando alla creazione di un Sito responsive, per le Visualizzazioni corrispondenti ai diversi breakpoint impostati.

Per procedere alla creazione di un Sito responsive occorre scegliere l'opzione Sito Responsive presente nella finestra Risoluzioni e Responsive Design.

Clicca per espandere/ridurre

La finestra Contenuto Header e Footer è organizzata nelle sezioni Header e Footer: i comandi e le opzioni disponibili in entrambe le sezioni sono identici.

Clicca per espandere/ridurreReference: Come si presenta l'editor del Modello

Se si è scelto di creare un Sito responsive, la finestra Contenuto Header e Footer presenta una Responsive Bar che riprende quella già proposta nella finestra Risoluzioni e Responsive Design.

La Responsive Bar ripropone tutti i breakpoint impostati e, in base a questi, indentifica degli intervalli: è sufficiente cliccare su un intervallo per selezionarlo e procedere alla definizione dell'Header e del Footer del Modello per la Visualizzazione corrispondente.

Oltre alla Responsive Bar, la finestra offre un editor grafico che presenta una Barra Strumenti e, sotto ad essa, un'area di lavoro in cui viene automaticamente ripresa l'immagine utilizzata come sfondo dell'Header o del Footer del Modello scelto (sia predefinito che personale): l'immagine viene visualizzata in scala 1:1 e, se necessario, può essere fatta scorrere attraverso l'apposita barra di scroll orizzontale. Su questa immagine vengono visualizzate in tempo reale tutte le modifiche apportate attraverso i comandi disponibili.

Subito sotto l'immagine caricata è presente una Barra di Stato in cui vengono riportate:

Posizione: visualizza le coordinate x e y che identificano la posizione dell'angolo superiore destro dell'Oggetto selezionato, rispetto all'area occupata dall'Header o dal Footer.
Dimensione: visualizza il valore espresso in pixel della larghezza e dell'altezza dell'Oggetto selezionato.

Se definendo la Struttura del Modello è stata impostata come Tipo di Menu l'opzione Orizzontale - Menu dentro l'Header, sull'immagine dell'Header viene visualizzata un'area grigia tratteggiata corrispondente all'ingombro del Menu stesso. La presenza di quest'area non impedisce la disposizione di altri Oggetti ma è da tenere in considerazione per evitare sovrapposizioni indesiderate.

Infine, sotto alla Barra di Stato è riportato l'elenco di tutti gli Oggetti che è possibile utilizzare per comporre l'Header e il Footer del Modello.

Gli Oggetti sono gli stessi utilizzati per comporre le Pagine (vedi, Passo 4 - Pagine): per poter essere identificati più facilmente sono organizzati tramite dei filtri e per ciascuno di essi è disponibile un'anteprima.

Clicca per espandere/ridurreReference: I comandi della Barra Strumenti

I comandi della Barra Strumenti permettono di gestire alcune operazioni sugli Oggetti inseriti nell'Header e nel Footer del Modello:

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Rispettivamente, tagliano, copiano e incollano l'Oggetto selezionato.

Annulla [CTRL+Z] - Ripristina

Annullano e ripristinano l'ultima operazione eseguita/annullata.

Porta in primo piano - Porta in secondo piano

Portano l'Oggetto selezionato in primo o in secondo piano, ovvero sopra o sotto tutti gli altri Oggetti eventualmente sovrapposti.

Posizione e Dimensioni

Definisce, attraverso la finestra richiamata, le coordinate che determinano la posizione e le dimensioni dell'Oggetto selezionato. L'opzione Mantieni proporzioni, attiva di default, fa in modo che nelle operazioni di ridimensionamento vengano mantenute le proporzioni originarie dell'Oggetto.

Gestione Oggetti nascosti

Disponibile solo in caso di Sito responsive, consente di definire se, per la Visualizzazione a cui si sta lavorando (impostata tramite la Responsive Bar), l'Oggetto selezionato deve essere mostrato o nascosto.

Cliccando sul triangolino presente sul pulsante è possibile richiamare un menu con le seguenti voci:

Nascondi per questa visualizzazione: l'Oggetto selezionato viene nascosto solo nella Visualizzazione corrente.
Nascondi per questa visualizzazione e per quelle inferiori: l'Oggetto selezionato viene nascosto nella Visualizzazione corrente e in tutte le Visualizzazioni con risoluzioni inferiori.
Gestione Oggetti nascosti per questa visualizzazione: richiama una finestra in cui viene proposto l'elenco di tutti gli Oggetti che sono stati nascosti per la Visualizzazione corrente. Per ogni Oggetto è disponibile un'anteprima e il comando necessario per renderlo nuovamente visibile.    

Contenuto Oggetto

Apre la finestra che consente di procedere alla creazione dell'Oggetto selezionato fra quelli inseriti nell'Header o nel Footer del Modello. La finestra richiamata varia in base al tipo di Oggetto (Testo, Immagine, ecc...).

Alcuni degli Oggetti inseriti nell'Header e nel Footer, come per esempio, le Animazioni  e gli Oggetti Codice HTML, vengono visualizzati solo quando il Sito viene aperto nel Browser.

Clicca per espandere/ridurreReference: La lista degli Oggetti disponibili

Per inserire un Oggetto nell'Header o nel Footer del Modello è sufficiente selezionare l'icona che lo rappresenta dall'elenco, trascinarla e rilasciarla nell'editor, nella posizione che si desidera.

Per agevolarne la scelta, gli Oggetti possono essere filtrati e gestiti attraverso i seguenti comandi:

Elenco Filtri

Propone l'elenco dei filtri disponibili per selezionare, tra tutti gli Oggetti disponibili, quelli utili per un determinato scopo. E' possibile, per esempio, visualizzare tutti i Contenuti principali Pagina oppure i Contenuti principali Header/Footer.

Mostra la Gestione degli Oggetti

Richiama la finestra Gestione degli Oggetti attraverso la quale è possibile gestire l'installazione, la disinstallazione e l'aggiornamento di tutti gli Oggetti che non vengono installati di base con il programma.

Gli Oggetti che rientrano fra i Contenuti principali Pagina e i Contenuti principali Header/Footer sono:

Una volta inserito un Oggetto nell'Header o nel Footer del Modello è sufficiente selezionarlo e cliccare sul pulsante (o fare doppio click in sua corrispondenza) per aprire la finestra che ne permette l'effettiva creazione.

 


Best practice:

-

Come lavorare con i Modelli

-

Dove trovare nuovi modelli per WebSite X5

-

Come creare un Sito Web Responsive in WebSite X5 | Come impostare il Modello


Approfondimenti:

-

Come funziona il Motore di Ricerca interno di WebSite X5