Learn the basics of LiveCanvas and become proficient

Adding animations with the AOS library

As you may already know, the LiveCanvas plugin adds no CSS or JS to your site, no external libraries to your site – no additional weight – nada. Unless you specifically ask for it, of course. In the settings panel (wp-admin / LiveCanvas / LiveCanvas) there is an “Optional extras” section where you can choose […]

Which Themes should I use with LiveCanvas?

Many page builders can run out of the box on any given WordPress Theme. From a technical point of view, this is very easy to achieve – as simply the page builder plugin will typically load it’s CSS library ON TOP of your Theme’s CSS – another source of bloat, duplication, disorder, and poor performance. […]

How to setup LiveCanvas

You’ve just installed WordPress and you want to experience LiveCanvas at it’s best. Here’s the recommended path to get started in a minute. Step One: install the CustomStrap Theme First of all, download the CustomStrap theme. You can get the .zip archive from the Members area. Inside your WordPress administration panel, go to Appearance > […]

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 […]

Creating editable regions

Defining simple, plaintext regions You can delimitate editable areas, allowed to contain plain text only, adding the editable=”inline” attribute to any HTML tag. Some HTML examples: While the LiveCanvas editor is launched, clicking these elements will turn them into contenteditable items. You will be able to easily replace their content pasting text or writing. On […]