Introduction to the canvas
When building your pages, sites and funnels with GroovePages, you'll be spending most of your time working on the GroovePages' canvas. This is where you'll see a visual representation of the page you are building.
When hovering the mouse cursor over the canvas, you'll see red outlines appear around elements that can be selected (and modified, either in style/design, functionality or both). Once the red outline appears, clicking the element will trigger the right sidebar revealing the style editor and/or element configuration menu.
Once an item on the canvas is selected, you'll also see a little toolbar appear with white, square buttons. Depending on the item selected on the canvas, the available toolbar buttons can vary.
Below is a screenshot of the potentially available buttons:
- Style editor
The first icon indicates the style editor can be used to modify the style of this item.
- Element configuration
The second item indicates that the item has an element configuration menu allowing you to modify this items functionality and / or behaviour.
The third button will create an exact clone of the item right next to the original or right below (the clone will be a direct sibling of the original element in the DOM tree).
The fourth button will delete this item from the canvas.
- Select first available parent element
The fifth button will select the first available element moving up in the DOM tree (this is often the HTML element containing the selected item).
When selecting an entire block on the canvas, the canvas toolbar will contain an additional button allowing you to modify the block's source HTML code.
Click the code editor button will bring up a modal window with a fully functional source code editor, allowing you to modify this block's source code.