Introducing LiveCanvas Version 3: HTML starter templates, responsive spacings, and much more



July 5, 2022

Join our Discord

After months of hard work, we're pretty excited to announce that LiveCanvas Version 3 is finally out.
Let's discover the new additions!

Readymade pages library

Version 3 brings a number of enhancements, but the most notable addition is readymade page templates: a collection of 60+ Bootstrap 5 - based fully original, lightweight HTML starters to help ignite your website designs.

Of course these pages are meant to be hacked and tweaked to your taste. They tend to use Bootstrap classes as much as possible, so you can globally customize colors and fonts to match your brand’s identity using the Picostrap’s Customize feature, as you’re already used to.

As always, we try to pursuit the quality over quantity mantra - so we tried to keep things nice & tidy, ready to be dismantled and remixed  by your hands, and filled with your own content.

These templates are not stored directly in the plugin, but pull data from a cloud-based templates directory that we will expand over time.

Moreover, we'll offer a cloud saving feature as well, to store your own HTML page templates and reuse them in all your projects. Of course, this could have a lot of sense for sections and blocks as well.

The readymade pages library can be accessed inside the LiveCanvas editor from the "Extras" menu. Here's what it looks like:

Responsive Spacings Support

Another new addition of Version 3 is responsive spacings support. This has been a popular request from many users, and we’ve been exploring various solutions to achieve this functionality, but decided to implement it only when we felt we found a lean and  intuitive way to deliver  it, closely  matching Bootstrap 5’s way of handling responsive spacings - and only outputting classes, of course.

In a nutshell, now you can set margins and paddings via visual interface specifying a general value, which should match your desired result on mobile, and then refining for larger breakpoints (screen sizes) how things should behave. Once selected the item you want to edit,  you can also use your keyboard's arrow keys to change their value.

Here's a quick example:

Simplified Client UI

The point of this feature is to propose a simpler user interface to non-administrator (editor) users for editing LiveCanvas pages.

This way editors will be able to edit only the content in LiveCanvas pages, but not the structure: they can click-and-edit text, media, page elements - but no structure / code editing, or adding elements.

This feature has to be enabled from the LiveCanvas backend settings.

Emmet Support

The code editors in LiveCanvas now have Emmet support.

If you enjoy writing HTML by hand, this is a huge lifesaver, making repeated typing tasks much faster, with a very concise syntax. We wrote a couple starter examples for you on this documentation page.

Watch the video to grasp the idea. After writing an Emmet expression, pressing the TAB key does the magic.

PHP8 compatibility

PHP 8 is a welcome update to the PHP language, bringing significant performance optimizations and higher intrinsic security.

LiveCanvas 3 and Picostrap5 run greatly on PHP8. We strongly recommend to switch your PHP hosting settings to use PHP 8,  especially on new installations, where you don't risk compatibility issues with other plugins.

Page Cloning Feature

In the past, cloning a LiveCanvas page would have been just a quick copy/paste job,  using the "Edit Main HTML"  feature, but since this is something that you may do often, for example for drafting  new variations of your homepage, making it instant totally made sense.

In the Pages listing of the WP administration panel, hovering any page element will reveal a new "Clone" link, which does instantly clone the page to a new draft. Of course, it equally works on pages where LiveCanvas is and it is not activated.

New wireframing sections and media blocks

Version 3 brings some new "wireframing" readymade sections demonstrating some useful flex-based peculiar layouts, fully responsive, to use as starters to go beyond the simple Bootstrap-based grid that we all love.

Another addition is Image and text blocks, eight implementations of the Bootstrap "media object".