Compatibilità:

WebSite X5 Pro

Ipotizzando di voler creare una versione Desktop, una versione Tablet e una versione Smartphone di un Sito Web, puoi utilizzare la Pagina di ingresso per impostare il reindirizzamento automatico in base alla risoluzione del Browser rilevata.

  • Innanzi tutto, crea il Sito corrispondente alla versione Desktop definendone struttura e contenuti.
  • Vai al Passo 1 - Impostazioni > Pagina di ingresso, attiva l'opzione Attiva Pagina di Ingresso e seleziona l'opzione Rileva automaticamente la risoluzione.
  • Attraverso i comandi disponibili, componi l'Elenco dei breakpoint. Clicca poi sul pulsante Aggiungi per aggiungere, oltre a quelli impostati di default, un nuovo breakpoint e impostarne il valore a 480px.


In questo modo hai 3 breakpoint che configurano 3 diversi intervalli: il primo intervallo comprende tutte le risoluzioni superiori a quella del Modello attualmente selezionato; il secondo intervallo comprende le risoluzioni incluse tra quelle del brekpoint impostato manualmente e quella del Modello attualmente selezionato; il terzo intervallo, infine, comprende tutte le risoluzioni inferiori al breakpoint impostato manualmente.


Per la visualizzazione "Desktop", corrispondente al primo intervallo, viene automaticamente proposto il Progetto Corrente e non devi fare più nulla. Per le altre visualizzazioni, invece, devi impostare il collegamento alle versioni del Sito più adeguate:

  • Nell'Elenco dei breakpoint seleziona la "Visualizzazione 2" corrispondente al secondo intervallo e clicca sul pulsante Modifica per richiamare la finestra Impostazioni Breakpoint.
  • Nel campo URL per questo Breakpoint specifica la URL del Sito preparato per la visualizzazione su Tablet: per esempio, /tablet, se prevedi di pubblicarlo nella sotto-cartella "tablet" della cartella principale su Server.
  • Ripeti le stesse operazioni anche per la visualizzazione "Smartphone" corrispondente al terzo intervallo, collegandolo alla URL relativa: per esempio, /smartphone, se prevedi di pubblicare la versione Smartphone del Sito nella sotto-cartella "smartphone" della cartella principale su Server.


A questo punto il Sito è predisposto per il reindirizzamento in base alla risoluzione del dispositivo rilevata ma mancano ancora i Siti relativi alle versioni Tablet e Smartphone.

  • Per procedere più rapidamente alla creazione del Sito per la versione Tablet, crea una copia del Sito Desktop: clicca su Home > Apri progetto e nella finestra Modifica un Progetto già esistente seleziona il Progetto del Sito Desktop e clicca sul pulsante Duplica. Clicca poi sul pulsante Rinomina per modificare il nome del nuovo Progetto.
  • Apri la copia del Progetto e procedi apportando tutte le modifiche necessarie al Modello e ai contenuti.
  • Vai al Passo 1 - Impostazioni > Pagina di ingresso e disattiva l'opzione Attiva Pagina di Ingresso.
  • Terminato il Progetto della versione Tablet del Sito, ripeti la stessa procedura per predisporre anche il Progetto della versione Smartphone.


Infine, per la pubblicazione su Server dei Siti realizzati devi procedere in questo modo:

  • Pubblicazione della versione Desktop del Sito: la versione Desktop del Sito è quella a cui è associata la Pagina di ingresso. Procedendo alla pubblicazione verrà creato un file index.html, corrispondente alla Pagina di ingresso, e salvato nella cartella di pubblicazione. Per rispettare le URL impostate per le altre versioni dei Siti, devi creare su Server le sottocartelle previste: "tablet" e "smartphone".

Portato a termine questo passaggio, la versione Desktop del Sito sarà online e nella Pagina di ingresso sarà attivo il codice che rileva la risoluzione del Browser e imposta di conseguenza il reindirizzamento alle altre versioni del Sito.

  • Pubblicazione della versione Tablet del Sito: perché il reindirizzamento presente nella Pagina di ingresso alla versione Tablet del Sito funzioni, pubblica il Progetto nella sotto-cartella "tablet" creata.
  • Pubblicazione della versione Smartphone del Sito: analogamente, perché il reindirizzamento presente nella Pagina di ingresso alla versione Smartphone del Sito funzioni, pubblica il Progetto nella sotto-cartella "smartphone" creata.