How can I move my layers freely on the canvas?

You should switch to Canvas mode, and drag the layers out of Content mode (if they were added there previously). Then you will be able to drag'n'drop them wherever you want.

It takes extra effort to adjust your layer's responsive behavior. Check out the Responsive tricks video to learn the available tools.

Frequently Asked Questions

1

Why is this mode not enabled by default?

While Canvas mode is great to create many different layouts, it's not easy at all to make the result responsive. To avoid having to spend hours on making responsive adjustments, we've made the Content mode default. The Content mode barely needs any device specific changes, and these changes are rather personal preferences than actual usability adjustments.

For this reason we only suggest Canvas mode for advanced users only.

2

When do you suggest using the Canvas mode?

Canvas mode is better if you need many layers on each other, like on the Contact slider. In some cases, it's also better for complex layer animations, like the second slide of this demo.

3

Can I mix Canvas and Content mode?

Sure.

4

Do you suggest doing so?

There are some layouts which you can only do by mixing the two modes. For instance if you need layer parallax in the background, The following sliders are great example:

The key is keeping the main content in Content mode and leaving only the "decoration" layers in Canvas mode.

5
How do I move a layer from Canvas to Content mode?
  1. Switch to Content mode
  2. Drag the layer to actually move it to Content mode
  3. You'll notice the layer's purple outline chances to blue, which means it's in Content mode.

6
How do I move a layer from Content to Canvas mode?
  1. Switch to Canvas mode
  2. Drag the layer to actually move it to Canvas mode
  3. You'll notice the layer's blue outline chances to purple, which means it's in Canvas mode.

7
I changed my slider size and the layers went missing

Canvas mode positions the layers absolutely to the slide canvas. Because of this, the layers must be adjusted after the slider slide is changed.

So a if layer has, for instance, 500px distance from the top of the slide canvas, it won't be able to fit into the slider if the slider height is smaller than 500px. Let's see an example.

You have a slider, which is 1200x600px. There's a 100x50px layer at the middle of the slide, aligned middle-center, which means that the distance between the slider's and layer's middle is 0 in both vertical and horizontal case.

Middle points
  • The middle of the slider is 600x300px.
  • The middle of the layer is 50x25px

This is how the slider looks like:

The layer takes up the space from 550px ( 600 slide middle - 50px half layer width - 0 for distance from the center) to 650px (600px slide middle + 50px half layer width - 0 for distance from the center) horizontally. Then it takes up from 275px (300px slide middle - 25px half layer height - 0 for distance from the middle) to 325px (300px slide middle + 25px half layer height - 0 for distance from the middle).

But the moment the slider size changes, the calculation of the layer position changes, too. Let's say the new slider size is 300x300px. What does that mean to this layer?

  • the slider's middle is 150x150px
  • the layer's distance from the slider's middle is still 0
  • the layer's vertical position starts at 150-25-0px and lasts until 150+25-0px
  • the layer's horizontal position starts at 150-50-0px and lasts until 150+50-0px

This is how the slider looks like.

Yes, the layer is still in the middle. But it takes up different px sizes on the canvas.

Let's see another example!

Place the same 100x50px layer to the top middle of the slider.

Size details:

  • slider size: 1200x600px
  • layer size: 100x50px
Layer position
  • The layer's horizontal position is unchanged. It still takes up the 550-650px area
  • The layer's vertical position would start at 0px and last until 50px.
    Note that it's the middle of the layer that gets aligned, as the layer's align is middle-center. So the layer has 275px distance from the 300px vertical middle. The starting point of the layer is 300-275-25= 0px. The ending point is 300-275+25 = 50px.

Now let's see what happens when the slider size changes!

Size details:

  • slider size: 300x300px
  • layer size: 100x50px

The layer is not visible, because it can't fit into the canvas. Remember the calculations:

  • slider vertical middle: 150px
  • slider horizontal middle: 150px
  • layer vertical middle: 25px
  • layer horizontal middle: 25px
  • layer vertical middle and slider vertical middle distance: 275px.

Which means the layer's vertical position is:

  • from: 150-275-25 = -150px
  • to: 150-275+25 = -100px.

Since they're negative values, they're outside of the Canvas area. So if you're using Canvas mode and change the slider size, you must adjust the layers, to ensure that they're placed properly.

7
How to resize Canvas layers?

Simply click on any of the edges and start dragging.