The second part of the guide is dedicated to more complex Zero Block settings related to responsive web design. The main settings and basic features of Zero Block were reviewed in the first part of the guide.
Zero Block has two workspaces that are called containers. The grid area is called the Grid Container, while the Window Container is an area that indicates the boundaries of the browser screen.
The Grid Container and its position on the X-axis
The Grid Container is the main workspace. It has the same grid as Tilda. If you place elements inside the Grid Container, they will be inside the twelve-column grid regardless of the screen size.
On the X-axis, the Grid Container is always centered.
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, 320px, 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.
Containers' position to each other on the Y-axis
If you want a Zero Block to always occupy 100% of the screen height, you need to set the Window Container's height to a different one than the Grid Container's. So, you need to set the Window Container's height to 100% in the Artboard Settings.
After that, select the Grid Container's alignment on the screen: Top, Center, Bottom, or Stretch. It's centered by default.
How to change the container and origin for an element
How to change the container
By default, all elements are attached to the Grid Container and the origin is in the upper left corner.
Sometimes, you need to attach an element not to the grid but to the screen. For example, you want the logo to be fixed in the upper left corner on all screens.
To do this, open the Settings panel of the element and change the container type to Window Container. The origin will shift to the top left corner of the Window Container.
Now the logo will be in the upper left corner of any screen.
If you want to attach an element, for example, to the upper right corner, you can use the same method: select "Window Container" and set the origin of element coordinates as follows: X—right, Y—top.
Each element in the workspace has its own coordinates that indicate its position to the origin on the X-axis and the Y-axis.
Select an element, open the Settings panel by pressing the Tab key, and you will see the element's coordinates at the very top of the panel.
The default origin of all elements is in the upper left corner of the Grid Container. But it can be moved and placed in one of the nine points of the rectangle: right, top, bottom left, etc.
To change the origin's location, open the +Container panel (by default, it's minimized).
If you set the origin to "Center Center," it will make it easier for you to create an adaptive version for different screens.
How to create fluid elements
We provided for the elements' size to be also set in percent. So, you can create "fluid" elements that change size depending on the browser window.
For example, you would like half of the screen to always be yellow. To do this, add a shape and open the Settings panel of the element. Set the container type to Window Container, change the units of measure for width and height to percent instead of pixels, set the screen width to 50% and the screen height to 100%. You can also set axis values in percent. If you want the element to always occupy the right half of the screen, set the X-axis value to 50%.
The video shows that the right side of the block always occupies half of the screen.
The settings of the yellow rectangle: Container—Window Container, width—50%, height—100%, X-axis offset—50%.
Scaling elements to fit the width of the screen
By default, all elements are attached to a Grid container. This is a rectangle with a width of 1200 pixels on the desktop. It is always centered on the screen and has the same size, regardless of display width.
With Auto Scale, you can scale all elements that belong to the Grid container in proportion to the width of the screen or browser. The Grid container will not occupy a fixed width of 1200 pixels, but will stretch to the full width of the screen. All added elements will be proportionally enlarged to take up the entire screen.
To enable automatic scaling, open the artboard settings and find the Scale Grid Container option. Select the Autoscale to Window Width option and save your changes.
This setting will adapt the site 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 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 increases in size from 320px.
The block height will be dynamic: it will change in proportion to the width when you scale the block.
Important note: This option works only for elements that are attached to a Grid container and will not affect items that are attached to a Window container.
Some features of Automatic Scaling
Buttons: To keep the button at the desired distance from the borders of the browser window, but not to scale at different resolutions, set coordinates for it in Window Container. Use binding to different containers to scale some elements within the same block, and to leave some elements with a fixed distance from the browser edges, but without resizing.
Images: Be careful when uploading images: they should be the right size so that they don't lose quality when scaled for larger screens.
Use vector images in .svg format for icons, and load background images and photos with reserve. When you upload a large image, its width is resized to 1680 pixels by default, but if you click on the gear icon when uploading, you get the option to upload a 1920px large-side image. Toggle the "Allow to upload up to 1920px" toggle switch and upload the files. Images larger than 1920px cannot be uploaded because that size will affect browser performance and website loading speed.
Example: How to create a fullscreen cover
Let's try to create a cover with the following features:
— The background image occupies the whole screen. — Headline, subhead, and button are always centered. — The down arrow is fixed at the bottom of the screen.
Upload a background image in the Artboard Settings and set the Window Container Height to 100%.
Set the origin for the headline, subhead, and button to "Center" and "Center." If necessary, specify the Y-axis offset as well.
Set the arrow's container to Window Container, set its origin to "Center" and "Bottom," and move it 70px up. This way, the button will always be 70px higher than the bottom corner of the browser window.
Let's look at what we've got: the background image occupies the whole screen; the headline, text, and button are centered; the arrow is at the bottom.