In web development it’s not that simple to position all the different elements. Especially if you are also want to keep them responsive. This is why we made a special canvas for slide editing. With this editor you can place your layers anywhere with a simple drag. To make it easier, we added several features to make the editing as easy as possible. And to be able to handle the responsive behavior.
The first editing tool is the “snap”. It allows you to snap your layer either horizontally or vertically to the middle of the slide. It’s also possible to snap it to other layers, to their center or side line. This way you can easily add more headings, buttons, etc. next to each other. And you can have them in the same alignment without having to check the exact position. If this feature bothers you, you can always turn it off. Or if you just want to turn it off for a moment, you can do that as well. Press the Ctrl (disable horizontal snap) and Alt (disable vertical snap) keys, and move the layer with your mouse. These buttons turn off the horizontal and vertical snap lines.
Layer list options
When you have a lot of layers on your slide, you can have hard time to work with those layers after a while. In this case, you can use the visibility options what you can find on your layers’ list. The eye icon can hide the layer on the canvas and you have more visibility for the visible layers. The light bulb is useful, when you want to edit a layer, which is behind some others,
because it allows you to focus on a single layer. The lock icon can lock your layer so you can not make accidental movement on the canvas.
Above the canvas you can see an editing toolbar which contains shortcuts for the layer features related to the responsive design. With the aligning options you can choose, where you want your layer to be aligned. It might be on the top of the slider, on the left, center or somewhere else. The PRO version takes it a little further. In it, you can also position one layer to another. This is good, because the position and size calculations cannot be pixel perfect. So if you want one layer to be exactly next to another, you can’t position correctly with just the alignment. In that case, you should use the layer chaining. This chain option makes your layers positioned from each other. This means you can have your layers exactly side by side, because 0px from somewhere is always 0px.
For the aligning you can also use the numeric pad in your keyboard. If you press the alignment once, your responsive point will jump there. And if you press it again, your layer will jump to that point. Other useful hotkeys are the arrows, what you can use to move your layer 1px away. Or if you press the SHIFT button, while doing it, you will move the layer 10px further.
The eye icon lets you hide your layer on the current device view. The best way to know, which option you can use for the different device views is to go to the layer tab. Where you can see a # next to its name, those can be changed separately for every device view.
The adaptive sizing means that your text won’t go smaller with the slider, it will stay that size, what you gave to it. But next to it you can find the font size modifier, which can help you still keep your font responsive. This option is device view specific too. So you can change the size of your font to smaller for tablet and mobile views, if there isn’t enough space for your text.
In the top right side of the canvas you can find a resizer, which can be used to see how your slider looks like on any width. Next to it there will also be the device views. If you click on them, you will be able to change the device specific settings of your layers to have them differently for smaller screens.