Zero Block: design reattivo
La seconda parte della guida è dedicata alle impostazioni più complesse di Zero Block relative al responsive web design. Le impostazioni principali e le funzionalità di base di Zero Block sono state esaminate nella prima parte della guida.
Tu sei qui!
Scorri verso il basso per leggere
Introduzione ai contenitori
Zero Block dispone di due aree di lavoro denominate contenitori. L'area della griglia è chiamata contenitore della griglia, mentre il contenitore della finestra è un'area che indica i confini della schermata del browser.
Il Grid Container e la sua posizione sull'asse X
Il contenitore Griglia è l'area di lavoro principale. Ha la stessa griglia di Tilda. Se si posizionano elementi all'interno del contenitore della griglia, questi si troveranno all'interno della griglia a dodici colonne indipendentemente dalle dimensioni dello schermo.
Sull'asse X, il contenitore della griglia è sempre centrato.
Sull'asse X, il contenitore della griglia è sempre centrato.
Lo stesso accade con le versioni per dispositivi diversi: quando si passa da un tipo di schermo all'altro, la larghezza del Grid Container diventa 980, 640, 480, 320px, rimane fissa e centrata.
Puoi impostare l'altezza del contenitore della griglia nelle impostazioni della tavola da disegno o trascinando il contenitore su/giù con il mouse. È possibile impostare l'altezza di un Grid Container univoco per ogni risoluzione. L'altezza del Grid Container è l'altezza del blocco.
Puoi impostare l'altezza del contenitore della griglia nelle impostazioni della tavola da disegno o trascinando il contenitore su/giù con il mouse. È possibile impostare l'altezza di un Grid Container univoco per ogni risoluzione. L'altezza del Grid Container è l'altezza del blocco.
Posizione reciproca dei contenitori sull'asse Y
Se si desidera che un Zero Block occupi sempre il 100% dell'altezza dello schermo, è necessario impostare l'altezza del contenitore finestra su una diversa da quella del contenitore griglia. Quindi, è necessario impostare l'altezza del contenitore finestra al 100% nelle impostazioni della tavola da disegno.
Dopodiché, seleziona l'allineamento del Grid Container sullo schermo: Top, Center, Bottom o Stretch. È centrato per impostazione predefinita.
Come modificare il contenitore e l'origine di un elemento
Come cambiare il contenitore
Per impostazione predefinita, tutti gli elementi sono collegati al Grid Container e l'origine è nell'angolo in alto a sinistra.
A volte è necessario allegare un elemento non alla griglia ma allo schermo. Ad esempio, vuoi che il logo sia fisso nell'angolo in alto a sinistra su tutti gli schermi.
Per fare ciò, apri il pannello Impostazioni dell'elemento e modifica il tipo di contenitore in Contenitore finestra. L'origine si sposterà nell'angolo in alto a sinistra del Window Container.
Per fare ciò, apri il pannello Impostazioni dell'elemento e modifica il tipo di contenitore in Contenitore finestra. L'origine si sposterà nell'angolo in alto a sinistra del Window Container.
Ora il logo sarà nell'angolo in alto a sinistra di qualsiasi schermata.
Se si desidera collegare un elemento, ad esempio, all'angolo in alto a destra, è possibile utilizzare lo stesso metodo: selezionare "Window Container" e impostare l'origine delle coordinate dell'elemento come segue: X-destra, Y-top.
Coordinate dell'elemento
Ogni elemento nell'area di lavoro ha le proprie coordinate che indicano la sua posizione rispetto all'origine sull'asse X e sull'asse Y.
Seleziona un elemento, apri il pannello Impostazioni premendo il tasto Tab e vedrai le coordinate dell'elemento nella parte superiore del pannello.
Seleziona un elemento, apri il pannello Impostazioni premendo il tasto Tab e vedrai le coordinate dell'elemento nella parte superiore del pannello.
L'origine predefinita di tutti gli elementi è nell'angolo in alto a sinistra del Grid Container. Ma può essere spostato e posizionato in uno dei nove punti del rettangolo: a destra, in alto, in basso a sinistra, ecc.
Per modificare la posizione dell'origine, apri il pannello +Contenitore (per impostazione predefinita, è ridotto a icona).
Se si imposta l'origine su "Center Center", sarà più facile creare una versione adattiva per schermi diversi.
Come creare elementi fluidi
Abbiamo previsto che anche la dimensione degli elementi fosse impostata in percentuale. Quindi, puoi creare elementi "fluidi" che cambiano dimensione a seconda della finestra del browser.
Ad esempio, vorresti che metà dello schermo fosse sempre gialla. Per fare ciò, aggiungi una forma e apri il pannello Impostazioni dell'elemento. Imposta il tipo di contenitore su Contenitore finestra, modifica le unità di misura per larghezza e altezza in percentuale anziché in pixel, imposta la larghezza dello schermo su 50% e l'altezza dello schermo su 100%. È inoltre possibile impostare i valori degli assi in percentuale. Se vuoi che l'elemento occupi sempre la metà destra dello schermo, imposta il valore dell'asse X su 50%.
Ad esempio, vorresti che metà dello schermo fosse sempre gialla. Per fare ciò, aggiungi una forma e apri il pannello Impostazioni dell'elemento. Imposta il tipo di contenitore su Contenitore finestra, modifica le unità di misura per larghezza e altezza in percentuale anziché in pixel, imposta la larghezza dello schermo su 50% e l'altezza dello schermo su 100%. È inoltre possibile impostare i valori degli assi in percentuale. Se vuoi che l'elemento occupi sempre la metà destra dello schermo, imposta il valore dell'asse X su 50%.
Il video mostra che il lato destro del blocco occupa sempre metà dello schermo.
Le impostazioni del rettangolo giallo: Contenitore—Contenitore finestra, larghezza—50%, altezza—100%, offset asse X—50%.
Elementi di ridimensionamento per adattarsi alla larghezza dello schermo
Per impostazione predefinita, tutti gli elementi sono collegati a un contenitore Grid. Questo è un rettangolo con una larghezza di 1200 pixel sul desktop. È sempre centrato sullo schermo e ha le stesse dimensioni, indipendentemente dalla larghezza del display.
Con Auto Scale, puoi ridimensionare tutti gli elementi che appartengono al contenitore Grid in proporzione alla larghezza dello schermo o del browser. Il contenitore Grid non occuperà una larghezza fissa di 1200 pixel, ma si estenderà per l'intera larghezza dello schermo. Tutti gli elementi aggiunti verranno ingranditi proporzionalmente per occupare l'intero schermo.
Per abilitare il ridimensionamento automatico, apri le impostazioni della tavola da disegno e trova l'opzione Ridimensiona contenitore griglia. Seleziona l'opzione Ridimensiona automaticamente alla larghezza della finestra e salva le modifiche.
Con Auto Scale, puoi ridimensionare tutti gli elementi che appartengono al contenitore Grid in proporzione alla larghezza dello schermo o del browser. Il contenitore Grid non occuperà una larghezza fissa di 1200 pixel, ma si estenderà per l'intera larghezza dello schermo. Tutti gli elementi aggiunti verranno ingranditi proporzionalmente per occupare l'intero schermo.
Per abilitare il ridimensionamento automatico, apri le impostazioni della tavola da disegno e trova l'opzione Ridimensiona contenitore griglia. Seleziona l'opzione Ridimensiona automaticamente alla larghezza della finestra e salva le modifiche.
Questa impostazione adatterà il design del sito a qualsiasi risoluzione, inclusi gli schermi HD. L'opzione aiuterà a evitare inutili spazi vuoti su schermi ad alta risoluzione, oltre a velocizzare il flusso di lavoro di progettazione: non dovrai perdere tempo con il layout adattivo.
Se necessario, è possibile impostare il ridimensionamento automatico per tutti i tipi di schermo, ad esempio solo per i dispositivi mobili, impostando solo un determinato intervallo di larghezza dello schermo. Il contenitore della versione desktop ingrandisce da 1200px a 1920, 4K o addirittura 6K. La versione mobile aumenta di dimensioni da 320px.
L'altezza del blocco sarà dinamica: cambierà in proporzione alla larghezza quando scalerai il blocco.
Se necessario, è possibile impostare il ridimensionamento automatico per tutti i tipi di schermo, ad esempio solo per i dispositivi mobili, impostando solo un determinato intervallo di larghezza dello schermo. Il contenitore della versione desktop ingrandisce da 1200px a 1920, 4K o addirittura 6K. La versione mobile aumenta di dimensioni da 320px.
L'altezza del blocco sarà dinamica: cambierà in proporzione alla larghezza quando scalerai il blocco.
Nota importante: Questa opzione funziona solo per gli elementi collegati a un contenitore Grid e non influisce sugli elementi collegati a un contenitore Window.
Alcune funzionalità del ridimensionamento automatico
Pulsanti: Per mantenere il pulsante alla distanza desiderata dai bordi della finestra del browser, ma non per ridimensionarlo a risoluzioni diverse, impostare le coordinate per esso in Contenitore finestra. Usa l'associazione a contenitori diversi per ridimensionare alcuni elementi all'interno dello stesso blocco e per lasciare alcuni elementi con una distanza fissa dai bordi del browser, ma senza ridimensionarli.
Immagini: Fai attenzione quando carichi le immagini: dovrebbero essere della giusta dimensione in modo che non perdano qualità quando vengono ridimensionate per schermi più grandi.
Usa immagini vettoriali in formato .svg per le icone e carica immagini e foto di sfondo con riserva. Quando carichi un'immagine di grandi dimensioni, la sua larghezza viene ridimensionata a 1680 pixel per impostazione predefinita, ma se fai clic sull'icona a forma di ingranaggio durante il caricamento, hai la possibilità di caricare un'immagine di 1920 px di grandi dimensioni. Attiva o disattiva l'interruttore "Consenti di caricare fino a 1920px" e carica i file. Le immagini più grandi di 1920px non possono essere caricate perché tali dimensioni influiscono sulle prestazioni del browser e sulla velocità di caricamento del sito web.
Immagini: Fai attenzione quando carichi le immagini: dovrebbero essere della giusta dimensione in modo che non perdano qualità quando vengono ridimensionate per schermi più grandi.
Usa immagini vettoriali in formato .svg per le icone e carica immagini e foto di sfondo con riserva. Quando carichi un'immagine di grandi dimensioni, la sua larghezza viene ridimensionata a 1680 pixel per impostazione predefinita, ma se fai clic sull'icona a forma di ingranaggio durante il caricamento, hai la possibilità di caricare un'immagine di 1920 px di grandi dimensioni. Attiva o disattiva l'interruttore "Consenti di caricare fino a 1920px" e carica i file. Le immagini più grandi di 1920px non possono essere caricate perché tali dimensioni influiscono sulle prestazioni del browser e sulla velocità di caricamento del sito web.
Esempio: come creare una copertina a schermo intero
Proviamo a creare una copertina con le seguenti caratteristiche:
— L'immagine di sfondo occupa l'intero schermo.
— Il titolo, il sottotitolo e il pulsante sono sempre centrati.
— La freccia giù è fissa nella parte inferiore dello schermo.
— L'immagine di sfondo occupa l'intero schermo.
— Il titolo, il sottotitolo e il pulsante sono sempre centrati.
— La freccia giù è fissa nella parte inferiore dello schermo.
1
Carica un'immagine di sfondo nelle Impostazioni della tavola da disegno e imposta l'altezza del contenitore della finestra su 100%.
2
Imposta l'origine del titolo, del sottotitolo e del pulsante su "Centro" e "Centro". Se necessario, specificate anche l'offset dell'asse Y.
3
Imposta il contenitore della freccia su Contenitore finestra, imposta la sua origine su "Centro" e "Inferiore" e spostalo di 70 px verso l'alto. In questo modo, il pulsante sarà sempre 70px più alto rispetto all'angolo inferiore della finestra del browser.
Diamo un'occhiata a quello che abbiamo: l'immagine di sfondo occupa l'intero schermo; il titolo, il testo e il pulsante sono centrati; la freccia è in basso.
