Canvas

The Canvas is in the center of the page and occupies most of the screen. It is the main workspace for creating a web page. All the elements that are displayed on the website are placed here.

You can add elements to the Canvas from the Elements panel by clicking on the element name or by dragging it onto the Canvas. For more details about adding elements to the page, see:

Selecting the elements on the Canvas

You can select any element on the Canvas with:

click : select the topmost parent element that the cursor is hovering over

double click : select the child of the topmost parent and so on down the hierarchy with subsequent clicks

Ctrl + click : “deep” selection - select directly the element on which the cursor is hovered (lowest in the hierarchy)

The selected element is highlighted with the blue outline and labelled at the top accordingly.

Breadcrumbs

At the bottom of the Canvas, you can find breadcrumbs - the path in the element hierarchy to the selected element. Disable or enable the option using Shift + B.

Breadcrumbs can be used to jump to the parent element or other elements higher in the hierarchy by clicking on them.

Viewing the page in display modes for different devices

At the top of the Canvas, you can switch between page display modes for devices with different screen widths. Desktop is the default mode.

The following display modes (breakpoints) are available:

Desktop

Tablet - 991px and down

Mobile landscape - 767px and down

Mobile portrait - 478px and down

You can also add additional breakpoints (For more details, see:

To switch to another display mode, hover the mouse cursor over the top panel of the Canvas and select the desired mode by moving the cursor through the panel, and then click on the selected option. For convenience, different modes are highlighted in different colors.

For different display modes, you can set different styles and change the layout settings for the elements to ensure the adaptability of the website for various devices. For more details, see:

You can change the Canvas scale in the Top panel. For more details, see: