Introduction to Blocs 5 User Interface

Let’s take a look at the user interface of Blocs 5 website builder, including the Inspector, Layer Tree, Page Navigator, and more.

The "Getting Started with Blocs 5" video course is the perfect starting point for anyone who wants to learn web design. Designed specifically for beginners, this comprehensive tutorial series provides an easy-to-follow introduction to the Blocs 5 web design software.

Through a series of engaging and informative lessons, you'll learn how to use the software's various features and tools to create beautiful, professional-looking websites. Whether you're a complete beginner or have some experience with web design, this course will give you the skills you need to bring your web design visions to life.

So if you're ready to start your journey in web design, enroll in the "Getting Started with Blocs 5" video course today!

Introduction to the Blocs Interface

The Blocs interface is comprised of four main sections: the left toolbar with the Layer Tree and Page Navigator, the center Design Canvas, the right toolbar with the Inspector, and the top main toolbar.

The Layer Tree

The Layer Tree gives you a bird's-eye view of the entire structure of the currently selected page. You can manage your document by viewing the attributes of each layer and renaming or reordering them.

The Page Navigator

Easily access any page in your project with the Page Navigator, which provides a searchable overview.

The Design Canvas

The Design Canvas is where the visual output of your site is displayed. It allows you to interact with the page in real time, selecting elements, moving them, and editing their contents. The Design Canvas is located in the center of the main application window.

The Inspector

The Inspector is where you can style the currently selected element with custom classes, add custom data attributes, and even apply animation. You'll also find the quick launch controls for the Class, Asset, Swatch, and Menu Managers at the bottom of the right toolbar.

The Main Toolbar

The Main Toolbar, located at the top of the main application window, gives you quick access to project settings, active breakpoint, zoom level, preview mode, and the page dropdown menu.