Live Preview is a very useful tool. With that you are able to preview how your whole popup looks like. When you press the Play button, the popup will start from the current page, and play continuously. This also great to see how the different pages fit for each other in one piece.

Drag & drop editor area
Drag & drop editor area

There are some controllers in the top bar of the editor area, and the first one is the preview size. You can zoom-in and out of the page. This can be useful on larger popups.

Preview size
Preview size

When the preview mode is not active this area works as a drag & drop editor area. You can move your layers into the suitable position by your mouse, or even you can also use the alignment feature to place that into the suitable part of the page. If you use these buttons, the positions will set by percent values under the Styles tab of the layers, which is also useful.
Another important buttons the Undo and Redo, which can help you to e.g. get back and item what you have deleted accidentally, or even that yet.

Layer align and undo-redo
Layer alignment and undo/redo buttons

The next buttons are useful if you set up layers, which are not visible on all devices. You can make that easily by click on the device icons on the layer tab. Learn more about that on the following link: Hide layer on specific devices. To preview the page as mobile, tablet or desktop, just click on the icons, and the active highlighted, while the inactives are grey. You can not only preview the whole page to able to check the animations, but you can do the same for layers as well, so you don't need to watch the full page, if you are trying to fine tune the different effects for the current layer.

Responsive mode
Layout on different devices

On the lower part of the editor you can find the Layer manager tool, where you can add different type of layers, and also see the existing ones on the left. Here you can also edit their properties, like style, different Transition settings, or other attributes, like links. You can learn more about them in details under the Layer settings part of the documentation.

Layer editor
Layer editor

This part of the editor also can be pop out from this fixed position. This could be useful when you have more layers and would like to also see what you set in the preview at the same time, because in that case the Layer Editor can be placed into any suitable position by simple drag & drop.

Popup layer editor
Layer Editor popup
© WebshopWorks - Professional PrestaShop Addons