This is where you'll see your master piece coming to life. Here are some useful tips for making the best out of it.
When selecting a component you'll get two little popups with a few options, one above and one below.
Popup above (from left to right):
Component Key: You can directly change the key of the component without having to go to the options tab on the Right Side Bar.
Duplicate: When clicking this button, the "enter a key" window will popup for you to name it with a different key. Then a copy of the component will appear at the bottom of the container it's in.
Delete: This will erase the component, of course.
Move component up: Instead of dragging it on the "Components" tab of the Left Side Bar, you can reorder components with this button.
Popup below (from left to right)
Move component down: Same as move component up, but down.
Add Below: Create a new component bellow the one you have selected.
Remember the mode switch on the Right Corner of the Top Bar?
This will change the way the Preview Pane behaves. You have three options (from left to right):
Edit Mode: Everything you select here will be for modifying content or design. In this mode, you cannot fill input boxes, choose from option selectors, etc.
Interact Mode: You can still edit content or design of the component you selected before going to interact mode, but only that one. You can, however, fill input boxes, choose from option selectors, etc.
Preview Mode: No edits can be done, but you can go through the flow as if you were a regular user. You'll also see the full screen without any sidebars!
Also from the Right Corner of the Top Bar, the view switch looks like this:
This will let you check for responsiveness. There are mainly three options (again from left to right):
Full View: This is the view we want for designing for big screens, like desktops or laptops.
Tablet View: This emulates the screen size of a tablet. This mode will inherit most styles from the Full View, but you can edit only for tablet by going to the design tab, and on the "Apply these styles to..." area, select something like this for example:
This will only be available when Tablet or Mobile view is selected.
Mobile View: Emulates the screen size of a mobile phone. This mode inherits most styles from the Tablet View, so any changes you make there will be reflected here too. If you need to make specific changes for responsiveness on this view, you can select a mobile style option like you would do for the tablet. It will look something like this:
This will only be available when Mobile View is selected.
There's a fourth button on the switch. There you have a few different options on Mobile View sizes.