From the course: No-Code Solutions for Web Sites And Apps

Canva for no-code websites

- [Instructor] Canva is everyone's favorite tool for graphic design when you're not a designer. It's famous for tons and tons of templates of all kinds and dimensions. And now Canva is offering a free one-page website builder based on, once again, lots and lots and lots of templates. So let's take a look at Canva and see how these websites are working. This is canva.com/website-builder and this is the description of what the technology is. So as it says, you start with one of their templates and there are a bewildering variety of these templates which you can change colors and pictures and of course, the content and so forth. They have lots of different templates that you can preview right here on their website and take a closer look at what all of those templates are. They describe what these websites are. They're a drag and drop website maker with all of the different templates and lots of space for your content. And then you can launch your website with just a click. So as it says here, you can get a free SEO-friendly domain, that would be one that is attached to Canva itself, or you can purchase a domain name and you can purchase that through Canva. Normally, domain names cost somewhere starting usually around $10, $12, and they go up from there. Sometimes they get quite expensive. But you can buy it straight from Canva here. Or if you have a Pro account with Canva, meaning that you're paying for your Canva account, you have some additional options that are there as well. You can see here that you have the ability to collaborate with your team on these. You can edit your sites from your phone. And they'll also give you some information about the traffic that's coming to your website. So let's take a look at what the interface actually looks like. If you go into Canva, I have a Canva Pro account and I have chosen one of their templates here. This one has an introductory page here and it's put together kind of in the order of slides. So basically this website would be a series of, you can think of them as slides or sections. And as you scroll down, this is what the webpage would look like. So this was a realtor page that I started with and I'm just repurposing it for me as a no-code specialist. So for example, I've swapped out the picture here with one that works for web design as opposed to real estate. Here on the second slide, I'll show you a few things that you can do with this. It's just typical kind of Canva stuff. So for example, this slide shows some text, get to know me. It shows you some text here and a button that might link somewhere, but we could change this completely. So one thing that I could try doing would be to click on one of the images here. We could do a search for photographs and pull one up. These are photos that come with Canva. Maybe I like this one and want to use this as my background image. If we right click on this, we can choose from this Set Image As Background. So there it is. We can just get rid of the pictures that are here just by selecting those and hitting Delete. I can grab the text and just drag it on over. Probably be better if this text was a different color, so maybe we'll make it white. Maybe I want to change my text here. With over 20 years in web development, I can help you with your no-code website. Whatever it is that you want to say. Once again, I can highlight that text and change its color. I could also change the color of this button. One of the other things that's kind of nice is you can say Apply Colors to Page. So it will take the colors that are seen here and apply it to at least this section of the page. So that button looks like it fits a little bit better at this point in time. We can see about changing the color of that button. We can make it a black button. That might make it pop a little more, or a gray button. We need to change the color of the text on that. That black was kind of nice. So you could see how easy it is just to go through this and make modifications to what you're doing. Anything that you want to change here on these slides. And then when you're done and you're ready to publish this, you can go to the Publish Website button up here on the top and it will temporarily lock your design while you're publishing your website. That is useful if you are working with collaborators. And it's going to show you a little bit of choices that you have here. So we can resize it on mobile. We can include navigation or not include navigation. And looks like I have some more configuration to do here with some page titles if I want to use the navigation option. So let's say without navigation. Then I have, because again, I have a Pro plan for Canva, I can either publish this with a free domain, just publish it straight to Canva. I can purchase a new domain through Canva. Or because I have a Pro plan, I can use one of the domain names that I already own and point it to my Canva website. So basically, Canva wants to make some money through domain name purchases. And if you have a free account, that is one way that you could have a Canva website without purchasing a Canva Pro plan. But if you already have a Canva Pro plan, then you don't have to purchase their domain names. I'm just going to show you what this looks like with the free domain name. So we'll say Continue. It'll ask me for what would I like for a so-called subdomain. So this would be the website that you would look at. What would you type into your web browser to see this webpage? So I am going to say Jen4web. That's kind of how people know me everywhere on the internet. So, jen4web.my.canva.site will be my web address. And I'm going to say Continue. I have the option of editing some things here. Right now this says green organic warm food. Probably not what I want, so I can change this. Let's change this to Jen Kramer. No-code tool expert. And I can write a description of my website. Jen Kramer helps professionals create websites without code. I could turn on password protection if I wanted or hide my website from search engines. Depending on the kind of site that you have, that might be something you want to do. And then we can just publish it. And so this will tell me that my website is now live and I can view my website. This will open it up in a new tab. And sure enough, here I am at jen4web.my.canva.site. You can see my tab up here has the information that I typed in, and now I can start scrolling through my site. Clearly I have some more work to do if this was going to be a real website for me. But it is a very, very simple way of putting together a quick one-page website that looks great for an unbeatable price. And if this is the kind of thing that you need, this might be the tool for you.

Contents