The Designer allows you to build your site structure, design the look and feel, add content and custom code to create fully functioning websites, landing pages and prototypes.
The Gridbox Editor consists of the main canvas as well as a set of toolbars and panels. In this guide, we give you a glimpse of each of the following:
- Designer
- Code Editor
- Canvas
- Topbar
The Designer
With Designer, you visually manipulate the HTML content, set CSS properties, without writing any code. And, as you build your website and lay out your content, the Designer creates clean, semantic code that’s ready to export as *.zip.
The Code Editor
With Code Editor, you can you can do full document source editing and also it allows you to add external style sheets, web fonts, scripts, and more.
The Canvas
The major area in the Editor is the Canvas. It’s where you can interact with the page in real-time. You can select elements, move them around, and edit content right on the page.
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, you have the following set of tools:
Page indicator — shows which page you are currently on. And when you click this indicator, it opens the Pages Panel.
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).
New Page — located next to the page indicator, allows you to create new html page.
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.
Preview — toggles between the quick preview and design mode of the Designer, allowing you to see how your project will look.
Full External Preview — This opens a separate tab and allows you to see how you project will look when published
Undo/Redo — allow you to undo or redo actions you took in the Designer like applying a style or deleting an element.
Code Editor — allows you to open the code editor using which you can edit HTML and CSS.
Download — allows you to export the code of the current project, which is prepared and downloadable in a zip file.
Save — allows you to manually save the entire project.
Anatomy of the Designer
The Designer is further classified into 5 major panels which gives you complete control over your elements
- Style Manager
- Element Properties
- Layers or Node Inspector
- Blocks or Components
Style Manager
This gives you access to all CSS properties available for the selected element. You can simply enter these values in their appropriate fields and see the style applied to your elements on the canvas instantly.
Element Properties
This gives you access to various framework related settings available for the select element like Button classes, table classes, typography classes, etc…
Layers or Node Inspector
This shows the hierarchy of every element on the page you are currently on. Here, it allows you to manage and rearrange your elements extremely faster, focusing always on the architecture of your structure.
Blocks or Components
Where you can find all essential components that you need to build a site / HTML prototype.
Need to know
- The Gridbox is an online app that works best on the latest version of Chrome, Firefox or Safari.
- The Designer requires a monitor or laptop that has a screen width of at least 1280px. This requirement is the sum of the left sidebar, the Designer canvas, and the right sidebar.
