Watch the video tutorial on how to use the Auto Layout feature in Tilda's Zero Block,
or read the detailed instructions with screenshots below.
or read the detailed instructions with screenshots below.
Auto Layout is a tool that allows you to create responsive layouts and effectively arrange elements within a group.
It's particularly useful for creating complex design elements like navigation menus, lists, buttons, cards, etc. No matter what changes you make to the content, the layout adapts automatically, reducing the need for manual adjustments.
It's particularly useful for creating complex design elements like navigation menus, lists, buttons, cards, etc. No matter what changes you make to the content, the layout adapts automatically, reducing the need for manual adjustments.
How to use Auto Layout
To enable Auto Layout, access the Group settings. Ensure that grouped elements are set as "Object," not "Logical" group. Once the "Object" option is selected under Group, the Auto Layout section will appear below.
In the Auto Layout section, choose "Auto" for the Flex setting. Enabling Auto Layout provides access to various settings that control how elements react to content or size changes and align within the group accordingly. Let's explore these settings and learn how to customize them.
Adjusting height and width of the container using the Hug setting
With Auto Layout enabled, there are two new Group settings that allow you to manage the width and height of the container with grouped elements.
By default, the Hug option is selected, which makes the group size flexible, adjusting it based on the size of the elements inside the container and the spacing between them.
If you manually resize the group or set a custom width or height, Hug will automatically switch to Fixed. The Fixed option means the group size is customized, and will remain unaffected even if you change the spacing between elements or their size.
By default, the Hug option is selected, which makes the group size flexible, adjusting it based on the size of the elements inside the container and the spacing between them.
If you manually resize the group or set a custom width or height, Hug will automatically switch to Fixed. The Fixed option means the group size is customized, and will remain unaffected even if you change the spacing between elements or their size.
You may notice that there is another Hug setting available. When enabled, it recalculates the width and height values and sets them to the minimum possible to snugly fit all elements, considering their size and the value set in the Gap setting (which controls spacing). If you resize the elements, Hug will automatically adjust the width or height accordingly.
Direction
The Direction setting controls the alignment of elements within the group. You have three options here: Horizontal, Vertical, and Wrap (move to the next row).
When the Horizontal direction is selected, all elements will be aligned along the X-axis. This is ideal for arranging elements in a row, like icons, menu items, or buttons.
When the Horizontal direction is selected, all elements will be aligned along the X-axis. This is ideal for arranging elements in a row, like icons, menu items, or buttons.
When the Vertical direction is set, all elements in the group will be aligned along the Y-axis. This is particularly useful when designing lists or card elements stacked one below the other.
When the Wrap direction is chosen, elements align in a row based on the container's width. If an element is too wide to fit, it will be moved to the next row. This can be especially useful for photo galleries, multi-line tag clouds, and for making websites responsive on different screen resolutions.
Gap
The Gap setting controls the spacing between elements within the group according to the chosen direction. For Horizontal alignment, it adjusts the X-axis gap, while for Vertical alignment, it changes the Y-axis gap. When the Wrap direction is set, you can specify gaps for both axes.
Note that if the Hug option is enabled for the chosen direction, adjusting Gap may affect the width or height of the container.
Note that if the Hug option is enabled for the chosen direction, adjusting Gap may affect the width or height of the container.
Align Elements
The Align Elements setting adjusts the alignment of elements within a group along the main axis—vertically or horizontally—based on the chosen direction.
For instance, when the Horizontal direction is selected, elements align vertically to the center, top, or bottom of the container. Conversely, if the Vertical direction chosen, elements align horizontally to the center, left, or right side of the container. However, if the Hug option is enabled and all elements have the same width or height, the alignment won't change.
For instance, when the Horizontal direction is selected, elements align vertically to the center, top, or bottom of the container. Conversely, if the Vertical direction chosen, elements align horizontally to the center, left, or right side of the container. However, if the Hug option is enabled and all elements have the same width or height, the alignment won't change.
Justify Content
The Justify Content setting provides alternative alignment options, using a different axis than in Align Elements. This setting is available only when the Hug option is not selected for the width or height along the axis.
In addition to basic center or side alignment, there are also smart alignment options available:
The Space Between option evenly distributes elements within the group, with no white space between them and the container.
The Space Around distributes elements evenly within the group, ensuring that the distance from the elements to the container is half the spacing between elements.
The Space Evenly option distributes the elements evenly within the group, ensuring that the distance from the elements to the container is equal to the spacing between elements.
In addition to basic center or side alignment, there are also smart alignment options available:
The Space Between option evenly distributes elements within the group, with no white space between them and the container.
The Space Around distributes elements evenly within the group, ensuring that the distance from the elements to the container is half the spacing between elements.
The Space Evenly option distributes the elements evenly within the group, ensuring that the distance from the elements to the container is equal to the spacing between elements.
Align Content
The Align Content setting arranges elements within the group and is available only when the Wrap direction is selected, and there are multiple rows of content. It vertically aligns all rows to the container unless Hug is selected.
With Align Content, you can align rows as usual to the center or sides. Similar to the previous setting, you can also choose one of the smart alignment options—Space Between (which evenly distributes elements without any spacing from the container), Space Around (which evenly distributes elements with a distance from the container equal to half the spacing between elements), and Space Evenly (which evenly distributes elements with the distance from the container equal to the spacing between elements).
With Align Content, you can align rows as usual to the center or sides. Similar to the previous setting, you can also choose one of the smart alignment options—Space Between (which evenly distributes elements without any spacing from the container), Space Around (which evenly distributes elements with a distance from the container equal to half the spacing between elements), and Space Evenly (which evenly distributes elements with the distance from the container equal to the spacing between elements).
