Description

LiveCanvas – Constructeur WordPress HTML et CSS pur

Je passe en revue ce que j’ai aimé et ce que je n’ai pas aimé dans ce constructeur de pages HTML/CSS brut.

LiveCanvas est un nouveau venu sans fioritures sur le marché des constructeurs de pages WordPress. Il ne vous promet pas de fonctionnalités fantaisistes ou d’animations flashy, mais il fonctionne super maigre et super propre. Pas de fichiers CSS ou JS supplémentaires sur le frontend !

Voyons ce qui en fait un bon constructeur de pages pour les développeurs de la vieille école.

Caractéristiques uniques de LiveCanvas

1. LiveCanvas est conçu pour les développeurs de la vieille école travaillant en HTML/CSS pur.

C’est à la fois un avantage et un inconvénient. Si vous aimez travailler en HTML et CSS purs, et éviter toute logique PHP ou la nature visuelle par glisser-déposer des constructeurs de pages débutants, LiveCanvas est absolument parfait pour vous.

Il vous permet de définir très proprement votre espace de travail, d’organiser la mise en page dans les colonnes que vous souhaitez, puis de choisir parmi des modèles prédéfinis et des blocs de contenu ou de coder en HTML/CSS brut. Cet aspect à lui seul le rend parfait pour les développeurs qui veulent aller directement au câblage au lieu d’être obligés de fonctionner comme des débutants.

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.

Qui je recommande pour LiveCanvas

LiveCanvas est parfait pour vous si…

• Vous aimez développer en HTML/CSS brut. (Bonus si vous connaissez Bootstrap.)
• Vous avez déjà un design en tête et vous n’avez pas besoin de modèles pré-polis pour vous « inspirer ».
• Vous voulez un site vraiment super rapide, super léger et pratiquement statique.
• Vous voulez une conception personnalisée flexible sans gonflement JS.
• Vous n’avez pas besoin/voulez des fonctionnalités de constructeur de pages « fantaisistes ».
• Vous voulez des fonctions de constructeur de pages simples dans votre thème existant, mais ajoutez très peu de poids.
• Vous détestez l’aspect dynamique de WordPress et des CMS.
• Vous êtes tenté d’essayer des sites statiques pour une meilleure vitesse, mais vous ne voulez pas quitter WordPress.

LiveCanvas est ok pour les non-codeurs si…

• Vous voulez un site propre et élégant.
• Vous êtes capable d’apprendre ou de connaître quelqu’un qui connaît les bases HTML/CSS.
• Vous n’essayez pas de reproduire tous les millions d’effets que DIVI/Elementor ont.

Comment LiveCanvas se compare-t-il à…

• Constructeurs de pages débutants (DIVI, Elementor, WP Bakery, BeaverBuilder) – c’est beaucoup plus léger, mais à peine des modèles sophistiqués, nécessite plus de code manuel et de conception manuelle pour obtenir un design soigné.
• Constructeurs de pages pour développeurs (Oxygen Builder) – les deux aboutissent à un site frontend super rapide. LC n’a pas tous ces identifiants html, mais charge Bootstrap. Oxygen a plus de fonctionnalités et peut faire des choses compliquées au-delà de la conception, mais nécessite une construction de modèle complète et une charge backend plus lente et plus de paramètres/options pour naviguer. LC est un flux de travail plus rapide si vous n’avez besoin que d’une édition HTML/CSS pour certains bits.
• Blocs Gutenberg (Stackable, Qubely, Atomic Blocks, etc.) – Gutenberg est plus facile à utiliser que les constructeurs de pages si vous n’essayez pas de faire quelque chose de super personnalisé. Les blocs Gutenberg ont maintenant une telle variété et tellement de plaisir à utiliser. Vous pouvez mélanger et assortir des blocs de différents développeurs. Cependant, les blocs Gutenberg ne sont pas encore en mesure de personnaliser les en-têtes et les pieds de page.

Vous pouvez essayer LiveCanvas si vous pensez que c’est bon pour vous. (Ils ont encore des contrats à vie pour le moment.)