Topbar

The top bar provides another set of settings as well as some useful tools to save and even export your site. Starting from the left-hand side, right next to the menu button, and moving to the right, y
The Overall Topbar

Page indicator — shows which page you are currently on. And when you click this indicator, it opens the Pages Panel.

Page Indicator

Breakpoints buttons — located in the left of the top bar, these icons allow you to switch between different breakpoints to see and edit the design of your project on these breakpoints (Desktop, Tablet, Phone). When you can design anything in Breakpoint mode - it will also automatically generate media queries.

Responsive Breakpoints

Show Borders — This allows you to view the structure of your layout. For example, the grid overlays guide you to create a consistent design so your elements are stacked and positioned evenly throughout the site.

Show Borders

Preview — open the preview page and allowing you to see how your project will look when published.

Preview your project

Undo/Redo — allow you to undo or redo actions you took in the Designer like applying a style or deleting an element.

Undo Redo

Code Editor — allows you to open the code editor using which you can edit HTML and CSS.

Code Editor

Download — allows you to export the code of the current project, which is prepared and downloadable in a zip file.

Download / Export Full Project

Save — allows you to manually save the entire project.

Save Project Manually