• Skip to primary navigation
  • Skip to main content
  • Skip to footer

WPJohnny

WordPress Performance Guides and Reviews

  • Start a WordPress site
  • Hosting
  • Themes
  • Plugins
  • Blogging
  • Marketing

LiveCanvas HTML/CSS pagebuilder for WordPress – REVIEW

WordPress plugins Sep 23, 2020 by Johnny 7 Comments

I go over what I liked and didn’t like about this raw HTML/CSS pagebuilder.

LiveCanvas is a no-frills newcomer to the WordPress pagebuilder market. It doesn’t promise you fancy features or flashy animations, but it does run super lean and super clean. No extra CSS or JS junk on frontend whatsoever!

Let’s go over what makes this a good pagebuilder for old-school style devs.

LiveCanvas unique features

1. LiveCanvas is built for old-school style devs working in pure HTML/CSS.

This is both a pro and a con. If you like working in pure HTML and CSS, and avoiding any PHP logic or drag-and-drop visual nature of newbie pagebuilders, LiveCanvas is absolutely perfect for you.

It very cleanly allows you to define your working space, arranging the layout in the columns you want, and then picking from pre-built templates and content blocks or coding in raw HTML/CSS. This aspect of it alone makes it perfect for devs wanting to get straight to the wiring instead of being forced to operate like newbies.

Then there’s also the ability to create your custom sections and blocks for you to re-use anywhere around your site. Everything is raw HTML based. LiveCanvas feels more like a simple way to static-hardcode rather than an actual dynamic-database pagebuilder.

The HTML/CSS editor is a nice touch. I also enjoyed how it popped up from the bottom like the browser developer tools and comes with different styling options. Syntax auto-correct also nice. It all feels very intuitive.

You can also check out the LiveCanvas founder’s explanation of why he built it:

  • LiveCanvas – I built a wordpress page builder from scratch. Here’s how & why 🚀 – reddit

2. LiveCanvas uses the Bootstrap CSS framework.

Again, here goes another pro and con. If you’re one of those build-from-scratch devs that love (and familiar with) the Bootstrap CSS framework, this pagebuilder is built just for you! If you don’t like the Bootstrap framework, then this obviously isn’t for you.

For what it’s worth, I personally don’t like CSS frameworks but will say that LiveCanvas is indeed very very fast with it. It’s really not so bad. To write CSS from scratch would take so much longer. Your call.

3. LiveCanvas loads super fast, no extra CSS/JS on frontend.

It’s very simple how they managed it but also sensible. There’s no extra CSS or JS, because the CSS is already built off the same Bootstrap framework that the theme was built with. And there’s no JS unless you manually enable animations. This is the perfect granular control for developers that want super clean customized designs but without bloated/slow JS animations.

This is what allows LiveCanvas to be so darn fast! I also love that it loads fast on the backend as well. Other pagebuilders can take anywhere from 5-20 seconds to load and that’s a total buzzkill. Makes your site feel so much heavier and that much more annoying to get in and out of.

If you really care about better page scores and not having so much CSS/JS to optimize, LiveCanvas will help you there as well.

4. LiveCanvas is layout-centric, not content-centric.

While LiveCanvas can be used by anyone, it’s really more for someone with an understanding of HTML code. A developer understands how sections, divs, columns, and html work. (LAYOUT FIRST.) First they define the space and then they fill the space.

Whereas non-coders think the opposite way. (CONTENT FIRST.) First they throw items onto the page and then they drag things around to move or resize/reshape them. If you’ve been designing or working with pagebuilders in non-coder mentality, LiveCanvas is not for you.

5. LiveCanvas is not flashy.

This is why I like it, but will also be the reason why others may hate it. Whatever slick graphics and layouts you saw on the website…the actual pagebuilder doesn’t feel like that. It’s very no-frills, no fancy templates and layouts to choose from. The included “prebuilt templates” are more like draft blueprints for you to build upon. Again…that’s perfect for me…but I’m sure many people accustomed to the slick finished Elementor/DIVI designs will think LiveCanvas is “inferior”.

It really depends where you’re coming from. If you’re a noob with no sense of design logic…I think you’re better off with a finished theme or DIVI/Elementor to give you nice design inspirations. LiveCanvas is more for developers that already have finished graphic designs from their clients and now just have to code them into WordPress.

My suggestions to improve LiveCanvas.

1. The plugin should have a simple checkbox to “load Bootstrap CSS framework”.

This is useful if you’re using a theme that doesn’t already have it. Or at least a link in the settings to the documentation that shows you how to enqueue.

2. The left side panel could probably be designed better.

I can’t logically argue with what they have currently…because it makes sense, but I think it could be laid out better for more clarity.

  • What they have now is text labels for the sections, and then 2-column block images for the options within those sections.

I sort of wished even the sections could have been 2-column blocks as well but then the distinction between sections vs block options within those sections wouldn’t be as clear.

Aghh…I’m not sure how to improve it and I’m not going to spend the time to figure out somebody else’s UI but I’m certain it could be done better to feel easier instead of me having to read each label till I find the one I want. Maybe small icons next to each section label might do it. *OK, OK. Just leave it alone, Johnny!*

3. There needs to be a preview option when selecting SECTIONS/BLOCKS.

Currently…if I want to choose a section, I pick a section option like “Hero”, “Content”, or “Features”…then I have to squint at all the tiny blocks and pick one randomly and then it pops immediately into my content area as if I selected it. I would prefer this to work differently.

I’ll give you 2 different ways I think you could make it better:

  • OPTION 1 – when user selects a main section option, a small screen appears at center of the page allowing users to scroll through the options in multiple columns. It’s easier to see side-by-side this way and should allow bigger thumbnails. This is probably the safer option if LC plans to have more options later.
  • OPTION 2 – when user hovers over the option, it (previews) shows in content area but doesn’t commit until you click.

4. Reconsider the marketing.

As much as I feel LiveCanvas was accurately called an “HTML/CSS pagebuilder”, it really isn’t and shouldn’t be compared to existing pagebuilders…that were designed for the non-coding masses. I have no doubt all users will be overjoyed by LiveCanvas’ speed, but I suspect many will complain that it lacks features or doesn’t have the cute blocks and fancy features to click on.

If it were up to me…LiveCanvas could have also been called the “static site pagebuilder” or “hardcode pagebuilder” or just “page-coder”. Because that’s what it really is. With so many people tempted to try static sites…marketing from that angle would more attractively clarify what it is and its unique benefits against other pagebuilders.

Simply put, LiveCanvas lets you hardcode WordPress content and theme areas from scratch. Letting coders return to the simplicity of Dreamweaver days.

Who I recommend for LiveCanvas

LiveCanvas is perfect for you if…

  • You like developing in raw HTML/CSS. (Bonus if familiar with Bootstrap.)
  • You already have a design in mind, and don’t need pre-polished templates for “inspiration”.
  • You want a truly super-fast, super-lightweight, practically static site.
  • You want a flexible custom design without JS bloat.
  • You don’t need/want “fancy” pagebuilder features.
  • You want simple pagebuilder functions in your existing theme, but add very little weight.
  • You hate the slow-DB dynamic aspect of WordPress and CMS.
  • You’re tempted to try static sites for better speed, but don’t want to leave WordPress.

LiveCanvas is ok for non-coders if…

  • You want a clean classy site.
  • You’re able to learn or know someone who knows basic HTML/CSS.
  • You’re not trying to replicate all the million effects that DIVI/Elementor have.

How does LiveCanvas compare to…

  • Newbie pagebuilders (DIVI, Elementor, WP Bakery, BeaverBuilder) – it’s much more lean, but hardly any fancy templates, requires more hand-code and manual designing to get a polished design.
  • Developer pagebuilders (Oxygen Builder) – both result in a super fast frontend site. LC doesn’t have all those html ID’s but does load Bootstrap. Oxygen has more features and can do complicated things beyond design but requires full template build and slower backend load and more settings/options to navigate through. LC is faster workflow if you mostly only need HTML/CSS editing for certain bits.
  • Gutenberg blocks (Stackable, Qubely, Atomic Blocks, etc) – Gutenberg is easier to use than pagebuilders if you’re not trying to do anything super custom. Gutenberg blocks now have such variety and so much fun to use. You can mix and match blocks from different developers. However, Gutenberg blocks are not yet able to custom-builder headers and footers.

You can try LiveCanvas if you think it’s good for you. (They still have lifetime deals at the moment.)

Share this post:

FacebookTwitterLinkedInWhatsAppEmailSMS

Read all my posts on WordPress plugins

About Johnny

Right on the edge of WordPress development! 10+ years of WordPress design, development, hosting, speed optimization, product advisor, marketing, monetization. I do all that.

More WordPress Guides

Cloudways vs RunCloud – Managed WordPress Hosting Comparison (UPDATED 2020)

Sendy self-hosted email software review

Changing your WordPress site domain name

Cloudways Managed Hosting Review (2019)

Oxygen Builder ISN’T a pagebuilder (and that’s why it’s great)

Google AMP Sucks for WordPress

Reader Interactions

7 Comments

  1. Hemant Kumar

    September 25, 2020 at 12:09 am

    Gutenberg is a UX nightmare though. Takes forever to figure out where shit is and how to move things around (try a simple copy-paste of elements, for instance.)

    Reply
    • Johnny

      September 25, 2020 at 8:14 am

      I’m awfully curious to see how you’re using it. Can you give me a list of all things you’re unable to do? I think I should do a beginner’s video for basic Gutenberg use.

      Reply
      • Ross

        October 1, 2020 at 12:11 am

        Johnny, I have the same nightmare working with Gutenberg blocks. A video like this would be very helpful. I will thank you if you write it down

        Reply
        • Johnny

          October 1, 2020 at 10:12 am

          Check out my latest Gutenberg guide… Noob Guide to Gutenberg

          Reply
  2. Someone who doesn't like Gutenberg

    January 17, 2021 at 1:32 am

    Gutenberg is a absolute catastrophe to work with.
    Styles are lost without reason (perhaps after updates, or even just after a while not visit the page)
    The things called blocks jump around and if you have a bit more than just a paragraph on the page it takes minutes to load the things
    Add-on plugins that develop “for gutenberg” add to the mess by each delivering a different way of doing things, one adds css class on the bottom in the inspector, the other on top, the third somewhere else

    It’s a real catastrophe for real website.
    Of course, for home kitchen implementations where we post once a week about what burger we eat for lunch, it’s probably enough.
    And perhaps we expect too much from the blogging platform WordPress…

    I enjoyed the read here and will give this tool a try.

    Reply
    • Johnny

      January 17, 2021 at 10:14 am

      I’d love to see the site backend where Gutenberg failed you. I know so many A-level WP developers who love it and using on huge enterprise sites. I’ve custom-built it for many non-techy clients and it works beautifully for them. So I’m definitely baffled how some people screw it up.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

More links

  • Gadget reviews
  • Try my free WPJ plugins
  • Join the WPJ FB Group
  • Watch my YouTube videos
  • Subscribe to my newsletter

Popular Reviews

  • Best WordPress Hosting
  • Best WordPress Themes
  • Best WordPress Plugins
  • Best WordPress Cache Plugins

Services

  • Speed optimization
  • Speed optimization courses
  • WordPress hosting
  • Hire me or other experts
  • Client login

About Johnny

10+ years of WordPress design, development, hosting, speed optimization, marketing.
Contact me.

newsletter block

Copyright 2021 | WordPress guides by Johnny Nguyen

Click to Copy