. . .

Editing Canvas

By double-clicking on the screens within your project map the editing canvas will appear.

Here you can style and modify specific screens.

images/download/attachments/61478624/Screen-Shot-2018-04-16-at-11.16.50.png

On the left side is a tool bar. These are the normal tools used for image editing software: Select tool, Zoom and Pan, drawing tools like Rectangle, Pen and Brush, Text, etc.

images/download/attachments/61478624/Screen-Shot-2018-04-16-at-11.17.13.png

In the middle of the screen is the drawing canvas that displays how your screen will appear.

images/download/attachments/61478624/Screen-Shot-2018-04-16-at-11.17.38.png

Below is the screen flow, which is also used in tools like Photoshop or Sketch. Here you can see how your screen is split into layers.

images/download/attachments/61478624/Screen-Shot-2018-04-16-at-11.17.57.png

To the right of the drawing canvas is the elements tool bar. Drag and drop the visual elements to design your screen with buttons, icons, images, texts or lists.

images/download/attachments/61478624/Screen-Shot-2018-04-16-at-11.18.11.png

Web Studio supports responsive web design out of the box. In the Device Previews column, you can see how your app will appear on individual devices. By selecting a different device, you can make changes to how your app looks on that specific device.

images/download/attachments/61478624/Screen-Shot-2018-04-16-at-11.18.23.png

On the far right is the screen settings menu. Here you can customize the navigation bar, change the data source, and set the screen orientation among other things.

images/download/attachments/61478624/Screen-Shot-2018-04-16-at-11.18.40.png