Zero Block: Responsive Design
La deuxième partie du guide est consacrée aux paramètres plus complexes de Zero Block liés au responsive web design. Les principaux paramètres et les fonctionnalités de base de Zero Block ont été passés en revue dans la première partie du guide.
Vous êtes ici !
Faites défiler vers le bas pour lire
Introduction aux conteneurs
Zero Block possède deux espaces de travail appelés conteneurs. La zone de la 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 la grille et sa position sur l'axe X
Le conteneur de grille est l'espace de travail principal. Il a la même grille que Tilda, 1200 px. 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é.
Sur l'axe X, le conteneur de grille est toujours centré.
Il en va de même pour les versions destinées aux différents appareils : lorsque vous passez d'un type d'écran à l'autre, la largeur du conteneur de la grille devient 980, 640, 480, 320px, mais il reste fixe et centré.
Vous pouvez définir la hauteur du conteneur de la grille dans les paramètres de l'Artboard ou en faisant glisser le conteneur vers le haut ou vers le bas à l'aide de votre souris. Vous pouvez définir une hauteur de conteneur de grille unique pour chaque résolution. La hauteur du conteneur de grille correspond à la hauteur du bloc.
Vous pouvez définir la hauteur du conteneur de la grille dans les paramètres de l'Artboard ou en faisant glisser le conteneur vers le haut ou vers le bas à l'aide de votre souris. Vous pouvez définir une hauteur de conteneur de grille unique pour chaque résolution. La hauteur du conteneur de grille correspond à la hauteur du bloc.
Position des conteneurs les uns par rapport aux autres sur l'axe Y
Si vous souhaitez qu'une page Zero Block occupe toujours 100 % de la hauteur de l'écran, vous devez régler la hauteur du conteneur de fenêtre sur une valeur différente de celle du conteneur de grille. Vous devez donc régler la hauteur du conteneur de fenêtre sur 100 % dans les paramètres de l'artboard.
Sélectionnez ensuite l'alignement du conteneur de grille sur l'écran : Haut, Centre, Bas ou Étirer. Par défaut, le conteneur est centré.
Comment modifier le contenant et l'origine d'un élément ?
Comment changer le conteneur
Par défaut, tous les éléments sont attachés au conteneur de la grille 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 sur tous les écrans.
Pour ce faire, ouvrez le panneau Paramètres de l'élément et changez le type de conteneur en Conteneur de fenêtre. L'origine sera déplacée vers le coin supérieur gauche du conteneur de fenêtre.
Pour ce faire, ouvrez le panneau Paramètres de l'élément et changez le type de conteneur en Conteneur de fenêtre. L'origine sera déplacée vers le coin supérieur gauche du conteneur de fenêtre.
Le logo se trouve désormais dans le coin supérieur gauche de l'écran.
Si vous souhaitez attacher un élément, par exemple, au coin supérieur droit, vous pouvez utiliser la même méthode : sélectionnez "Window Container" et définissez l'origine des coordonnées de l'élément comme suit : X-droite, Y-haut.
Coordonnées de l'élément
Chaque élément de l'espace de travail possède 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.
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 conteneur de la grille. Mais elle peut être déplacée et placée à l'un des neuf points du rectangle : en haut à droite, en bas à gauche, etc.
Pour modifier l'emplacement de l'origine, ouvrez le panneau +Conteneur (par défaut, il est réduit).
Si vous définissez l'origine sur "Center Center", il vous sera plus facile de créer une version adaptative pour différents écrans.
Comment créer des éléments fluides
Nous avons prévu que la taille des éléments puisse également être définie en pourcentage. Vous pouvez ainsi créer des éléments "fluides" dont la taille change en fonction de la fenêtre du navigateur.
Par exemple, vous souhaitez 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, changez les unités de mesure pour la largeur et la hauteur en pourcentage au lieu de pixels, définissez la largeur de l'écran à 50 % et la hauteur de l'écran à 100 %. Vous pouvez également définir les valeurs des axes en pourcentage. Si vous souhaitez que l'élément occupe toujours la moitié droite de l'écran, fixez la valeur de l'axe X à 50 %.
Par exemple, vous souhaitez 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, changez les unités de mesure pour la largeur et la hauteur en pourcentage au lieu de pixels, définissez la largeur de l'écran à 50 % et la hauteur de l'écran à 100 %. Vous pouvez également définir les valeurs des axes en pourcentage. Si vous souhaitez que l'élément occupe toujours la moitié droite de l'écran, fixez la valeur de l'axe X à 50 %.
La vidéo montre que le côté droit du bloc occupe toujours la moitié de l'écran.
Les paramètres du rectangle jaune: Conteneur-fenêtre, largeur-50%, hauteur-100%, décalage de l'axe X-50%.
Exemple : Comment créer une couverture plein écran
Essayons de créer une couverture présentant les caractéristiques 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 au bas de l'écran.
- 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 au bas de l'écran.
1
Téléchargez une image d'arrière-plan dans les paramètres de l'artboard et réglez la hauteur du conteneur de la fenêtre sur 100 %.
2
Réglez l'origine du titre, du sous-titre et du bouton sur "Centre" et "Centre". Si nécessaire, spécifiez également le décalage de l'axe Y.
3
Réglez le conteneur de la flèche sur Window Container, réglez son origine sur "Center" et "Bottom", et déplacez-la de 70px vers le haut. De cette façon, le bouton sera toujours 70px plus haut que le coin inférieur de la fenêtre du navigateur.
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.
Mise à l'échelle des éléments pour les adapter à la largeur de l'écran
Par défaut, tous les éléments sont attachés au conteneur de la grille. 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.
Grâce à la fonction de mise à l'échelle automatique, vous pouvez mettre à l'échelle tous les éléments appartenant au conteneur Grid proportionnellement à la largeur de l'écran ou du navigateur. Le conteneur de la grille n'occupera pas une largeur fixe de 1200 pixels, mais s'étendra à toute la largeur de l'écran. Tous les éléments ajoutés seront proportionnellement agrandis pour occuper tout l'écran.
Pour activer la mise à l'échelle automatique, ouvrez les paramètres de l'Artboard et trouvez l'option Scale Grid Container (Mettre à l'échelle le conteneur de la grille). Sélectionnez l'option Autoscale to Window Width et enregistrez vos modifications.
Grâce à la fonction de mise à l'échelle automatique, vous pouvez mettre à l'échelle tous les éléments appartenant au conteneur Grid proportionnellement à la largeur de l'écran ou du navigateur. Le conteneur de la grille n'occupera pas une largeur fixe de 1200 pixels, mais s'étendra à toute la largeur de l'écran. Tous les éléments ajoutés seront proportionnellement agrandis pour occuper tout l'écran.
Pour activer la mise à l'échelle automatique, ouvrez les paramètres de l'Artboard et trouvez l'option Scale Grid Container (Mettre à l'échelle le conteneur de la grille). Sélectionnez l'option Autoscale to Window Width et enregistrez vos modifications.
Ce paramètre permet d'adapter la conception du site web à toutes les résolutions, y compris les écrans HD. Cette option permet d'éviter les espaces vides inutiles sur les écrans à haute résolution et d'accélérer le processus de conception : vous n'aurez pas à perdre de temps avec la mise en page adaptative.
Si nécessaire, vous pouvez définir une mise à l'échelle automatique pour tous les types d'écran ou, par exemple, uniquement pour les appareils mobiles, en ne définissant qu'une certaine plage de largeur d'écran. Le conteneur de la version de bureau passe de 1200 px à 1920, 4K ou même 6K. La version mobile passe de 320px à
. La hauteur du bloc sera dynamique : elle changera proportionnellement à la largeur lorsque vous mettrez le bloc à l'échelle.
Si nécessaire, vous pouvez définir une mise à l'échelle automatique pour tous les types d'écran ou, par exemple, uniquement pour les appareils mobiles, en ne définissant qu'une certaine plage de largeur d'écran. Le conteneur de la version de bureau passe de 1200 px à 1920, 4K ou même 6K. La version mobile passe de 320px à
. La hauteur du bloc sera dynamique : elle changera proportionnellement à la largeur lorsque vous mettrez le bloc à l'échelle.
Remarque importante : cette option ne fonctionne que pour les éléments attachés au conteneur de la grille et n'affecte pas les éléments attachés au conteneur de la fenêtre.
Quelques caractéristiques de la mise à l'échelle automatique
Boutons : Pour maintenir le bouton à la distance souhaitée des bords de la fenêtre du navigateur, mais sans le redimensionner à différentes résolutions, définissez ses coordonnées dans le conteneur de la fenêtre. Utilisez la liaison à différents conteneurs pour mettre à l'échelle certains éléments au sein d'un même bloc et pour laisser certains éléments à une distance fixe des bords du navigateur, mais sans les redimensionner.
Images : Faites attention lorsque vous téléchargez des images : elles doivent être de la bonne taille pour ne pas perdre en qualité lorsqu'elles sont mises à l'échelle pour des écrans plus grands.
Utilisez des images vectorielles au format .svg pour les icônes, et téléchargez des images d'arrière-plan et des photos plus grandes que ce dont vous avez besoin. Sur Tilda, lorsque vous téléchargez une grande image, elle est redimensionnée par défaut à 1680 pixels de large, mais si vous cliquez sur l'icône de l'engrenage lors du téléchargement, vous avez la possibilité de télécharger une image de 1920 pixels de large. Activez l'interrupteur "Activer le téléchargement d'images de 1920px de large" et téléchargez les fichiers. Les images de plus de 1920 px ne peuvent pas être téléchargées, car cette taille affecte les performances du navigateur et la vitesse de chargement du site web.
Images : Faites attention lorsque vous téléchargez des images : elles doivent être de la bonne taille pour ne pas perdre en qualité lorsqu'elles sont mises à l'échelle pour des écrans plus grands.
Utilisez des images vectorielles au format .svg pour les icônes, et téléchargez des images d'arrière-plan et des photos plus grandes que ce dont vous avez besoin. Sur Tilda, lorsque vous téléchargez une grande image, elle est redimensionnée par défaut à 1680 pixels de large, mais si vous cliquez sur l'icône de l'engrenage lors du téléchargement, vous avez la possibilité de télécharger une image de 1920 pixels de large. Activez l'interrupteur "Activer le téléchargement d'images de 1920px de large" et téléchargez les fichiers. Les images de plus de 1920 px ne peuvent pas être téléchargées, car cette taille affecte les performances du navigateur et la vitesse de chargement du site web.
