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 / 5 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.
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 Options > 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.
Next Topic: Creating editable regions »