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: Adding and moving elements.
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.
When the element is selected, controls appear on all its borders. Use controls to resize the element. You can change the width and height of the element simultaneously by dragging the corner.
Use controls to change margins and paddings of the element. For more details about the size of elements and spacing between them, see: Spacing between elements.
For convenient display of the elements, you can enable or disable the following options using hotkeys:
- show/hide element outlines: Shift + O
- show/hide element margins/paddings: Shift + L
- show/hide hidden elements: Shift + H
- show/hide empty elements: Shift + E
- show/hide element indexes: Shift + U
- show/hide element labels: Shift + E
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.
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: Top Bar).
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: Website adjustment for different devices (link).
You can change the Canvas scale in the Top panel. For more details, see: Top Bar.