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
We’ll focus on the canvas and the five aspects of interacting with elements on the canvas:
Selection — clicking on elements to select them
Parent Element— selecting an element’s parent
Dragging — clicking and dragging to relocate an element
Copying — duplicating the selected element
Deleting — deleting the selected element
If you click any element on the canvas, you will see the following:
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
By directly dragging the element.
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 aunderlying HTML code. In some cases you need to select the parent element of the nested element
<li>List item 1</li>
<li>List item 2</li>
List item 3
<ul> <!-- Sometimes you may need to select this element visually -->
<li>List item 4</li>
<li>List item 5</li>
You can select the parent element in the following ways:
Click the — Up Icon on the Label
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.
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
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
Inserting Images from Gallery
If you want to add new image or replace existing one, you can make use of the gallery to insert/replace images.