The Contextual Menus

In the LiveCanvas editor, while hovering the page, you will see some contextual menus popping up, where different colours are for different elements in the Bootstrap structure.

We can viewing Section’s contextual menu as a typical example.

Clicking upon the hamburger menu a number of useful options will be shown:

  • HTML Editor, to view and edit the code responsible for that specific element - and easily focus only on that specific code block.
  • Edit properties, that reveals a panel dealing with the element’s applied classes shown as easy to use selections.
  • Replace section, that reveals a panel to replace the section with another readymade section or with a custom grid.
  • Copy, Paste, Duplicate and Delete: the usual editing tools that you’re familiar with; copy and paste is a tremendously useful feature. On Chrome, this feature will interact directly with the system’s clipboard, so you’ll be able to directly copy and paste HTML code from other sites and browser tabs as well.
  • Move Up and Move Down: quickly arrange elements in your webpage.

 

Some simple shortcuts can ease triggering the most typical options in a quicker way, without having to open the contextual editor:

Mouse-based shortcuts

  • Double-clicking the contextual menu main label (eg "Section") will open the corresponding Properties Panel
  • Right-clicking the contextual menu main label (eg "Section") will open the corresponding Code Editor