LiveCanvas Developer UK

1. Why we love LiveCanvas...

We love it because it outputs lightweight code. This makes your web pages load faster than other page builders. Essential for user satisfaction and Google search engine results.

We also love this page builder because we can create complex components exactly as per your designs. And then import these components into your site. Making them easy for you to add to pages. And for adding your content to them.

It's also has an html and css editor built into it... meaning that if we need to look under-the-hood at anything then it's easy to do so... inside of the interface.

Accessibility is also a doddle with this page builder. Need a semantic tag for a content block, e.g. <article></article>. Then it's easy for us to code this. Heading tags in the wrong order... no worries, easily rectified!

Finally, it uses the Bootstrap 5 CSS framework. This is one of the most popular styling frameworks in the world. Which means that there is a tonne of reusable code that you can use. Unlike any other page builder we've seen!

2. How we work

We have a few different approaches for building your site with this tool.

As follows:

• Approach 1: We do everything for you. We either use the built-in ready-mades or you supply us your designs (or we design from scratch). And we build it out from there.
• Approach 2: Halfway house... We build you your components and you add them to the pages with your content.
• Approach 3: DIY... we install, do all the hard coding aspects of your site, provide you with training... and you take it from there, designing and building your pages.

This isn't a set menu, we can mix and match from the three options below.

3. Great features

3.1 PicoStrap theme

You can use this builder with any theme that supports the Bootstrap 5 CSS framework. But it's really built for using with the PicoStrap theme. Created by the LiveCanvas team.

PicoStrap has the following features:

• Easy configuration of global styles in the WP theme customizer. This is where you configure what font you'll be using for your H1 heading tags etc.
• Edit colours, typography, forms, buttons, main navigation and much more.
• Easy to add third party code to the headers and footers. For example, Google Tag Manager
• Edit your headers and footers or build them directly in the page builder
• And much more... checkout the PicoStrap website

The main advantage of this theme is that it is very lightweight.

3.2 Complete control over your headers and footers

You can override the default headers and footers easily. And use the builder to create your own designs, or even drop in ready-made navigation from external Bootstrap 5 libraries.

Generally, even if you prefer a DIY approach, unless you've used this system before then we'll set up the headers and footers for you.

3.3 Fast composition of pages - readymade pages and blocks

Using the extensive range of readymade templates, you can build out a landing page very quickly. This is a common feature of many page builders. But remember it's outputting super-clean, light-weight code. Giving it a great advantage over the likes of Elementor or Divi.

There are also readymade blocks :

• Heroes
• General content blocks
• Feature blocks
• Galleries
• Call to action banners
• Team blocks
• Pricing tables
• Testimonial blocks
• FAQ blocks
• Contact blocks
• Flex layouts and more...

These ready-made blocks come in light and dark modes.

All these elements will follow the main CSS styles set in PicoStrap. If you need to override them, then this is easy to do via the edit properties panel.

It's also straight-forward to add dynamic content from your posts collection. Or another custom post type. For example, if you needed a block of related posts at the bottom of a blog article.

3.4 Bespoke components - unique designs

We can either build new components for you internally, i.e. within the builder. Or we can code them externally and then import them for you to use.

We then ensure that the components have editing enabled on them so that you can add your content with ease.

For building internally, there is the layout grid builder. This a great tool that allows you to create any layout you need. It's based on the grid layout of Bootstrap 5. Being familiar with this is certainly a bonus, but we ensure that you're up to speed with it before handover.

3.5 Save and reuse components

If you have been customizing a component to match your branding. Then it's useful to be able to save that component for use elsewhere. This feature is built-in and is extremely useful. Especially, for components built-in components that have extensive style modifications.

These saved blocks are added to your 'Your HTML Sections' library. From here they can be easily added to any other page using the builder.

3.6 Responsive layouts

As this page builder is based on top of Bootstrap 5. It has all the B5 breakpoints. There are eight of them. This is very important to ensure that your designs look great on a wide variety of screens. And having eight breakpoints enables this.

Having eight breakpoints isn't overkill either since Bootstrap 5 is a mobile first CSS framework. This means that any styles set in mobile view get inherited by the larger breakpoints... unless another style is set that will override the ones on narrower screens.

3.7 Responsive images

Modern HTML can decide on what image to retrieve from the server based on what size the screen is. You don't want a desktop image being pulled down for a mobile screen. One image size does not fit all!

LiveCanvas srcset attribute for images. This can be setup so that the right sized images are always served.

We often see PageSpeed Insights reports stating the wrong sized image is being used. This resolves that issue.

3.8 Built-in code editor

This isn't an advantage for anyone unfamiliar with HTML and CSS. But for us (and in turn for you) this is a massive bonus. But LiveCanvas comes with a full-blown code editor for HTML and CSS. It allows us to see exactly what is happening under the hood - so to speak. Allowing us to fix issues quickly.

It's the perfect place to ensure that the site is accessible. And also, the place where we can import / drop in any bespoke code.

4. Value for money

We think that LiveCanvas is excellent value for money. It comes with even more features that are outlined above. Head over to the LiveCanvas website and you can check them all out.

5. Next Steps

If you like the look of this page builder then please get in contact with us. We look forward to discussing your project.