Using Alignment Tools
Take advantage of in-built alignment tools to help you achieve precision layouts.
What are Alignment Tools?
The module editor has two kinds of alignment tools built in to help you with precise placement of layers on the canvas. When either of them are active and you begin dragging a layer on the canvas, a collection of grid or guide lines will appear and the layer will snap to these lines as you move it:
To find the Alignment Tools look for the grid icon near the top left of the timeline:
Click the icon and a small box will appear, containing the options Adjust by and Gap:
By default the Adjust by option is set to None, meaning the Alignment Tools are inactive. To activate the tools, change the setting to either Grid or Same Aligned Layers:
Each of these settings creates a different kind of alignment behavior, as described below.
Adjust by: Grid
When Adjust by is set to Grid, dragging a layer will make a grid appear:
The size of the grid is determined by the Gap option. By default Gap is set to 20px, meaning the grid will be made of lines 20px apart:
The way a layer snaps to the grid depends on its alignment settings. For example, if a layer is aligned top left, its top left corner will snap to the points where the grid lines cross. This will be indicated by lines at the top left corner of the layer:
However if the layer is instead aligned middle & center, its middle center point will snap to the grid. This will be indicated by crossed lines at the center of the layer:
Adjust by: Same Aligned Layers
When Adjust by is set to Same Aligned Layers, dragging a layer will make a collection of guide lines appear. However this will only occur if there are other layers on the canvas with the same horizontal and/or vertical alignment setting:
For each other layer with the same alignment settings two types of guide lines appear.
The first type is guide lines placed directly at each edge of the layer. These lines allow you to snap the edges of two layers together with no space between them:
The second type of guide line is placed with a space between it and the edge of a layer, with that space amount defined by the Gap option. These lines allow you to snap two layers next to each other with a consistently sized gap between them:
If two layers share only the same horizontal alignment, only horizontal guide lines will appear:
However if the layers share only the same vertical alignment, only vertical guide lines will appear:
