The design canvas displays the visual output of the sites that are created with Blocs. It enables users to interact with the page in real time, allowing them to select elements, move them and edit their contents. The design canvas is found in the center of the main application window sandwiched between the left and right sidebars.
The Selection Marker
When an element is clicked on the design canvas, it will display a blue marker, this is referred to as the selection marker. Depending on the type of object that is selected, this marker may also contain some visual styling controls that let users adjust the size and position of the selected element. We refer to these as Freehand controls, you can read more about them here.
Canvas Settings
The design canvas has a range of options that let users control the visual rendering of the currently open website. These options can be found in the bottom left corner of the design canvas.
Wireframe Mode
Wireframe mode strips out all non-layout essential styling, allowing users to focus on page content and structure.
Outline Mode
Outline mode displays a thin blue rectangle around the bounding areas of all elements on the page, allowing users to view the underlying structure.
Dark Site Mode
Dark Site Mode inverts the colours of the + buttons, making them more distinguishable on dark backgrounds.
Display Add Bloc Button
Toggle the visibility of the + buttons that are used to add Blocs to a page.
Display Add Bric Button
Toggle the visibility of the + buttons that are used to add Brics to a page.
Display Line Break Tags
Line break tags <br> are not visible by default, this option lets users toggle the visual rendering of them on the design canvas.
The design canvas render settings only take effect in-app and have no effect on the site once it’s previewed or exported, they are simply an in-app visual design aid.