The Canvas

When you’re in the Editor Design mode, you can interact with elements in your project visually on the canvas

The major blank screen area on the design mode is called Canvas. Using Canvas you can engage with elements visually and manipulate them without touching the code unnecessarily.

Gridbox Blank Canvas

Design Mode Toolbar

Design Mode Toolbar

JavaScript is disabled in design mode

We’ll focus on the canvas and the five aspects of interacting with elements on the canvas:

  1. Selection — clicking on elements to select them

  2. Parent Element— selecting an element’s parent

  3. Dragging — clicking and dragging to relocate an element

  4. Copying — duplicating the selected element

  5. Deleting — deleting the selected element

If you click any element on the canvas, you will see the following:

Canvas Toolbar

Drag and Drop Components

To drag and drop any element in the canvas, from the left sidebar click on the Components, pick any of the component that you want to use. Now drag that component into the blank area.

Drag 'n' Drop

Dragging Elements within the Canvas

Sometimes you want to move the elements within the canvas like moving heading or button from one section to other. With Gridbox, you can do that in two different ways

  1. By directly dragging the element.

  2. Using Inspect Panel

Let use see each of the examples one by one.

By directly dragging the element to the place where you want to move.

Drag items with in the canvas

Using Inspect to drag nested elements

Sometimes, you need to move the deeply nested element, in that case you can make use of the Inspect panel from the left sidebar. It allows you move items within the canvas to the exact precise position you want.

Selecting Parent Element

Sometimes you need to deal with Nested elements in the canvas.

For eg: Whatever you see visually in the canvas is nothing but a underlying HTML code. In some cases you need to select the parent element of the nested element

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>
List item 3
<ul> <!-- Sometimes you may need to select this element visually -->
<li>Item A</li>
<li>Item B</li>
</ul>
</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>

You can select the parent element in the following ways:

  1. Click the — Up Icon on the Label

  2. Use the Inspector from the left panel.

Click the Up Icon from the toolbar — when an element is selected, click the Up icons on the right side of label to see the names of its parent and grandparent elements. You can select the parent element by clicking its Up icon in this menu. This is helpful if a child element is sitting inside a parent element that is difficult to select.

Using Inspect — you can also make these kinds of selections on the left side under Inspect tab.

Duplicating Elements

Sometimes you need re-use others elements in the canvas, in that case you can make use of Clone icon to duplicate elements.

Duplicating Element from the Canvas

Deleting

To delete any element on the canvas click on the delete icon on the right side of the label or use Delete key. If you want to delete the nested item, you can make use of Inspect panel in left sidebar to select the element and the use Delete key or the delete icon.

Deleting Element from the Canvas

If you want to add new image or replace existing one, you can make use of the gallery to insert/replace images.