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 caratteristiche di base di Zero Block sono state esaminate nella prima parte della guida.
Sei qui!
Scorri in basso per leggere
Introduzione ai contenitori
Zero Block ha due spazi di lavoro chiamati contenitori. L'area della griglia è chiamata contenitore della griglia, mentre il contenitore della finestra è un'area che indica i confini dello schermo del browser.
Il contenitore della griglia e la sua posizione sull'asse X
Il Contenitore griglia è l'area di lavoro principale. Ha la stessa griglia di Tilda, 1200 px. Se si posizionano elementi all'interno del Grid Container, questi si troveranno all'interno della griglia a dodici colonne, indipendentemente dalle dimensioni dello schermo.
Sull'asse X, il Grid Container è sempre centrato.
Sull'asse X, il Grid Container è 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, ma rimane fissa e centrata.
È possibile impostare l'altezza del Grid Container nelle Impostazioni Artboard o trascinando il contenitore verso l'alto/il basso con il mouse. È possibile impostare un'unica altezza del Grid Container per ogni risoluzione. L'altezza del contenitore di griglia corrisponde all'altezza del blocco.
È possibile impostare l'altezza del Grid Container nelle Impostazioni Artboard o trascinando il contenitore verso l'alto/il basso con il mouse. È possibile impostare un'unica altezza del Grid Container per ogni risoluzione. L'altezza del contenitore di griglia corrisponde all'altezza del blocco.
Posizione dei contenitori l'uno rispetto all'altro sull'asse Y
Se si desidera che un sito Zero Block occupi sempre il 100% dell'altezza dello schermo, è necessario impostare l'altezza del Contenitore finestra su un'altezza diversa da quella del Contenitore griglia. È quindi necessario impostare l'altezza del Contenitore finestra al 100% nelle Impostazioni del pannello di disegno.
Successivamente, selezionare l'allineamento del contenitore della griglia sullo schermo: Superiore, Centrale, Inferiore o Allungato. Per impostazione predefinita, è centrato.
Come cambiare il contenitore e l'origine di un elemento
Come cambiare il contenitore
Per impostazione predefinita, tutti gli elementi sono collegati al contenitore della griglia e l'origine si trova nell'angolo superiore sinistro.
A volte è necessario fissare un elemento non alla griglia, ma allo schermo. Ad esempio, si desidera che il logo sia fisso nell'angolo superiore sinistro su tutte le schermate.
A tale scopo, aprire il pannello Impostazioni dell'elemento e cambiare il tipo di contenitore in Contenitore finestra. L'origine si sposterà nell'angolo superiore sinistro del contenitore Finestra.
A tale scopo, aprire il pannello Impostazioni dell'elemento e cambiare il tipo di contenitore in Contenitore finestra. L'origine si sposterà nell'angolo superiore sinistro del contenitore Finestra.
Ora il logo si trova nell'angolo superiore sinistro di qualsiasi schermata.
Se si desidera fissare un elemento, ad esempio, all'angolo superiore destro, è possibile utilizzare lo stesso metodo: selezionare "Contenitore finestra" e impostare l'origine delle coordinate dell'elemento come segue: X-destra, Y-alto.
Coordinate dell'elemento
Ogni elemento dell'area di lavoro ha le proprie coordinate che indicano la sua posizione rispetto all'origine sull'asse X e sull'asse Y.
Selezionate un elemento, aprite il pannello Impostazioni premendo il tasto Tab e vedrete le coordinate dell'elemento nella parte superiore del pannello.
Selezionate un elemento, aprite il pannello Impostazioni premendo il tasto Tab e vedrete le coordinate dell'elemento nella parte superiore del pannello.
L'origine predefinita di tutti gli elementi è nell'angolo superiore sinistro del contenitore della griglia. Ma può essere spostata e posizionata in uno dei nove punti del rettangolo: in alto a destra, in basso a sinistra, ecc.
Per modificare la posizione dell'origine, aprire il pannello +Contenitore (per impostazione predefinita, è ridotto a icona).
Se si imposta l'origine su "Centro centro", sarà più facile creare una versione adattabile a schermi diversi.
Come creare elementi fluidi
Abbiamo previsto che le dimensioni degli elementi possano essere impostate anche in percentuale. In questo modo, è possibile creare elementi "fluidi" che cambiano dimensione a seconda della finestra del browser.
Ad esempio, si desidera che metà dello schermo sia sempre gialla. A tale scopo, aggiungete una forma e aprite il pannello Impostazioni dell'elemento. Impostate il tipo di contenitore su Contenitore finestra, cambiate le unità di misura per la larghezza e l'altezza in percentuale anziché in pixel, impostate la larghezza dello schermo al 50% e l'altezza dello schermo al 100%. È anche possibile impostare i valori degli assi in percentuale. Se si desidera che l'elemento occupi sempre la metà destra dello schermo, impostare il valore dell'asse X su 50%.
Ad esempio, si desidera che metà dello schermo sia sempre gialla. A tale scopo, aggiungete una forma e aprite il pannello Impostazioni dell'elemento. Impostate il tipo di contenitore su Contenitore finestra, cambiate le unità di misura per la larghezza e l'altezza in percentuale anziché in pixel, impostate la larghezza dello schermo al 50% e l'altezza dello schermo al 100%. È anche possibile impostare i valori degli assi in percentuale. Se si desidera che l'elemento occupi sempre la metà destra dello schermo, impostare 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-Finestra, larghezza-50%, altezza-100%, spostamento asse X-50%.
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 verso il basso è 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 verso il basso è fissa nella parte inferiore dello schermo.
1
Caricare un'immagine di sfondo nelle Impostazioni Artboard e impostare l'altezza del contenitore della finestra al 100%.
2
Impostare l'origine per il titolo, il sottotitolo e il pulsante su "Centro" e "Centro". Se necessario, specificare anche l'offset dell'asse Y.
3
Impostare il contenitore della freccia su Contenitore finestra, impostare l'origine su "Centro" e "Fondo" e spostarla di 70px verso l'alto. In questo modo, il pulsante sarà sempre 70px più in alto rispetto all'angolo inferiore della finestra del browser.
Vediamo cosa abbiamo: l'immagine di sfondo occupa l'intero schermo; il titolo, il testo e il pulsante sono centrati; la freccia è in basso.
Ridimensionamento degli elementi per adattarli alla larghezza dello schermo
Per impostazione predefinita, tutti gli elementi sono collegati al contenitore Griglia. Si tratta di 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 Scala automatica, è possibile scalare tutti gli elementi che appartengono al contenitore Griglia in proporzione alla larghezza dello schermo o del browser. Il contenitore Griglia non occuperà una larghezza fissa di 1200 pixel, ma si estenderà all'intera larghezza dello schermo. Tutti gli elementi aggiunti saranno ingranditi in proporzione per occupare l'intero schermo.
Per attivare il ridimensionamento automatico, aprire le Impostazioni Artboard e trovare l'opzione Scala contenitore griglia. Selezionare l'opzione Scala automatica alla larghezza della finestra e salvare le modifiche.
Con Scala automatica, è possibile scalare tutti gli elementi che appartengono al contenitore Griglia in proporzione alla larghezza dello schermo o del browser. Il contenitore Griglia non occuperà una larghezza fissa di 1200 pixel, ma si estenderà all'intera larghezza dello schermo. Tutti gli elementi aggiunti saranno ingranditi in proporzione per occupare l'intero schermo.
Per attivare il ridimensionamento automatico, aprire le Impostazioni Artboard e trovare l'opzione Scala contenitore griglia. Selezionare l'opzione Scala automatica alla larghezza della finestra e salvare le modifiche.
Questa impostazione adatta il design del sito web a qualsiasi risoluzione, compresi gli schermi HD. L'opzione consente di evitare inutili spazi vuoti su schermi ad alta risoluzione e di velocizzare il flusso di lavoro di progettazione: non si dovrà perdere tempo con il layout adattivo.
Se necessario, è possibile impostare il ridimensionamento automatico per tutti i tipi di schermo o, ad esempio, solo per i dispositivi mobili, impostando solo un certo intervallo di larghezza dello schermo. Il contenitore della versione desktop si ingrandisce da 1200px a 1920, 4K o addirittura 6K. La versione mobile si ingrandisce da 320px.
L'altezza del blocco sarà dinamica: cambierà in proporzione alla larghezza quando si ridimensiona il blocco.
Se necessario, è possibile impostare il ridimensionamento automatico per tutti i tipi di schermo o, ad esempio, solo per i dispositivi mobili, impostando solo un certo intervallo di larghezza dello schermo. Il contenitore della versione desktop si ingrandisce da 1200px a 1920, 4K o addirittura 6K. La versione mobile si ingrandisce da 320px.
L'altezza del blocco sarà dinamica: cambierà in proporzione alla larghezza quando si ridimensiona il blocco.
Nota importante: questa opzione funziona solo per gli elementi collegati al contenitore Griglia e non influisce sugli elementi collegati al contenitore Finestra.
Alcune caratteristiche del ridimensionamento automatico
Pulsanti: Per mantenere il pulsante alla distanza desiderata dai bordi della finestra del browser, ma senza ridimensionarlo a risoluzioni diverse, impostatene le coordinate in Contenitore finestra. Usare il binding a contenitori diversi per scalare alcuni elementi all'interno dello stesso blocco e per lasciare alcuni elementi a una distanza fissa dai bordi del browser, ma senza ridimensionarli.
Immagini: Fate attenzione quando caricate le immagini: devono essere delle dimensioni giuste, in modo da non perdere qualità quando vengono ridimensionate per schermi più grandi.
Utilizzate immagini vettoriali in formato .svg per le icone e caricate immagini di sfondo e foto più grandi del necessario. Su Tilda, quando si carica un'immagine di grandi dimensioni, questa viene ridimensionata per impostazione predefinita a 1680 pixel di larghezza, ma se si fa clic sull'icona dell'ingranaggio durante il caricamento, si ottiene l'opzione di caricare un'immagine di 1920px di larghezza. Attivare l'interruttore "Abilita il caricamento di immagini di 1920px" e caricare i file. Non è possibile caricare immagini di dimensioni superiori a 1920px, poiché tali dimensioni influiscono sulle prestazioni del browser e sulla velocità di caricamento del sito web.
Immagini: Fate attenzione quando caricate le immagini: devono essere delle dimensioni giuste, in modo da non perdere qualità quando vengono ridimensionate per schermi più grandi.
Utilizzate immagini vettoriali in formato .svg per le icone e caricate immagini di sfondo e foto più grandi del necessario. Su Tilda, quando si carica un'immagine di grandi dimensioni, questa viene ridimensionata per impostazione predefinita a 1680 pixel di larghezza, ma se si fa clic sull'icona dell'ingranaggio durante il caricamento, si ottiene l'opzione di caricare un'immagine di 1920px di larghezza. Attivare l'interruttore "Abilita il caricamento di immagini di 1920px" e caricare i file. Non è possibile caricare immagini di dimensioni superiori a 1920px, poiché tali dimensioni influiscono sulle prestazioni del browser e sulla velocità di caricamento del sito web.
