The Gridbox Editor

The Gridbox Editor is where the work happens! In Editor, you can drag and drop web framework components, write your code, and preview your project and download it.

UI basics

When you open Gridbox Editor you will see a blank page with bars and controls all around. Here are the main functions:

  1. Toolbar: save/create pages, preview in the browser or toggle different device resolutions.
  2. Layout and Grid: here you can find different layout elements like section, container, fluid container, grid rows(based on the framework).
  3. Components: here you can find framework components like button, navbars,…
  4. Element Properties: here you can configure elements or customize the page aspect.
  5. Media Gallery: here you can upload all the images you want to use in the project.
  6. Canvas: your working area to visualize your project, select elements, and input texts.
  7. Live Code Editor: Inspect and edit HTML files, CSS and JS on the go.

Toolbar

 

Saving the Project (Manually)

By default, every time whenever you make changes your project will be saved automatically and updates the preview. You can also manually save your project by clicking the “Save” Icon.

You can also use the keyboard shortcut to save your current file (Command + S for Mac, CTRL + S for PC).

Code Editor Menu

This will open the code editor panel.

New

Creates a New HTML Page.

Preview

Using Preview you can see the changes you’ve made to the editor. You can choose which page of your Project to view from the Pages Panel in the left sidebar.

You can also switch resolutions (Tablet, Mobile, Desktop, Tablet) to check the responsiveness of your site.

The Left Sidebar

Drag and Drop Layout Elements

Layout Elements Consists of Container, Fluid Container, Section and Grid System (Based on the framework you’ve chosen)

To understand the Grid Component you need to understand how the grid system of Twitter Bootstrap/foundation works. Grids are the core feature of bootstrap/foundation/ or any CSS frameworks and you will use them often.

The grid has these important properties:

1) The size of each column for the grid system. For example, “4 4 4” will show three columns of size 4.

2) The total column size is 12. To make it even, add your columns up to 12.

 

 

 

 

Drag and Drop Components

You can drag and drop framework components like Button, Button Groups, Accordion, Forms, Carousels, Labels, Panels, Hero Unit, etc…

 

 

 

 

 

 

 

 

 

 

 

Changing Element Properties

Any time you select something on the canvas, you will notice that the ELEMENT Properties tab on the left is changing. Any component has specific fields that can be edited to customize its aspect, like text, class name, color, etc…

Keep track of your selection on the canvas or using the component tree below the toolbar.

 

 

 

 

 

 

 

 

 

Live Code Editor

Every operation that you might do in the visual builder or with the left sidebar is generating clean and tested code. And where to access this code? – The Code Editor Panel

With Gridbox Code Editor you can do full document source editing also it allows you to add external stylesheets, web fonts, scripts, and more.

In Code Editor – Where you can see three different menu items – HTML, CSS and JS

By default, there will be one CSS(styles.css) and JS(index.js) file automatically created for you (You can’t create multiple CSS and JS Files but you can use CDN JS/CSS Libraries).

You can create multiple HTML files using “New” Menu.

If you want to see the real preview as a website, just click on the preview icon in the top toolbar!