Zero Block: Design reattivo

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

The same happens with the versions for different devices: when you switch between screen types, the width of the Grid Container becomes 980, 640, 480, 360px, it remains fixed and centered.

You can set the Grid Container's height in the Artboard Settings or by dragging the container up/down with your mouse. You can set a unique Grid Container's height for each resolution. The Grid Container's height is the block's height.

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.

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.

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.

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.

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

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

Il video mostra che il lato destro del blocco occupa sempre metà dello schermo.

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.

Vediamo cosa abbiamo: l'immagine di sfondo occupa l'intero schermo; il titolo, il testo e il pulsante sono centrati; la freccia è in basso.

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.

This setting will adapt the website design for any resolution, including HD screens. The option will help to avoid unnecessary empty space on high resolution screens, as well as speed up the design workflow — you won't have to waste time on the adaptive layout.

If necessary, you can set automatic scaling for all screen types or, e.g., only for mobile devices, by setting up only a certain screen width range. The container of the desktop version zooms from 1200px to 1920, 4K, or even 6K. The mobile version zooms from 360px.

The block height will be dynamic: it will change in proportion to the width when you scale the block.

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.