Finestra Impostazioni Responsive

Passo 4 - Pagine > Comandi Barra Strumenti e Griglia >

Finestra Impostazioni Responsive

Previous pageReturn to chapter overviewNext page

Attraverso i comandi di questa finestra, richiamata dal pulsante Responsive presente nella barra di strumenti della Griglia di impaginazione proposta nella finestra Creazione della Pagina, si gestisce il comportamento che i singoli Oggetti inseriti nella Pagina devono avere in funzione della risoluzione.

Per poter lavorare con le opzioni della finestra Impostazioni Responsive è necessario aver scelto di creare un Sito Responsive attivando l'omonima opzione presente nella finestra Risoluzioni e Responsive Design.

La finestra Impostazioni Responsive propone:

la Responsive Bar che ripropone tutti i breakpoint, e le relative Visualizzazioni, impostati nella finestra Risoluzioni e Responsive Design. È sufficiente cliccare su una Visualizzazione per selezionarla.
un breve punto elenco che ricorda, in base alla Visualizzazione selezionata, le operazioni che possono essere eseguite sulla Pagina;
una Griglia che riprende la configurazione della Pagina e su cui è possibile agire attraverso i comandi disponibili.

Selezionando sulla Responsive Bar la Visualizzazione Desktop, nella Griglia viene riproposta la configurazione impostata nella finestra Creazione della Pagina. Partendo da questa situazione, occorre definire quali cambiamenti devono essere apportati al layout di Pagina nel caso in cui questa venga visualizzata con una risoluzione inferiore, compresa nell'intervallo immediatamente successivo. Nello specifico le operazioni da fare sono:

1. Definire l'ordine di visualizzazione degli Oggetti.
2. Scegliere se e quali Oggetti nascondere.
3. Impostare le interruzioni di riga.

Eseguite queste operazioni sulla Griglia, occorre selezionare sulla Responsive Bar la Visualizzazione successiva: la configurazione rappresentata in Griglia viene aggiornata in base a quanto già impostato per la Visualizzazione Desktop e si può procedere a fare le modifiche al layout necessarie per definire come deve essere visualizzata la Pagina quando ha una risoluzione compresa nell'intervallo seguente. È possibile procedere in questo modo selezionando, una dopo l'altra, tutte le Visualizzazioni presenti fino ad arrivare all'ultima, la Visualizzazione Smartphone.

Per le Visualizzazioni intermedie non è più necessario impostare l'ordine degli Oggetti perchè viene ereditato da quanto configurato per la Visualizzazione Desktop.

Per la Visualizzazione Smartphone non è necessaria alcuna operazione perchè tutti gli Oggetti che non sono stati precedentemente nascosti vengono visualizzati in maniera completamente linearizzata, ovvero uno di seguito all'altro.

I comandi necessari per ridefinire il layout della Pagina e il comportamento degli Oggetti allo scattare dei diversi breakpoint sono organizzati nella Barra Strumenti disponibile sopra la Griglia:

Ordinamento

Avvia la modalità che consente di procedere all'ordinamento degli Oggetti inseriti nella Griglia.

Gli Oggetti inseriti nella Griglia sono già ordinati in automatico dal programma: il numero visualizzato nell'angolo inferiore destro ne indica la posizione nell'ordinamento. Per modificare l'ordinamento impostato di default occorre attivare la modalità Ordinamento e cliccare sugli Oggetti inseriti nella Griglia seguendo l'ordine secondo il quale si desidera vengano linearizzati, compatibilmente con le opzioni disponibili. Selezionato un Oggetto, infatti, vengono messi in evidenza con un bordo rosso tutti gli Oggetti che possono seguire nell'ordinamento: la scelta dell'Oggetto successivo, dunque, può essere effettuata solo tra quelli evidenziati.

Cliccando una seconda volta sull'Oggetto appena selezionato, si annulla l'operazione e si riparte nella procedura di ordinamento dalla posizione precedente.

In base a come gli Oggetti sono disposti nella Pagina (al numero di Celle che occupano e alla posizione che hanno rispetto ad altri Oggetti), man mano che si procede nell'ordinamento si possono configurare dei Blocchi di Oggetti. Ai fini della struttura di Pagina per i breakpoint successivi, un Blocco di Oggetti si comporta come se fosse un unico Oggetto. Per semplicità, i Blocchi di Oggetti vengono disegnati sulla Griglia non appena si creano e concorrono a determinare le possibilità di ordinamento successive.

Cliccando sul triangolino presente sul pulsante Ordinamento è possibile visualizzare un sottomenu con le seguenti voci:

Ordina tutti gli Oggetti dall'inizio: opzione attiva di default, prevede che il primo Oggetto su cui si clicca venga considerato come il primo dell'ordinamento. Occorre poi proseguire cliccando in ordine su tutti gli altri Oggetti.
Prosegui l'ordinamento da un Oggetto: richiede di selezionare l'Oggetto presente in Griglia da cui si vuole partire per procedere con l'ordinamento. Per tutti gli Oggetti precedenti a quello selezionato viene confermato l'ordinamento già impostato. Per tutti gli Oggetti successivi a quello selezionato, invece, occorre definire l'ordinamento cliccando su ciascuno di essi.

La procedura di ordinamento si conclude quando si giunge a selezionare l'ultimo Oggetto della Pagina. È anche possibile interrompre la procedura di ordinamento senza aver selezionato tutti gli Oggetti. Per far questo occorre utilizzare i  comandi del sottomenu:

Completa ordinamento: termina la procedura di ordinamento confermando quanto impostato.
Annulla ordinamento: termina la procedura di ordinamento annullando le modifiche effettuate e ripristinando l'ordinamento iniziale.

Per maggiori informazioni, vedere Come funziona il processo di ordinamento degli Oggetti.

Mostra/Nascondi Oggetto

Avvia la modalità in cui è possibile impostare come non visibili, o far tornare visibili, gli Oggetti che vengono selezionati all'interno della Griglia.

In questa modalità è sufficiente cliccare su un Oggetto per renderlo non visibile: l'Oggetto assumerà un aspetto diverso sulla Griglia ma manterrà la posizione nell'ordinamento, che rimane inalterato.

Rendere un Oggetto non visibile per un determinato breakpoint significa fare in modo che, quando la Pagina verrà visualizzata a risoluzioni inferiori, l'Oggetto in questione non verrà più visualizzato. In questi casi, tutti gli altri Oggetti visibili vengono ridisposti come se l'Oggetto nascosto non fosse più presente.

Un Oggetto impostato come non visibile ad un determinato breakpoint, non compare più nella Griglia di Pagina per i breakpoint inferiori successivi.

Conclusa la selezione degli Oggetti da rendere non visibili per il breakpoint su cui si sta lavorando, è sufficiente cliccare nuovamente sul pulsante Mostra/Nascondi Oggetto per confermare e uscire dalla modalità.  

Interruzione di Riga

Avvia la modalità in cui è possibile impostare le Interruzioni di Riga per fare in modo che un Oggetto o un Blocco, per risoluzioni inferiori al breakpoint a cui si sta lavorando, vada "a capo" e venga posizionato su una nuova riga della Griglia di impaginazione.

Avviata la modalità, sulla Griglia viene disegnato un tratteggio grigio in tutti i punti in cui è possibile inserire un'Interruzione di Riga. È sufficiente cliccare su un tratteggio per inserire un'Interruzione di Riga che, a questo punto, sarà disegnata in rosso. Cliccando una seconda volta su un'Interruzione di Riga già impostata la si rimuove.

Terminata l'impostazione delle Interruzioni di Riga, è sufficiente cliccare nuovamente sul pulsante Interruzione di Riga per confermare e uscire dalla modalità.

Per maggiori informazioni, vedere Come e perchè impostare le Interruzioni di Riga.

 


Best practice:

-

Come impostare una Pagina attraverso la Griglia di impaginazione

-

Come creare un Sito Web Responsive