Introduction
The Blocs interface is made up of four main groups. On the left toolbar, we have the Layer Tree and Page Navigator, in the center, we have the Design Canvas, on the right toolbar we have the Inspector and at the top we have the main toolbar.
The Layer Tree
The layer tree gives you an overview of the entire structure of the currently selected page. Here you can view the attributes of each layer, such as whether it’s locked, as well as being able to organize your document by renaming and reordering layers. You can read more about the layer tree here.
The Page Navigator
The Page Navigator gives you a searchable overview of your entire project, meaning you can access any page in seconds just by searching for its name. You can read more about the Page Navigator here.
The Design Canvas
The Design Canvas displays the visual output of the sites that are created with Blocs. It enables you to interact with the page in real time, allowing you 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 toolbars. You can read more about the Design Canvas here.
The Inspector
The inspector contains all of the styling controls for the currently selected element, from here you can apply visual styling characteristics with custom classes, add custom data attributes and even apply animation. At the bottom of the right toolbar, you will also find the quick launch controls for the Class, Asset, Swatch and Menu Managers.
The main toolbar
The main toolbar is located at the top of the main application window. From here you can quickly access the project settings, change the active breakpoint, set the zoom level, enter preview mode and also quickly navigate to any page using the page dropdown menu.