Canva Website: Create yours RIGHT NOW👇

a lot of you want to know how to create your website with canva canva recently launched the brand new canvas site in 2022 and i have experimented with the features and created a website this website i've showed you the website on the channel and a lot of you guys have asked for the tutorial so this is the video where i show you how to create your website with canva and we are starting right now what's going on everyone my name is ronnie welcome back to the channel if this is your first time joining us and watching one of our tutorials welcome first of all and know that this is the best place for you to learn anything and everything about canva about creating with canva and about growing your business your income or your career with canva we have two new videos every week so if you're new to the channel subscribe and so that you never miss the good stuff all right today's topic is a very important one this video has been expected weighted anticipated by you guys for a very long time you want to learn how to create websites and this video is going to guide you through every single step i have gone through to create this website i just showed you at the beginning a personal branding website or port for your website a website that pretty much presents me as a creator okay so we are going to go through all the steps there are a couple of steps so this is going to be a pretty long tutorial but at the end of the tutorial you will have your very own website if you follow every single steps also something else i want to tell you right now at the beginning before you invest a good amount of time in this tutorial is that i am trying to connect this website that i'm building with canva to my own personal domain so at the end of the video i did all the steps that canva recommends that we do in order to host the domain under a domain that we already have in my case ronniehermosa.com but there is a waiting period in which canva needs to do some checking and it can go up to 72 hours so like i said i've gone through all the steps but in order to see the website hosted on my own domain you might have to wait a couple of days all right that being said let's jump right in and see how you can create your website with canva all right so i thought that i would start by showing you the website right this is the website you can see different sections i'm gonna go and show you exactly how many pages there are to the website but it's it's like a single scrolling page with five or six different sections let me click here on the all pages like the page view here and we can see we have 11 pages but a couple of these pages like page three four six and eight are actually just headers so really there are one two three four five six seven sections to this website okay so we are going to replicate a similar website i would like you to follow along and follow the steps because obviously your website is something very personal so you need to create your very own website the first step to creating your website is to figure out a few things that you need to have ready at your disposal before you actually jump into canva and start designing the website and these things are things like having a vision or a goal what is the purpose of your website why are you even creating a website in the first place you need to have that very clear in order for your website to be efficient and to actually reach your goal so having a vision or having a goal for your website is crucial do not start before you know exactly what the website is for in my case i wanted to create this personal branding site to let everybody know these are the services or these are the topics that i create content about right this is what ronnie actually can teach you okay so that was my goal i wanted to have that very clearly explained on a website so that if people are interested they have different ways to start their journey to learn with me and to reach their own goals so that was my personal goal with this website to give people an overview of what they can learn with me the second thing you really need to have handy before you start jumping in and creating in canva is some good copy for your website so basically that is all the text that will come and populate the different sections on your website you need to have a clear idea of how many sections you want and what these sections will contain what is the goal of every section and how you are going to present the information so have your copy ready spend a good amount of time writing that copy because this is going to be super important we will talk about copy in a minute but this is something you need to kind of figure out before jumping right in another thing you need to have ready at the beginning of the project is a couple of good visuals and if you're creating a personal branding website or port for your website you probably want to have a couple of headshots or very good photos of yourself to include in that website this is the option i have opted for next you will want to know from the get go what are your calls to actions like what are the steps that you want people to take after visiting your website so you need to know okay i'm gonna have two or three things i'm gonna ask people to do to click on or to discover and these will be your course to action so have like a good idea of what you want people to do next before you start creating something else that is going to be very important is your visual identity what kind of color palette are you going to use what kind of fonts do you want on your website so try to know what your website will look like from the get-go by having maybe a style guide or maybe you can set up your brand kit in canva with your color palette and your font because this is going to help you create your website faster and finally but you already know that you will need to have a canva account to create a canva website kind of goes without saying but i just prefer to make that checklist from the beginning of the video so that you can follow along you don't need to be a kind of a pro user any canva user can create websites there will be a few differences in your website creation process whether you are a free canva user or a pro canva user mostly that will be towards the end of your project when you want to publish your website you will see that there are different options available for pro users only but we'll get to that at the end of the tutorial so this is a quick checklist of everything you need before you get into canva and create your website and now for the good stuff let's jump into canva and see how we can get started with our personal branding website so step number two is to actually start with the right template for your canvas site alright so in order to get started and finding the right template what you can do is start from the canva homepage and simply type in website i'm gonna search for website canva is gonna bring me to a search result page where i will see different kinds of visuals for my website search my website keyword what you want to do in order to make sure you find the newest canvas sites so the 2022 version of these canvas sites not the older ones is to open a template that has a bunch of different pages at least six pages you see this one has seven pages this one has seven pages and see how this one for example has just one page so this might not be one of the latest canva websites you want to find one at least at this time of the year and we are still in beta so canvas sites are not yet available to everyone in every country and in the same extent so there will probably be some more changes to these features but for now this is how i make sure i am on the latest canvas site so for example i'm gonna open this one right here has seven pages and you will know this is a new canvas site if you don't see any space between the pages of this website you see usually on an older canva website document you would see some space between the different pages here there is no space and also you will have your page settings here your page buttons basically on the left side and not on top of every page so this is how you recognize you are actually using the latest version of course this doesn't leave me a lot of choice in terms of templates so how can i select among all the templates because canva already has a bunch of different website templates for the new canvas sites but where can i find them well with one of the website open and making sure this is the new one you can head over to your templates button okay i'll simply go back like one time and now from here i should have all the new templates that are available in the library and they are even better they are organized by category okay so the first two sections here is your recently used and then some suggestions for you kind of personalized suggestions and then you have your categories you have your business website resume website wedding tech website real estate education photography etc etc you have a bunch of categories here so i would recommend for a personal branding website like the one we want to create maybe go ahead and find either a business website a resume website artist website could work very well portfolio website that would work as well so basically yeah any of these could work for you me if you ask me which website template i use well it's actually something very similar to the one i opened here it has these boxes it has kind of like these type of fonts and there's a section at the bottom it was not this one exactly let me try to find the one i used here it should be in my recently used yes it's this one right here okay six pages i will apply the six pages so you can actually see the process that i followed when i created my own website so this is how you select the right template for your website you start by opening any template making sure it is a multi-page at least five or six pages you open it and then you go back to the templates button right here and if necessary you click back one time on this little arrow until you get to this page right here in the object panel and you will see all the categories this is how you select the right template for your website the next step is to customize your website template that you just imported into canva according to your visual identity remember i told you at the beginning that you should have your brand kit ready or your visual identity ready that includes your color palette and your font choices so here i'm going to be using my brand kit colors but i'm going to change the font combination for something different so if i head over to my brand kit the way you find your brand kit from canva from within the editor you just click on for example this blue background i'm gonna click on that and i can access my colors here so these are from ronnie's brand kit okay so i have my yellow i have the blacks so i'm gonna use my yellow here and for my visual i'm going to deal with this later at this stage what i want to do is to customize every single page so that it looks on brand according to my color palette and to my font choices i'm not going to change the content for now so not the visuals and not the text but just like how it looks the shell if you want so let's go ahead and do this so i'm going to swap every blue color for my yellow color okay so let me find another way to do that again here for example this frame i'm going to change this blue for my yellow color canva gives me the choice to change all the blues for this yellow i'm gonna do that this is a major time saver you see that it's changed to some extent there's some still some stuff that need to be changed for example the text here so i'm gonna change this text to my yellow okay good and again apply change all and see if everything is changed now so here all good still need to adjust this one right here okay let me see yeah it's pretty good so it did the trick now the second thing i need to adjust is my font choices i'm not gonna use this antonio bowl it looks good but i have my own font i have another idea of combination i like telegraph for my body so i might keep that but for my main board heading font i would love something with a little bit more character and personality than this one okay so what i would do hi everyone my name is hannah morales so i'm just going to change this for my name right now i'm not going to customize all the copy but just my name to see how it will look in my preferred font so i have a font in mind which is called piece songs okay so i'm going to type in peace sauce and this font is a bold font see this is how it looks so of course i don't want this to be on two different lines so i'm gonna reduce the size of my font slightly like so so peace sounds 77 i'm gonna apply this to this section right here and peace sauce as well okay hi everyone my name is rony hermosa okay i'm gonna leave this like so i know it's broken for now but at least i have an idea of like what my font is i'm going to change every single piece of text here and i'd love for canva to have the same kind of feature as we have for the colors we changed one color for the other one and we applied to all the other colors doesn't work like that with text so far it would be nice but yeah maybe let's wait a little bit more i like these telegraph telegraph okay so i'm gonna keep that but this one needs to change let's go for telegraph as well okay so telegraph for these this looks good i'm gonna use the copy style button here this is pretty cool if i use the copy style and paste on this box you see it copies everything okay so this needs to be piece sounds so just finding peace sauce it's right here okay let's not worry about text looking broken at this stage all right here in these boxes i kind of like this combination between these two here so antonio bold i think i'm gonna keep it for now because i like how it looks but definitely for my main headings here i want this to be peace sauce so again like this is just like how it looks for now but it will definitely be adjusted as we create the website alright so this is where we are this looks much more on brand already with my colors of course it's a little bit all over the place but the next thing we are going to do right now is to swap this text right here for my copy so i'm going to start really fine tuning the website and the messaging on the website by pasting my own powerful copy that i have prepared for this website so let's go ahead and do this [Music] [Music] all right so i went ahead and copy paste all of my website copy so what you see here is the advancement of the project i have copied every pieces of text that i had written so all my copies here i still need to take care of a few other things but basically all my titles all the info is here and at this stage i want to give you a couple of tips about writing good website copy because this will probably make or break your website your copy is super important and you should spend a good amount of time thinking about it but here are a couple of tips that will probably help you out the first one is that you want to keep it short and sweet okay this is not the place to start giving a bunch of details not on a personal branding website not on a canva website maybe if you were to create a much more robust website you would have a bunch of information about your business everything that you do but not here here is just this scrolling landing page where you want people to quickly get a glimpse of what it is that you do so do not go over the top with your copy here keep it short and sweet punchy headlines and short descriptions this is what i went for so if we start reading what i've written here i have hi i'm rony hermosa i teach people how to build their personal brand and grow businesses so they can live life on their own term okay so this for example is my mission statement i highly recommend you have your very own mission statement like in the website language we say above the fold so the first thing people will be able to see when they connect to your website or actually here depending on if they are visiting my website from a mobile or from a desktop they will see all the way to ronnie hermosa i believe from a mobile device but maybe if they log in from a computer they will see all the way to the end of my mission statement i can see that my first page stops here and what's cool about canva is that canva website is that you can actually modify the length of your pages okay so i'm not gonna do this for the first page because i like this length but for some other pages you will see that i will be kind of tweaking customizing the size of the page okay so okay tell me more yeah so i have these three boxes that explain where i'm based what i teach about and where my content lives so this section here i'm not happy about it this is probably gonna go all these boxes here with the images but i have my headline here so i'm going to go ahead and delete these and i'm just going to use this section see i told you we can adjust the sections of the page like the length of each page so i'm going to adjust this text box here and you see canva gives me this save zone right here so i'm going to use that and i'm going to reduce this section so it just contains pretty much my headline here my title section for what's to come okay so i want the same space here on top and here at the bottom so one way to do this one way to work with alignment on your website is to use a little trick i like to have this for example i go to my elements and i search for a square grab that square give it a color which is not here that is probably going to stand out so let's give it some fushia color like this one and i'm going to put this right on top of my text and reduce the size of my square so it touches the top of my page right here let's collapse this panel okay so i can zoom in a bit more and we are going to do a little bit of precision work right here just want this and this will help me you see this needs to move slightly down like so okay so again if i search for my page break here yeah we're about right like so so this kind of lets me know that my section here is right in the middle another way to do this and not using your little square right here is simply to click on that text box go to your position button and click on middle okay if you click on middle it will adjust and center your text in the middle of your page and so your page here is very narrow you see from here to here so the text box i know is exactly in the middle i don't want it to be too close to the edge here i feel like i should probably stay within like this boundary right here of my website i want it to be aligned with this line right here as well so what i'm going to do is to actually bring on the rulers and guides okay so yeah i'm going to my file button here show rulers show guides okay so yes this is the right place this one right here don't need it so far this one i will keep okay so i will just adjust everything so that it matches kind of everything here on my website okay the photo will have to kind of follow the same rule here but the photo will go so let's not stress out too much about this just making sure everything is pretty aligned here yeah that looks good okay so using these rulers and guides will probably help you align everything on your website okay so i'm pretty happy about this now how can i tweak this section some more i have all my text here people are saying that what people are saying this is going to go as well so these images will go i will have something different here and this section will stay but i will of course customize my information here so this should say ronniehermosa.com check out my paid courses yes so we have something different here i'm going to change the color of this text to black so it contrasts more on my yellow background and this is what i have for now okay so i'm gonna keep that as such all right so before we move on to the next step of creating your canva website i want to continue giving you a few more tips about creating powerful copy for your website i already told you keep it short and sweet spend a good amount of time working on that copy because it is very important the next tip would be to really work on your titles okay because titles and at least the big headlines is what people are probably going to read they will not read everything on your website but these larger pieces of text there's a good chance that people will actually read them so put some extra effort into creating some catchy titles catchy headlines so you can catch people's attention when they scroll through your website when they browse through your website very quickly so for example here i have hi my name is ronnie hermosa this is pretty catchy okay tell me more so that i want to set the tone three ways for you to start today and you see how i emphasize the start today by changing its color three fun fact this is not gonna stay so i'm gonna delete that then i have my boxes right here and you will see how i kind of organize the different sections of the website based on these three boxes right here i'm gonna split them up on three different pages and add media and calls to actions in a second but 150 plus canva tutorials 10 canva courses for free try canva throw through try canva pro free for 45 days so these titles are action words or action sentences they are direct and they offer value to people who read them okay so because this is probably kind of the heart the core of the website this is what i want people to take action on so this is very important i spent quite a bit of time trying to figure out these titles what people are saying and looking forward to connecting with you so this is probably what people will read on the website if they don't spend much time on it so work extra hard on these headings on these titles and then the last tip when it comes to website copy is to have a clear text hierarchy okay so what i mean by text hierarchy is that you should have like what's the most important then second most important and then third most important and this should be clear and consistent so for example what's utterly most important on the website is this is the headline hi i'm ronnie hermosa so this one is the biggest piece of text 77 second most important is each section title okay so this is one this is another one this is another one and here is the last one and all of these are 42 and then the last or third thing most important is each of the descriptions right here and then this is like the least important but you'll see how i can highlight for example the email address when i go and like polish the website a little bit later but that's what i mean by having a text hierarchy knowing that the main headline will be 77 and then the secondary headline will be 42 44 etc etc so this is super important as well all right we are ready with the text and the copy let's move on to the next stage which is crafting visuals that will come and strengthen our message canva is super good for that we need to use how to create visuals that we will put on our website that will come and support the text that will come and strengthen the already powerful copy this will support it and i think i did a pretty good job let's have a look at the finnish website so i did a pretty good job at branding it personally a lot of you guys have told me when they visited the website oh this is so you ronnie well yes because i put a lot of work behind the visuals because i am kind of like everywhere showing pointing holding stuff but it's me you see me on the thumbnail you see me on the visual the banners right here again the thumbnail the banner a thumbnail and then you see me in my different courses and then at the end another personal branding photo of myself so the first tip i would give you is to have these high quality photos of yourself if you're a kind of a pro user by all means go ahead use the background remover get rid of that background so you can have like very clean photos on your website and they will have no background so you can basically put like whatever color you decide for your brand and have these photos pop over these colors so let me show you how i went about designing this because this is actually a photo of myself and in order to get this effect right here obviously i had the photo so let me get rid of this one for example like this photo of this lady right here and show you what i used so one thing i noticed is that from a canva website at least today in january 2022 you can not access your personal folders which is kind of weird and this will probably change once we get out of beta for canvas sites but at this stage i cannot access my personal folders i have a folder with my personal branding photos but i don't see it here so what i had to do is to just simply go to my canva homepage open another design and i believe i have yeah this design right here so this is basically how i created it from here i can see my folders which i couldn't see in my website document so from my folders i actually have these photos of me without background so it's here running no background so what i did i use one of these photos this one to be precise and yeah i kind of had fun with this one made it bigger i used it pretty much like so and then i added a rectangle at the bottom of it i made sure it kind of matches my hands push the rectangle backwards make sure i gave it the same color as the background of my website and then i exported that so this photo right here i exported that as a png okay and then once i had this visual what i did is to simply import the visual and paste it here as a photo so it should still be here in my uploads let me find it quickly for you yes it is right here like so i just pushed it and reduced this one like so okay so what i can do now is either i reduce the size of this page to match my photo like so okay so i'm happy with this i'm just going to push this up slightly so that it matches everything here so this is how i actually generated this photo with the cool effect of course you need to have the appropriate photo to do the same alright continuing with my visuals if i go back to my original website this one right here i can see this section doesn't have any visual and then i start with these banner visuals okay as you can see i had these three little boxes here on my original template but what i decided to do is to split these across three different pages instead of having them all on the same page so i would have my title here on a page which is already the case and then i will have three different pages with on each page this text box okay so i'm going to do this for this i'm going to go to my grid view and duplicate this page two times like so so i will have my first one and i can delete these two boxes then my second one i delete everything here and then my last one and i will delete these right here you don't need the square for now i just need to keep one maybe for what's coming next but this is how i did it i go back to my website you will see that there is first a page with a section okay so i will create these three headers i will show you exactly how i did create them and i will insert them on individual pages if i go to my grid view you can see first header second and third okay so these stand on individual pages so let's go back to our ongoing project right here under construction website let's create these pages so let's add a page right here so for that i'm gonna click on add a page like so and i'm gonna switch over to grid view to position these pages okay so this page needs to come right here before my first box right here so second box what i can do i will group everything together and move this up make it fit like i'm gonna clip it or snap it to my save zone here for now and then same here with this box right here i'm gonna group it and simply make it snap here for now because what i want to do is to create first the pages so for example this page ctrl c i'm gonna ctrl v here and then one more here ctrl v now i have three blank pages where i'm gonna go ahead and paste my banners my visuals how did i create these banners so first i needed to figure out the exact dimensions for the banners and so i decided to go ahead and find the dimension of what's between these two guys that i've placed because i've decided this is kind of like the maximum length for my website i want everything to fit between these two guides so what i did i actually took a screenshot basically this frame right here and i had this screenshot and so i brought that to canva and i started by uploading a photo so if you click on the little camera icon right here it says edit photo you can actually choose that photo from your computer so it gives me an idea of the dimension 1274 by 178 pixel so edit this photo and now i have this document right here that i can actually work with so basically that's how i decided to proceed for creating my banners okay so i did that i think i gave them a little bit more height so this is actually a little bit too narrow from here i kept the width but i gave it a little bit more height so i ended up with a document like this one right here which is 1166 by 256 pixels so i made it a little bit higher but i'm going to use this template and show you how i created these visuals so once i had the right dimension it was really a question of having the right color so i inserted my yellow and it took me a couple of back and forth but i realized when i visit my website from a computer i will see the entire banner but when i visit my website from a mobile phone everything will be of course like brought back to the middle and i can show you that from my original website if you use the preview button so you can preview from your desktop so this is your your desktop view you see you see the entire banner but if i choose the mobile view this is what i see you see i see the color but i don't see the visual on the side i can see like really a little bit of it but when i tested and actually published the website and went back from my mobile phone i noticed that you can actually see everything you don't even see this little piece right here so this is not super accurate also it will depend on your mobile device but after a little bit of back and forth and testing i actually could define where i should place these visuals so that they only see when people visit my website on a desktop but when people visit my website from their mobile phone they will see these banners as totally yellow just a plain colored background with the text on it you will also notice that i didn't insert my text in the photo because this will be exported as a png and then import it into my website so this is actually a photo but this is a text box and i did this so that the text is actually responsive if i pasted my text in my photos it wouldn't adapt to the size of my screen as well as the way it is adapting because it is a text box and not an image right here all right so let's go ahead and quickly add these sections okay so i have my first section right here let me find it from here so it's in my uploads and it's still here so you see like all the iterations i tried different things with the numbers and then i realized you know what i should not have my text in my photo i should have them plain because otherwise it's not the best way to actually be responsive right here i just make sure they cover the entire length and then i will reduce this section to a minimum and again what i can do is to position this in the middle so now this is exactly at the middle of this section and what i can do go back to my grid and i will delete this page right here and this page right here but copy this one ctrl v and here again v okay so now all i have to do is to swap this visual right here for the second one which is this one you can delete this there you go we reduce the size of the page and the last one right here for my last banner all right so this is taking shape guys let's have a look at my grid view i now have my main page second page my title section all my banners and all i have to do now is to kind of flesh out these other sections right here where i have my information about like the different steps that people can take okay let's close this grid view go back to my original website to see what's actually there you see that i embedded a video here and then i created a call to action a button so let me quickly show you how i did that for one of the sections and we are going to speed up the video because it's basically replicating the same thing three times it's an embed of a video from youtube and creating a button and then same thing here again so three different buttons and then we'll talk a little bit about this section right here and then we'll finish by seeing how i customize this footer here at the bottom of the page so let's go back and see how i embedded this video and created the button okay let's go back to our ongoing project find the right section yes i realized that these headers right here still need to have their text on it so what i did is simply to create a text box okay so the text box i believe has the same dimension as these main titles here okay so let's double check that but it's 42 p sounds 42 so in order to create them i just copied this text box right here and i pasted it here give it the right dimension and so i have one and this said discover this cover make sure it is justified in the middle like so and i position this at the center of my page like so and i had this in the black color okay so that's as easy as this this is at the middle of my page i can make sure it is at the middle by using the alignment commands here so position button and then make sure it is centered which it is right here so yeah basically i'm going to copy this and duplicate it here i can just change this for my original text type deeper all right i have created all my banners here they look good let me show you how to embed the videos okay so i have this page right here this is actually high on the page i'm gonna group all of this and make sure it is here on top of my page so now to embed a video you will want to go to your more button right here and find a button that says youtube so from here you can pretty much paste the url of any youtube video so that's what i did here let me go find the exact same video all right so this is the video right here all i need to do is to grab the url so to grab a url just click on the share button copy this and this is what you will need to paste here in the youtube search box in order to find the video so once you find it just click on it and it will be embedded on your page so this is why i actually kept my little square somewhere right here where is my square so i'm gonna use this square to actually measure the same distance between this and what's underneath this video right here so i'm gonna make this page longer okay so what's underneath this page i want here to have kind of like double the size of this square before i have my button so you see i'm playing around with the guides here [Music] so to create a button i just use a shape in the elements and i believe it was simply a rounded corner rectangle like this one so you can make it as small or large as you want like this you reshape it i used it here pretty much i gave it the same color i gave it like a different color kind of like this fusia color something that pops okay so that's how i created my button and then within this button i had my call to action it says subscribe now okay so in order to have that i use one of my fonts so i'm going to create a text box bring it here i need to change the font my other fonts i think i use telegraph bold okay so telegraph yes but let's use telegraph bold so for that i used the same family telegraph and i bolded it like so yes that's what i did here and let's go for 30 in terms of size subscribe now subscribe now so this is my call to action i want people to subscribe to my youtube channel let's make that slightly bigger don't remember which size i use but this is really up to you 32. yeah just make sure it is completely centered with your button right here so if you want to make sure they are select them both and go to the position button and click middle and center i am now 100 sure these two are exactly aligned i'm gonna group them and all you have to do for this button to work is to actually give it a url okay give it a link so with your button selected i have grouped it so just select it and use the link button right here and paste your url in my case i want to send people to my direct subscribe link on youtube so i have actually a short bitly for that like i have created that i know by heart because i use it all the time because i want you guys to subscribe to my channel so this is it i hit enter on my keyboard and you see it kind of underlines the word here i don't want it on the line so i just quit the underlining with using my underline button here see was as easy as that now if i click on that button click on the link you can see my link here if you want to test your link you can go to the link and you will see today i'm going to show you how you can create liquid this is just to show you that the button isn't working so always test your links so this is how i actually created my section right here next i'm gonna make sure there are again two squares between this button and the bottom of my page right here so i see straight away that i need to make this page a little bit longer this long so that i have the same kind of alignment so i will be reproducing the other pages as well based on the same model i'm not gonna show you everything but i'm just gonna build up my website until i have all of the sections okay so you can see i have recreated each of the sections let me show you in grid view i now have all of my three embed videos my boxes and my calls to action so this looks pretty good i made sure to test the buttons so they go exactly where they need to go it was exactly the same process so use the url or the link button to paste your url now let's have a look at this section right here that says what people are saying so if i go back to the website i actually published let me zoom out a little bit to show you the page here these are testimonials that i took from some of my courses on udemy some of the comments in our youtube channel that i really liked but yeah so these are pretty much testimonials from courses or from the youtube channel so when you see a little team run the icon this is from youtube and these are from our courses but what's cool about this is that i made this little thumbnail right here clickable so if people actually tap or click on this when visiting my website they will go straight to the landing page of this particular course the personal branding course so in order to achieve that i simply added another link to this thumbnail right here so if i click on the thumbnail and then on the link button you will see the url of this course so i'm gonna group everything back together here okay because i ungrouped it to show you the link that's pretty much exactly the same thing something else that is here is that i used irregular shape background so let me show you i'm gonna quickly recreate one so i went ahead and looked for some irregular shapes so you can do that as well and can find like all types of shapes here so it's really up to you how you want to present these but the rest of it were pretty much like uploads of screenshots so i started with a screenshot like this i had the irregular shape in the background and i started building on top of it with the little thumbnails of the courses i made that clickable so you kind of see the idea i'm not gonna recreate everything i'm just like laying the steps for you because your website obviously will be your website with your information but that's pretty much how i created this section that looks like this okay so i think it looks pretty good i try to center everything in the middle as much as possible so that when we watch and discover this page on a mobile we can still read everything because canva will shrink everything at the middle of the page and then from the last section here at the bottom what i did is i added one more photo like one of my personal branded photos so again what i had to do is to go to another canva document find my folders and in this folder i have this photo that i want to use it is this photo right here so i can simply select it command c switch over to my actual project and i will command v to get the photo right here where i need it actually in this website on this document so it's a little bit of a bummer that we cannot access our folder i'm pretty confident this will change as canva rolls out sides to everyone because it doesn't really make sense not to have that for now so yeah positioning this ronnie here kind of excited to connect with you all here at the bottom of the page and i'm going to zoom in on this section so i can actually work on it all right so i got to this place where the entire structure of my website has been built i have all my sections i have all the important ingredients all my course to actions banners embedded videos all the links pretty much are here maybe not here in the footer but i would work on that so what i really need to do from here is to really polish the website or add some details that will make it look more professional even okay so the first thing i did is to add a little arrow right here that points from my name to my mission statement so in order to find this i just went to my elements and i search for an arrow i found one of these cool little arrows i think it was this one right here and so i did something like that rotated the arrow and actually used the arrow from the h and i pointed it like so i think that's what i did so they can live life on their own terms so yeah this is pretty much what i did here with this little arrow and then i added something else actually right here i added the little crown here yes here i had something to underline this text right here this heading i think it was a dotted line dotted line yeah it was something like this actually it was something like so i made it exactly the same size and of course gave it my branded color so what people are saying looks cool and you can even stretch it like so a little bit so this is a little detail and then here at the bottom yes i highlighted this text i didn't want it to be white on yellow because the contrast is not super high so what i did is i transformed this into my main font so it was telegraph i don't want it all caps i just want it like so and i made this black okay made this black but i wanted it to pop more so what i did is to add a shape behind it i believe simply by going back to my elements finding shapes and i believe it was the same rounded edge rectangle something like that so you can really tweak your website to your liking me i'm gonna go for white here and then simply make it the size that you want okay so shoot me an email click here to access my paid courses so what i did here i went ahead and find the logo of udemy and skillshare and i made that an actual clickable button so i'm not going to reproduce this because i've showed you how to create buttons i'm simply going to copy these and paste them here okay so i'm pasting that here making sure they are aligned with what's in here okay in this text so i can bring another guide for aligning my text here okay at this stage is really fine tuning the details of your website so yeah and making sure everything is indeed aligned correctly using the guides is going to be very useful to help you do that okay my socials again i'm going to copy them from the other website i'm actually going to copy this entire section so i don't have to recreate it there's nothing really special here that you absolutely need to learn from me it's really about aligning everything and making sure your buttons work so yeah that's pretty much what there is to it this is your website you can now preview it but before doing so just want to say a word or two about these embeds right here okay working with video on your website this is not the only way to work with video on your website i could have worked in a different way i could have added for example video in that background right here so if i go to the video section here and i grab a video let me add a page at the very bottom of this website that will not stay there but i want to show you what it looks like so let's keep this color black okay and let's say i want to add a page with like something like this video for example and i want to make this full page like this if i preview the website you will see that this section at the bottom will actually be the video and that it will play you see so that's another way of using video i prefer to embed from youtube because what i wanted to show were specific videos but you can work with video on your website this exact way and this will work on any device as well the video will adapt its size to basically the size of your screen so you can either just place the video like so or you can place it in a frame so if i added a frame so if i go to my elements and find like for example this grid and i position this backwards put my video in the grid that will play in the same way just that i can control the dimensions of the video with my grid but you see here at the bottom my video is playing so you can do that which is pretty cool you can give your video some transparency for example i can give it like very low transparency so it kind of looks like something is playing in the background but you cannot completely see all the colors but this is some kind of effect you can also do and then you can have some text on top of that so that could be very cool actually like connect with me i could have gone for something like that but i wanted a more like a simple website to start with but this is something i wanted to show you something else i want to show you is that the embed an embed video or youtube in this case is not the only app you can connect to your website you can connect a bunch of different things here for example you could connect a google maps like if you are a physical business and you want people to find you you can use google maps and find like machu picchu let's say if you live in machu picchu which is unlikely you could have like a google map embed of a specific address of your business or your next training session or anything like that also embedded on your website which can be pretty cool so go have a play and go have a look at all the apps that you can actually embed directly on your website you could embed a flickr gallery or a facebook post you could embed an instagram post so there is a bunch of different things here you can better give on your website which could be pretty fun so for example let's say call me call me let's see if they have gifts for that you see for example this one right here i could have that as my visual for people to actually call me you see it's kind of cheesy it's not the point of this specific website i just want to show you that gifts are going to be working on your website they will play automatically let's close this delete this section right here i'm not gonna keep this page right here delete page perfect and go back to the website now everything is there everything is working let's have a good preview of everything and how they look and let's see how this website will look on different devices so this is how it will look on a desktop computer looks great you can play everything hey guys that was loud i can click on the buttons i can do everything click on these click on the channel click on this course see everything is clickable this this my email address also clickable oh yeah i received this as a question on youtube as well in my previous videos or post how do you make your email address to open directly as someone is going to shoot me an email so this is actually very simple just click on the link button and just copy your email address just like it was a regular url a regular link if you copy and paste your email address right there when you actually preview the website let me show you and people click on that email address it will open an email or here it's not set up on my computer but it will open an email with your address email address on it and people can shoot you an email straight away so there's nothing really to do about it that's uh the beauty of it just type in your email address okay so the website looks cool on a desktop let's have a look on an ipad or tablet looks great too you see oh i need to get rid of that square so that's one of the things you see when you actually preview your website that some little pixels are still there okay let's preview again let's go back to my tablet see how it looks it looks great actually you see these boxes are now stacked on top of each other yep all of this is good and let's see how it looks on a mobile phone yes this is looking good pretty happy about all the results here sometimes text is going to slightly move in boxes i've tried long and hard to fix that couldn't fix it so i decided to fly with it because i mean it's not such a big deal also you kind of have to see the actual result once this is like published which we are going to do right now this is the next step publishing your website all right our website is now ready let's publish it so the new canvas sites have three different options for you to publish okay if you're a free user you will have the choice between publishing your your website on a canva domain so you will have something like dot canva dot site so you have your preferred title dot canva canva.site something like that and you can have up to five free domains like that if you're a free user or your other option is to purchase a domain via canva so you can use canva without going through a third-party website to actually purchase your domain so that is also an option that is possible and available to all users i'm not going to buy a website today but i'm going to show you where to click if you want to go ahead and buy yours and then there is a third option which is only available to pro users and that is the option to host your website on a domain that you currently already own via a third party website could be godaddy or in my case it is siteground so i'm going to start by showing you how to publish on a free domain because most of you guys will be using a canva free account so that's the easiest step and then i'm going to show you the steps on how to host your website your canva created website on a domain you already own but this as you will see requires a couple of days so that canva can kind of connect everything together so unfortunately i won't be able to show you the final result today but if you connect to the website i will show you in the future in a couple of days you should see the website we just created okay so let's go let's start with publishing your website as a free website which is the easiest option okay so for that going back to my website right here i'm gonna switch back to my photos here yes perfect just click on publish as website once you do this you have your three options right here that i just explained let's choose the first one free domain okay continue so from here you will be able to actually customize a couple of things here in your url so go ahead and try that you will also be able to customize your browser tab preview so if i click on this you can customize your favicon here i'm gonna go ahead and upload one of mine your browser tab okay so this i want this to say ronnie hermosa like so and then your site description you can also customize this so i decided to use basically the same sentence here is my mission statement i teach people how to build their personal brand and grow businesses so they can live life on their own terms okay so i'm happy with this i'm just going to go ahead and publish this website canva is going to prepare your design and basically publish your website for you so that's pretty easy to do you see there is some level of customization so my site is now live i can view it here so https slash ronniehermosa.my.canva.site okay so i can view the website and there we go this is my website it is now ready to go this is the first way you will see at the bottom design with canva with this cool animation effect and then you have terms and support so this is what the free website look like they will have in the url.my.canva.site so you cannot customize your url fully if you use your free canva account to publish your website so let me come back to my canva homepage now here i want to show you something in your account settings so if you click on your profile picture go to account settings and come here all the way to your domains you will see that ronnie hermosa.mycanva.site is now here it is one domain managed by canva okay so it's here you can manage it you can unlink it you click here you can unlink that site because you can have up to five free websites so if you reach your limit this is where you need to come to actually unlink your sites so that you can add more okay so that's pretty much publishing your website as a free canva website as a free user okay so if i come back to my website now okay let me show you how to actually update your website let's see from my home page this is my website okay canvas site if i click here you see my design is locked if you continue editing this design you will need to publish it again to update your website let's say you want to add something to your website so in order to edit your website you will have to click on edit design so this is the button right here you will see this bar will change color let's do this and now i am back on the website page and i can do any modification bring any modification that i want if i click on publish website again this is what you will see so you can publish two and that is your free website okay so if i just click continue it will save my latest modification here and your website will be updated so it's really easy to go back and update your website just go to your canva document with your website click on edit design edit the design and publish it again now if you decide and that's what i recommend i would recommend to all of you guys to start by publishing your design as a free website just to see how it looks on different devices on your phone on your tablet on your computer that's what i did but now i'm kind of ready to go the next stage and try to host this website on a domain that i own i have ronniehermosa.com and i i would love for this website to be on this url so the url doesn't have that canva.my.site so that's kind of like my ideal outcome for this website that's why i created it but before i get there let me show you how you can purchase a domain with canva so when you're ready to publish your any changes you might have brought to your website just click here you can either click on the same thing so like if you click continue it will save under your free domain or you can change and if you click on change again you'll have your three options right here so if you click on purchase a new domain and continue then you can search for your domain so let's say ronnie hermosa dot i don't know io for example so yes you can find that all of these domains are available like ronniehermosa.org.info.club whatever i have a lot of things best running hermosa.com so you can claim it and buy it directly from canberra in that case you will pay a recurring price per year to canva okay so basically canva allows you to buy via them and so you don't have to go to godaddy or another third-party website this is not exactly what i want what i want is to host this under my own domain so i'm going to change this one more time and use my existing domain so click on continue all right connected domain so select a domain to publish your site too okay so i already tried to play around with this i have another domain called five to fifty dot com try to connect it to see how it worked preparing for this tutorial and it takes a bunch of time so i'm not gonna lie and i didn't want to pretend it was really easy because it's not easy hopefully because of tutorials like these it will become easier so this is my best shot at connecting my website to a domain that i own okay so i'm gonna add another domain okay connect up to five domains if you bought them from another company and that is for pro users only okay so three users won't have that and then canva says will verify your domain is properly connected before your site is published this can take up to 72 hours okay so my domain is ronnie hermosa.com okay continue so something is happening here there you go so what i will need to do is to use this information so go to your domain host dns settings to add the following record values so i will need to copy these canva makes it easy for you you can just click on the button and click copy and paste that in your domain like dns settings okay so i'm going to do this i'm gonna have to blur some information for privacy reasons but i want to show you like the entire journey to get there so this is my dns settings zone editor i'm gonna select ronniehermosa.com and this is where i need to start uploading and pasting the information that canva gives me here okay so i'm gonna switch between these two windows and try to copy everything that canva provides here for example the txt record so i'm going to copy the first line of text go to txt record and make sure i'm not doing anything stupid here so name okay i'm gonna paste that here and then the value this i'm gonna paste this here and create this entry create this record okay txt record is created perfect just gonna continue this basically i can see my first record here so just going down the list of things here next is the a record so i'm going to copy this create this is where i have my first problem okay because the value that canva gives me this one right here when i copy it it's not recognized says invalid name not sure why but it doesn't work so i i kind of have to get rid of the star failed to create the cname record so yeah this might be a problem probably going to be a problem and i'm probably going to have to go through canva to fix that problem but for now this is my best attempt at connecting this okay so i created this continuing [Music] so i've set up everything like the best i could i'm not a techie person so hopefully this works i'm going to connect the domain here there you go hold tight we are verifying your domain so your custom domain is being connected this can take up to 72 hours we'll send you an email and my email when your site is ready to publish okay so i have the confirmation i'm gonna close that window and go back to my account settings i'm gonna refresh to show you that i should now have my ronnie hermosa.com pending right here so hopefully now my website will be revised by canva everything will be accepted and you will be able to visit this website i will leave a clickable link in the description of the video depending on when you watch it this site might or might not yet be available on that specific custom domain that i own i hope it will be there very soon there's also another video that i promised you about answering all of your questions that you might have about the canvas site i will do that as soon as canva gets back to me i ask canva all of your questions i'm waiting for them to get back to me and when they do i will create the video together with some other videos about canvas sites and i will put them all in this playlist right here so by all means if you enjoyed this video click on that playlist and watch some other videos about creating your website with canva thank you for watching until the end you're an absolute legend let's go make your website now i will see you in the next video

Channel: Design with Canva

Views: 97,117

Keywords: Canva website, how to create a website with canva, how to create a website for free, canva free website, create a website in canva, canva website builder, create a website with canva, create a website using canva, create website for free, free website with canva, how to create a website in canva, how to create website for free in canva, how to make a website with canva, website in canva, canva tutorial 2022, canva websites 2022, website canva tutorial

Id: Eyhue7UQiuo

Length: 64min 57sec (3897 seconds)

Published: Fri Feb 04 2022