Compatibilità:

WebSite X5 Evo e Pro

Quando si realizza un Sito Web Responsive, non basta adattare solo i contenuti delle pagine: anche il Modello deve essere ottimizzato per garantire una visualizzazione efficace su desktop, tablet e smartphone.


Con il diminuire della risoluzione disponibile, alcuni elementi del layout possono infatti non avere più spazio sufficiente oppure risultare meno utili alla navigazione. In questi casi, è importante intervenire sul Modello per semplificare la struttura, migliorare la leggibilità e mantenere una buona esperienza utente.


Con WebSite X5 puoi gestire queste modifiche in modo semplice e visuale, definendo come struttura, Header e Footer si adattano automaticamente ai diversi breakpoint configurati.


Perché è importante adattare il Modello

Il Modello rappresenta la struttura generale del sito e comprende elementi fondamentali come:

  • layout di pagina;
  • Header;
  • Footer;
  • menu;
  • aree fisse del progetto.


Gestire correttamente il Modello responsive permette di:

  • migliorare la navigazione;
  • semplificare l’interfaccia su schermi ridotti;
  • nascondere elementi non essenziali;
  • ottimizzare spazi e proporzioni;
  • mantenere coerenza grafica.


Come modificare la Struttura del Modello per ogni breakpoint

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

1. Accedi alla Struttura del Modello

  • Vai al Passo 2 - Modello.
  • Apri la 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: usala per selezionare la visualizzazione a cui vuoi lavorare.

2. Configura la visualizzazione Desktop

Parti sempre dalla visualizzazione principale:

  • Seleziona la visualizzazione Desktop sulla Responsive Bar.
  • Usa le opzioni disponibili per impostare la struttura base del Modello.

3. Personalizza le visualizzazioni inferiori

Procedi poi breakpoint per breakpoint:

  • Seleziona ogni intervallo sulla Responsive Bar.
  • Usa le opzioni disponibili per modificare il layout, rimuovere elementi non necessari e adattare la struttura allo spazio disponibile.


#tip - Per maggiori informazioni su come costruire e personalizzare un Modello, vedi Come si crea un nuovo Template partendo da un Template Vuoto?


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


Come adattare Header e Footer

Oltre al Modello, anche l'Header e il Footer possono richiedere modifiche specifiche per ogni visualizzazione.


Per gestirli devi procedere in questo modo: 

1. Accedi al Contenuto del Modello

  • Vai al Passo 2 - Modello.
  • 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.

2. Usa la Responsive Bar

  • Sulla Responsive Bar seleziona l'intervallo corrispondente alla Visualizzazione Desktop e usa le opzioni disponibili per comporre l'Header/Footer del Modello.
  • Sempre sulla Responsive Bar, seleziona uno dopo l'altro gli altri intervalli e apporta le modifiche necessarie. 
  • Per ogni breakpoint puoi:
    • aggiungere nuovi Oggetti;
    • nascondere Oggetti;
    • ripristinare elementi nascosti;
    • modificare posizione e dimensioni;
    • adattare il layout generale.


Gestione degli Oggetti nelle diverse visualizzazioni

Aggiungere Oggetti 

Un Oggetto aggiunto sarà:

  • visibile nella visualizzazione corrente;
  • visibile nelle visualizzazioni inferiori;
  • nascosto in quelle superiori.

Nascondere Oggetti

  • Selezionato un Oggetto, clicca sul pulsante Mostra/Nascondi Oggetto.
  • Puoi scegliere se:
    • nasconderlo solo nella Visualizzazione corrente;
    • nasconderlo anche nelle Visualizzazioni inferiori.

Ripristinare Oggetti nascosti

  • Clicca sul triangolino presente sul pulsante Mostra/Nascondi Oggetto.
  • Nel menu clicca sulla voce Gestione Oggetti nascosti.
  • Nella finestra richiamata seleziona l'Oggetto precedentemente nascosto e attiva l'opzione Visibile.

Riposizionare Oggetti

Nelle diverse Visualizzazioni puoi modificare:

  • posizione;
  • dimensioni.


Le altre proprietà degli Oggetti rimangono invariate in tutte le diverse Visualizzazioni.


#tip - Per maggiori informazioni, vedi Come si modifica la composizione di Header e Footer?


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


Suggerimenti pratici

Ecco alcuni suggerimenti utili per ottenere risultati migliori:

  • parti sempre dal layout Desktop;
  • semplifica progressivamente;
  • controlla Header e Footer separatamente;
  • nascondi solo ciò che è realmente superfluo;
  • verifica ogni modifica in Anteprima;
  • presta attenzione a possibili sovrapposizioni.


In sintesi

Adattare correttamente il Modello di un sito responsive significa costruire una struttura flessibile capace di mantenere qualità visiva, chiarezza e funzionalità su qualsiasi dispositivo.


Con WebSite X5 puoi gestire tutto questo senza intervenire sul codice, utilizzando strumenti visuali che semplificano la personalizzazione del layout e permettono di ottimizzare l’esperienza utente in ogni visualizzazione.


Il tuo compito è organizzare la struttura in modo strategico, intervenendo dove necessario per garantire un’esperienza efficace e professionale su ogni dispositivo.