Passo 2 - Modello > Contenuto del Modello

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

Nello specifico è possibile lavorare su Header, Footer e Barra laterale 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.

La finestra Contenuto del Modello è organizzata nelle sezioni Header, Footer e Barra laterale: i comandi e le opzioni disponibili in tutte e tre le sezioni sono identici.

La sezione Barra laterale è presente solo se nella finestra Struttura del Modello è stato scelto Header, Footer e Barra laterale a sinistra o Header, Footer e Barra laterale a destra come Tipo di Struttura.

Se si è scelto di creare un Sito responsive, la finestra Contenuto del Modello 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, del Footer e della Barra laterale 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, del Footer o della Barra laterale 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, dal Footer o dalla Barra laterale.

▪	Dimensione: visualizza il valore espresso in pixel della larghezza e dell'altezza dell'Oggetto selezionato.

Infine, sotto alla Barra di Stato è riportato l'elenco di tutti gli Oggetti che è possibile utilizzare per comporre l'Header, il Footer e la Barra laterale 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.

Per inserire un Oggetto nell'Header, nel Footer o nella Barra laterale 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. È possibile, per esempio, visualizzare tutti i Contenuti principali Pagina oppure i Contenuti principali Modello.

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 Modello sono:

	Oggetto Titolo		Oggetto Menu
	Oggetto Testo		Oggetto Immagine
	Oggetto Tabella		Oggetto Galleria
	Oggetto Video/Suono		Oggetto Modulo di Contatto
	Oggetto Commenti e Voti		Oggetto Animazione HTML5
	Oggetto Catalogo Prodotti		Oggetto Contenuto Dinamico
	Oggetto Codice HTML		Oggetto Cerca

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

Inseriti gli Oggetti necessari nell'area di lavoro dell'editor del Modello è possibile selezionarli e agire su di essi attraverso i comandi presenti nella Barra Strumenti.

Per effettuare una selezione multipla è possibile:

▪	cliccare sugli Oggetti che si vogliono includere nella selezione tenendo premuto il tasto CTRL o il tasto SHIFT;

▪	cliccare sull'area di lavoro e, tenendo premuto il tasto sinistro del mouse, spostarsi in modo da disegnare un rettangolo di selezione che includa tutti gli Oggetti desiderati.

I comandi disponibili nella Barra Strumenti sono:

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.

Area di lavoro

Permette di definire, attraverso la finestra richiamata, come si presenta l'area di lavoro. Nello specifico sono disponibili le opzioni:

▪	Colore Sfondo: imposta come Chiaro o Scuro il colore dello sfondo dell'area di lavoro in modo da permettere una migliore visualizzazione degli Oggetti inseriti.

▪	Attiva griglia: se attiva, la griglia facilita il posizionamento e il dimensionamento degli Oggetti inseriti nell'area di lavoro. È possibile definire il Passo della griglia calamitata.

Disponi

Definisce la disposizione degli Oggetti inseriti nell'area di lavoro. Nello specifico i comandi disponibili sono:

▪	Posizione e Dimensioni: definisce, attraverso la finestra richiamata, le coordinate che determinano la posizione e le dimensioni dell'Oggetto selezionato. L'opzione Mantieni proporzioni fa in modo che nelle operazioni di ridimensionamento vengano mantenute le proporzioni originarie dell'Oggetto.

▪	Allineamento orizzontale / Allineamento verticale: attivi solo se sono stati selezionati almeno 2 Oggetti, permettono rispettivamente di allinearli orizzontalmente (a sinistra, al centro o a destra) o verticalmente (in alto, in mezzo o in basso).

▪	Distribuisci: attivo solo se sono stati selezionati almeno 3 Oggetti, li dispone in modo che abbiano fra loro la stessa distanza orizzontalmente o verticalmente.

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.

Inserisci i contenuti dell'Oggetto selezionato

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.

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