How to Use Canva to Build a Responsive Website (For Free!)

Canva's powerful, drag-and-drop, responsive website builder is super easy to use and totally free to publish a live website! Here's why it's a great choice and how to use it.

What is Canva

Canva is a powerful graphic and visual design tool that gives both non-designers and designers alike the ability to create professional-looking designs like brochures, digital and print work and social media graphics. All within a very simple, beautiful and easy-to-use interface.

Canva's Responsive Website Builder

One of the latest features to be released by Canva as part of their Visual Worksuite of tools is their website builder. This incredible, no-code, drag-and-drop website builder is built right into the Canva app and you can use it to design a single-page, responsive website that can be published live, directly to the web for free using a .canva domain name or your own custom domain name.

What are the Main Features of Canva's Website Builder That Separate it From Competitors?

While Canva is one of the more simple options for website builders, it does boast some impressive (and hidden) features that are unique to Canva that no other site builder alternatives I've come across have.

Low Learning Curve

Because of its simple features and easy-to-use interface, there is almost no barrier to entry and a very low learning curve. It's easy to navigate around the main sections of the interface to find what you need and the familiar document/text editor layout will be familiar to anyone that's used Microsoft Word.

It's as easy as searching for design elements that you want, dragging and dropping onto your page and tweaking the design to suit your needs and branding. Even advance design features are possible, I was absolutely amazed at this tutorial on how  Tengku Syamil recreated the Apple homepage in Canva in less than an hour!

Single-Page Solution

As far as website builders go, this is on the simpler, stripped-down end of the spectrum. You can't create multiple pages (yet), but rather it allows you to have multiple page sections in a long scrollable format. You can add a navigation that allows you to have anchor links to different sections of your page.

Professional pre-made templates and graphics

What's really exceptional and useful about Canva are the pre-made site templates that are very well designed. You can start with an existing design and tweak it or create something from scratch. There is an extensive selection of professionally designed graphics, typography pairing, themes and color schemes that you can apply to any of your designs! So you don't have to create graphics or illustrations from scratch or go hunting online for separate graphic elements or royalty-free images and to add to your designs, it's all built right into Canva!

If you are looking for a robust, multi-page website builder with a content management system, this is not the best option and there are many Canva alternatives like Ghost, WordPress, Editor X, Wix, Squarespace and Webflow to consider. But beware, the learning curve on each of those alternatives is very high compared to the simplicity of Canva.

Collaborative Environment

Canva's website builder is made to collaborate with others, you can add members to your account and they can view and edit the designs alongside you, making it a great choice for freelancers that want to involve their clients in the process or anyone that wants to get feedback and input on their designs.

Responsive Web Design

I appreciate that the sites build in Canva as already responsive right out of the box and you can test the mobile version of the site in by previewing it in Publish Mode.

Video Backgrounds and Embeddable Video Selfies

Canva is doing some impressive things with video. Two of their hidden features include the ability to add a video as a background to any of your page sections to give it a very impressive, high-end feel.

Another lesser-known feature is that you can record yourself right from your webcam and then embed a small circular video of yourself right into your webpage that auto-plays for your visitors! This is a fantastic way to incorporate an introduction of yourself for your portfolio or even explain a service or feature to your audience.

Publish to the Web (For Free)

Possibly one of the coolest things about Canva's website builder is that it is a hosted solution. Meaning you don't need to purchase web hosting or even a domain name to get your site live, up and running! You can simply design, hit publish and then choose a .canva domain name and your site will be live for free. Otherwise, you can transfer an existing domain name or buy a new one right from within Canva.  

Best Use Cases for Canva's Website Builder  

After doing some extensive testing, I've found that Canva's website builder can be an excellent choice for anyone that needs a one-page portfolio site, a link-tree, a single case study or a landing page for a product or service. It's also great if you want to create sales or squeeze pages for individual products or services. It does lack some of the button hover actions and other interactions that you might expect from a more powerful site builder, but you can add basic buttons and links.

How to Get Started with Canva's Awesome Website Builder For Free

Amazingly enough, you can get quite far on Canva's free plan, but to unlock some of the more pro features and professional graphics, you'll need to upgrade to the affordable Pro account. Even as a professional designer that is skilled at using other no-code site builders and professional design software like Figma, I find the time-to-value and eas of use incomparable for certain projects. I've been a happy, paying user of Canva Pro for years now and appreciate that the website builder is baked into the full Visual Worksuite of products that I also use to create beautiful social media graphics and presentation slides.

Best Practices for Designing Your Site With Canva's Drag and Drop Features

I have built a few websites using Canva's drag-and-drop template and here are some things to note:

Sections vs Pages

The 'sections' of your page in Canva are actually referred to as 'Pages', which is a bit confusing because there is essentially only one page to your website. So by adding a 'Page' remember that you are really just adding a 'Section' to your Page.

Shapes vs Drawing

If you come from using other design software like Figma or Sketch or even other site builders like WordPress, it might seem unusual that you cannot simply draw a shape if you need one. For example, if you want to create a box or container with rounded corners, you'll need to find a pre-existing shape that suits your needs, you can of course change the size and dimensions but some things like border-radius are not editable (at the time of writing this article).

Navigation

If you want to add a main, top navigation to your site that uses anchor links to scroll to different sections of your page, you can do that by Adding a Page Title to your section. To do this you'll need to navigate to the page section and click on the little pencil icon that opens a panel where you can add your Page title and notes or a description if needed. Once all of your sections are titled, you can select 'Add Navigation' from the Publish Mode Menu.

Brand Kit and Styles

I highly recommend setting up your brand kit with your own. logos, color palette and fonts if you have them. It makes the process of creating your pages much quicker and will ensure that everything across your projects have a consistent look and feel. Here's a tutorial on how to do that.

Summary, TL;DR

Canva is a fantastic, simple-to-use, drag-and-drop website builder with some unique out-of-the-box features that makes it easy for anyone to create a one-page, responsive and professional-looking website (with free hosting and a free domain name), making website design more accessible and affordable to everyone!