Responsivity - Chaining layers

Check out our responsivity video from this starting point to see this happening on our latest interface, and check out the video in this documentation to see it used with more layers.

Using the chain tool, you can move layers together, and you can position them relatively to each other, improving the responsive behavior of your slider.

If you have a slide with lots of layers, and you would like them to be displayed with a certain distance, and aligned together, you can just chain them together and they will keep their distance on all screen sizes. (Of course, the distance will be responsive.)

Tutorial 1: Chaining two layers together

1
Click on the layer that will be relatively positioned to an another layer.
2

Find the chain icon at the toolbar, and click on it.

3

You will see 9 blue boxes appearing on every other layer. These are the "alignment points" of the "parent" layer, so if you select one, that will be the point where the "child" (where you pushed the chain button) layer will be aligned.

Choose an alignment point by clicking on it!

4

Now you can see the same 9 boxes appearing at the layer where you pushed the chain button. Select its relative point by clicking on one of the boxes!

With this kind of chaining, you will be able to move two layers together, by moving only the parent layer, but you will be able to move the child layer individually.

Tutorial 2: Chaining three layers together - chain to child layer

1
Click on the layer that will be relatively positioned to an another layer.
2

Find the chain icon at the toolbar, and click on it.

3
Click on one of the aligment points of the child layer from the previous tutorial.
4
Choose an aligment point on the layer where you pushed the chain button at step 1.

With this kind of chaining, you will be able to move 2 or 3 layers together by moving only their parent layer. The second parent layer can't be moved without moving the 2nd child layer.

Tutorial 2: Chaining three layers together - chain to parent layer

1
Click on the layer that will be relatively positioned to an another layer.
2

Find the chain icon at the toolbar, and click on it.

3
Click on one of the aligment points of the parent layer from the first tutorial.
4
Choose an aligment point on the layer where you pushed the chain button at step 1.

With this kind of chaining, you will be able to move 3 layers together by moving only their parent layer, but you will be able to move both of the child layers individually.

Live preview

In this slide, I wanted to have the layers with the darker blue background to have 10px vertical distance, the left and right sides aligned to each other, and the two layers at row 1 to have 10px horizontal distance.

How to unchain the layers?

Select the child layer, and click on the chain button twice.