The main Editor Interface

Upon launching the editor, you will see the web page with the addition of a black toolbar on top:

 

Let's dive into the elements, from left to right.

The Universal Selection Switch

By default, upon hovering elements on the page, the LiveCanvas editor will highlight and propose manipulation for structural elements that match our recommended structure. Basically those are:

  • Sections
  • Containers
  • Columns
  • Rows
  • Blocks

See this page for details.

If you want instead to able to pick and edit any element, just enable the Universal Selection switch.

The Responsive Preview Tool

On the central part of the toolbar, the usual "device icons" allow to resize your preview and simulate what the page looks like on different devices. It has all the standard Bootstrap breakpoints plus a handy "retina 13” laptop" setting:

  • XS (for a width of 412px, comparable to mobile phones)
  • SM (for a width of 576px)
  • MD (for a width of 768px)
  • LG (for a width of 992px)
  • XL (for a width of 1200px)
  • XXL breakpoint for 1400px and up. (only for Bootstrap 5)
  • RETINA13 (for a width of 1440px)
  • 100% (Full window width)

Undo and Redo

These icons allow you to go through your full page history. No fear of errors! Browse the full step list just click  Extras > History.

Learn more about the history management feature.

Edit HTML

This button opens a fully featured HTML editor allowing you to review and edit all the <main> HTML of the current page.

Please note that in order to work more precisely, you can work on smaller code bits - using the contextual menu of each section / container / row / block

The Tree View

This button reveals the Tree View - which is useful to understand better the structure and manipulate elements with precision. In the Tree View, you can right-click elements and gain full control.

The Options Menu

More on the right, the Options menu reveals some advanced options:

  • Edit Main HTML: to review and edit all the generated code.
  • Edit Global CSS: to your own optional CSS statements to the site.
  • History: to review and restore past editing steps.
  • Download as HTML: to export your page content as a stand alone index.html file.
  • Reset Page: to delete your page and restart from scratch.
  • Readymade pages library: to access the readymade page models, which are HTML files fetched from the Child Theme /livecanvas/pages folder
  • Edit Design System - a shortcut to open the Theme Customizer - the central point of control on your design
  • LiveCanvas Settings - a shortcut to the WordPress backend settings of the LiveCanvas plugin - useful for example to enable dynamic templating
  • [FullScreen Mode: self explanatory].

Save and Exit

The last buttons, Save and Exit, do the obvious.
It is interesting to note that contrarily to what happens with  other builders, the full page HTML is directly saved onto the database.