LiveCanvas is a newly launched WordPress site builder, with one mission: Don’t make your website cumbersome. While Divi and Elementor are famous for spawning large amounts of div and css into your web sourcecode and potentially slowing down the performance of your website. This article I will reviews LiveCanvas for you to understand.
Live Canvas is built on top of the Bootstrap framework, which is a popular and streamlined HTML/CSS framework developed by Twitter and using only capabilities provided by Bootstrap. No CSS or JS is added. You can also edit your HTML for each element and add generic CSS without leaving the generator. You can even build your website in Live Canvas, then export it to pure Bootstrap HTML and CSS, so you won’t even need WordPress. Developers will love those features!
Since Live Canvas works on Bootstrap it also requires a Bootstrap-based theme. So, in contrast to most page builders, Live Canvas doesn’t work with any themes. When you activate the Live Canvas, it will let you know that it requires the UnderStrap theme, which is a combination of the Underscore theme, an incredibly lightweight Automattic theme (the company behind WordPress), and the Bootstrap framework.
However, UnderStrap doesn’t allow you to customize anything, and since Live Canvas is a visual page builder they developed their own child theme for Understrap, called CustomStrap. The CustomStrap theme uses WordPress Customizer to allow you to set a variety of options.
You can change default Bootstrap color to your project color (primary, secondary, success, alert, etc.), set link and hover color, choose if you want shading and gradation, what font you want to use and so on. You can even add some codes to your site’s and you can also choose if you want things like fixed navigation bars and sidebars.
So let’s come to the LiveCanvas generator itself. It opens full screen and when you click the “add section” button, a side panel with 2 tabs opens.
The first tab is “Templates Available”, containing about 35 pre-designed blocks. LiveCanvas works with sections, rows, columns, and blocks, and available sections are those with pre-made row, column, and block combinations.
In the screenshot, you will see a pre-made Hero Section section, which contains an image block, an icon block, a title block, a text block, and 2 button blocks.
Under the Hero Section, you will see a feature section, which contains one row with a title and another with 3 columns. In each column, there is an icon (or image) and a block of text.
There is a Hero Section with a video background, a picture background, a team section, a price list, a section with 3 cards, a Google Maps section, etc.
In the second tab, the grid generator, you can choose from different column layouts, in which you can place the blocks you want.
LiveCanvas provides about 20 widgets by default. Of course, you have blocks for text, images and buttons and some Bootstrap blocks like blurb, tag, warning, progress bar, accordeon, and carousel. You can also embed videos and music on Google Map, YouTube or Vimeo from Mixcloud’s Soundcloud.
There are also some nice WordPress integrations. There is a block of shortcodes, one that will list categories, and one that will list your posts. In it, you can set the type of post it will display, how many, include or exclude categories etc.
There aren’t any blocks for things like testimonials, features, pricing tables etc, but you’ll find all of those among the ready sections Giap Pham 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 the Font Awesome icon you want and set its color, when you click on a button you can set its link, its size and color.
You can also click the red (block), yellow (column), blue (section) or gray (container) button, which will open up a settings panel. In that settings panel, you can choose to edit the HTML code for that element, replace it, copy or paste content, copy the entire element, delete it, or move it up or down (or left or right with one column).
Moving an element this way feels a bit stale once you get used to the drag and drop editor, and it feels the same way opening the properties panel you see in the screenshot.
For example, you can adjust the colors, but you can only select one of the colors you have set in the CustomStrap theme customizer. You cannot use gradients or set opacity.
That limits your creativity, but on the other hand it will help you keep your color scheme consistent (although in my opinion opacity is a must-have feature).
The same goes for things like padding and margin. You can only set those values from 1 to 5, which are the default Bootstrap values in rem. Rem means the size is related to the font size set in CustomStrap settings. If you set the default font size to 16px, you can set the padding or margin between 4px (0.25rem) and 48px (3rem). Once you get used to just dragging the padding and margins to the desired height, this feels quite restrictive, but again it helps to keep the composition consistent.
You can also set drop shadows, animations, and shape dividers, but again, there aren’t many customization options. Most builders allow you to set things like the height of the shape divider, duration of the animation or the color of the shadow, which is not possible with LiveCanvas. Also without borders, border radius, line height, width and height (minimum and maximum), and so on.
Most of those limitations are due to the lack of cumbersome missions. 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 colors, shadows, animations, padding, margins, and so on, only one of the default Bootstrap CSS classes is added to the HTML code.
There’s also no undo/redo option, so if you do it wrong, you have a problem … Live Canvas uses the WordPress modifying system, so if you really mess, you can always go back to the version. before, but undo/redo is a really essential element for any software.
One thing that is really interesting, however, 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 for that gallery from within the builder and add the image you want with 1 click. You can even apply a color filter to an image, like the black and white filter that you used in the screenshot.
Of course, you can also upload your own images or choose one from the media library, but unfortunately, you can’t use filters for those images. You also cannot set the background size (cover, contain, repeat, etc.) and there is also no parallax effect.
There are also a few dozen vector clipart items you can choose from, but in my opinion they look pretty small and the catalog is limited to being a truly valuable addition. Great idea, but just implementation isn’t enough.
Ability to meet
I probably don’t need to tell you how important responsive design is these days. Responsibility is one of the cornerstones of the Bootstrap framework, so I would expect it to be one of the Live Canvas strengths as well. At first glance, it is; while most page builders offer only 3 breakpoints (desktop, tablet in portrait, and smartphone in portrait), Live Canvas offers 7 different breakpoints.
Multiple stops give you the potential to create a really well-responsive website… but not with Live Canvas. While it looks perfectly fine on all devices, you can’t control anything except the column width. Most page builders allow you to hide mobile, tablet or desktop elements, set different padding and margins for different devices, adjust the font size … but Live Canvas (not yet).
Currently the price of LiveCanvas is quite attractive:
- Annual subscription is reduced to $39/year (original price $79)
- Lifetime version is decreasing to $99/year (original price $199)
Visit the website to see details: https://livecanvas.com
Both versions allow you to install LiveCanvas on unlimited websites and you can also use it on client websites. This makes Live Canvas even more appealing to developers!
Video reviews LiveCanvas
Live Canvas can be the developer Plugin Builder. It uses Bootstrap, you can edit HTML for any element, you can use custom HTML snippets as the building block, global CSS editing right in the generator, and it doesn’t add up the code. . You can even download your website in pure HTML and CSS form and host it without WordPress!
However, in their opinion, they did not take the mission a little too far. It’s a noble mission, but it restricts you a bit. Adding the options I mentioned in the “limits” section would require adding a few hundred lines of CSS to a regular web page, but that won’t have a noticeable impact on site speed. A developer will only enter some CSS code for the things they remember on their own, but most page builder users can use the page builder because they don’t know how to code…
What I really like about Live Canvas is that they really seem to listen to their users. When I tried the Live Canvas for the first time, I emailed them about some of the problems I had: no way to edit CSS in the builder itself, no way to use your own colors ( default Bootstrap color only), the color picker used Bootstrap name (primary, secondary, success, warning) instead of real color, can’t adjust horizontal padding, no way to center your content… a lot of the basics can’t be done with the Live Canvas builder.
A few days later, I got a response email saying they were working on a new version that would solve many of the problems I mentioned and a few weeks later, they released a new version that really did. overcame a lot of those problems. problems and made a lot of improvements that I have proposed.
So while LiveCanvas isn’t my favorite site builder yet, I will definitely continue to follow them. And again, for developers, LiveCanvas might be the right choice.
LiveCanvas pricing is quite competitive and they offer a 30-day money-back guarantee, so if you like the strengths and you know a bit about CSS, visit the LiveCanvas website here to purchase and experience the submission. New and extremely lightweight builder.
If you encounter any errors during the purchase or installation process, please leave a comment, I will answer your questions.
Follow Fanpage to update the latest news: Fanpage Giap Pham