Zero Block : Conception réactive

Zero Block comporte deux espaces de travail appelés conteneurs. La zone de grille est appelée conteneur de grille, tandis que le conteneur de fenêtre est une zone qui indique les limites de l’écran du navigateur.

Le conteneur de grille est l’espace de travail principal. Il a la même grille que Tilda. Si vous placez des éléments à l’intérieur du conteneur de grille, ils seront à l’intérieur de la grille à douze colonnes, quelle que soit la taille de l’écran.

Sur l’axe X, le conteneur de grille est toujours centré.

La même chose se produit avec les versions pour différents appareils : lorsque vous basculez entre les types d'écran, la largeur du Grid Container devient 980, 640, 480, 320px, il reste fixe et centré.

Vous pouvez définir la hauteur du conteneur de grille dans les paramètres de la planche graphique ou en faisant glisser le conteneur vers le haut/bas avec votre souris. Vous pouvez définir la hauteur d'un Grid Container unique pour chaque résolution. La hauteur du Grid Container correspond à la hauteur du bloc.

Si vous souhaitez qu’un Zero Block occupe toujours 100% de la hauteur de l’écran, vous devez définir la hauteur du conteneur de fenêtre sur une hauteur différente de celle du conteneur de grille. Vous devez donc définir la hauteur du conteneur de fenêtre sur 100 % dans les paramètres du plan de travail.

Après cela, sélectionnez l'alignement du Grid Container sur l'écran : Top, Center, Bottom ou Stretch. Il est centré par défaut.

Par défaut, tous les éléments sont attachés au Grid Container et l'origine se trouve dans le coin supérieur gauche.

Parfois, vous devez attacher un élément non pas à la grille mais à l'écran. Par exemple, vous souhaitez que le logo soit fixé dans le coin supérieur gauche de tous les écrans.

Pour ce faire, ouvrez le panneau Paramètres de l'élément et modifiez le type de conteneur en Conteneur de fenêtre. L'origine se déplacera vers le coin supérieur gauche du conteneur de fenêtres.

Maintenant, le logo sera dans le coin supérieur gauche de n'importe quel écran.

Si vous souhaitez attacher un élément, par exemple, dans le coin supérieur droit, vous pouvez utiliser la même méthode : sélectionnez « Conteneur de fenêtre » et définissez l’origine des coordonnées de l’élément comme suit : X-droite, Y-haut.

Chaque élément de l'espace de travail a ses propres coordonnées qui indiquent sa position par rapport à l'origine sur l'axe X et l'axe Y.

Sélectionnez un élément, ouvrez le panneau Paramètres en appuyant sur la touche Tab, et vous verrez les coordonnées de l'élément tout en haut du panneau.

L'origine par défaut de tous les éléments se trouve dans le coin supérieur gauche du Grid Container. Mais il peut être déplacé et placé dans l'un des neuf points du rectangle : droite, haut, bas gauche, etc.

Pour modifier l'emplacement de l'origine, ouvrez le panneau +Container (par défaut, il est minimisé).

Nous avons prévu que la taille des éléments soit également définie en pourcentage. Ainsi, vous pouvez créer des éléments « fluides » qui changent de taille en fonction de la fenêtre du navigateur.

Par exemple, vous voudriez que la moitié de l'écran soit toujours jaune. Pour ce faire, ajoutez une forme et ouvrez le panneau Paramètres de l'élément. Définissez le type de conteneur sur Conteneur de fenêtre, modifiez les unités de mesure de la largeur et de la hauteur en pourcentage au lieu de pixels, définissez la largeur de l'écran sur 50 % et la hauteur de l'écran sur 100 %. Vous pouvez également définir des valeurs d'axe en pourcentage. Si vous souhaitez que l'élément occupe toujours la moitié droite de l'écran, définissez la valeur de l'axe X sur 50 %.

La vidéo montre que le côté droit du bloc occupe toujours la moitié de l'écran.

Par défaut, tous les éléments sont attachés à un conteneur Grid. Il s'agit d'un rectangle d'une largeur de 1200 pixels sur le bureau. Il est toujours centré sur l'écran et a la même taille, quelle que soit la largeur d'affichage.

Avec Auto Scale, vous pouvez mettre à l'échelle tous les éléments appartenant au conteneur Grid proportionnellement à la largeur de l'écran ou du navigateur. Le conteneur Grid n'occupera pas une largeur fixe de 1200 pixels, mais s'étendra sur toute la largeur de l'écran. Tous les éléments ajoutés seront agrandis proportionnellement pour occuper tout l'écran.

Pour activer la mise à l'échelle automatique, ouvrez les paramètres de la planche graphique et recherchez l'option Scale Grid Container. Sélectionnez l'option Autoscale to Window Width et enregistrez vos modifications.

Ce paramètre adaptera la conception du site à toutes les résolutions, y compris les écrans HD. L'option aidera à éviter les espaces vides inutiles sur les écrans haute résolution, ainsi qu'à accélérer le flux de travail de conception - vous n'aurez pas à perdre de temps sur la mise en page adaptative.

Si nécessaire, vous pouvez définir une mise à l'échelle automatique pour tous les types d'écran, par exemple uniquement pour les appareils mobiles, en configurant uniquement une certaine plage de largeur d'écran. Le conteneur de la version desktop zoome de 1200px à 1920, 4K voire 6K. La version mobile augmente en taille à partir de 320px.

La hauteur du bloc sera dynamique : elle changera proportionnellement à la largeur lorsque vous redimensionnerez le bloc.

Boutons: Pour conserver le bouton à la distance souhaitée des bordures de la fenêtre du navigateur, mais pas pour l’adapter à différentes résolutions, définissez ses coordonnées dans Conteneur de fenêtres. Utilisez la liaison à différents conteneurs pour mettre à l’échelle certains éléments dans le même bloc et pour laisser certains éléments à une distance fixe des bords du navigateur, mais sans redimensionnement.

Images: Soyez prudent lorsque vous téléchargez des images: elles doivent être de la bonne taille afin qu’elles ne perdent pas en qualité lorsqu’elles sont mises à l’échelle pour des écrans plus grands.

Utilisez des images vectorielles dans .svg format pour les icônes et chargez les images d’arrière-plan et les photos avec réserve. Lorsque vous téléchargez une grande image, sa largeur est redimensionnée à 1680 pixels par défaut, mais si vous cliquez sur l’icône d’engrenage lors du téléchargement, vous avez la possibilité de télécharger une image grand côté de 1920px. Basculez le bouton bascule « Autoriser à télécharger jusqu’à 1920px » et téléchargez les fichiers. Les images supérieures à 1920px ne peuvent pas être téléchargées car cette taille affectera les performances du navigateur et la vitesse de chargement du site Web.

Essayons de créer une couverture avec les fonctionnalités suivantes:

— L’image d’arrière-plan occupe tout l’écran.
— Le titre, le sous-titre et le bouton sont toujours centrés.
— La flèche vers le bas est fixée en bas de l’écran.

Regardons ce que nous avons : l'image de fond occupe tout l'écran ; le titre, le texte et le bouton sont centrés ; la flèche est en bas.