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