The LiveCanvas HTML structure

LiveCanvas builds  an HTML code structure based upon some simple rules – it mostly adheres to HTML best practices and Bootstrap 4 with a few additions.

First of all, the web page has a single <main> element, where all the page content (minus header and footer) resides.

Anatomy of a LiveCanvas page

Here’s what the general structure looks like:

  • Page Header [controlled by WordPress and the Theme]
  • <main> content [controlled by LiveCanvas]
  • Page Footer [controlled by WordPress and the Theme]

This <main> content’s inner code is what you edit and build using the LiveCanvas interface – and is directly editable via the top right Extras > Edit Main HTML menu element.

Let’s dig into what the architecture of the <main> looks like.

A <main> contains one or more <section> elements.

So here is an overview of a typical structure, top to down

  • Sections – <section> tag
  • Containers (the standard Bootstrap containers) – <div class=”container/container-fluid”>
  • Rows (the standard Bootstrap rows) – <div class=”row”>
  • Cols (the standard Bootstrap columns)  – <div class=”col/col-xx-yy”>
  • Blocks (any div with the special lc-block class) – <div class=”lc-block”>

All the elements above are highlighted in the editing interface with a border – and have their contextual menu allowing to edit their properties and their inner HTML code

Sections

The <section> elements are chunks of  HTML code – they can contain pretty much anything – and they’re meant to hold “edge-to-edge”, full width content. They are not nestable.

LiveCanvas provides a library of pre-built (readymade) sections – and allows to build a personalized library of sections as well.

Containers, Rows and Columns

These elements are the foundation of the Bootstrap grid.

There’s not much to add.

Blocks

A block is a <div> with the lc-block class. Eg:

<div class=”lc-block” style=”border:5px dotted red”>
<h1 editable=”inline”>My Custom Section Title</h1>
</div>

Blocks are ideally HTML chunks on a more atomic scale compared to sections.
They are the smallest “bricks” to build with.

LiveCanvas provides a library of pre-built blocks – and allows to build a personalized library of blocks as well.

Please note that, as in the example code above, editable elements and regions can be defined anywhere.