Compatibilità:

WebSite X5 Evo e Pro

Per potersi adattare al meglio alla visualizzazione sui diversi dispositivi, anche il Modello di un sito web responsive deve subire delle modifiche. Mano a mano che la risoluzione dei dispositivi diminuisce, infatti, può succedere che alcuni elementi del Modello non abbiamo più lo spazio sufficiente per essere visualizzati: in funzione della loro importanza, potresti decidere quindi di rimuoverli da un certo breackpoint in poi.


In WebSite X5 puoi lavorare sul Modello in modo da definire come deve cambiare nelle diverse Visualizzazioni determinate dai breakpoint che hai attivato:

  • Al Passo 2, accedi alla finestra Struttura del Modello: avendo scelto di realizzare un sito responsive, sul lato della finestra ti compare la Responsive Bar.
  • La Responsive Bar ripropone tutti gli Intervalli determinati dai breakpoint che hai impostato nella finestra Risoluzioni e Responsive Design: seleziona la visualizzazione Desktop e utilizza le opzioni disponibili per definire come il Modello deve apparire in questa Visualizzazione.
  • Definito il Modello per la Visualizzazione Desktop, seleziona sulla Responsive Bar l'intervallo successivo e apporta le modifiche necessarie al Modello.
  • Procedi in maniera analoga andando a selezionare, uno dopo l'altro, tutti gli Intervalli presenti sulla Responsive Bar e modificando di conseguenza il Modello.


#tip - Modelli predefiniti. Tutti i Modelli predefiniti inclusi in WebSite X5 sono già responsive. Per ogni Modello, infatti, è stato pre-impostato un set di breakpoint che diventa attivo nel momento in cui si spunta l'opzione Sito Responsive nella finestra Risoluzione e Responsive Design. Ovviamente sei libero di modificare in base alle tue esigenze questo set preimpostato di breakpoint.


Sistemato il Modello, puoi occuparti dell'Header e del Footer: anche queste sezioni possono, infatti, presentare delle variazioni in base alla risoluzione a cui viene visualizzato il Sito.

  • Al Passo 2 accedi alla sezione Contenuto del Modello. Anche in questa finestra, dal momento che stai lavorando alla creazione di un Sito responsive, è disponibile la Responsive Bar.
  • Sulla Responsive Bar seleziona l'intervallo corrispondente alla Visualizzazione Desktop e componi l'Header/Footer del Modello.
  • Sempre sulla Responsive Bar, seleziona uno dopo l'altro gli altri intervalli e apporta le modifiche necessarie. 
  • Considera che per ogni Visualizzazione puoi:
    • Aggiungere nuovi Oggetti. Inserendo un Oggetto, questo sarà visibile nella Visualizzazione corrente e in quelle inferiori, ma non in quelle superiori (dove sarà automaticamente nascosto).
    • Nascondere degli Oggetti: selezionato un Oggetto, clicca sul pulsante  Mostra/Nascondi Oggetto e decidi se deve essere nascosto solo nella Visualizzazione corrente o in tutte le Visualizzazioni inferiori.
    • Visualizzare nuovamente degli Oggetti che erano stati precedentemente nascosti. Clicca sul triangolino presente sul pulsante  Mostra/Nascondi Oggetto per accede al menu e poi clicca sulla voce Gestione Oggetti nascosti: nella finestra richiamata seleziona l'Oggetto su cui vuoi agire e attiva l'opzione Visibile.
    • Modificare la posizione e/o le dimensioni degli Oggetti. Le altre proprietà degli Oggetti rimangono le stesse in tutte le diverse Visualizzazioni.


#tip - Riposizionamento automatico. Se a una determinata Visualizzazione uno o più Oggetti risultano posizionati in modo da non risultare più completamente visibili, questi vengono automaticamente riposizionati. In questo riposizionamento gli Oggetti vengono spostati ma non ridimensionati: può dunque accadere che gli Oggetti si sovrappongano. Per questo è consigliabile verificare sempre attraverso l'Anteprima come Header e Footer si comportano ai diversi breakpoint.