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:
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.)
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.)
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.
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
Check out my latest Gutenberg guide… Noob Guide to Gutenberg
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.
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.
There are so many details where GB fails, that listing them needs more than a blog post.
But lets see public opinion:
https://wordpress.org/plugins/gutenberg/
2,195 1 star reviews, versus 648 5 stars, with 300 k installs should tell a lot
Or, all the websites that lose their styles when (some GB related) plugin updates. To explain this, for example a plugin is offering some Block, and you can (magic!) add some funky shadow (which takes like 30s with custom css, and yes, just 2 seconds with Gutenberg to add) suddenly disappear on update. Why? Oh, we changed a class name, you “just have to resave the setting”. Yeah, but that shouldn’t be, and wouldn’t be needed if using proper approaches, meaning a proper CSS code, right?
Or, all the resources suddenly spiking from a very low usage to high usage, in the backend, meaning, a server with low resources was previously able to run WP just fine, now its not, you get WPODs or half-rendered content, yes, because server resources are low, but maybe we should consider that more than 80% of the world is still using very low-range internet, nt high speed glass cables like the upper classes in first-world.
Or, just lets take the “preview” feature, previous a click and you previewed the post?
No, now it takes up to 10 seconds to “generate” the preview. What a failure.
Not to speak of all the plugins adding “dynamic” inputs, which work just fine if you have 20 posts on a list, but dare you have a site with 15 k posts, Gutenberg simply and plain full crashes.
I administrate major websites, and in none of them Gutenberg has produced reliable results.
Comparing the time needed to craft a proper CSS file with custom css, and teaching the masses CSS and perhaps some PHP to make things look nice and be dynamic, Gutenberg moves towards the “lets hide everything and keep the masses ignorant” approach, where yes you can do amazing things with a point and click, but you will never learn what is happening behind the scenes.
Or the bulk overload in HTML comments since Gutenberg, polluting the source code with html comments for simple paragraphs, which I have seen upsets specially semantic oriented developers and site owners.
Its’ great, but it’s not a solution for proper and specially for professional website development. Interestingly, on your own post there is not a single positive comment on Gutenberg, so I wonder how comes that some peoples still don’t listen the masses opinion, which is “its great, but do not force it on us!”
I don’t want to enter in a fight over it, its at the end everyone own decision what to use, however the statement that “people screw it up” is too simple and wrong.
It’s not the people, it’s the blinded developers who create things without considering the peoples need.
While we can give every man a fish and make him happy, we should give every man the knowledge how to fish! Then we truly diversify and democratise web development, and the knowledge isn’t wasted. I as a developer do not mind teaching my clients how to truly develop things, even if it means that in future they will do it on their own.
Code should be accessible to everyone, and not be hidden behind a smokescreen of nice settings.
I can’t help but feel you’re out-of-touch with what most A-level developers are doing. Gutenberg isn’t perfect but it’s a massive step more modular, performant, and flexible than existing alternatives. Without Gutenberg blocks, you either have hardcoded templates or pagebuilders (both of which with their own challenges to overcome). Last but not least….I’ve seen plenty of professionally-built websites using Gutenberg and with zero issues. So perhaps it’s the blocks you’re using and the way in you’re using them.
Like you, I’m not here for an argument. People use whatever they want to use. But if you want to know why so many A-grade developers love and use Gutenberg to build incredible solutions…I can help with that. Otherwise, enjoy yourself and have a nice day!
I have a client we created two websites for using a themeforest theme with Elementor (free version). To be fair it is slow – but i think its because the theme was bloated. However the client is ranking for both sites for his main keywords in the top 3 GMB and within the first 5 organic listings depending on keywords entered for electrician type searches in London. Despite the ranking, and the fact that they are pulling in more traffic than they ever did before WordPress was invented, they are complaining bitterly about the google pagespeed insights and gtmetrixs scores (currently 2.8s LCP) and are scared their sites will drop off a cliff in May. So, i am testing LiveCanvas to recreate one of the sites. They will lose the revolutin slider on the home page (yay) and the animations will go, but the message will remain. I am an ex Dreamweaver user 🙂 Wish me luck – oh and BTW i had to remind this client that there are STILL not guarantees re page speed on mobile and even less re Google EAT. I’ll let you know how i get on. and if it works i then need to think about our own site build using Uncode theme and WP Bakery builder…
Hehe…feels like a scary venture! Do let us know how it goes for you. For sure LC is better in the long run than Elementor or WP Bakery Builder.