Live Canvas is yet another WordPress page builder, but with a mission: no added bloat. With bloat, we mean the extra code added by the page builder.
Divi and Elementor are notorious for the huge amount of divs and css they add to your website, potentially slowing down its performance.
LiveCanvas is build upon the Bootstrap framework, which is a popular and lean HTML / CSS framework developed by Twitter, and only uses the possibilities provided by Bootstrap. No added CSS or JS. You can also edit your HTML for each element, and add global CSS without leaving the builder. You can even build your website in LiveCanvas, and then export it to plain Bootstrap HTML and CSS,
so you won’t even need WordPress. Developers will love those features!
Because LiveCanvas works on Bootstrap, it requires a theme that’s based on Bootstrap as well. So in contrast to most page builders, Live Canvas doesn’t work with any theme. When you activate LiveCanvas, it will tell you it requires the UnderStrap theme, which is a combination of the Underscore theme, an extremely lightweight theme by Automattic (the company behind WordPress) and the Bootstrap framework.
However, UnderStrap doesn’t let you customize anything, and since LiveCanvas is a visual page builder they developed their own child theme for Understrap, called CustomStrap. The CustomStrap theme uses the WordPress Customizer to let you set a lot of options.
You can change the default Bootstrap colors to your project colors (primary, secondary, succes, warning etc.), set a link and hover color, choose if you want to enable shadows and gradients, which fonts you want to use etcetera. You can even add some code to the <head> and <body> of your site, and also choose if you want things like a fixed navigation bar and sidebars.
So let’s get to the LiveCanvas builder itself. It opens full screen, and when you click the “add section” button, a side panel with 2 tabs opens.
The first tab is “readymades”, which contains about 35 pre-designed sections. LiveCanvas works with sections, rows, columns and blocks, and the readymades are sections with a pre-made combination of rows, columns and blocks.
In my screenshot, you see a pre-made hero section, which contains an image block, an icon block, a heading block, a text block and 2 button blocks.
Beneath the hero section, you see a features section, which contains a row with a heading, and another row with 3 columns. In each column, there’s an icon (or image) and a text block.
There is a hero sections with a video background, one with an image background, a team section, a pricing table section, a section with 3 cards, a Google Maps section etc.
In the second tab, grid builder, you can select different column layouts in which you can place the blocks you want.
Live Canvas offers about 20 blocks by default. Of course, you’ve got blocks for text, images and buttons, and some Bootstrap blocks like a blurb, card, alert, progress bar, accordeon and carousel. You can also embed a Google Map, YouTube or Vimeo video and music from Soundcloud of Mixcloud.
There are also a few nice WordPress integrations. There’s a shortcode block, a block that will list the categories and a block that will list your posts. In that one, you can set which post type it should display, how many, include or exclude categories etcetera.
There aren’t any blocks for things like testimonials, features, pricing tables etcetera,
but you’ll find all those things among the readymades sections I mentioned above.
When you click on a block, the settings for that block appear in the sidebar. For example, when you click on an icon, you can choose which Font Awesome icon you want and set it’s color, when you click on a button, you can set it’s link, size and color etcetera.
You can also click on the red (block), yellow (column), blue (section) or grey (container) buttons, which will open a settings panel. In that settings panel, you can choose to edit the HTML code for that element, replace that element, copy or paste content, duplicate the entire element, delete it or move it up or down (or left or right with a column).
Moving an element this way feels a bit old school when you’re used to a drag and drop editor, and I get the same feeling when I open the properties panel you see in the screenshot.
For example, you can adjust the colors, but you can only choose one of the colors you’ve set in the CustomStrap theme customizer. You can’t use a gradient or set the opacity.
That limits your creativity, but on the other hand it will help you to keep your color palette consistent (although opacity is a must have feature in my opinion).
The same goes for things like padding and margin. You can only set those from 1 to 5, which are default Bootstrap values in rem. Rem means the size is relative to the font size set in the CustomStrap settings. If you set the default font size to 16px, you can set a padding or margin between 4px (0,25rem) and 48px (3rem). When you’re used to just dragging the padding and margin to the desired height, this feels quite limiting, but again it does help you to keep a consistent layout.
You can also set a shadow, animation and a shape divider, but again, there are not a lot of customization options. Most builders let you set things like the height of a shape divider,
the duration of an animation or the color of a shadow, which is not possible with LiveCanvas. Also no borders, border-radius, line-height, (min and max) width and height, text-shadow etcetera.
Most of those limitations are because their no added bloat mission. They take that very seriously: LiveCanvas doesn’t add any CSS unless it’s absolutely necessary (like when you add a background image). When you set a color, shadow, animation, padding, margin etcetera, only one of the default Bootstrap CSS classes is added to the HTML code.
There’s also no undo / redo option, so if you make a mistake, you have a problem… Live Canvas does use the WordPress revisions system so if you really mess up you can always go back to a previous version, but an undo / redo is a really necessary element for any software.
One thing that’s really cool though is their Unsplash integration.
Unsplash is a free image library with millions of images you can use on your website. In Live Canvas, you can search that library from within the builder, and add the image you want with 1 click. You can even apply a color filter to the image, like the black and white filter I’ve used in the screenshot.
Of course, you can also upload your own image or choose one from the media library, but you can’t use filters on those unfortunately. You also can’t set the background size (cover, contain, repeat etc) and there’s no parallax effect either.
There are also a few dozen vector clipart items you can choose from, but in my opinion they look quite cheap and the catalog is way to limited to be a really valuable addition. Great idea, but the implementation just isn’t good enough.
I probably don’t have to tell you how important responsive design is nowadays. Responsiveness is one of the cornerstones of the Bootstrap framework, so I would expect it to be one one of the strong points of LiveCanvas as well. At first glance, it is; while most page builders only offer 3 breakpoints (desktop, tablet in portrait and smartphone in portrait), Live Canvas offers 7 different breakpoints.
That many breakpoints give you the potential to make a really good responsive website… but not with LiveCanvas. Although it absolutely looks fine on all devices, you can’t control anything except for the column widths. Most page builders let you hide elements on mobile, tablet or desktop, set a different padding and margin for different devices, adjust font sizes… but not LiveCanvas (yet).
LiveCanvas pricing is quite attractive: they offer a yearly licence for $ 79,00 or a lifetime licence for a one time fee of $ 199,00. Both licences allow you to install LiveCanvas on an unlimited number of websites, and you can also use it on client websites. This makes Live Canvas even more attractive for developers!
LiveCanvas might be a developers dream. It uses Bootstrap, you can edit the HTML for any element, you can use custom HTML snippets as builder blocks, edit the global CSS right in the builder and it adds no bloat to the code. You can even download your website in plain HTML and CSS and host it without needing WordPress!
However, in my opinion, they take their no added bloat mission a bit too far. It’s a noble mission, but it limits you quite a bit. Adding the options I mentioned under “limitations” will require a few hundred extra lines of CSS for a typical website, but that won’t have a noticeable impact on the site speed. A developer will just type some CSS code for the things they miss themselves, but most page builder users probably use a page builder because they don’t know how to code…
What I do really like about LiveCanvas is that they really seem to listen to their users… well, they listened to me at least 😉 When I tried LiveCanvas the first time, I wrote them about some issues I had: there was no way to edit the CSS in the builder itself, no way to use your own colors (only the default Bootstrap colors), the color picker used the Bootstrap names (main, secondary, succes, warning) instead of the actual colors, it wasn’t possible to adjust the horizontal padding, there was no way to center your content… a lot of basic things were not possible with the LiveCanvas builder.
A few days later, I got an e-mail back stating they were working on a new version that would solve a lot of the issues I mentioned, and a few weeks after that, they released a new version that actually fixed a lot of those issues and implemented a lot of improvements I suggested 🙂
So even though LiveCanvas won’t be my favorite page builder just yet, I’ll certainly keep following them. And again, for developers, Live Canvast might be the right choice already.
The pricing is quite competitive and they offer a 30 day money back guarantee, so if you like the strong points and you know a bit of CSS, go for it!
This article contains affiliate links. That means I get a compensation when you buy LiveCanvas via the links in this article. The price you pay is still the same so it won’t cost you anything, but it will help me to help you with these kind of free articles. So if you’re going to buy LiveCanvas, I would really appreciate it if you use this link 🙂
Are you not going to buy LiveCanvas, but still want to thank me for the article? Then I would really appreciate it if you would make a small, one time donation via the button on the right 🙂