Master Website Creation with Canva - No Code Required

1. Course Introduction: Hi, everyone. Welcome to the Canva web Designing course. In this course, you are going to learn how to do a complete website from scratch. You will learn how to use web designing concepts with Canva, how to create the layout designs with Canva, how to create the homepage informations, adding the images content, and how to add special buttons, how to interact videos, how to add other media content using Canva pages. You can also learn how to add navigation how to add interactivity between each and every pages and how to add hyperlink between one website to another website. At the end, you to learn how to add contact pages, how to add the contact form, and how to bind your email ID with the contact form. At the same time, you will learn how to optimize that website for mobile and desktop purpose. To know how to add brand essential values like how to add the brand colors, typography and other elements, how to collaborate all those things with Canva website. Let us see in our class. 2. Explore Canva's user interface: Hi. Welcome to the introduction to Canva for website design. When you sign up with the Canva for the first time, you will have this dashboard view at the beginning. Since I was using Canva previously, I have my previous documents which is present here. Here, we can see that this is called recent Design. My all recent documents will be present here. This will be the home page of the Canva. Let us see the interface of this Canva first. In this interface, you can see, we have the menu here, can click this menu and I can access all those options what I have for this work. Now after this menu, I have create option. You can also create a new documents using these preset values. You to have custom size new document option here. Apart from this on left hand side, you can see I have the option called home. This is the home page. Right now, we are in home page of the Canva. After Canva Home, I have the folder called projects. I can go to the projects and here I can save my documents in a different folder. Here you can see, I already created one folder which is print production. If I'm going to create a website design, I'm going to create a new folder here. I click this Ad new and here I choose folder. Here I'm going to add the folder name which is design or website design. I choose this Continue. Right now, I don't want to share this information, this folder with anyone else, so I don't need to choose anything else. I just click Continue. Here you see, I have the new folder which is website design. Inside this folder, I can carry all those design works I'm going to use in this project. In this way, we have all the files to be managed with this category, which is projects. After this, we have the templates option. We can access a lot of templates which is available with the Canva. You to have the brand option, which is only useful and only available for the pro users. We can continue without this, we don't need this anyway. I have the option called Canva AI. With the help of Canva A, I can produce a lot of designs, codes, and all the things. We'll also see how we can use this for creating websites. Then after that, I have the apps. Apps or the additional features which is available with the camera. In a website, in a browser, we have the concept called adds. In Firefox, we have the adds. In a Google Chrome, we have the extensions in the same way. Same way, we have a lot of added apps with a Canva. You can all access those apps with the help of this option called apps. If you want to search any particular term and you need that work, you can search here and you can access that particular app inside the Canva. Here they have provided you a lot of the famous apps which is available with a Canva. Use all those things as we required with our project work. So these are, you know, the menu option we have with this Canva project work. I will click Home. Again, I will be in a home page. So here we have the very first banner area. It shows you your design templates and Canva AI. So if you want to search some content which is available with your project works, you can go to the UA design. But if you don't have anything, you are going to create something new. You can go to the templates and you can search the information here. Like, I'm going to search something called website. I just type the keyword website and it shows you web design, website banner, website portfolio, website template. All those website based templates which is available with the Canva will be shown here. I'm going to choose this website design, and you can see the default website templates are getting loaded. You do have the social media designs here and portfolio websites. All those templates are available with Canva. You have Canva AI. With the help of the Canva AI, you can create the code free designs also. You'll see that thing in upcoming lessons. Let us move forward. Now again, I come to this template area. In a template, you can see, when I search here, I have a lot of suggestion. I can choose which one I want, I can go further with that same. These are the options we have with CanavaUuser interface. I go to the homepage. In a homepage, after this search option, you can see we have the preset values. I start with Canva sheets as we have the Google sheets, we have the dog and sheets with the Canva. To have whiteboard option to create the design and the e condent work for the students or learners. You can create presentations, social media, photo editing works, video editing works, printable designs and website. Since we are going to use the website creation process with the Canva, I'm going to use this option for this course. Apart from this, if you want to create something new other than the preset value, you can choose this option which is custom size. After that, you have the upload option. If you want to upload any other media which is available with the Canva, you can use this upload option. You to have more options. Here they have provided you the famous preset values. If you want to access more than that, you can go to this more option and it will show you more categories with the template structure here. Now this close. After these preset values, I have what is new feature available with the Canva? Canva every month upgrade their features. They are adding each month new features. At the end of every year, they conduct the program called Canva Create. During that program they create and update, they release major updates of the Canva each and every year. Don't miss that and I'll tell you about that also in upcoming lessons. After the what's new, I have the recent designs. You can see what are all the designs I created with the Canva, which is available with this space. This is the user interface of this Canva software. In upcoming lessons, we are going to see how we can use the other things. 3. Understand Canva’s website templates and layouts: In this lesson, I'm going to show you how to access the Canva website template. How is the layout looks with the Canva site. Let us see. At first, I come to the top of this banner and here I'm going to tie website. I just type website and press Enter. It loads a lot of new templates. You can see that. You can also create a new blank website using this option. Create a blank website. When you search on this place itself, you have the option called category. I just click here. Here you can give the category name like education, portfolio, and whatever the category you require, you can add here. Also you to have the option called style. I click the style it shows you whether you need in the form of animated modern or simple, clean, minimalistic and maximalistic. All those styles are available here. Based on the need, you can choose that style also. By default, it will be all styles. Here also in category, by default, it will be all categories. Now I just time the keyword and press Enter, it load all those templates. You can see these templates are free templates. We don't need the pro account to access those templates. But this one is the pro template. You can see that I just have the video. You'll see how to create these templates using Canva in upcoming lessons. We have a lot of free websites. You can navigate and you can see the further pages. When you roll over the mouse, shows you the pages design as well as how the elements are loading inside the particular web page. These are the free websites we have with the Canva. I will load one website here, I'm going to choose this one. I just click that website. It shows you the preview of the website here and you can scroll down. You can see what content we have with that website template in each and every page. It's a complete page. You can see that this is the homepage. After the homepage, we have other details here. Also at the end, we have the contact details. If you want to use this template, if you want to customize that, you can choose this option, customize this template. About that, you can see that who created this template design, which is Canva Creative Studio. It shows you the resolution also what resolution we have with the Canva template design. Now I choose this customize this template and you can see that the website was loading on my page. Now you can see that this home page have the different image background. After that, I just scroll down. This is how you need to navigate each and every page. Here I have the pages, having the visuals, image and text. Scroll down further, and it shows you what are all the services they are providing. And here I choose this is the text content. You can see that and this is the graphics, you to have those rectangles in the graphic form, you to have images. This is how they constructed their website design. The end, they provide the contact details, email ID. If you have the Facebook, Instagram and Twitter accounts, you can connect those information here when the user visiting the website and navigate with this contact page and they click that Facebook icon that will redirect to your page and they can access all the information what you provided with the social media pages. This is how we have the typical structure of the website, the template designs which is available with Canva. 4. Learn to create a Canva account and set up a project: In this lesson, I'm going to show you how we can create a new website designing document using Canva. If you want to register or sign up with Canva, you have to use the options. Let me show you that. First, you need to visit the pagcva.com. After visiting the pagcva.com, you can sign in or sign up if you are new for the Canva. As we sign up with social media pages, you to have to provide the email information. After provided your email information, you will get this interface for you. After you got this home page, at the bottom, you can see that we have the notification icon and we have the profile settings value here. I click this profile and I can choose which one is setting. When I choose setting, it shows you the profile details here. It shows you the email ID, it shows you the contact, name, what you have provided, and for what purpose you are using this Canva account. When you sign up for the first time, that to ask you this information for what purpose you are using Canva. So here you can choose the category based on who you are. If you are a teacher, you can choose teacher, and if you are a student, you can choose student. If you are going to use this for personal purpose, you can choose personal. I'm a teacher, so I choose the teacher option. You can also change it later and you can update this. You too can choose what kind of language you have. You can choose that based on your need. Now I choose English United Kingdom. After that, you to have a lot more options here, but these are the basic options we can provide when you sign up with the Canva. Now, again, I come to this homepage. I'm going to create a new website design using Canva. As I shows you, when I go to this website design using this search banner, there also you have the Create New website option. But directly from this homepage, you can choose this option, which is website Create new. Just click here. When I click that, you can see that the separate new document which is opened in a new tab. This is the homepage. But here you can see that the name of the document is untitled design and the type of the document is website. It shows you the further information for creating your website and it shows you the tool tip information here. You can add sections and also you can add pages. Let me tell you about those things in our further lessons. What is section and what is page. Previously, they don't have big difference. They just have the pages, but now we have the sections and pages. We'll see that in our upcoming lessons. We'll see that one by one. So this is how you can create a new document to create your project work with Canva. 5. Identify essential design tools in Canva: Hey, everyone. In this lesson, I'm going to show you what are all the major essential tools we have to create the website design in Canva. To do that, I just add a new page with this template. Let me show you how to create the entire page in our upcoming lessons. Here I was creating a new page. On your left hand side, you can see that we have a lot of options when I have this new page with Canva. You to have the same options for the existing pages. At first, you have the option called elements. When you go to elements, you can see that we have a recently used elements, shapes, button, and a image generator, we'll see that in upcoming lessons, graphics, poles and quizzes, stickers, photos, videos, charts, sheets, frames, et cetera. All those elements you can use when you need for your design with Canva page. An example. I'm going to choose the shapes. I click this rectangle shape. When I click this rectangle shape, it was loaded inside this design at the center point. You to have the text area here so I can type home and I can resize this particular text. I can select it, I can scale it according to my need. So this is just a rectangle. If you don't need the text, you need a rectangle alone, you can use this as an rectangle. Can increase the width, height, and you have all the editing functions here at the top of this Canva page. This is the rectangle tool. When you select, it will automatically show you the control options here. It shows you the scaling. It shows you the scaling from the corner. If you shift tiki, you can equally reduce and if you want to rotate, you have a separate option here, you can rotate that object. The same way, you can manipulate all those objects, you can add and you can manipulate how do you want. To have the color change property here, can choose the color and you can add the color what you want for the design. Now in the same way, I go to the elements again. You have the option called buttons. These are the default elements we have for web page design. I choose C all. They provided you six button designs here. You can just add and use it. After that, we have a image generator. You'll see that in our upcoming lessons, you have the graphics, press C all. We can see by default with the different categories, we have so many graphics here. If you want some new graphics, you can search here, can add the name of the element and you can search. I just press Back button, the same way to have the polls and quizzes. If you want, you can just click there and it will be available with your web page. You can set up everything. I'll show you that thing in our upcoming lessons. You have the photos, you can click there and you can load the photos, videos, charts, all those things inside the Canva. Every element, what you have on this work area, when you select that, you have the tools and other options here. You can change the color, you can change the properties for this Canva design work. These are the major essential tools and elements we have for Canva with web designing work. 6. Practice selecting and customizing a template: The this lesson, I'm going to show you how to customize a Canva website template. To do that, I come here and I'm going to choose the term which is required with a category. I'm going to choose a website. This website is all about the food. I just type the keyword food website. Research here. You can see that we have a lot of results here and I'm going to choose one website here. I'm going to modify that according to my need. I was choosing this one. I just click there. It shows you the preview. I scroll down, and I just visit and see all those page designs. Now I choose customize this template. Whenever you choose any one template design, we do have the similar design and the theme based websites below that design. So if you want to serve, you can also serve and you can get which one you need. Now I need this one, so I just click customize this template, and it was getting open. Now I want to customize this according to my need. The first thing, I want to change the name of this website document. I can change this name into food website. Based on the name of the particular restaurant or the hotel, you can mention the name here. I just scroll down. You see what are all those sections we have with Canva. At first section, we have the basic information about the particular restaurant name and we have the tag line. You can mention your restaurant name with the logo here if you want. There is a image element. You can see that if I want to access, I can double click there. You can see we have the image element. I just click here, Cancel. I don't want to do any change right now. I just scroll down and here we have a separate section. It has different backgrounds. You can see that. Now, I just go to the top. This section is all about that particular restaurant. You can see that when I choose this section, there is a transform control here. Using that, I can expand or reduce the particular web page area. Based on the visibility with the monitor browser view, it can choose how you want. However, you can also reduce if you don't want that much amount of space and you can also increase. This helps us to increase or decrease the particular section of this website. Apart from that, I have a text information, shaves Inside the shaves, I too have the text. Here also I have the images inside the frame. You can see that when this website was running, I have the animation inside those images. I have the price of those images also and I come here with those options for H boxes, and we have a review and meal cats finally, we have the contact page. So this is how we have the typical website template with the Canva. When you open any template here, you to have the same kind of structures. Let me choose this one. This is also a free design. You can see that. I click there and I just scroll down. I can see the further pages clearly. In the same way, you can access any template. You can just click there that will be added and you can see the preview. After that, if you feel like you need that design, you can go for this, customize this template. I just come back to this design. Apart from those things, I just scroll app and go to the first page. So the west page always will have the primary element of the particular service or restaurant. That's how they provided this image. I need to change this image, I need to get better images as well as better alignment of the text and all information. That's what we are going to do in our upcoming next lesson. 7. Experiment with changing colors, fonts, and images: In this lesson, I'm going to show you how we can edit the elements of this customized website template. To do that, first, I'm going to start with this homepage. In a homepage, I'm going to add the logo first. To add the logo, I have a logo here. I just copy this logo. I select it, press Control C, or you can write it and you can choose Copy. Now I come to this website template. I want to paste that just press Control B. When I press Control B, I have that logo design here. Now, I just scale it and I can place where exactly I want. Most of the time, you can place that logo on left hand side of this website. That was the best place to place any logo design for website. The user's e first will look at that place alone. Now I was placed there. Then thereafter, I need the proper color attention and the background setting for that. To do that, I just select the picture at the background. I can see that this picture was placed at the background of this particular section. To delete that picture, I just click the picture and I just delete button. I can successfully delete that image and I can add any new image here. So to do that, I just click the background. Here I choose the background color, and I can change whatever the color I want. So based on my need, I can change the color here. After changing the color, I can select the background. I can expand or reduce the height of the home page. Here I'm going to add more details. I have a logo here and I'm going to add a very pleasant image which is relevant to this website. To do that, I go to the elements. In elements, I'm going to choose the option called photos. I click Photos here and we have a lot of photos here. I'm going to choose the category which is food. I just type food and presenter, you can see it load a lot of food items on screen. I can choose whichever the image is app one for my design. I choose this one. It contain a lot of food items, but I need more food background, so I choose food background. It shows you food elements at the same time, there is a space to add your details of the website or the company. I just choose this since it's a pro image, you can see there, I cannot access this completely. If you want to access the complete image which has more quality, you can use the website called PaxlsO you can use the free images which is available from this Canva. Like I choose this picture, I just right to choose replace background. For that particular section alone, it replaces the background to show you the magic recommendation. I choose this CO. It display all those recommendations for me. If I want to show some food items here, I can just type the keyword food, it shows you a lot of food items. I can choose whichever the food you want to place there with the plate. Just type the keyword, food and plate, and you can see that most of the images are pro images and few of them are free. I can see that. I just click that if you want, I can use that here. I also have this image. I can use this also. Based on your need, you can select what images you need to place. I can also choose the food items like burger. You will have the image with transparent background. You can see that. I choose the picture which I want to place here. Based on the need, you have the elements, what you need to add on your home page, you can add it. Going to place Pizza. And to have transparent background image as well as the normal image. I choose this picture, I reduce the size. I can rotate this and I can place, how do I want. This is how I can replace the existing images from the background. I can also add new images as I show you. The same way you can pick any image, type pasta. You have a pasta in different plates. I can see that. Whatever the image you feel, which is important for the design, you can just load it from the images and it will be available here. The same way, I can also load other all images. If you feel like you need more visibility for the logo, you can add a separate shape for that. I'm going to use the elements. In elements, I'm going to use the rectangle. Here I have aqui press or I can access this rectangle tool, which is a squared tool. I can place this here for the background of the logo. Now after placing this, I just want to send it back or send behind the logo. To do that, I just right click over here and I come to this align to page, and this option is for align the object over or left ransre or right hands, something like that. I come to this layer and I have the option called sent backward. You can see the shortcut key control open brace. I can click that to send that behind the logo. Now, I move the logo here, and I place exactly how I want. However, I can choose this rectangle. I can adjust the corner appearance, how do I want based on that need I have? I make it curve and if you want to make the color into more bright or dark, I can also add then after adding the images, shapes, logo, finally, I can concentrate the text information. I can choose the text style here. There are huge number of styles out there. Based on the need, you can choose which style you want you to have the colors for the text, choose the right colors. And the text will have those information. I can also align the text into center of the text frame, and here all we have the center alignment text. I just place over this place. And we can animate the text and the images, what we have on the home page. Now, if I want to add some shadow effects, I choose the text. I go to the effects at the top of this menu. Here I have all the text effects, which is including shadow. I choose shadow and I can change the color of the shadow here. I just want to add the black. I can adjust the transparency here so that text will have more visibility. This is how I can change the color of the text, color of the shape. I can add more new images on this page, like the background image, the two product images. I can add the logo, I can highlight the logo using the shapes. This is how we can able to create modifications with the existing template and we can use it in Canva. 8. Save and preview the design: In this lesson, I'm going to show you how we can save the Canva document, how we can have the review of the website, what we are creating with Canva. To do that, I come to the file menu. In file menu, you can see the option called Save. In Canva, you don't need to each and every time save the document. Whenever you do the work, it automatically save with the Canva documents. The only thing what you required is you need the proper Internet connection. Without proper Internet connection, it will not save the steps what you have done using the Canva. If you want to save man will inside the canva, you can go to the file menu and you can choose the option called save. This ensures you saved all the changes or created documents within the canva. Here at the top of this manure, you can see there is a tick mark which also indicates all changes saved. Now I'm going to do a small change. I just click this and I'm going to move the position of the object. When I move, you can see here, it will show you the update of the present movement in saved form. You can see that how it was showing. Whenever you have this option instead of loading or saving, this document will be automatically saved. You don't need to save separately with the name. If you want to add the name of the document at the top of this place, we can add and you can just present that itself enough to save the particular file name also. Now after adding all those information, I want to make the preview. To make the preview at the top of this manubar, you have the option called preview. You can see the I thumbnail here. I just click this option, Preview. It shows you with browser view. It shows you the three buttons, which is minimize resize and close buttons, and it has the animation also. You have seen that I just press this preview again. It shows you how it was animated in a template. So that was perfectly added. Those changes what I was made also updated. And if I want to change the preview model into mobile, at the top, you have the desktop, then you have the mobile. You can choose a mobile and you'll have the mobile compactable preview. You can see that it automatically arrange the objects again and shows you one by one. This is how we can have the preview of either a mobile or desktop view using Canva, which will help you to create the proper website which is required using Canva. 9. Understand the basic structure of a website: In this lesson, I'm going to show you how we can categorize the anatomy of website. The website will have multiple pages with a lot of elements. Let me show you with the real time example. I'm going to open a website. This is a website, which is called amazon.com. If you look at the website design at the top, we have the logo of the particular brand and we have some other options here, we can have the instant search of the product. You have the language, you have the sign in and card and or DDS. So below that, the plant logo, we have the navigation bar. In most of the websites, you'll have the navigation bar at the top, either at the first row of this banner or the second row. This content will be the static one. Even when you scroll down or scroll up, you can see those logo designs here as well as the navigation bar. After this navigation bar or the buttons, we have a banner area. Here we have the most important information about the website. Like if they provided list of services, those services will be available here. Since it's a e commerce website, there are so many new products or new launches or the offer based products will be displayed here. This will be the first slide and here I have more slides. Sometimes those flocs will be continuously play by self. This banner area attracts audience and they design this banner area as the common one. If you watch this banner area in your mobile phone or a smart TV that also you'll have the very good look this layout will be adjustable. That was one of the best advantage of it. After this navigation bar, you have the banner area, then you have the body of this website. In this body of the website, based on your need, you can plan how many columns or row of content you need. Since it's a e commerce website, they have provided a lot of products. They don't need to give a description here because when they choose the product, the product page alone will have the detailed information about the product. I just scroll down. They have a different layouts here to present the products, but that has the uniform the arrangement. We'll see about that in our further lessons. At the end, I have additional information about different links. Finally, I have the area called Footer. In Footer, I have the copyright information and other common details here. This will be the basic structure of the website, the navigation bar with a header, and the banner area, and the content area, which is also called the body of the website. Finally, we have the footer. This is how each and every website will have a structure. In Canva, we also going to create the same structure based website for our design. 10. Create a New Canva Website: In this lesson, I'm going to show you how we can create a new website using Canva. First, I'm going to choose this option website. So through this option itself, you can create a new website. I just click website Create New. With the help of this home page banner, I click this option. When I click there, you'll automatically get the new website design. However, if you want the precise website design as you required, you cannot use this way. I just close this. After that, I come to this place which is custom size. I click here. When I choose this custom size, I have the custom size values here. Here I choose this website. I choose websites you have here with different dimensions. Here we have a website which is having the dimension 13 double six in 768 pixels. Also we have the same dimension. You can see that I just move further. We have different website based dimensions here with different categories. You to have a lot of templates here. If you want directly access, we can access from here also. I'm going to choose this option, which is website and you will get this website here. So you can choose in this way or I have another option. I come to this custom size and here you can mention what kind of dimension you need. I'm going to choose only the dimension of 13 double six, and I'm going to choose the 768. We all know that this is the optimum dimension of any website design which is suitable for wide screen monitor. The aspect ratio will be 69, which is perfect for showing the content on, you know, with advertisements and you can show maximum content to the website. However, if you want to arrange the visuals within the center portion of the monitor and you still want to create the user friendly website design, which require to show the complete view on your website with the monitors, 43 ratio without scroll bars, you can have the different sizes like thousand four. Which is enough to show you the website design within the 43 monitors, also called CRT monitors. But nowadays, almost each and every device have that same kind of dimension. So you can go for this option, which is 1,366 " se hundred 68 pixels. Make sure before adding the dimension, you need to select the unit. When you select the unit after adding the dimension, there is a chance of changing the dimensions here. Before choosing the dimension, first, you need to change the particular unit. After that only you have to choose the options of this width and height. This is the best way you can describe as you acquired the website dimension. Once if you selected the dimension and units, you can choose the option called Create New design. You'll have the new website template here in the blank documents. When it was a blank document, you created on the left hand side, you will have a lot of suggestions, templates. You don't need to use that right now because in future, in upcoming lessons, I'll tell you how we can incorporate those styles and designs in our design. But right now, you just create a website, a new document that's enough for you. 11. Multiple Page Creation for Website: In this lesson, I'm going to show you how we can create the sections and pages which is required for our website. After creating a new document with Canva, you will have this page at the beginning. At the top, you can see we didn't have any name for this website. Then I just give a name. Houston. I just used the word hatch and you'll have by default, the dimension of the website or the document there. When you rename it, you will not have the document size. Still, if you want to see that, you can go to the file menu. There you'll have the created document work, the name. The author and the dimension of the design. Since it's a website, it shows you the dimension in pixels. But if you created the design in the form of broochures or flyers, that will be shown as per the unit you have selected to create the document. Fine. Now, again, I come back to this design. At the beginning, you can see we have only one page here. And at the top, you can see that we have the command option here. You have the background, and it to shows you the eddy timing of this slide. You have a position to arrange the objects. Right now, we don't have any object to arrange here, just close this. By default, if you want to change the background color, since it's an empty page, you can see there is a purple line at the end. It was surrounded with the web page. I click here, the background color, and I can change directly that background color using this background color option. Also add the gradient colors if you want. I'll show you how we can change the colors of the gradient later. Now I just choose only white. You can also access the same feature by right click there. You can see we have so many options here. Here, you can do all those things. Now, I have only one page here. Here we have the option called add page. You don't need to click the add page. Let me show you what you need to do. At first, you see at the bottom, you have the view percentage of the Zoom level. After that, you have the pages. I just click here show page thumbnails and it shows you the bottom. This is the page one, if you want to add the further pages, you can add. But before that, I come to this page again using this hide page thumbnails. At the top, you can see that we have the option called Duplicate page, and we have the option called Ad page. You have the option called Add page here, I just click there. Here you have the second page. So you can add anything here as you required, the documents or the designs or the animations, everything you can add here. The same way, you can add another new page here. You can also use this option, which is add page. So it add third page to you. Again, I'm going to add fourth page. So in this way, you can add any number of pages for the website. Now, I just right clin in this place, it shows you the options called copy and copy style, paste, add page, resize, duplicate page, all those options you can directly use. This is how you can add pages to the website. And if you don't need the page, at the selection of this page, you can see that we have Hide page option. You had duplicate page, you have delete option also. You can just click here to delete the page. And you can also change the page name here. I'm going to give a name like contact. If you want to move this contact page above this page three, I can use this option move up. So this page will be at third. So here I have a page four. You can also move the pages above or below based on the need, you can do that. That's how we use those pages for our website design. This is how you can add or you can delete those pages what we are going to use for the website of the Canva. 12. Arrange sections logically: In this lesson, I'm going to show you how we can create the web pages in the form of sections. There is a difference between both things. Let me show you that. In our previous lesson, I shows you how we can create a custom size website. When you create custom size website, you'll have the page one and page two, you can move and you can delete all those things we have seen in our previous lesson. But here, I'm going to choose this option directly using this short form called website. Not custom size, I just directly using this. When I click this option website Create New, I'll have the same new design here. So what's the difference? Why do we need this? Let me show you that this is the most important option we are going to have with Canva website design. At the top, you can see we have the name which is called untitled Design website. We didn't have any particular dimension. You can see that. If you want a responsive layout design, you have to choose this option only, which is create new website. You choose this custom size, you will not have the responsive design, don't choose that one. You have to use this one. After choosing that, I come to this file menu. Here you can see that we have the document name and the creator of the document, and you don't have the particular dimension here. But in previous lesson, I shows you that it shows you 13 double six and 768 pixels. That's the main difference. This is a responsive layout. Same time, you have the same options here. On left hand side, you can see that we have the options, what we have seen in our previous lesson at the top of the page. What's the difference? You can see we can lock this area. This area is called section, not the page. Why do we call this as a section, not the page? As we use the particular page concert. There are so many websites out there. For example, I shows you the example of the website called amazon.com. When I scroll down at the top, we have a header with search option and navigation bar, then we have the body content, then we have the footer. All those designs are with a single HTML page, not multiple pages. When I choose the particular button, then only that will further move into the separate page, the product page, or the login page, whatever it is. In the same way, this is a single page. You can add multiple sections at the top, you have the header and after that, you will have the banner area. The same way, you can add multiple things here using this option. That's why this create new website button is much special one. After this, I just give a name. Houston. That's my project name. You can see that same name here also. Then here I have the option called duplicate section. This is a single section. At the bottom, you can see I have the transform control. I can reduce or increase the section size, which is not available with the normal website creation. So based on my need, I can choose what should be the area of the particular section. If I want to consider this as my header, I can reduce into this dimension. When you reduce the dimension, you to have the visibility of the dimension there. You can see that with this 13 double six, and the height is 169. So you can see that here clearly. I choose this position and I chose range. I can see all those further options we'll use later. So after arranging this option, you just imagine I'm going to add the logo here and navigating buttons here. I just change the color of this background as I require. But thereafter, I'm going to add my banner area. To do that, I'm going to use this option add section. Not the page. This is called add section. You can also use this option to add this section. However, if you want to duplicate the same dimension, you can use this duplicate section. But right now I just want to add a new section. I choose add section here. So we got the new section with the color I choose. I just want to change that color into white. We got it. Since it's a banner area, I just want to reduce the amount of what I have here. This is enough for my banner area. So it looks like a single web page, but this area function is different from this area function. That's why we have two different sections. After this banner area, I'm going to have the body content, the body area of the website. To do that, I just add this option, which is add section again. I just want to change the background color a little bit to show the difference between each section. I just choose this and little bit I was changing the color. You can see this is the body content area. Again, I'm going to add the section, and here I change to pure white. So based on my need, I can adjust how much the dimension I required for each and every section of my website design. And I'm going to add my contact page. I just click this ad section again, and here I'm going to change the color again. I use this color again and I just reduce the page height and here I increase. Based on your need anyway you are going to adjust all those things after adding those things, finally, I'm going to add my footer section. To add the footer section, I click here add section and I just reduce that height because I just want to add the footer here and I change the color of the background to show the difference actually. I was added all the sections which is record for this website. It's a simple website. I can use the banner area here and this is the header which I'm going to show the buttons and this area, I'm going to add the products, services and other all tact information. Finally, I'm going to have footer. This is how you can plan your web pages, and based on the need, you can change everything. The reason why we selected this kind of design is we can completely do responsive design if you watch this website in different devices like mobile phone or tablet or PC or television in all different layouts, the alignment will be automatically changed according to the need of that. That's the plan and that's why we created in this kind of layout. Now if you want to add any other page for further information, you are going to create some huge amount of content for the website, not just a simple website, you can add the page too. This is a single page with different sections. If you're satisfied with this single page alone, yes, you don't need to create anything else. But if you want to add more information for each and every buttons, yes, you can add more pages. For that, I come to this plus icon, you can use this option add page. I just click Add page. You can see I separately have another page here. I just click that. I just want to change the background color to show the difference between the previous and this page. This is a page one with multiple sections we have created, but this is page two. Based on my need, I can add different dimensions for this particular page. I just change this thumbnail view into normal view. After this section, you can see that this is the page one and multiple sections. After all those things, we have a page two. If I click a button and that page will be screened on the website preview. That's why I have the page two and page all those options. If you don't want that concert, you can simply delete this page. So if you want a single page website which is having all the information like home about us, services, product, and all those things, content, this alignment is highly enough for you. 13. The Root folder and Assets: And in this lesson, I'm going to show you how we are going to create website with text and images. So here I have the folder. The name of the folder is called Houston. This is the name of the project I'm going to create with this course. So when I create the project, I create a separate folder for that. Inside that folder, I have the content in the text content in the form of Word file. You can also have the text in Node Word file, and I have the folder called Images. Now let me show you the website content first. I just opened the content. Here I have the homepage information, it shows you welcome to Houston where Comfort meets culinary excellence at Houston. This is a hotel which is having all the information about the food and stay and facilities provided by the hotel. The homepage contender was provided here. We can use we can also use the images, which I shared with the particular folder. I have the About speech, content. Then I have facility speech, and I have provided the content for that. Thereafter, I have the services and I have the information of services. Then I have the gallery. I have the list of galleries here, and I need to add the images of those galleries. I was mentioned that also here. And finally, I have the contact page. I need to add the contact address here, the phone number, and email. So you can add your own address, the website required, the phone number of the company, and email address. This is general information I was provided. You can also add the social media links like you have Instagram, Twitter, Facebook, and if you have a YouTube also you can share all those information here. This is how I was arranged all the content for you. Based on this only, we are going to create the web pages. Now, I just close this web document. So after this website content, I have the folder called images. Inside images, you can see I have images for different pages. As I show you, I have the web pages starts with home As, facilities, services, gallery, and contact. Before that, I have a separate folder called logo. So this folder has the two types of logos of my project, Houston. So this is a JPECimage which is having thousand thousand pixels, and you can see that it was having the black background. And this one is a PNG document, having the transparent account. I can place anywhere according to my need. I can select the background as I required. So whenever you create a website design for the particular company or the product, you must have the PNG document of the logo so that you will have a lot of freedom to place the background and the position of the logo. So I have all the images I required for creating this website. Inside this home, you can see I have the reception and good looking pages of that website. You have to collect those images from the respective company. If they don't have, you can create a photo set and you can get all those images from them. And I have About page images for that. I have facilities images. I have services and gallery, and finally, I have the contact page images. So this is how you to have to arrange the images and text content. Then you can start to utilize all those information on your website design. 14. Customize layout and add placeholders: This lesson, I'm going to show you how we can customize the layer design and how we can placeholders for the text and images. Now before that, I'm going to create a new Canva document. To do that, I go to the home page, and here I have the option called Doc. I just click this Doc option. I will create the Canva document. It has the default blank area. Now I just want to change the document name. I come here and just die Houston content. Now I want to copy the text from my Word file and I want to paste here so that you have all the information inside the Canva, so you don't need to depend on the Microsoft Word document or any other software. However, at the beginning itself, when you create the content for that using the content writers, you can directly add that inside this Canva document. Now I just copy and paste here. So here I just select by using Control A, I press Control C. So when I press Control A, all the content will be selected. And when I press Control C or I just rightly over the selection, I choose Copy. The content has been selected and copied. Now I want to go to the Canva and I want to paste the content. So I come back here and I'm going to paste it. I just press Control V. You can see that I have all the content here. So I have a content for home about us, and here I have some space. Since that's a Word document, I was provided enough amount of space for that and here I add some space. I want to differentiate each page content. In Canva document, you don't have a single page with A four dimension. As far as you have a content, you can extend the single page. Now we got the content here. You don't need the Word document anymore. Here I have the Canva document and the website. Now I want to come back to the z homepage. I just expand. You can also use Control plus scroll and if you're using Mac, you can use Command plus scroll your mouse. Now here we have the home Bach content. We are going to place the image at the background in this area and we are going to add the information of this. Since it's a hotel page, I can create as I required. And here I have the navigation at the top, which is having the yellow background. But here I just want to expand this area because since it's a hotel website, I want to give the better impression at the beginning itself. I just expand this area more so here I'm going to place the content, the text content and the image. I want to add the image in the background. If you want to add the image in Canva, you need to add the option called frame. When you add the images inside the frame, it's easy to animate. It's easy to manage the images without stretch and doing any mistakes. How we can add the frames, I come to the elements. Here I'm going to type the keyword frame. When you type the keyword frame and presenter, you can see we have the responses for that search. At first, you have the option called frames. I just click this C. When I choose this, I have different results. I choose the very first one which is showing square frame. I just click that and it was loaded. You can see that this frame is highly flexible. I can scale it, I can reduce and can increase the size. I can also increase the width alone and height alone, that doesn't stretch the image instead of that adjusting the image area. You can see I just expand this up to this and I have place like this. Even if you want to add from the end to end, you can just simply place and you can do all those changes. So this is how you can add the place of the image in Canva. Now I come back to this place. Here I need to add the logo of the website. I just add again, one frame, and I just want to come to this section. Right now, I was in this section. So I just reduce the size. Now I move this into this section. You can see I just drag and drop to move and place where I required. So here I'm going to use that logo, and I just want to increase so it's basically a container. It will handle the content what we have inside the frame. You can add the videos inside this frame that to adjustable. So I was added the header picture, and thereafter, I was added the banner area image frame. And here I'm going to add some text information, which is having the home page. So to add that, I come to this text, you can see on left hand side, you have the option called text. In text by default, you have two options here, add a text box and you have the default text styles, headline, subheadline, and body text. Based on the need, you can choose whichever you want. Now I choose added text box. That add the free form of the text, you can just adjust how do you want. Now I go to the oramepsm Lorumibsom is the royalty free content generation website. You can generate the number of information which is having no royalty. I just copy the information at first. Here you already have the content, but I just copy and paste this information first. I just select this text and I just paste here. Now I can adjust this paragraph text. I can adjust the width of the document. When I add the text information at the top, you can see, we have a lot of tetils. Right now, I just select this left alignment. I just reduce the frame size as required. I can place where I want to add. Since it's a home page, I don't need to add too many amount of text. I just reduce and I just add here, and I want to add some headline here. I just add headline using this and I just click this frame or I just click outside and I just click and track the text frame. So this is how you can move the text to frame. If you already in the inside of the text frame, you cannot directly move the text frame. So if you want to do, just click outside that area. Now you can directly click and track, you can move that. Here I'm going to add the heading of the particular product. Now this is the hotel side. I can add the name here. Based on the image background, I can select the particular color of the text. I to have the add subheading. I was added the subading also. Here I can add some captions for the website. I just add that also with the left alignment and I just move and place. However, when you choose any element, here you can see that since it's a headline, you have only rotate option. But for this body content, you have rotate and here I choose a subding, you can move as well as you can rotate. Those features are available based on what type of text it is. Now I choose a little bit of body text. So for that also, you have the rotator option. So based on the need, you are going to choose whichever you want to do. So I was added the dummy text, and I was added the frame for the picture. And after this home page, I have about a speech. So here I'm going to add, you know, those informations. Before that, make sure you have added all the dummy informations. If you want to add anything else in this page, you can add also. But to do that, you just use a text to frame. I just align this in a proper place. You can see that it shows you the grid line view when I move object. All the three was aligned in a line. You can see that, it shows you the alignment, how it works. This is how you can add a placeholder for the images and also you can add placeholder for the text using Canva. 15. Ensure mobile friendliness: I In this lesson, I'm going to show you how you can create your website with mobile friendly view. However, when you create a website, when you use this option called website Create New, it automatically adjusts the layout design according to the device view. If you are watching that with portrait view or landscape view based on the view, that layout will be adjustable. That's why we choose that option, and I too told you about that and I come to the file menu. Here you see that it doesn't have any particular document dimension. So if you want mobile friendly view or any other responsive view design, you just keep that in our mind. The most important another thing, what you need to know is you have to use this sections option because when you use the kind of sections, thenly within that section, the elements will be aligned. If you are using the page, the alignment will be a little bit different. So try to use the sections which will handle the elements within the section itself. The most important thing is don't add two limited size of the text. It should be readable when the most important thing is the heading and the subading all should be placed in a big font size. After this, you will have the view in a mobile view. Those information are easy to read for all age people. So that's how you need to create the mobile view based dimension. So three things, don't forget that. First one, you need to use this website option instead of custom size. The second thing, you need to use sections, not the pages. The third thing, you need to use the headings and subding in a big size text. For the body text, also, you don't need to use very small font size. Try to maintain at least 15, which is better for readable informations. 16. Save and review the layout: I in this lesson, I'm going to show you how you can save and review the created website information using Canva. However, in our previous lessons I shows you, you don't need to separately save the document, the website design because this indicates all the changes are saved. You just need a proper Internet connection. I doesn't have interruptions, that itself enough to save all the information what you are creating inside the Canva website design. Each and every second, it saves the design content what you are creating with Canva. If you want to ensure, you can go to the file menu and you can choose this option, save that doesn't require, but if you want to do it manually to ensure that you can go for this file menu, you can choose Save. After saving this and it shows you the document was saved, you can have the preview. To have the preview, I come to this place at the top of this menu Bar. I have the preview I can here. I just click this option, preview. When I click this, you can see I have the preview of this particular layout design. At the top, we have the header, the banner area, scroll down, you can see that it perfectly shows pages. I just keep this full screen view to show the complete view of the design. You can see that on left hand side and right hand side, I have more page area, which is automatically expanded this website. Since I want to choose this responsive design and I choose that too, I have this facility. Otherwise, you will not have this appearance. That's why you had to choose this option. Website create new instead of custom size. After this, I just have normal view, can see that this is how you will laptop or MacBook will show the review. Now I just want to have the view of the mobile. At the top, you can see this is a desktop view. Now I click this option mobile. When I choose this mobile option, it shows you the mobile view. The same way it shows you the website information in desktop. So it covers a lot of pages. I just need to scroll minimum level. You can see that we have only vertical scroll bar, it doesn't have the horizontal scroll bar, which is not required since it's a mobile friendly site. Now, if you feel like you cannot read those informations, when you can see the preview of resis on mobile option. I just enable this resize on mobile option. Before you publish the website, you to need to enable this option if you want to read the information or access the information in the better way. I just enable this resize on mobile. Now you can see that banner area is there and the header is there. In the banner area, you can see that the complete text is readable for the mobile. I don't need to change the size again, it automatically adjust based on the liquid layout. Since it's a responsive layout, it's possible. Still, you can see that we don't have any horizontal scroll. That's a beauty of this responsive design. You can scroll down and you can see all those information. Another important thing is, this is a banner area and the banner area elements are placed only inside this banner area. It doesn't overflow and come out of that particular banner area. That's a beauty of this particular responsive layout design. It doesn't come out. Based on the need, you can choose whichever you want. You to have the option called include Navigation menu. If you want to add the navigation bar at the top, by default navigation bar, not the one you created, you can just enable this option. It shows you page one, which is the default navigation bar preview. However, if you want to create manually, you can just disable this. You don't need that here. This is how we can have the review of the created information, the website in the form of mobile as well as the desktop using Canva. You can see here, this is how we have just click this resize on mobile. So it just refresh, you know, it doesn't mean in a website, like in a desktop, also you will have the same kind of, you know, appearance. Is how you'll have the website appearance in a desktop. This is how you have the website appearance in a mobile. That time just got struck. That's why that's how it shows. So I just enabled this resis on mobile. It perfectly shows all the information in text as well as, you know, the images in the Canva website. 17. Theme for your website: In this lesson, I'm going to show you how you can choose the right theme for your website creation with Canva. Here, I'm going to choose the hotel. First, you have to open multiple hotel based websites with Canva. You'll have the idea about what are all the things are possible with Canva, what are all the elements you can place. You'll have better idea about how do you need to create a website with Canva. To do that, I come to this home page. I just open menu and I choose this Canva. I press hold the Control and press Canva, I will have that homepage in a separate tab. Now I just scroll and open the homepage. The homepage, as we said, here I'm going to drive Hotel website. I just take Hotel website and press Enter. You will have a lot of website designs here. Here I have a website and here I have website. You can see all those things. Now, if you just choose website alone, you'll have all the websites. We know that in our previous lessons. But now I'm going to choose the hotel or you to have a category here. I just click the category. So it shows you all the categories by default. And if you want to choose a website with a different categories, you can choose that. And here also, you have the style, what you required. You just need animated or simple or photo based. You can choose whatever you know, the style you required. But now I just directly just type the keyboard hotel website. I have a lot of websites here. I just opened this very first one. I just right click here and I choose I can choose this place and I can open here using this customize this template. When I choose this customized template by Bold Control key, again, I will have the same tab in a different tab. You can see that that template was opening in a different tab. I just click there. Here I have a website. I just scroll down to see what are all those sections we have with this website. Slowly I scroll down. But first, you can see that um, they have provided you the name of the hotel and the color tone, what they used is amazing. They use the same kind of, you know, uh, colors from the image for the text information. And I just scroll down to the second page, which means the second section. There they have given you a welcome page further. They have added their awards and ratings on the social media as well as the websites. And they provided the room details here and they have provided the different room sizes and the cost of each room. These design reviews will help you to know that how we can place the images, how we can place the text information behind the shaves, what could be the size of the shape, whether we need to add any stroke over the image or not. Which one is sharing the knowledge in better manner. All those things we have to learn through this kind of work only. Now, again, I come to this place, the next page there they provided King Suites Cotiard, maybe the most important view and better deluxe view of the hotel room behind that, they provided different angles of that room, King Suite Ctrard. I come here, they added the packages and discounts. Here we can add the packages and here they have provided the discounts. All those things are provided in a separate page. Look at the next page also, the guest reviews. They provided the testimonials of the different guests from the hotel. Finally, they have provided the contact details with the detail of book you are stay. You can see that throughout this website, they have used only this green all over the place and they used this brown. From that brown, they used light color for the text and background and dark colors to separate the most important pages the sections. By reviewing these website templates, you'll know a better way how we are going to to place the images as well as other elements. I'm going to open the same search results again. I scroll down. You can see we have so many styles, we can choose whichever you want. I choose this one, I click here and I choose customize this template, so that template will get open. This template have the video at the beginning. You have seen that when you have the preview of the particular website here. But here, we have only the four to review. I come to this website, you can see here a video and I have that particular resort name here. Scroll down, look at, you know, the colors, what they have used based on the images that was perfect. And the shape, the frames are really good that explain that nature of that location in a detailed manner. So here they use the pink color background and that chairs, you know, um, better visibility to the eyes, and they provided the different room styles. They to offer the family suite for the family of people. And in the same way how we have seen here, you know, that King Suite plus Courtyard, they provided this family suite. After that, they have provided the promos and offers, and finally, we have the contact and before the contact, they have provided the testimonies. So basically, this will be the structure of the Canva website, and this is how they select the color for their designs. You can see that this pink was their hotel colors. That's why they used in this background, and they used this dark green to attract an audience in a better manner. The color is also completely blend with that green and ocean. That's the best choice. After that, you can see here that Biggie and the brown colors, which is also used from those images and most of the interior designs of the hotel room will have that kind of lighting and colors. That's how we going to create the website, and by reviewing these kind of websites, we'll have the idea in better way. 18. Add an image or video to the header: I in this lesson, I'm going to show you how we can add images and videos inside the frame. Let me show you that one by one. At first, I'm going to show you how we can add image inside the placeholder or a frame. To do that, I go to the elements. Here I'm going to choose the search option. And when I choose the search option at the bottom, you have a lot of categories. I choose images. So the photos option helps you to find the images. Here I'm going to add the text which is hotel. It provides you a list of images which is having the tal structure. How do we place the image inside the image frame or the placeholder? I come to the result area. Here I choose this image just click here, that image will be loaded on that section. Now, I just want to move that image from this to this section. I was selected that first section and just delete or you can just drag and drop inside this frame. I just delete, I select this particular section and I choose this picture. When I choose that picture, it was loaded inside this particular section. But I choose this first section where I'm going to have the logo and the navigation bar. I add the same image. But you can see that according to that size of the section, that image got expand or shrink. So I just got the image here and you have another way you can have the image wherever you need. I just have here in this past section, I can just drag and drop inside the second section. Now, another important thing is when I have the image inside my frame, I just come to the section. When I try to move the image over this particular frame, the image frame or the placeholder frame. It automatically add inside the image. You can see this is how we add the image inside and I just delete this. If you feel you want to add another image, you can go for it. You can select it and you can just track over that placeholder. That image will be added. This is how we add the image inside that placeholder. That's called frame in Canva. I choose this one, I just drag and that will be added. This is how we simply add image inside the particular placeholder, the frame. If you want to change the image in the same way, you can just select another image and you can just drag over that, that image will be replaced. You will not have the previous image on the place. Unless you are using u using Control Z or using this icon, you cannot get back that image. This is how we add the image inside the frame. Now, if I want to detach the image from the frame, I just right click over that placeholder. I have the option called detach image. I choose detach image. I can move or delete the image if I don't need. But if I want the same image, again, I just drag over that text frame and I got the image inside. So this is how we add the image inside this homepage. If you want to expand this homepage, you can expand according to the image area. So I just select the section and it was not selected. You can see that when the section was selected, you'll have only one adjustment at the bottom. Here I have four adjustments. I just move the image frame a little bit. I select the section now. You can see I can expand the section according to my need, so just select that and I expand it. Here I just place the image and let to expand the frame. This is how you can expand if you need more space. We have so many images based on the need, are going to select which one you want. In the same way we added image inside this home page, you can also add the video. Let me show you how to do that. When the image or video was placed inside this image frame, I just click that element and I press delete that placeholder will be there, the frame will be there, only the element, what we have inside will be deleted. But if I press delete again, that to delete. Don't do that. Just have the image or video inside the frame. Just select once and press delete, that element is gone. Now I'm going to add the video inside this frame. To do that, I go this back and here I'm going to type the HPressEnter. When I press Enter, it shows you the photos, graphics, and video category. I choose this video C, and it shows you a lot of video references, which is basically having the pro videos as well as the free videos. So you can choose which one you want to add inside this and you can just click to add inside this page. You have so many videos here. I'm going to choose this one, but this is a vertical video. I just go to the top. I have a filter option. Here you can choose horizontal or vertical. I choose horizontal and you have all the videos in horizontal form. Now I choose this video. I just click once. That video was added inside the home page. Now next what I need to do is very simple, as I just select and track the image, here I just select and track the video. That video will be added inside the frame. Can have the preview if you want. And you do have other choices here with different the videos. When the client provided you the video file which they acquired inside, you can use that one will have a better impact. Just delete this video I add this one and just track and trap. You can add as the aesthetic sense and conveying the better communication about the hotel infrastructure or the theme, you can add the video what required. I just add this video here. That video have 22 second duration. I just track, it will be added. This is how you can add either video or photo inside this Canva frame, the home page, particularly. I just add the photo. I don't need to add the video file here. I just deleted that and I just added this photo here. This is how you can add that photo or video inside your home page using Canva. 19. Add Title, subtitle and content: In this lesson, I'm going to show you how we can add title, subbeding and content for this home page. We already have the text here. We have with black color, we can scale and place where you want. For this background, we may choose this text, and I can choose the text color into white. We'll have the better readby. First, I go to this hoster. Here I have the content for my homepage. In a home page, I just want to copy and paste the title first. I just copy here. Welcome to hoster. And I come to this Houston website page. Here I paste the text. This text frame alone will have this welcome to Hoston. We'll make the styles and alignment later, move the content here first. Now, after adding that, I come back to this content page and I copy the tag line. I just copy that and I paste here using Control V or paste. Now, I just reduce the text information because this looks much bigger and if I want, I can select and change the color of the text into white. This is how I change. If you need to have the better visibility, you can move the information here. Which will provide you the better readability for the complete text content. Here I want to add the body content here. We have more information here like this, blend Luxury hospital and other all things. To add that, I want to add one more text to frame, or I can select the second press Control D. The Control D is the shortcut key to duplicate the text, what we have with Canva. Here I reduce the font size into 15 and I can reduce more. The tool is the optimum size for any website content text. Now here I just copy the information up to this. I copy that and I paste here. You can adjust the frame according to your need, select it and adjust based on the alignment or the way you need. Now after this, I select all the three text information. I go to the position option here. In position, I choose left alignment so that in left hand side, you can see all those text frames will have the same alignment. The same way if you want on right hand side or center, you can choose this. This is a vertical alignment, the same way to have top, bottom, and middle. But now we don't need that. I press Control Z to do undo and I choose only right, not left. So after choosing this, I select this text frame size. I just just a little bit. So this is how I want. Now, if you want to have a subject on this right hand side, you can choose this particular picture. After that, at the top of this toolbar, you can see the option called flip. You can choose flip and you had two options, Flip horizontal and flip vertical. If I choose flip horizontal, you'll have the flip like this. If you feel like you need to provide more visibility for that information, you can do that, otherwise, it's not required. Anyway, I already added one body content dummy text. I just delete that because I was added a new one. Now, based on the image, what you are going to use for the homepage, you can set the font size and other things for your website homepage. If I have the subject on right hand side or the better attractive areas on right hand side, definitely, you can go the text with the left hand side. As I told you, it's purely based on the images. I just search the hotel images again, see the photos, and all the photos will be matching with this. I just add this and you can adjust the picture text content according to that alignment of the photo. Again, I'm going to choose one more picture. We have a lot of images. If I'm going to use this picture, I should have the text information on right hand side. We'll have a better visibility. The same time in my position alignment, I choose write. This is how you need to manage your home page of the website. Right now, I'm going to have only this alone because I have the color correction for the image, can improve those image work using Canva alone. This is how we can place the text for the title and the subheadline and the body content for the home page in Canva. But 20. Add a call to action button: In this lesson, I'm going to show you how we can add call to action button in Canva homepage. Generally, the websites will have the text information and the features and other all things on the homepages. In the homepage alone, we don't need to provide too much amount of text information or images. We need to add only the highlight images and text information. Anyway, if you want to add more information to the audience or the users of the website, you can add using the option called call to action buttons. The short form of this call to action button is CtA. Let me show you how we are going to add it. To do that, first I come to the elements. Elements, I'm going to type the keyword button. When I type the keyword button and press enter, I will have a lot of button output. But these are the images. I don't need those images. I need a graphics, I need to change the color, so I choose graphics. When you choose graphics, you can see we have a lot of buttons here. So are paid and some are free. We have all those things here. But in Canva, you do have the option called shapes. When I come to this all, I just type the keyword buttons and you have the free buttons here for the work. I just closed all the searches. When I have the workspace of this website design, and when I visit these elements and I clear all the things, what I have in search boar by default, you have the buttons here. I click this buttons. You can choose either one you required for the design. Most of the time we prefer this rounded corner rectangle. Here we have more radius and here we have more. Based on the need, you can choose which one you want. Most of the time, we choose this one, and we can have this here. However, with the help of this rectangle itself, you can add that shape. To do that, I come to this elements and elements you have the basic shape which is rectangle. You do have the rounded rectangle, you can see that. I just click that and you have the rounded rectangle here. If you want to adjust the corner radius at the top of this manubar, you have an option here called corns. I click this corns. You can see the sides now. It's four sides. Then the corns radius sumo, I just adjust. After adjusting that, I just reduce the height and width as I required, and I can place where I want. Now here I'm going to add the text information, which is learn more or get started. I'm going to give a text get started the font size is much bigger. I want to reduce the size. I too want to reduce the button size. This size is enough. Now after that, I change the background color of this into white. Which will have the better visibility to the audience. This is how you can place the call to action button based on the need of the page. However, if you are not going to add any more text information, this button is not required. If you have more information to show at the beginning itself, definitely, you can go for this button, call to action button. My add get started or learn more text inside this button here. 21. Include navigation buttons and name pages: In this lesson, I'm going to show you how we can add navigation buttons at the top of this header and how to go for navigation with each and every section. To do that, I go to this content page first. Here I have the list of buttons, what I require. The first one is home about us, facilities, services, gallery, and contact. So we have six buttons to add at this navigation bar. To do that, first I collect the name of those buttons. I copy this, and here I want to pay stage at the top. So I just duplicate any one text frame from here. To do that, I press Control D after selecting that. I just delete the newly duplicated one. You too have another option. You can just press hold the ATK on your keyboard and just click and drag over the element. So it's another way to duplicate the selector element inside the canva. Now I move this at the top and I change the text color into black. I can change it later. Now I just paste that text alone here, which is home. You can see how do we have that text home here. Now, after that, I choose the text. I can reduce the font style and change that font bold into normal. I'm going to change this font size into 16. Finally, I set the alignment into center. Remember, we are going to add six buttons here. I just want to duplicate this by brusholding the Altiki track, and I want to release here. I release here and I press Control D, so it will automatically duplicate the new elements in the same distance. Remember to do that, I just select the object and I just press hold the Al tiki and click and track. Now finally, I release it. After releasing it, I press Control D again, again, again. You can see I can duplicate the elements here. Now I need one more button. I can duplicate one more time. I just duplicate manually. This is how you can arrange all the buttons. Thereafter, you can change the name next we have about us. This should be the about us. I just copy and paste and after that, I have facilities. Then I have services. Then I have gallery and contact. I type it manually. After adding all those, I just click there. After choosing that, if you want to adjust, I can again adjust in a physical mode. I just click at the end and I reduce the distance. In this way, if you want to reduce, you can reduce and if you want to reduce the button font size also you can do that. This is how you can physically handle all those objects. Now I want to add a stroke in between each button to show the difference between each and every navigation buttons. To do that, I come to the elements. I choose this stroke and you've got the very big stroke here. Now, the size of the stroke, you can see clearly, it's bigger and it has the size four. Now I change that into one. And I also change the direction. You have two ways to change the direction. First is, you can rotate manually or I just undo. I go to the positions and here you can see the option called rotator. I just type myself 90 degree and press Enter. The same way, you have the start X and start Y, index and Y. If you want to reduce that amount of the width, I can do here, I just type 70, you can see the difference now. Now I just place this in between both buttons. So this is where I need to place. I can see that this is where it meets. The same way I select it, I duplicate it, and I exactly place in between those buttons. Control D, Control D. If you are using Mac, you can use Command D. It was placed almost exactly at the proper distance. But here I just manually adjust this here also, I select it and I manually adjust that. This is how you can just set those respective gallery and other navigation bar buttons. Now I select this header, I just select this background color. I just select this new color and eye drop or two. I can select the color which I required right now at the top of this navigation ball. You can also select the color from the water area. If you want to use that color all over the design, you may start to use that from here itself. If you're doing that in the same way, you can select all those elements. You can change the color of the font into white or the BGI, which is required from the colored tones. You can use in this way. Now I choose all those strokes. Anyway, you can select all the things, but we are going to adjust only the stroke color. But the stroke also I choose the same thing. Those colors are also updated. This is how you can update your navigation bar and add all those things here. Now I just want to mention each page what content we have. So I just copy the about us and I just paste here. I just want to change the color of that, increase the size. Now in the same way, I just copy the facilities and I paste here. When I paste that I just need a same style of what I have with About us. If I want to change the style or just want to copy the style, I select the text and I choose this option, copy style, the shortcut keys, Control Os. I want to select that source first. Then I click the destination. There you have that style. Then I have services, I copy that and just paste here first, and select the source, choose copy style, and select the destination. This is how you can copy and paste the style if you want. I add after the facilities, yes, I'm going to add another section here. So I want to expand the section, and here I want to add gallery. I just select the previous style and I add here. Now I expand this and after this gallery, I'm going to add contact us page. So to do that, I just press add section. There I'm going to mention my contact details. Just copy that and paste here. I just want to copy the style. I just select the source of the style and I click the destination. After adding all those things, finally, I'm going to add the space for adding my footer. Here I just change the color slightly and I can increase the distance or the scale of the page if I want. This is how you can set up all those informations. Remember, you should not use large size text information. The more less you will have the better look of the website and the easy navigation process. Now here also, I'm going to select the title and I change the color of the text. We'll do furthermore lot of changes and announcements in upcoming lessons for those texts and all things. Right now, I just leave with this and just completed the navigation work creation to all the pages in Canva. 22. Test readability and visual balance: In this lesson, I'm going to show you how we can keep the visual balance and readability of the information in Canva website design. To do that, first, I come to this homepage. We created this homepage. In this, you can see that we have the title text, subheadline, and the body content. When you look at this button, we have the font size is 14, but the body content, we have 12. So if you look carefully, there is a difference between the button text as well as this body content. I select this button text and I change that size into 12. Now, it looks very clear as well as it doesn't feel something different. So if you want to create the readable text, yes, you just maintain every text information in a balanced manner. Now, if you look at the background, I have that picture which is having bit bright area, but I do have the white text on these places. How I can make that text more visible. I had two ways. First way, I select the image. I go to the edit menu. Edit menu, I have option called adjustment. I choose these adjustments and I can use these options to enhance the picture quality. If you want more brightness, you can hide it. And if you want to reduce the brightness, you can go for this also. I choose more contrast with the picture and I just adjust how I acquired. In this way, you can adjust and get what kind of quality you required for the background with a picture. Previously, that doesn't have more readability, but now the texts have better readability on this home page. I just did only one thing, change the image brightness value, which provides you better readability. Now, I just want to align in a proper way. I just move the information here and here. Then hereafter, I just select this subheadline. I just want to add the better text here which will have the better reach. I just duplicate this text alone by folding the Al tiki and I select the Houston. I just want to make that name of the hotel alone as a bigger one. I select the text. Now this text frame is entirely different from this one. I just increase the size. I can change the styles also. I was choose this text. At the top, you have the option called ex in this menu, choose the ec, I have shadow. I can see that I can add a shadow. I have a hollow text. You can choose which one you want for the text to have a better readability with this page. I had a lot of options here like gleich, neon, tra glow, spice, and hollow. Based on the need, you can choose which one you want and that has the better readability. Now the same way, I just select the picture frame alone and I move a little bit on right hand side. Now you can see that the background is perfectly white. I can also change the color of the background into the what I required. The thereafter, I choose the picture and I move it back. Now I can adjust the transparency of the image using this option called transparency. I click that after selecting the image and I reduce, you'll have more better readability for the text, what you have in front of the picture. Based on that, you can also use this and I can also select the background. I make it more darker if you want also. Based on the need, of course, you are going to use and that text will have the better readability. Now I just select this also. I can add the logo later, but right now I just delete that frame alone. Now you can see that I have those coconut trees on the right hand side and the left hand side, I just added the information with proper balance on left as well as the right. When you have the visual balance here, we have the equal weightage on right hand side and left hand side. The same way, if you vertically divide this into 50, 50 percentage, both has the weightage for the elements. So in this way, you can add more better clear text information and balanced alignment for all the elements in Canva website creation. 23. Save and preview the home page: In this lesson, we are going to see how we have the final output at the preview. The doc mode was already saved. I once again press file and save option to ensure those changes are completely saved. Now after that, I come to the preview. I just click Preview option here, it shows you the perfect output for the website, what we have with this design. The text, color, all are fine. Now we enable the resides on mobile also. I choose the mobile view here. In a mobile view also, those buttons are automatically arranged in a proper way. We not yet added the logo as well as the hyperlink for the buttons. We'll add that further. But for these information for the mobile, it doesn't have the proper alignment, that text information and other things have the different view. We can have a look on that and just scroll down. We have the other pages, the blank pages at the end. Finally, at the bottom, we have the footer information section. So this is fine. We have the best thing. And if you want, yes, you can have all those things. I select the position and I select the alignment into left. Now, again, I go to the preview and I have a mobile view. Still it shows you the same thing, fine. Sort out that in further glasses. Right now, this is fine. I also make that into full screen till it looks better and it shows all the image areas. It doesn't show unwanted areas in this. This is how it can save and have the review after created each and every section or every page of the website using Canva will keep you in a correct track to complete the website design. 24. Add Text content for the About page: I In this lesson, I'm going to show you how we can add the content for about us page. So we added the content for the home page. After that, I want to add the information on about us page. I just change this U into small. This is enough. And at the end also, just add conductors and contact is much decent one. Now, I go to this text content. I have the A us page information, so I'm going to copy this and I'm going to pase there. H now if you look at the text information, what I have on the home page, that ravcation text is vasuns text and here also I use the Canvasns with a bold. Here I used a textos style. Still it's a Canvasns. Throughout this, you can see that I used only the Canvasns text. I just want to continue the same text for the other design work also so there will be a unity on the design. What I'm doing here is I just copy this two text information and this one also. I just sold the control shift key. And I select multiple elements. I just copy this and here I'm going to paste press Control V, I got the information here. Now here I have a white text. Instead of that, I'm going to change that into black. I can change that into the base color, what I used for the title of this design. Here I need to use the same color, but I need a little bit dark as I have here. To do that, I come to this, add a new color, I choose pick color, I'm going to select this one. You don't need to add this about us text on your about us page. Of course, you don't need to add that in all pages. We just added that for ensuring when we add the link or when we do the design work, we need to know in which page we need to add those informations. These are just a dummy text. I was just used here. After adding that, I come to this place, I just copy this information. After copying this information, I just come to this body content and I just paste here. Here we got the information and we have some special information about this. Here I choose this information. Just copy this and here I'm going to paste this and I'm going to move this little bit app and I want to change the color again to this. I don't need this right now after adding those informations, I can also add the information of we take pride of offering. Copy this and I come back to this. I just duplicate by press holding the Ate chei here I just paste the information. Since we copy it from the Canva only, it got the same information which is the bullets. So after adding all those informations, I have the space to add the images which are required, and I can also offer the same information with a different layout that we will do further. This is how I added the text information of A us inside this section of Canva website. 25. Include the content for Facilities page: I in this lesson, I'm going to show you how we can add the information for facilities page. As I told you previously, I also have the facilities page here. Now, here I want to copy and paste this information, and we'll do the design later. To do that, again, I come here. I just copy this two, not that two, this two information. Just copy that and I delete this and I paste here. Here I choose the text information. I and to add this content. After adding that, I'm going to copy and paste this inter version. I just copy this. You don't need to add those mogs. We can add the respective icons later, but not right now. Right now, I just delete those information which is unwanted. After that, just copy the information and I want to paste here. This is how I just copied and paste information. You can see that each and every the facility has different purpose. We'll do the design work, adding the images and shapes later when we complete. We will need to add the style, the text information, alignment, the images and shapes later. We'll do that after adding the text information for all pages. Now I just added and I want to go to the next page. Next page I have the services. In this way, you can add the informations. At first, then we can add the other informations. 26. Design the Services page with an overview of offerings: In this lesson, I'm going to show you how we can add the content for service speech. Before that, you can see we have the empty space where we are going to add the images and shapes and we'll do all the realignments of the text information. Now, I just copy the same two text. I just copy that and I paste here in a services and just delete this unwanted online. After that, I come to the services. I copy this information at Houston I just copy that entire line, press Control C, and I come here and I just select Control A and I press Control V so that we can copy all the text information here using Control C. I was just double click and press Control A to select the entire text and I just press Control V. That's it. Now I choose this one offer, we offer. I just want the entire information here. Before that, I duplicate once again and here I'm going to paste that list. After that, I just copy this text information and I'm going to paste here. This is how I just copy and paste. Of course, we need to do a lot more works here. We'll do that in our upcoming lessons. After that, I have to do the work for the gallery page. 27. Add information for Gallery page: In this lesson, we are going to see how we can add the text contain information for gallery page. We are going to add a lot of images on this page. Let us add the text first. To do that, I just copy the previous page content. I come to this gallery. Delete the text and a press Control V. Now we got the text, I was copied from this facilities page. After copy and paste here, I come to this content, and here I'm going to choose this discover the Houston experience. Just copy that, and I'm going to paste here. After paste that, again, I come to this place and copy this information, and here I'm going to paste. Just double click and I just paste. We know that we need to add the list of the images with the captions. Right now, I just copy and paste that caption alone in this. This is how I just copy and paste the information. Since you have the NF amount of space, you cannot increase a text like this. This is completely unwanted. We just want to maintain the same font size for the content around the website. So don't do something like that. We are going to concentrate the topography images layout more in our upcoming lesson so just first place the informations. Do not do anything else before we add the text informations. 28. Add testimonials on Services page: In this lesson, I'm going to show you how we can add the design area for testimonials of the audience, the users in our page. To add that, I come to my services page. So this is where I'm going to add my feedback of the audience or the testimony. To do that, you can see we already have enough space, and here I'm going to add the testimony of audience. Most of the time the testimonies will have the image of the respective person and the feedback and the name of the person. To do that, I just want to add one image frame first. I'm going to de frame. I want to add the rounded corner frame, so I just add. I was reducing the picture size as I require. This size is hardly enough for that. Now, if you want to add the image on left hand side, you can do that in this way. Now I'm going to add the shape. I'm going to use sic shapes, geometry shapes. I use the rounded rectangle and here I'm going to place that. I want to adjust the corner radius. I come to the corners, I choose that into two. Now, this is number of corners. I just have that four and here I want to reduce the value. This 15 is enough here and here also for the frame, I just maintain 15. Now I just reduce the height more as I record and I increase the amount of the id. Now, if you want to maintain a particular color for the background, you can have the color. Right now, I just want to add some color here like this. Or if you don't need the color, you can keep the white and you can have the stroke for the rectangle. However, if you want to send the object behind as selected N press Control open floras, I can send this back of that design. If you don't need the stroke, you can simply go to this menu. You can choose no strokes here I want to change the background color. Right now, I was choosing this one. After I did that, I just select both objects, go to the positions. Here I'm going to choose this middle. The horizontal Oliver Bly center. So after this, I can just select it and I can duplicate it and I can place how many I need. If I want to, I can place like this. I can also increase the frame text area. If you don't need that much amount, you need to add three. You can add like this. I have one and I add another one. Now I just press command D or Control D to add one more. You'll have a multiple testimonial page. There is another way you can do, which is just duplicate this testimonial information area and I'm going to choose this oval tool. I can add the oval here and I can add the image in the form of circle or have another way. I can directly use the frame in the form of circle. So I just sit the element first and I just tie frame. Now I have the circle frame, I select it and I reduce the size, I can place the center or left hand side based on the need you are going to where you need. Now after placing there, I select both objects position and make that alignment into center. Now after that, I choose the stroke style. I add the stroke with a minimum amount of dimension. You can change the color of the stroke also here. We have the uniform stroke size. Here also I can change the stroke size as well as the stroke color. This is how you can add the testimonial page and I just duplicate this text information here I'm going to add as a feedback of the audience. I just want to reduce the text information. I just want to use this as the dummy text. Right now, I just copy and paste that information here. At the end, I'm going to add the name of the person who added the testimony. To do that, again, I duplicate this and just type name using this. Just make this bold and you can change the color of the text into the proper one. This is how you can add the respective feedback, the testimonial of the audience, or you can use in this way also. I can add the information like this. And you can add the name of the person who provided that testimony. This is how you can do your works, set the alignment to justify here also I choose to justify. So I just press once it was left. Again, I press it was center. Again, I press, it was right. Again, I was pressing and you can see it's justify alignment, which is having uniform alignment on left and right hand side. If you want left, you can have otherwise, you can go for this Justify alignment. This is how we can add the testimonial page information. Right now, I just choose this one. This looks pretty good, but I just want to add more space for audience feedback. I can add the information here. Now in the same way. I want to duplicate this and I want to place one more here for audience feedback. This is how I placed two testimonial information. If you want two more, you need to add more testimony information. You can expand the section and I just duplicate this after duplicating this using all to key and just click and track again place where I want. This is how you can add the testimonial information from this services page, which is highly recommended. This is about a page actually, not a services page. So we add, you know, the most important information with the testimonial itself. So this is how you can add the space and the alignment and the objects for the testimonial page in Cava website design. 29. Save and preview both pages: After adding all those informations and I was added the space for the testimonial, I'm going to save this. I just check whether it was saved. I just sure using this save option. After that, I choose the preview option here. When I choose preview, you can see we have the preview with the informations, what we created with Canva homepage, and we to add the information for about a page. So this is how it looks. You can see that we not yet enhanced all other information and we not yet added the page for the contact, which is required some forms. We are going to add that one further lessons. This is how it looks. I just want to ensure how it looks in a mobile view. This is how it looks in a mobile view. You can see the testimony looks fantastic. This is how it align itself for the mobile compactable view. Then I change that into Testa view. I want to make sure how it looks in a full screen view. This is a full screen view. This is how it looks really nice and it doesn't have any unwanted elements on the web pages. This is how you can add the information and further develop the Canva site using Canva. 30. Canva's media library and upload options: In this exon, we are going to see how we can add media and visual elements inside the website. At first, we are going to see how we can use the upload option in Canva. In Canva, we can use existing elements like pictures and videos from the elements category. However, we can upload the new elements like images, videos, and fonts inside the Canva and we can use in our designs. Let me show you how we can add those elements inside the Canva. Do that, I open my project. This is the website we are creating using Canva website courses. In that, I'm going to choose this left hand side menu. In left hand side menu, you can see the option called upload. It shows you you can upload your own elements inside Canva. Now I choose upload option. When I choose upload, it shows you images and folder. You can directly upload the data in the form of folder. You can also upload images. Let me show you how to do that a step by step. Just press this button, god it. Here I have an option called record yourself. If I want to record audio or video directly, I can record so that it will be directly added inside my upload folder. Another way is I can upload manually. Here at the first, you can see that it shows you the search words, tag, color in upload. If you want to search the previously uploaded data, here you can type and you will get those results here. You don't need to move every design, you just come to the uploads. Here you can search the element you uploaded with this uploads category. Now after that, I have upload file option. With the help of this, I can upload any file. I just press this menu, it shows you the different sources of uploading. I can upload from my Google Drive also and other things. I can also upload from my local folder. I can use this upload folder also. You can use those options and it shows you the images and folders. Here I have my website content folder. I have images with different categories. I also have videos. I was added four video files. If I want, I'm going to use it. I want to upload those files. Let me show you how we can upload that content. We have two ways to do this. First one, you can directly drag and drop inside the Canva page. Right now, I just presshold my images folder, just drag and I want to go to my Canva website page. I just press all to tag or ni Mac OS, you need to use Command Tab. Was right now on my Canva website page. You can see that I not yet released my mouse button there, I just press hold. You can see that just press and just drag it. I'm not yet released. Now I come back to my Canva website and I just drop here on this area, which is drop the content to upload. When I going to drop the content here, it shows you what are all the files I can drag and drop inside this upload area. It shows you the files with a different file formats like A, CSV, PTO, PPTX, all those et cetera can be downloaded in the form of file. Those image file worms also there J SVG all those common file formats. In VDO, we have AV MOV, G and P four, four, P all those formats are there. For audio you can use a wave of uncompressed audio and the compressed forms like MP three and four A and OGG. Can also directly add the folders. That's what we are doing here right now. Just want to release here. When I release, the uploading process will be initiated. Release here now. So you can see that it shows you the folder called images. The upload process was initiated with the help of this animation, you can see how much amount of uploading process was completed. It shows you the progress bar here in this folder. After uploaded the images, I can also change the description of the folder name. Right now it was images. I can change that folder name like Houston images also. This is how you upload the entire folder inside this Canva uploading process. However, you can also upload the files individually. How to do that, I choose this upload files option. It was happening. I don't need to wait for that. I just go to the upload files and click this button. After choosing that, I come to this open folder. Here I have a video files. I just double click. I'm going to choose the first video. I choose and apres open. So that file also start to upload and you'll see that. After a few seconds, the images are completely uploaded with that video. I go to the videos category. You can see that the video I was uploaded was there and I go to the folders, there you have the folder called images. It has seven inside that, just click the you can see that it has seven folders inside. Now I just come back again to the uploads. Here I have the option to enable and if I don't need this, I can delete and if I want to move to another folder, I can move using this option. I just disable that come to this menu and just click there. There we have the option to edit the folder name. I'm just going to tie the website name. And images. If you want to move the folder, you can move and you can share with others and if you want, you can delete also. Now per center. This is how you can upload all the elements. Within a single folder, you can just drag and drop based on your Internet connectivity, the folder will be uploaded with images, videos, and other things. Even if you have audio tracks inside, which is completely essential for your website, you can have that inside and it will be uploaded. This is how you can upload your all data. However, you can also access that data using the common interface. Let me show you how you can access that. I just choose this open menu, and here I just press Canva. Before that, I just presold the Control or command. When I do that, that will be opened in a separate tab. You can see that and here I go to the projects. In projects category, I just click. There you have all the folders detail here. Here I choose uploads. When I choose uploads, here I have the uploaded files, whether it was image or video. Here you can see that it was the video I was uploaded and inside, it to shows you the folder I was uploaded. When I go inside, here it shows you all the subfolders I was uploaded, like logo and gallery, services, facilities, about us home, contacts, all the things are available here. This is how you can use the upload option in Canva. You can upload all the files which is included the images, videos, and audios. 31. Add images to About us and Facilities: In this lesson, I'm going to show you how we can add the uploaded images in a library, and we can navigate all those pages in Canva. Now, to add the images, I choose this upload category, and it shows you the Houston Images. I just opened that and it shows you the each and every page images. First, I choose homepage. It shows you three images which belongs to this website. Based on the need, you are going to choose which image you required. Right now I have this picture. Based on that I was added the text information, other things. Let me try with another image and of course, it's based on the particular website, the companies or the hotels image only we are going to use. Right now, it's just a lesson, so I'm going to show you how I can use the images. If I add this picture, just drag and drop inside and it was added inside with that image editing effects, I was added. Based on the need, you can choose how do you need? Just press Control Z to do that work. Again, I press Control Z so that I can remove that image from that frame. I delete that, I'm going to add the next picture, just drag and drop here. This is another picture I was having. Again, I press Control Z so that I can remove that effect I was added with the image. Again, I press Control Z. I will delete that, I'm going to add the third image. This is how we add the image. I just double click and I can adjust the image, how do I want? If I want, I can also flip that you can see here. I just choose the option called flip and horizontal. This is how you can do all the adjustments, what you had with Canva and what you need with the work. Just give Undo Control Z again and again, multiple times until I required. For home page, I already set the picture previously, so I don't need to touch that image unless it was required. Now I go to the next page. This is about as page. I opened that folder which is about us. About us, I have a lot of images, and here I have the basic information about what it means. They provided you the comfort, taste, and unforgettable service. Those things are mentioned here. I may choose either room service or the food based image or the perfect interior design. I'm going to choose any one. Let me add this image first. Before adding that, I'm going to add that frame for this picture. Since I already used this frame, the rounded corner square, I can also use that. I just press Control D. When I press Command D or Control D, I can duplicate it or I can right click and I can choose this option, duplicate. After that, I just use that here. I just expand the dimension. Just set how I want that frame here. This is how you can set your own image frame here I just want to remove the stroke. Right now, I don't need any stroke here. I just come to this stroke. And here I choose no stroke. You can see right now I don't have it. I just want to drag and drop the picture. I just add the picture first and I drag and drop here. So this is the picture I want to use with this page, and I too want to adjust the alignments. We'll do that later not right now. So it shows you that, you know, they feel comfortable and taste that, you know, the unforgettable service. I too have another picture here. So if you want to, you know, make that, you know, your restaurant was special with the hotel, you do have this picture you can add. But here, they access the food instead of, you know, the chef was providing the food. However, you have other images also like this. It looks too perfect. And there is, you know, lack of, um, clien. So I'm not going to use that also. You can also use these images if you want, because it shows you just double click that frame, and I just it's a bed, and it shows you how good that, you know, the service and how you feel comfortable with that hotel. So based on, you know, the decision, what you think, you can add the picture right now, I just want to leave with this picture. If there is a change, I will do that later, not right now. After adding that picture, I need to add the people's picture here. Since it's just a template, I don't have any people picture here, but I just go to those elements. Here I'm going to choose the people and I just choose photos. I have a lot of people's photo here. Just add one for example, and just add the picture inside the frame by dragon drabing and here I just expand to their face view. So I don't need their terire view. I just need the head alone. This is good and that head is visible and, you know, which is also fit with the frame. I do want to add three more images. So I just I portrait. I will give you that portrait of different people. I just add here and I expand this. This is enough. You don't need too much amount of the complete view of the body. This looks really good. I'm going to add one more picture here in this location and I just expand finally, I'm going to add one more picture here, so I prefer this one. I just drag and drop. I just increase the picture size as I require. Was added four images according to the need. I added the image for this about page. This is how I was added for the About it page. Now I'm going to add for the facilities page. For facilities page, this is the facilities page. I not yet added any layout, but here they provided six different facilities. I can add multiple images with that background. What I'm going to do here is right now, just want to add the frame. You can use the same style of frame everywhere in the layouts so that there will be a unity of the design I just copy this frame and I just come to this page, I press Control V. I got the picture. Now I just select that frame and delete, so that image will be deleted, not the picture. Remember, when I choose the frame like this and delete that frame alone, which means the picture alone will be deleted. But if I press again, delete, that frame will be deleted. So based on the need you can choose what to do. So here I'm going to add six pictures. And decide how you want to add we're providing the facility and you to want to show the picture of six different services. I can divide that like this one, two, and three and three at the below area. However, you can enhance the areas border from top to bottom. So it was not about the space, what you have, it's about how you are going to present. So be careful with that. If you want to use any frame at the bottom to mention the facility and what are all the things has inside that facility, you can add the rectangle which is having the shape of basic vector shapes like this. I just click and I add one. Here I'm going to adjust the corner radius value. It has the default corner radius value. I want to change it, I click it and I change that into two. This is not the two, this is just four and here I want to mention that corner value into ten. So this is fine and I can place that shape inside like this. Based on the need you can add, how do you want to add? Sometimes I want to add this signature restaurant inside this frame, and after that, I had those text information below that and it's up to you how you want to present that information. And here also, I want to add that here also, I want to add that. Based on the need, as I said, you are going to mention how it should has the look. I just duplicate the same thing again twice so that I can add the rest of the information here. In this way, you can add, you can change the color of this, you don't need this color, we're not going to use it. You can use like this or this, which is a better color selection. So here I'm going to add those images and I'm going to add the text information. Let me add one by one. I'm going to add this signature restaurant first. So I just cut using Control AX, and I press Control V, and I add the information here. Here I'm going to use center alignment, default alignment is center. Now I just increase the text frame, and I just make the text into bold and I just expand the font size. Here I'm going to choose the font color into the dark brown. And if you want to have this as a capital letters, which means all caps, I can choose this upper caps option. Now after that, below that, I'm going to add the detailed information of that. And after adding that, I adjust the area. This is how I can present or you can remove this information. You just have that area, the category, which is also enough. It's basically based on your need, how it looks with that shape alone, you can decide whether it is enough or not. I just add this information with that because if it doesn't match or it doesn't convey the proper information, I can remove it later. Not right now. So I just add like this. I want to reshape those objects. So I just select all the elements. I just press Shiftik and click this area. Now I just press hold the Altkey and press the Shiftik and track and release here. I do the same thing here also. I got all three here. Now I just press hold the Altiky and just click and track. I can place here. So this is how I can just duplicate again, and here I want to add the remaining informations. Just cut that and paste here. Basically, I just reshape it, and again, the same way, I choose this spa wellness after choosing that I just cut it and here I'm going to paste in a third category. I come here and I'm going to double click and paste it. Now again, I choose the text information, so I come to this area and here I want to select the entire text. Just cut it using Control X and I'm going to paste here. Now I want to choose the remaining three and do the same thing. And I choose the text information. I need to adjust the text. I will do that. I also select this free Wi Fi. That's it. Here, I just delete that information. Here I have the issue. I have two ways to change it. First one, I can reduce the font size or I can select some condensed font. Let me reduce the font size a little bit, and I want to reduce the line space here, you can see the space between these two lines. I choose not that least choose this advanced setting and I reduce line space. This is how I can reduce line space and I just move above and place it here. This is how I can do this work, to have another way. You can just reduce the width of the frame. This looks better and I just add the text and here instead of the symbol. This is how you can add those informations and I'm going to add the images here. Based on the category Ts, have the images inside this about sage. The Ada page. It's a facilities page. I go to the facilities and here I'm going to choose the different images based on the category. First one is a signature restaurant. I have this image and I have another image which is this one. This looks some wedding function like that. I just add this picture. This is the perfect one. After adding that, I'm going to add the swimming pool. I choose the image from my facilities. It should be the swimming pool. I'm going to add this one. And I to have spa wellness. I can choose based on which one looks better. Here I have this picture and I just drag and drop here, I just drag and drop here. This looks really fantastic. If you want to scale and place like this, yes, you can place like that. Here it shows you the complete expression of that girl and she was utilizing that future. Now I need to add the fitness center and the remaining two. I go to the facilities again. I want to add the fitness center. I choose this one, this looks good, and I want to add the next one, which is the conference hall. I chose the facility. If it was large, you can choose this one and if it is the medium size, having ten to 12 number count, you can choose this one and this looks good for the conference. And I just delete that I add this one. It looks large. And if, you know, they use laptop, yeah, this is the best thing, and it can, you know, occupy many people, not just ten or 12. However, based on the need only, you are going to add. So after adding that, I'm going to add the free Wi Fi. So I just add this picture or this picture, which is showing they are utilizing the Internet facility. Which is enough. I'm here also, I just that girl was using that gym features. This is how I add the images for these pages and I adjust that in upcoming lesson, I'm going to show you how we can add the images for further pages. 32. Insert Photos for Services and Gallery: In this lesson, I'm going to show you how we can add images for services and gallery page. We already added the images for about us and facilities pages, and here I'm going to add the services page images. So we already have the list of information like what are all those services are provided. I go to the facilities and I choose services. Inside, I have only three pictures because here I don't need to dump too many images. Our previous page, the facilities pages, we already added enough amount of information which is required for the audience or the client. So here I'm going to add the best picture which is required for explaining all those information. I can add something like this, so it provides you the enough information. Before that, I want to add, how do I need to have the layout of that information? To do that, I just adjust the information, and here I'm going to add the pictures. To add the pictures structure, I come to this elements category, and here I have the option called grids. Grids are the collective image containers. You can see here I use the word creates, not grid or grid line. I just use grids. After adding the grids, I have all type of grids here. I choose the C all grids. In C all grids you can see it starts with a single image grid. In GL, you have different alignments. You can see that two vertical images, two horizontal images, and one is bigger, another one is small. The different patterns are there for two. The same way you have different patterns for the three. You can use these to utilize the images multiple in each, every web page design. Right now, I'm going to add three images. I have possible different appearances here. I can choose which one I need for this. Again, I choose this one and I click that it was automatically loaded completely inside this section or page. I can adjust how I need that in my layout. We can see how I simply adjust that. This is how I can adjust that page. To have other ways I have this option to add the images in three, but with a different layout arrangement. Based on the need, you can choose how do we need? And I just adjust according to my need. This is how I can add the frame. After adding the frame, I'm going to add the uploader category images, which is from services. Here I have three. I choose the first one, I just add here, and I choose the second one, I just add here, I choose the third one and I add here. After adding that, I can just double click and I can just how do I want that inside those frames. So here also that. How do I need? And here also I just that. You can show that kind of service what they do inside that frame. You can also adjust the space in between this. I have the space option. You can manage it. You to have the option here to add the rounded corner. So as we use the ten radius value, I just added that. Now, I don't need any stroke size. I didn't use that previously also, so we don't need that. If you require, you can use it. And I have to adjust do the remaining works later. I just add the pictures here and I just reduce the height. I don't need too much amount of information here. This is how I add for this services page. Then I'm going to add the images for calorie page. I come to the gallery and I go back to this fifth category, which is calory. Here I have a lot of images for present, the pictures with the different views. I just expand this as I required. Here I want to add these informations having five different categories. In a creative manner, we are going to present all those images according to the near. Let me show you how we can add. Either you can use a single image for each category or double images or three images because I was provided you a lot of options here. So based on the need, you can choose what are all those required for this page. Now I just remove those double codes from each and every category. After that, I'm going to add the images. You can either divide into five categories and add the images with the frame, or you can present in this way also. But you already used this way. You may use some different ways to place those images. I have the categories here and I'm going to place each and every one. Again, I come to this and I choose this grade. You see here we have different categories. You too can use this in a different way. I'm going to show you that. I just click this option. Three, and I just reduce the height of that and the width of that. Now you can see that I can add three images here for either a particular category or a single category. So it's up to you again. You are going to decide how you are going to present. You do have another way. You can single frame. So I just come here and I'm going to choose the previous frame. I just copy that, and here I paste, and I'm going to adjust that. If you want to show that image in a big size, which is gaining the better attention, you can add in this way. You can also add the information here, here, I don't have detailed information, but it's just a gallery so you don't need to worry about the remaining things. I just duplicate and I have another picture here inside the frame and I delete both frames. Now I have a chance to expand, so I just expand it. I just adjust this little bit, and I can place the images here now. So I just duplicate this and I have six images now. I'm going to add now, what are all those images I acquired from my content. I go to the upload now and I go to this gallery. Here I can add the deluxe room and all the information. I chose this one first, and here I'm going to add that deluxe room and other facilities. After that, I'm going to add the dining. I just add the dining room facility. Here it is, but I want to choose the category like this. They are just preparing the food items or I can also choose the food items which they already created. I just add this one also because that two provided here. What I'm doing here is, again, I just add this appearance. I just add this picture here, and here I'm going to add that category of food items which is available with that restaurant. Here, I'm going to choose. So I just drag and drop here. After that, I'm going to add the next facility. Here I have the refreshment and I'm going to add the next one. I to want to add this picture, the bar inside my hotel and I want to add the remaining information. I'm going to add the next category picture like this, fine. After that, I'm going to add the remaining. I just duplicate this and here I just delete and delete this also. Now I want to add those spa ambience and the venue events details. I'm going to add the spa ambience. Before that, I can add venue details. This is that one and if there is any another image which is about the events, which may have a better look, I go to the facilities page. Here I have that conference hall I can add here, and here I want to add my spa images. I just delete those frames. Again, I come to this gallery and I can add that swimming pool. And after adding that inside this, I can also add the picture of spa service. So I just add that here. So this is how you can add each and every picture inside the Canva, which is having with a category gallery. So I had to do a lot of other works with the text and all alignments that we'll do later. But right now you can see that we have added the images for all the pages and we are going to create the contact page further. Okay. 33. Image Editing using Canva: In this lesson, I'm going to show you how we can edit images inside the Canva. In our previous lessons, it shows you the basic things. But here I'm going to show you the detailed view. I start with this about a sage. I just zoom in. In about a sage, I used five images four for the lien. You can see that for testimonial, and the fifth one is the image shows that services. So here, when I want to edit the image, I choose the image first. After choosing this image, I come to this Edit option. I click Edit option at the top. It shows you the list of editing options what we have for the images. At the top, you can see that we have the selection option. It shows you all because I selected the entire image. Now, if you want to select the particular segment or object of the image, you can use this option, click. Click here, you have the image here. You can select whichever picture or the object you need alone from that image. I can choose a food. If you want to select multiple, you can press shift key I can add more like this. In this way, if you want, you can select that also. Or you have another way brush. Hale brush. When I choose brush, I can create brush pase selection like this. See that those selected areas are marked with the purple color. So you can adjust the brushes and you can do the rest of the selection process according to the need. Then after that, I come to this next one. We have the foreground. The image itself track the foreground and background of this picture. You can clearly see that this is the foreground of the image, but that's a background. If you want to select the background around, I can choose this background. When you select and you can do all the modifications, what you need, I'm going to adjust the color or darkness. You can do all those things there for the background alone and foreground alone or the selected areas alone. That's how we have those selection options. But I choose all because I want to adjust the entire image adjustment. By default, we have the option called Auto adjustment. You can use this, just click here and before that, see the image preview. I just click here and see the results. I automatically adjusts the colors and the contras, all those things. I press Control Z or give Undo. This is the original image, and after that Auto adjustment, we have the image like this. It has a little bit enhancements. Again, press undo, I want to do those changes manually. In image editing, at first, I have the option called white balance. So we have the selection. After that, we have the auto adjustment. And if you want to adjust the white balance in this picture, you can use this option. So I can adjust the temperature of the image, whether I can make it warm like this. So if you have a warm tone for, you know, the particular website or the design, you can use it. Or if you have a cool theme like blue and other things, you can go for this one. So both things are really good according to the selection. And if you want to maintain neutral, you can just add value zero. And we have the option called a tint. If you want to maintain any particular tint to value with images, you can adjust the tint value here and you'll get there. This is how these two adjustments like temperature and tint work with Canva image, color correction. After that, I come to this area. Here I have the option called light. I have brightness, contras, highlight shadows, whites and black adjustments, all those things I can do using the lights category. This brightness adjustment will increase overall brightness value of the picture. It looks good. You can see that we can see more details with this highest brightness value. And the contrast, if you want to increase the details, you can use it. This is contrast and highlights. In a picture or a drawing, you'll have three major components. The first one is highlights, which means the bright part or bright pixels of the image. You see this is the highlight, this is the highlight, and these are the highlighted areas here and here. All those things are called highlights. Next, we have the shadows. Shadows means the dark pixels of the design. If you want to adjust those things alone, you can use the highlight adjustments. You can see how I adjust the highlights of the pixels. In a food, you can see that change clearly the same way, you can adjust the shadows of each and every pixel. If you want to adjust only the black, not all the shadows, you can use this option, so it clearly adjust only the black pixel. The same way, if you want to adjust the white alone, you can use this. So based on your need, you can adjust how you need the picture. Most of the time we use only this brightness adjustment that itself enough for my picture. Then after the slides, I have a color, and if you want to invert the color value like how do we have the negative image appearance of the video, you can use this option invert. However, most of the time we don't use it, so I revert it again. Next, we have the vibrance and saturation. Both are different. Let me show you that with example. The saturation will increase only, the warm tones as well as the primary color values towards the highest. You can see here how it looks, all those pixels. Saturation if I move that in the negative value, it will desaturate the entire picture towards the gray scale. You can see that this is how this saturation work. I saturate slowly. This is 100% we have by nature, and if you want to increase the saturation value, you can go for this more saturation values. Now I come to this vibrance. Vibrance will give the better vibrant pixels, warm, as well as the contrast pixels with a picture. When it reduce it will have less number but not gray scale. This is how the vibrance works. After that, I have the color edit value. So in this picture, we have the two major colors. Which one is this green and second one is the brown. So if you want to adjust that image colors directly, you can use this option. But most of the time, we don't use it. But here I'm going to edit the color. I just click the first one, which is green. When I click that, it shows you the hue saturation brightness here. So using the cue, I can change the color of the particular value. Saturation, either I can desaturate or saturate the pixel. Using this brightness, I can increase light of the image. Let me show you that. First I increase the saturation value, it's very good right now and I can adjust the brightness of those values. You can see that. At the same time, if I want to change the color of those pixels, most of the time, in this place, we are not going to use it, it's not required, but I just show you because you need to know how it works. You can see that how that changes the color of the pixel. Most of the need, if you need it, you can use otherwise, just keep that in a zero. This is how this color edit works and that affect only that color what has selected. The same way if I want to change the color of this value with the image, you can use this one and you can do all the changes with this. This is how this color edit was work. After that, I have a texture. It shows you three categories, sharpen clarity and Wigd. Sharp shows you how it turned the blurred image or the normal image into sharp image. Let me zoom this area so that you can see the differences. Now I just increase the sharpness from zero and you can see how sharp the image looks. Previously, we had a lot of blur. I just make this zero again. You can see that a lot of blur is there. But when I increase the sharpness, it has more sharp pixels. I adjust in that way. The same way, if I move that towards minus, it'll blur the object area. Based on the need, you can use the sharpness. After that, I have a clarity. Clarity will give you the better pixel values for the details, and of course, if you are needing, you are going to use it. So the third option is ignite. Using this, I can adjust the overall lighting of the image from outer to inner. You can see that it's clear at the center, but when it comes towards the border, it looks black. The same way if I need it in a white, you can use this. This is how these options work to do those color adjustments and editing of those feature. However, if you want to do the remaining editing works like I just choose that back. I have an option called magic studio here. Using that, you can completely edit the image from the background and other things. But you need definitely that procon for that. I cannot directly use those options to edit the image. However, if you want, you can use this crop option. Using crop, you can either crop the particular image segment from left to right or top to bottom, or all four directions, you can just crop the image using that option called crop. At the same time, if you want to flip the picture, you can choose a flip and you can choose horizontal, the same way you can flip the picture in vertical. This is how we do the image editing works with the Canva. You are going to adjust all the images in the same way. Here I have a less amount of light, so I choose the edit adjustment. Here I want to increase the value of the brightness. It looks too much amount of color value. I just reduce a little bit using saturation. I don't need too much amount of colors that dominate the entire page. Here also, you can see that on left hand side, I have more dark value, but here I have highlights. I choose a picture and I come to this option called black. I just only the black and you can see how it aches only the black, neutral that value and I can adjust the shadow value, just increase the details on the shadow and a little bit brightness. Now I neutralized that color tone from left and right. This is how you can either adjust those images, what we have uploaded here also, we have a lot of options. Based on the need, you can do those changes. Sometimes if you want to maintain the desaturated view for all the pictures like this, some websites if they have the black and white theme, they can use in this way also. But anyway here I don't need, just give one. This is how we can do all the image editing works with Canva. 34. Integrate videos using Canva’s video tools: In this lesson, I'm going to show you how we can import and use video inside our Canva page. We already saw that how do we use that import and do the works in our previous lessons. But there I told you I'll give you the detailed information in upcoming lessons. Here we are going to see that. So I upload only one video previously. You can see that this is the only video. Now I want to upload multiple files, so I just go to upload files. There you can see we have three more videos. I choose all three videos, L choose Upload. Those video files will be automatically uploaded and you can see the progress, it was getting uploaded and all those four files having the preview here. These three files not yet uploaded. That's why you just have the basic quality video with preview. I can load image or the video inside the container, as I said previously. If I want to add the video inside, we have placed all the information in the form of picture. Now, if you want to add those um, content in the form of video also, you can do that. For all those things, what you are now to do is just add a video frame or you can also directly use. But if you want to control that object within the boundary, definitely, you can go for that video frame. Now I just expand this, the facilities area, just want to show you that if we need, then only we are going to use that. I just increase this area, and here I'm going to show you the video preview. So to add that, I come to this place elements, going to type frames. Here I have a rectangle around rectangle frame. I just added one and I just adjust the frame and I just adjust the corner into ten now this is a video frame I have and if I want, I can further edit anything. After did this work, I want to add the video, so I go to the uploads again. Now I have four videos here. I choose this video. I already uploaded previously and the remaining videos are in the process. I click here, and I add that, that video was loaded here and just reduce the frame size. It was getting load. So after adding this, I just want to drag and drop inside my Canva page. So I just drag and drop inside. Now that video was placed inside this frame. I can play and I can have the preview of that. It just showing you the preview. So it shows you the preview here, and this is how this video has the structure. I'm going to show you how we can do the modifications on this video as we required. Do that. I just select this video frame. See here, I just click once and I got this frame. The control of the frame is here. I can just press Play button and pause. I can also use a slider to adjust video's current position. Now when I select this frame or the video, the top of this toolbar, you can see that I have edit option. I have the trim option. I to have a PG remover for image and the video files, but this is only for the pro users. We don't need anywhere here. So I use this edit option now. Using this edit, I can control the playback of the video. At the same time, I can repeat the video continuously. By default, it was in off mode and play automatically was in on mode. When the web page was scrolled down, the video will automatically play. If you want, you can enable that. Otherwise, you can disable it. Most of them, we need to play that automatically. So I just keep that play automatically in enable mode. Now, I don't want to finish that methodic seconds, but if you want optimize, yes, you need to maintain. Otherwise, if you want to play that again and again, you can just enable this play on pwd. I just play here, it's a normal speed. The speed is one. Now I can change that value into point by 0.5 and I said that into 0.25. When I said that into 0.25, let me see how we play because we changed the speed of the video to 75 percentage, so the impact will be huge. You can also do the same adjustment at the top here. You can see that it shows you the speed of the video and I can adjust I can reduce or I can increase. I can do both things. I just play here, you can see that how slowly it moves. Now I can also increase the speed from normal. By default, it's one, I told you, if I want to increase two, I can increase till two, so that video will play as much as fast. Either you from one, you can move that into zero or 0.25 or two, according to the need, you can use it. You have the same adjustment options, what we have for images, can adjust the temperature, lights, color, all those things. You do have the auto adjustment. I just press back button. Here also, we have the filters are the pre set values. If you want to use any one filter, you can just click there and the impact will be on the preview. If you want, yes, you can go for it. Otherwise, you don't need it, go back to the filters. Now this video duration, you can see that it has 45 seconds and 0.6 milliseconds. Now, if I want to edit that duration of the video according to the need, you can do that. For doing that, we have this option called trim. I click here Trim. When I choose that here, it shows you the total duration. The same time it shows you the play controls here. At the beginning, we have the purple that slider and at the end also we have the same color slider. If you want to trim a particular segment alone, you can just slide and adjust and you can select what kind of duration you need for this video. After did that, you just press Play button, so it just play you what was the selection or area and it clearly shows the duration also to you. If you want to reduce that into particular duration 10 seconds, I can directly add it. You can see that I was added ten, but it was 9.9 and you can see that it automatically changes. And if I want to move, I can click here and I can click Move. I can select that ten second anywhere from the beginning to end. However, if you want to increase or reduce the duration, only you are going to touch those trim points at the beginning and end. This is how I do the work. After I did all the work, I just choose done. The duration of this video will be only ten second not 40 plus seconds. This is how we do the editing works of the video. We just add and if we need, we are going to have the complete video with the original structure. But if you don't need and you are going to do the modifications, yes, you can do all the modifications of the video according to the need. 35. Format text for easy readability: I in this lesson, I'm going to show you how we are going to do the text formatting using Canva. When we create the home page of this website, we did some text processing works. And here we are going to the remaining things, and let me show you how we are going to do that. So first, I choose this paragraph text. At the top, you can see that we have the font type, so we can choose which font type you need. And after that, you have the font size. As I told you, the 12 fonts is much enough for the website. You don't need to add too much amount of font size that disturb the entire design and redoubleting. That you have the font color. So you can choose which font color you need. When you choose the font color, it shows you the text color here, and you can choose which color you want. Here it shows you a list of colors which is used in the website design. When you have a dark background, you can use light text, but here we have a light background. So either you can go for this kind of dark or more dark text information. However, I choose this one. So here I used only this dark green. You have to use the same kind of color on all text instead of using that in a different way. That's not good. After that, you have the bold. If you want, you can go for this bold and you to have the italic and underline options. To have a strike through, when you need, you can go for this. I just don't need this now. After that, you have the option called uppercase. If you want all those titles in the uppercase, you can go for it. Just select the frame and click this uppercase. If you don't need, you can again convert that into lowercase. Anyway, if you are creating the content, better you try to create with a sentence case or lowercase so that you can anytime change that into uppercase. If you type the information in uppercase, you cannot change that into lower case here, you can do only the lower case to uppercase. We cannot change the upper case to lower case. Don't forget that, you have the align. As I told you, I have three alignments here for left, center, and right. But after this three, we have fourth, which is justify. Here I'm going to show you with this option. I choose this paragraph. It was a left alignment. I choose center, you can see that last line, it was a center, not just the last line, other three lines also. I choose right, it shows you the right alignment. Finally, I choose this justify. When I choose justify, apart from the last line, first three lines have the equal alignment on left and right hand side. But when I choose that, again, it will turn into left alignment, which means in left side, you have the equal alignment, not on the right hand side. But anyway, most of the website will have this left alignment which have the better readability. You don't need to turn that into justify alignment or right alignment. Just keep that in a left alignment. After that, you have a list. Here you can see that we have three different category of the facilities. You have this option called list. When you enable this list, it shows you the list of the data which you are provided, how we select all those things. Again, I click the same option list. So if you already apply the list, it will add the bullet form. And again, if you add the same button, it will add the one, two, three. And again, if I choose the same, it will add nothing. So this is also having the single shortcut, the button, click once adding the bullet. Again, click for the list from numbers, and again, click to have nothing. So by default, it will have the bullet when you choose that. Then after that, I select this paragraph. Here I have the option called advanced setting. Here I click here for the advanced setting. I have a letter spacing. By default, it's zero. I can adjust the space between each characters. In design work like rapid designs, we share this information with the name tracking. But I just need zero here, and default line spacing is 1.4 with Canva. You can adjust if you want, you can increase or decrease. So based on the need, you can choose, but I just keep the 01.4. After that, you have the anchor text box. So most of the time, not just most of the time. In all time, all the text information will be arranged with the baseline of that text. But if you want to adjust from the baseline, you can adjust that from Bittle. If you want, you can go further. Otherwise, it's not required, then you to have more settings. So when I click more settings on left hand side, it shows you the letter spacing, line spacing, and the formatting value. I can change that into either normal text or superscript or subscript, based on the need, you can choose what you want. And you have the kerning values. So if you want, you can adjust that also using this and ligature. These are the options we have with the advanced settings, and these are completely, about a text and we have the transparency and effx. All those things are rest. Um if you selected the text alone, you have the ex. I'll show you how we are going to effx in our A lessons. So we have another major important, you know, option, which is called copy style. So with the help of copy style, I can copy any information and paste into another text. Here you can see, I have four different font styles here. Here I have Canvas sands and here I have DM sands and here I have copper covered, and here I have break. So I just need the same Canvas arms around all the feedback. If I want the same font size, color, alignment, everything from the same, I can use this option. To do that, I just click this copy style. I do have a shortcut key, which is Control OTs or Command Autry. Now, I click this. When you select that time, you have to be with the selection. Again, see here already selected the source. This is the source I need in my three destinations. I selected this source, then I'm clicking this option, copy style. It shows you the style copied to clipboard. Now I choose directly to this text field. That font property will be completely added with this. Again, I choose this property will be copied and here I click again. That same property was copied and replaced. Again, I click here and I click here. This is how you can copy any style and we can add the same style with another object. This is the easy one. You don't need to spend a lot of time for doing those changes, adjustments, perfections or duplication process. Simply complete the work and just copy the style and past the style. That's how we use those text information and text alignment and options with Canva web designing work. 36. Use Canva elements like icons and illustrations: In this lesson, I'm going to show you how we use graphic icons and illustrations for our website. We can also access all those dis using Canva elements. Let me show you how we can do that. From the home page, most of the websites will have the illustrations and graphics. Let me show you what are all those things and how we do that. On left hand side, I choose the option called elements. I just click because when you just roll over there, not just for elements, with a text, design and upload for anything, we just roll over, it will change. But when you come out of that, it will hide. But if I choose by mouse, just click there and it will keep on there, even if you go to somewhere else and it will be there. Here I'm going to type the called web icons. So when I type web icons, you can see that in graphics and photos, it shows you a lot of icons. I just click C A. So it shows you a lot of icons which you can use in website design. For example, this is the home page, and in our additional pages, I'm going to add the icon to jump back or navigate back to the homepage. So now I'm going to add home icon. So it shows you a lot of home icons. I can use which one you want, you can add and you can utilize it. Here I have a lot of home buttons. I'm going to add one button. I'm going to use this one. This looks good, and just come to the second page. I just expand this section a little bit here I'm going to add this home. I just click here, that element was added. I just reduce the size and I reduce more. Here I want to add it. I just add it here at the bottom of this web page, the section. Now after that, I choose it and I choose this color. I can choose whichever color I want and I can also change the size more. This is how I can use graphics on the icons, and here I just want to add someone was writing with a pen that element I need to add. Here I just type writing with a pen icon. We got a lot of icons here. I choose the graphics. It gives you a lot of icons like this. You can choose the free one and you can add I choose the one either with a hand or without hand. It's based on your need on that place. I'm going to choose the one from the beginning. I choose this handwriting. Yeah, this looks good. Handwriting icon and a lot of things are there. But so I can use this either one of those, both looks good. But if I have that one with outline view, that could be much better. But anyway, no problem. I'm going to use this one. I just click here. Again, it was added, and here I reduce the size and I'm going to add it here. I reduce the size more. In this way, you can add where you want and where you need that icon also so you can increase the line space more and you can have a better view with the better line space. We just tell it that I need better icon. So just have writing icon. Looks good. Here you can see it looks really good. This is the kind of icon I need, but that has, you know, with only Pro, I don't have that with free access, so I cannot use it. I just need a pen alone if I don't have that with a hand, and here it looks good. I can use it. So I can just place that pen either here or there, where I want. I can also change the color here. This is how you can add your graphics icon from this Canva page. In each and every page, you need that symbols, the icons as you required, you are going to add. Now in the same way, I come to the elements. If you need some basic graphics which is for the background of the website, you can add I'm going to add the graphics. That's a keyword I just add. I press Enter, I choose C. It basically shows in all the illustration about website. I don't need that. I just need like daughter line graphics. When I type daughter line graphics, it shows you a lot of daughter line graphics, and here I just add this half tone dots. And if I need that for my web page, I can add it and I can add that color I need. So based on the demand, what that website have, you can add the graphics, and that should be meaningful. Don't forget that since it was available with this Canva graphics you cannot use, you cannot add. You just need a reason, a strong reason to utilize that on your design. Otherwise, that will be a meaningful one. So meaningless one, not a meaningful one. So that's how we to add the graphics, and I'm going to add the holiday based graphics or hotel based graphics. So based on the need, you can choose which kind of, you know, graphics you need, and you can add that with your website. So nothing wrong with that because based on the need only you are going to add what you required for the website. And here I just I half tone graphics. So all here we have is the golf tone graphics. So this is how you can add either these kind of, you know, icons or the graphics, what you require for the complete website design with Canva. 37. Test media placement for aesthetics and functionality: In this lesson, I'm going to show you whether we placed the graphics and information in a proper way or not because we added all the elements in a proper way, of course, but whether the placement is right, let me check that and tell you how do we do the changes. At the top, you can see that we have added those, the navigation bar informations, and we to added the text information here on the homepage. Here you can see that it was more congested. I just select first two, welcome to Austin and move a little bit above. Here I'm going to add some space between each information. This will give the better balanced view to this information. Now, after this, I just select all those text information. I don't need to select the background. I can see that clearly what I was selected. Now I go to the position and here I want to select the left alignment. Previously I was selected the left alignment, it was in a proper place. Otherwise, I need to do a lot of changes. Now, in the home page, I need to add logo also. I not yet added the logo. So to add that, I go to this upload and I choose upload file, and inside this I have the images. So with the images, we already added the logo. I go to the folder here and Houston here I have the logos. So I was updated, two logos in the folder. Here we have two logos. One was with a black background. Here I just have it. You see here. I just added another one is transparent. This is the transparent file. I just move with my keys. Because when I move with a mouse, it will automatically add that logo inside this frame. I don't need that inside the frame. That's why I use the keyboard to move that. I need this logo on the top of this navigation bar. I don't need this black. When you have that situation, you can use that, but here I just need this. I just drag and drop this logo here. I just move it to this page. You can see that and here I just trim this area. Here it's a empty space, so I don't need any of that. I increase the logo size. I press the shiftiki. I don't want to press the shift tiki. I simply select the image and I was, you know, trim the areas. Now, I just need to zoom more and I want to adjust more of the top at the bottom. Here I just adjust first and here also I need to adjust so after that, I again increase the logo size. The logo size plays crucial role on a homepage. That to show you what kind of website you have and who is the other person running that particular hotel and how good that hotel, what kind of the you know, the facilities available with the hotel what kind of quality they can offer. All those things will be conveyed with this logo only. That's why creation of logo is much important one. So we to added that and I also reduced the unwanted space of this. So on left hand side, also, I want to adjust that to do that, I just come to this place and I reduce. After reducing that, again, I just select and move and I align in a proper place where it should be. This is how I add my logo on this section, which is the navigation bar, and I was adjusted that information of the text also according to my need. Now, I feel like I didn't have enough space between the logo and the content, I select all those information and using down arrow, I just move a little bit so that that logo will have the better visibility. If it required, you can increase the section area and the logo will have a better visibility on that place. But here you need to maintain and you need to add more the design elements. To avoid that I just keep that in this value only. This is how I add the logo and I was managed the information here. I come to this place, here I choose all these three and I choose position and I choose left. Now the alignment is equal. But here I choose the text information for the list, I was providing more line space. Now it has the better readability to compare the previous the text information I was provided. I selected all those texts and I just maintain with the same kind of height with a picture. Here also, I select all those testimonials and I just convert that as a group. Now I select all those things and I choose position and alignment into left. We have the proper alignment here. You can see that it doesn't have any disturbance. You see here I don't have enough amount of space on left hand side, or I have to provide more space on hand side. Based on that, I can decide what should be the alignment. I select all the information and I just group it and I position should be center. Now I have equal space on left and right hand side. But here also I need to maintain the same distance. I just have the left alignment, but I move and place with the same distance here also I did that. This is how I align the informations with the proper way and I to adjust this. Here also I select this. I select all the elements and before group it, I just move using Shiftiey to match with that upper alignment. After that, this side also we have the same space, but I need a little more space to manage it. W equal distribution on elements, I just do the same thing. Here also I want to manage the same information the same alignment. I move the text information or here, I can adjust the frame, the image will automatically adjust. But I select this information. I provide more line spacing which provide better readability for the text informations. This is how I add here also, I select and I move more on left hand side according to my alignment. And after that, I select position and I choose left here also I select this and I expand this line space a little bit according to the need. The images, you can see, I select all the images. All those images have the different positions. I just want to reduce. I selected all the images and I reduced the width of each frame. Now it was fine here also I do the same thing. This is how I to adjust those frames. According to that, the appearance, what I required. So here, and here also I was adjusted. We not yet added this contact. Here we need to do a lot of works. We'll do that in our upcoming lessons. This is how we adjust all those elements for the website, what we create with Canva. 38. Preview the changes for Debug: In this lesson, I'm going to show you how we check all the changes what we made and have the preview of how it works with different devices. To do that, I choose this preview as usual, and this is the desktop view. We know that we have added that logo here. It has enough space on left and right hand side. At the top also, it has enough space and at the bottom. I just scroll down. It's a home page with all the information I come to the facilities page as we have here. That's page. After this A spade, I have the facilities page. After the facilities, we have the services and you can see that gallery and we have the contact. We not yet added the contact and footer. Now I choose this complete view. In a complete view also, it looks good. Those alignment of the images are fine. But here you can see that the alignment that logo that move entirely, um, that we need to see why it was moving. I just make that into normal view and I want to check that how it works and look with mobile devices. So I choose mobile devices. There also, the logo was not in a proper way that company or logo. Apart from that, other things are really fine. You can see that About speech looks good and the testimonial after that, we have the services and facilities. Then we have the list of, um extraordinary gallery and finally we have a contact. Apart from that home logo and arrangement, other all are fine. In our upcoming lessons, we'll take care of that and correct that before we publish the website design. This is how we do the work for the website content and images and video using Canva. 39. Add clickable navigation bar: In this section, I'm going to show you how we are going to add navigation and interactivity for the website. In our previous lessons, we have seen how to create a website and how to add a content, and here it starts with navigation process. I have navigation bar at this home page. This is a navigation bar. It has six buttons, you can see that start with home about us facilities, services, gallery and contact. Apart from that, I have a few things like I have this clickable button and I have to add more interaction for the audience. Hereafter, I'm going to add those settings. At first, I want to add the navigation for this navigation bar. When you look at this navigation bar, I have text in the form of home and about us and other all buttons. If you look at the boundary of this navigation bar, it looks very tiny. When the user was having the interaction during the website surfing process, it's not easy to find the particular button working area. To increase the boundary of this particular button working area, I want to add a few more things. To do that, I'm going to add a rectangle. I press R. I got the rectangle here. After adding the rectangle, I add here and I want to mention the exact dimension, what I have for this navigation bar. Now I just move this into this section because here I want that. Again, I was adding rectangle because that one is gone and here I just expand the dimension. I used the same distance between each and every button. Now I just increase the height because when the user come to this area, that should start the function, whatever it was. This is how I was changed the rectangle area. After adding this, I just chose this transparency and I'm going to make it 100, not 100, zero. By default, it will be 100, but right now it was zero. I just want to duplicate the same thing and place for all other buttons. I just sold the Alt key and I duplicated. I was placed and I was adjusting as required because there are small tiny adjustments I had to do. I do the corrections and here I want to adjust that too. That should not create the conflict between buttons and here also, I adjust it. Till this, you can see that I was adjusted. But since I was duplicated from the existing one, all those buttons present in front of those home about us and other all text information. What I do here is I just click outside and tag that will cover all the elements selection. After that, I just right click over that particular rectangle, any one rectangle I was selected. I right click and I choose align elements, not just in elements, the layers, and I choose send to back. When I choose send to back, all those selected zero transparency objects, the rectangles will send back behind all other text. I click the send to back. Now you can see that I just click outside, you can select the text which is present in front of you and those objects are also there. I just select those objects again and when you increase the transparency value, you can see that all those things are there. This is how I just sent all those things outside. But anyway, I'm not going to show that I just want hide all those things. I make sure the transparency value is zero. Since we don't have any rollover option till now with Canva websites, I just created this trigger value, which is the hot spot where you are using the invisible objects. I hope in future maybe before this upcoming Canva creative event or in a few months we'll have that rollover effect with Canva website buttons. After adding this, this is ready for adding interaction with the other pages. In the same way, if you want to add any clickable buttons over any page, you can add all those things like I just copy this. I need the same home button in all pages. Here also I paste and I just change the location of the button. Again, I copy that and here I paste it. Then I just increase this section space also and copy again here also, I want to paste. Not here, here. Finally, we have a contact page, and there also I want to place. I just add in the same location where I was placed in all pages. This is how I was adding all those buttons for adding interaction with camera pages. O 40. Link pages internally: In this lesson, I'm going to show you how to add internal interactions and navigations for this website. We created this complete website using Canva, Let us see how to add those things. To add that, I select the homepage. To add this in a homepage, I come to this place. Here I group the background shape, the transparent shape, and the text. But I need to change that because I cannot add the group objects interactions. I cannot add the hyperlink with groups. I can add only hyperlink for individual objects. To do that, I select this homepage first. I click once. When I select the home text, I have the option here, which is the menu. I can click there. There I have the option called Link. You to have a shortcut key which is Control K. You can also do the same thing by right l over the text or any other element, I choose the ink. So here I choose this link option. When I choose the link, it shows you all the websites you have created using your Canva account. And apart from that, it shows that pages in this document. So here I just press this button which is pop up. You can see that it shows all the sections which is present inside the page one. This is a single page, as I told you, you want to add any other page for that gallery and separate page for services, you can add that, but here I didn't add. If you want, you can add. Let me show that also. In our previous lessons, I shows you, but here after I will show you again. Here, when I choose this home button, I need to navigate this section only, which is Section one. I just select this section one, which is called this navigation bar because not just the home page, I need to come to this navigation bar, and this is the name of that. If you want to change the name, you can do here. I just add the name just home. I can do that. I just again click there. Yes. I just click here again. You can see that this is the section one of this page one. And the link, just a link. I didn't embed anything and I choose done. I do the same process for this background shape. I add a link, and here I'm going to choose that home, which is that navigation wall. So that's what I need because when I show the navigation bar, that homepage also will be visible. I don't need to select the homepage alone, which may hide the navigation bar above the browser area. Now after that, I choose the About us right and I choose Link and here I want to link that section three. You can see this. Here I chose the A us data. I to add the same information for this section three. By mistake, I was selected. Here again, I choose Section three. And here I want to mention Section four for the background shape. Again, I did a wrong thing. Link, and I chose this facilities. I was added the facilities here I'm going to the same thing. I can see how I'm going to choose the facilities. So here I want to add the next one. I just select this and I want to choose the services. After the facility, I have the services. I to add that with the link of the text. I choose services. Then I choose this gallery. I choose Link, and I do it properly again. And here come on. I should be slow a little bit. Here I click and I choose this gallery. Section six is that. Again, I choose this and here I'm going to add a link, and here I'm going to mention the Section six. Then finally, I select this contact and choose this link. Here I want to mention the last section, which is Section seven. I click this arrow. I chose the section Share. We know that Section eight is footer. I'm not going to add any link for that. That will carry only the information of that website copyrights and other things. I just select the Section seven. Anyway, we didn't create the content for the contact page, we need to add the information. We'll do that in our upcoming section. Now after adding the hyperlink for each and every text, you can see that there is a underline, which indicates it's a hyperlink text, not normal text. However, you don't need means, you can just remove that. It's not required with underline. However, that the link was there only, there is no change with that. At the same time, if you need to change any one section link, you can simply select and you can see it shows you the edit link option when you select that and it shows magic write for adding the information not for this editing. I choose this edit link, and it shows you exactly the section and page number. At any time, you can do those changes if you need. This is how we add the navigation link for each and every page, and here I come to this place. I choose this home icon. I want to add a link for this also. I right click over that and I choose Link, and here I choose the very first Section one, which is having the navigation bar. Also will show our website. Again, here also, I do the same thing. You can also do the work and copy and paste the same element in each and every page where you required, which is another easy way to move the object with the hyperlink. Here I was added multiple times, which is not required when you are doing in that way. Again, I add the link. I come to this place, select the section one, I did it. Finally, in a contact page also, I add the link with first section. This is how you can add the information for each and every navigation button. And if you want to change the name of this whole page, as we know that each and every part is called sections. If you want to change the name of the whole page, I just make that into grid view. Here it shows you the edit option. I click here and I add the name of this page. Right now, I just add the name which is index. If I want to add any other table pages, which is the website pages, the same way, you can add using this option. I just click here, see I got a separate page. If you want to expand any one information like in a facilities page, I was added the information. But if you want to show the detailed view of each and every page, you may add that in a second page and you can add some buttons here to navigate to the page number two. There also we can add the homepage and other all menu items so that the user will click that and they will come back to the homepage and navigate the remaining options. That's how we do the work. But anyway here I don't need that right now. So I just delete this page. I have only one page with multiple sections. So this is how I can add those navigations, and you can see that here also, I was added the click on button. And if I want to add the link, I can add here. Same time, here I just write link and I choose this link option. In this link, I just add ash symbol. When you add hash and press done, this will have the hyperlink, of course, but this hyperlink will have nothing. This is how we can add the navigation power each and every page and every sections within the Canva web pages. 41. Include social media links: In this lesson, I'm going to show you how we can add social media links in our website. To add social media links, first, we need to add the social media icons. To add it, I come to these elements, and here I'm going to type the keyword, social media icons. You can directly add that keyword. Type social media icon, and I come to see all graphics. Remember, you will have all the results in the form of graphics, photos, frames, and everything. But we need to choose graphics because we need to add the vector shapes. We don't need to add any raster images. So here we have a common, you know, social media links, but I'm going to choose the one which is called Instagram. So I just choose the instruct them icon first. You can see most of them are paid. But I do have the free icons. You can see that I have the free icons there. I can use it instead of using all those paid icons. So you have the option here, which is brand pitch. It's an app which will help you to fetch the logo of each brand. You can access that from this apps option. Since it was showing you here as a recommendation, I can directly use it. Otherwise, if you don't have that here, you can go to the apps and there you can type the brand page. Just type Bandwig logo. You'll have it here. Here I'm going to use the elements. From the elements itself, I'm going to access the web. There I choose Open. Here I want to mention the particular website link. I just type gram. So there I have that, you know, different logos of Instagram. I can just click there to add inside my design. See that it's free. We don't need to pay any money for that. We directly added. So here you can mention what kind of dimension to require. I go to, you know, the positions range. There you have the width and height of the object. I'm going to type here 50. So this is, you know, icon size for 50. This looks much bigger. I can reduce more, so I just type 25. Still it looks bigger, but it's enough to place over there where we need. So there I add it and I just want to adjust that navigation bar a little bit. So I select the entire area of the navigation bar. I move it a little bit down, not too much amount. Then I want to add this information here. After that, I'm going to add another brand fetch. So I choose the brand fetch again, and here I want to choose the Facebook. So I choose Facebook and it shows you the logos. So you can choose whichever you want. It shows you different values with a background and without background, the transparent vector, everything you have, you can choose which one you want. Now, I choose this one and I have it here. Okay. So I just drag and drop here. I need the same dimension, what I used here. Here, I used 25. I to use 25 here. Since the ratio was locked, I don't have any aspect ratio or stretch problem. Okay, I come to this Bandfech going to add Twitter. After that, I'm going to add X. I need X icon, the logo formally Twitter. So here also, I'm going to change that into 25 pixels, and I just lock the race pettie before I change it. Now it's 25. And finally, I'm going to add my YouTube icon. So I just type YouTube. You have a lot of, you know, variety of buttons. I add it. Here I'm going to change, you know, um, the width. I'm not going to, you know, touch the height because the dimension is different. You can see that. And here I'm going to mention the width 25. So based on the width, the dimension was adjusted. This is how I can add all those social media pages links, and after that, I just come here and just order each and every icon. Now, I just select each icon. And I want to maintain the same kind of, you know, alignment. So I choose position, and here I choose the middle so that all the objects will align in a middle position. You can see that. I just want to maintain the proper distance for each object. So what I do here is from this right hand side, I just have the distance. So when I move, it shows you the distance between each object in a pixel. And here, yeah, I got it. Was placed all the social media links here. This is how you can add those social media pages. Now I want to add the links. Right now, this is just the content. I don't have a proper links. But if you want to add, you can just choose those links. I just choose this icon. Here I'm going to add Instagram link. I'm going to add some dummy links here. Let us see how I'm going to add it. I'm going to add a new tab and I'm going to add the home pages of each social media sites. I just type YouTube and here I'm going to choose that link. I copy that, and here I write link and I choose this link option and I add directly. When I copy and paste and choose done, that link will be added directly. When you choose that link will be opened during that preview and final process, I to need X page. I just type X and I just copy the home page the same way I need the link of Instagram. I choose Instagram and first I add the link here for the x, and also I choose the Instagram link. And also, I want to add the link of the facebook. So here I just copy this link, and I'm going to add with Instagram. And I chose done, yes. Finally, I choose this Facebook page link. I just click here and going to copy the homepage link. So since I don't have the proper, you know, website link, I was adding, if you have your own website, you can directly choose it and you can add it with that. Now, after choosing that, I go to this website, and there I choose my Facebook. And my Facebook icon, I just right link and add the link, paste it, done and done. So I was successfully added all the social media links. Now I can copy the same thing and I can paste in my contact page also. So we'll do that when we do the contact page design with the forms in our Canva. So this is how we add the social media pages in Canva. 42. Insert booking navigation Elements: I after adding social media links and the icons, I just want to add one more button here, which is book now. So when the customer visited the website, the top itself, I was added the book button. When they click that booking page will be opened, I to want to provide only one mobile number here. So to do that, I just want to add one button. To add it, I come to the elements, and here I chose this as usual, the rounded corner button, and I change that ratio value, the radius value into ten here after that, I just at the text book now. I can change the text format into uppercase, I reduce the height and here I want to add at the top of this section. This button should look different, so I don't want to provide this much amount of different color. The same time it should look different. I want to add some warm color like red will provide you the better visibility to the audience so that they will directly visit and choose this. Want to board the text, and after that, I choose, add a new color option. Here I choose pick a color. I pick this from my YouTube, so both colors have the same look. I just want to add a hyperlink to the booking page. If I have added another page after using the pages, since I told you we can add multiple pages for each and every function, you can add and you can give a gyperlink for that. After that button, I to want to provide a particular phone number. Overall, I select all the elements. I just move a little bit down and here I select that element alone and keep that in a center position. After that, I choose the elements again. Here I'm going to phone icon. So there are so many phone icons out there in graphics. I want to choose the one and I change the size. Here I place it and I want to change the color into white. So I can change the color into white and I can add the phone number here. So I just want to add the text to frame plus is a shortcut key to add the text information. And here I'm going to add the contact number. I'm going to add some dummy contact number like this. So I was provided a contact number that should have the same white text instead of having the different text. I do want to bold that. This is how I provide, you know, the basic information to get with the pages. I can maintain some distance if I want. I I don't want to disturb that book now page. This is how I add the remaining information on this homepage alone here also, I choose this small frame. I just duplicate this by prescding the Alta key and shift the key. Now I move this and I place here. If you want to define the boundary of that, we can mention and you can choose like this. This is how I adjust this and we completely created this homepage for booking the rooms with this website. 43. Add animations for Elements and Pages: In this lesson, I'm going to show you how we can add animations for the pages and elements. Let me show you that one by one. First, I'm going to choose this homepage. In a homepage, I have the text, images and shapes. We have all those elements. When you want to add the animation, first, you need to select the section. When you select the section, here it shows you the option called animation. At the top, you have it. Click this once. When I click that, it shows you two options page and photo. Since I was selected the frame, it shows you the photo. When you select the section, it shows you the page animation. There is a difference between both things. You can see there. Now, I was selecting that page, the section, I choose this animate. When I choose the page, it shows you the preview here, which is having a lot of categories. I choose a simple which gives you the basic animation of the elements and it's leak and it's fun. Based on the need, you can add what kind of animation you need. Here I have the option called both on Enter on exit. When you choose on Enter, when it was loading that time only that animation will happen. And when you choose exit, when you scroll down, the upper page will be exited and that time that animation will happen. And you choose both, both the time it will happen when you load that page and when you leave that page. By default, it will be both, but you can edit later if you want only the Enter process, you can choose on Enter. Apart from the future, you have more options here like party, corporate, and chill. There are so many things out there to add. Based on the need, you can choose which one you want. The elements animation was different with the image, the text. You can choose basically how do you want those options. You can choose whichever you want. When you move, it shows you the preview. You can see that how it has the animations. Based on the need, you can choose what you want and you can adjust the intensity, but you need a proc. At the same time, you can also adjust that direction, but you do need the proce. However, here, they provided the different directions, so you don't need those options. After all those things, you have this option called reverse exit animation. The same way it was entered inside, it will be exited. If you enable that, you can see that I choose this option pan and when I choose this reverse animation, in the same way it was exited. You can enable this if you want. Now I come down after that reverse exist animation, whichever you want for the reverse, here you have it and it can change later what kind of animation you need from these areas. Now after that, I come down. You can see that if you feel like, yeah, this is the animation you need, you have added for the pages, you can apply the same kind of animation for all the sections, which means virtually all the pages. To do that, I click here this option, which is applied to all pages. So all those pages will have the same kind of animation was applied. So when you have the preview that time, you can see all those things. You can see that, how it will get the animation. Here I just ungroup the elements because then only that animation will happen in a proper way. This is how it will happen because we have selected the pan only and I go to this page, the very first section, can see that we selected only pan. When I come to this place, this page, you to see have the same animation. This is how it will be added in each and every page, we have the same preview. However, if you want to change that animation in that particular page alone, you can choose something else. You don't need to use the same animation on all pages, it was panned right now. It's a very simple animation. But if I want to change that into corporate, yes, I can click there. So that action will be added to this page alone. When I go to the next page, you can see that it was corporate. When I choose that, it was changed in all pages. You can see that in all pages, we have the same kind of corporate animations. Based on the interest, we can choose all those things. And if you feel like you have added by mistake and you need to remove all the animations, including animation which is added inside the elements, you can choose remove all animations. So there will be nothing out there. Everything was refreshed. But I choose this page animation, which is span. I was added for all pages. Now we added the animation for all the pages. After that, if you want to add the animation for the individual elements like individual texts and individual images like this, you too can animate. For that, you need to select the individual elements. When I choose that section or the page, it shows you the page animation at the top. If I choose this logo, you can see that it simply shows you the option called animate that options which is having here was completely depends on that element, what you have selected. Since I was selected the picture, it shows you different ways of loading the images. You can see how it was loading those images with different apex. If you want, you can choose that and apply for that element alone. The page animation will be played at the same time. These animations also will be added. Now I choose the background picture. Also you can mention if you want, I have the vibe, pop sessions. You can add those effects if you want. Be careful when you choose this blur effects because it will increase website size may take a little bit time to load those pages. Based on the need, you can choose which one you want. Here it choose this tectonic, it was moving tectonic plates of the Earth and I choose this one. Here I have the images. By default, all those images will be loaded. But if you want to particularly add those effects like this, it just a preview, you can add that also. But otherwise, you can see the entire page was having the animations and you add an effect, so that effect will be completely played for the entire duration when you watch that complete website. So you have the options to load that. And when you select the text alone, you can see that you select the text alone, you to have a lot of text based animations, right? So if you want, you can add those things also. Based on the need, you can choose whichever one you want. You can see a lot of text animations out there. So it's up to you. And I just added one bounce text animation to have the preview. You too can add the text animation for the content and whatever the text, you know, you can add. See here how it has a different effects. So this is how you can add the entire page animation and individual elements animation inside the Canva. And you can have the better experience when you have the preview. 44. Test all links and interactivity features: In this lesson, I'm going to show you how we are going to test all the hyperlinks functions and animation functions using this Canva preview. We already know how to use it. Let me check how it works for us. I choose the preview here, and as usual, that website was loaded. You can see that the animation was played when I load that website. Now I just scroll. You can see there is animation. So the page animation was perfectly works. Without any changes. It's really good. See here, it was added at first only, not each and every time. Again, I close the preview, and I just click the preview here again. You can see the animation here, right? So all those animations. And here also, you can see all those things animated. So this is how it was working in a fantastic way. Now after that, I just want to check my page animations. I choose About us, it perfectly move to the A us page. I click this home icon, whether it works or not, it works. Again, I go to the facilities, so it perfectly moved to the facilities page also. I click this home button again because I want to move the home from this facilities page. When I click the home button to navigate to this facilities page. After that, I click Services and it go to the services page. I click this again, home choose gallery. Two shows me the gallery pages. Finally, I choose this home. I check the contact page. Yes, it works perfectly. To the buttons I created works perfectly. Here I didn't add any link because I told you, if you want, you can create separate page and you can add Link for that. I add the dummy social media links. I just click this Instagram it opened a separate page of that Instagram and I click that. Again, I come to this place, I choose the Facebook. Yes, it to opens. Those links that you have provided with the x, Facebook, Instagram, all the things are getting opened. It doesn't affect the main website page. It clearly loads with separate pages only. This is how it works. It perfectly load all those hyperlinks, what we have provided for the other pages and within the internal pages of the website. I want to switch over that into full screen view. This looks good. This is how the entire screen view will have the look. Again, I want to choose my mobile page review. With that, we may have some problems. I want to go to this mobile page review. I click there. So it was loaded. You can see that. At first, I have the book, now, information, then I have a logo. You can see. The reason for the logo, it was covered from the top to bottom, and that's why it was considered as a end element of that particular section. And it to have the social media pages in between the services gallery and contact. I'll fix that in further classes. I just scroll down and check whether how those pages are arranged. All the home buttons are arranged in a proper way, it's fine. This is how it was arranged. Again, I come to this Windows page view. Here, it looks perfect. This is how it works. All those functions are perfectly working as we planned. This is how we do the navigation and interactivity with Canva website design. 45. Add a content for contact information: In this lesson, I'm going to show you how we can add the content for contact page. We not yet added any information or elements on the contact page. I come here. So here we are going to add those information. Thereafter, we are going to add the information on the footer also. So let us see the contact page information first. I just delete that information. Just copy two from this previous page, which is gallery, and I pasted here using Control B. So here I'm going to add the information. I come to this my document. Here I add some address here it's a dummy address and contact number and dummy email ID. But if you are creating a website for a client, you can add those information. We just copy and paste here. I just copy the text and I'm going to paste here. Yes. After adding that, I want to add the address details. I just copy the information again and I'm going to paste here. So this is the detail I have for the hotel website. I just want that this page should have the white appearance. I choose white instead of having the yellow. Here for this page, I can change the color if I want. I just want to add some dark color here. Right now I choose this dark value for this page. I select I select a multiple. Here I choose this one and I choose the color which is dark. Later, I can change the color. Right now, it was dark and I select these text information. I change the text color into white first. I don't need to change the colors further first I need to add a white. Thereafter, I select the heading alone. So after choosing that heading part, I choose the text color. I want to add this light orange. I want to show the difference between the title and the text elements. Now I come to this contact page. I was added the text from my document. We all to hear from you and the addresses there. Here I just make that hotel name to bold and I have the address. So here I was added that after that, I just need to add the phone number and email address. I just duplicate prescoding the ltkey. I just copy this. I can just copy the phone number alone and I past here. After that, I want to add the email address. I copy that and I'm going to pass. This is how I can add those informations and we can further add the remaining text elements like reser desk available for 247 for booking through the email and phone and I was added the social media follow up and we to add the form to fill the data. I duplicate that and just add this reservation information I just paste here, that's it, and I to duplicate again, and I want to add the follow us but I want to place that below other. I don't want to mention that before the remaining things. Now after that, I come to this place, I just copy this fill the form information and just duplicate this and here I paste that. Here I just make the text into normal. I don't want a bold text. This is how I add and here also I choose this and I make it normal. I just copy and pasted those information. Hereafter, I'm going to add further elements, what we required with Canva contact page. 46. Integrate a contact form: In this lesson, I'm going to show you how we can add the contact form for this contact page using Canva. Canva doesn't provide direct contact form for adding this contact page. However, we have more options with apps. So let me show you how we can add those contact information and contact form using Canva apps. To add the contact form here, I come to the apps first. In apps, I'm going to type the keyword which is form. When I type the form and present, I'll have all the form based applications in this search. A few things are much required, which works very well with this. Those things are the jot form, this is the jot form, and another one is this fluid form. Both things are really work well. First, I choose this fluid form. When I choose that, it shows you the options and you just need to accept, so I choose open, that form will be opened with my page. Here I just need to mention the information, so I can just type at the keyword which is called the form title. I'm going to type contact as and I'm going to mention the email ID, who will receive that form submission data. This is the important thing. If you're going to receive the data to that respective email lady, you need to replay or you need to respond for that email. This is an important thing. I just provide an email dy here. I was provided the Emil ID just added and I press this button, add to design. But before I do that, I just choose the costings. After adding that, you don't need to save it will be saved by default. I was added that the form title, which means a form name and the response destination, which is the email will receive the responses and I choose the costing. The Costin, I have the option called page one. I can add a lot of information here. This is the first in, I was required answer, otherwise, they cannot submit the form. Here I have a different types. I have a short response, I have long response. They can choose either SR no dropdown checkboxes, all those information including the rating. How I'm going to choose, I'm going to choose this short response first. And I'm going to type NA. This will be the field there and the response type will be the text. They're going to add their name. Next I choose the next question. Then I'm going to collect their email ID. I'm going to choose the email ID collection process. Unfortunately, I don't have the email collection process. Simply I chose the short answer again and just type email ID. They're going to add in the form of text only. Now I just duplicate instead of adding new, and here I'm going to collect their phone number. So I just add phone number or mobile number, and I require that data. Now I just duplicate again and I need to collect the information. I I going to receive the feedback, I can choose long response, and after choosing long response, I can provide that title called feedback, and of course, it's, you know, text. And I duplicate again. After the feedback, I can collect, you know, the feedback in the form of star rating. So I choose feedback star rating, and the title will be rating. What else? I just added red as and I duplicate again, if you want to add more details, you want to collect from uh, the customer or the people, you can choose this also, whether they are satisfied with services or not. This is how you can add the form cost chins and after that, I come to this design. Design, if you want to change the colors, of course, we can do, but for those changes, you need some Procore, I'm going to do any changes here. After all those things, you can choose this button which is add to design. You can access that from here also. I just click this at to Design, this will be added. You can see that the form was added here. It's a perfect one and I can reduce the dimension. It was embedded and I was placed where I want. The reason why I was set, the background to white is this, and I can expand the area if I need. I selected the frame after selecting the section. Expand the section and I can arches and place how or want this form. Now I can move this text here from this place and I can make this into bold. I can add color which are required for this text information. And I just increase font size. This is how I add this form to have the scroll bar to scroll down and get the details. This is how we add the form. And if you want to add any other changes, we can do the changes here and you can press Save changes. After you choose Save changes, those information also will be updated with this in the same way, you can use this jot form and come to here I have the option called Jot form. I click the jot form and it shows me open. I just open that after open that, it shows you a lot of templates. By default, they have a lot of template. You can see that we have a contact a lot more templates out there. By default, you can choose which template you need and can simply click and you will get that design inside your form. I'm going to choose this one, contact. I just click use Template. When I choose this and it will be inside my contact page. You can see here it was added. I just again expand my section. I just move design above and I come down. I want to select the section alone. After selecting this section alone, I can expand it. Based on the need, it can decide which form you need. You have two choices. Both are good. But there are small difference out there when you have the preview, if you don't need the advertisement from these farm providers, you can simply hide this area. To do that, I come to this elements. In elements, I use the rectangle. I just change the rectangle color into white. I just move it and I say that color into white, same color of the back. You can simply hide that advertisement if you don't want it and it looks like this. But if you're using the form, that will be displayed. But if you don't worry about that information, it's fine. You can directly get the information from the audience. This is how both things work. Based on the need, you can choose which one you want. So I just delete this one and going to have this. You two have choice. You can have either one. I just want only one form here. That's why I was deleted that both forms are really working well, so I don't say that this is better than that or that is better than this. According to that, your feasibility, you can choose which one you want. 47. Include a map for location based businesses: In this lesson, I'm going to show you how we can embed the Google map information inside this connect form. It's easy to do that work. Let me show you how to do that work. First, I want to assign some space for that. So I was selecting the elements, I moved down, and here I can add, you know, the Google map information. After assigned that space for that, I choose the map data. Again, this is the Wi map data. I just double click on the location where you need to get the data. After double click that, I just select the top address. I just copy that, not going to do anything else, and I come back to this Canva contact page. So here I want to choose the section. After choosing that, I press Control V. So I didn't do anything else, watch it carefully. I just press Control V. I'm not doing anything other than that. So it's a dummy address. I was added. After adding that, I just adjust and place how I want that with my website, contact page. This is how you simply do that. You just copy that, whatever the information, whatever the position, w click that. And when you double click there, you can add that frame. After mark that place, you can simply get the information, copy that and paste. You don't need to do anything else. You don't need to do any other tricks, you don't need any other addens just paste here. You'll get that link here. This will work when we have the preview. This is how you can add the Google form without Os When you add that nearby that utters, which will be the better one and it's easy to navigate when the people visiting this contact page. This is how I add the Google Map data integration with Contact page and Canva website design. 48. Add icons for email, call and social media: A In this lesson, I'm going to show you how we can add icons for contact, email and other facilities. So we already know how to add those information. I go to the homepage. In home page, we already have that navigation bar. In navigation bar, I already have the contact four number icon and other all four social media icons. Those icons are already have the social media link, so I directly copy that pressing Control C. Now I come down here. And here I want to paste with this follows here I just press Control V. After I press Control V, I just move it here and I just place here. It's very simple. We already created that so you don't need to work again. We can simply copy and paste those icons directly here. Now after that, here I want to add the icons. To do that, I select the text. I just want to add more space, so I increase the line space, and I move that left hands a little bit. I can add icons here, so I'm going to choose the phone icon. We'll have a lot of icons here. I can choose which one I want. Here I choose this one and this looks much better to compare the filled object. After adding that that straight line, I adjust this again and here I want to add an email icon. I was added the email and I choose the same style icon instead of choosing different. Again, I scale down and want to place here. Now I choose this icon. I go to the positions. I just check the dimension. I just change that 17 and both X and Y were 17. I do the same thing for here also. Just add 17. So this is how I add those informations and place that. I just copy this contact icon again, and I go to the top of this website. I want to replace that. It looks so hard. So I just place that and I delete this, and I want to add this icon here with white color. I choose white. You can see this. This looks better than that, you know, the complete solid white. So this is how I add the icons. I was replaced that in homepage also. Same time I have those icons from the navigation part to contact page. You see here, I just want to scroll down. I just scroll down and have a look on my contact page. It has all the elements to get the feedback from the form. It has the address with Google map, the contact number, email address, and social media pages. This is how I add all the icons for my contact pages using Canva. 49. Test form functionality: In this lesson, we are going to check the form functionality, whether it was working in a proper way or not. To do that, I already opened that email address in a separate tab, and this is where we are going to test. To do that, I just make the preview here. I choose preview, and you'll have the Windows preview here. After adding that, I just want to go to the contact page. I just click this contact, and I click the contact, I'll get back to this contact page. You can see that clearly all the information are loaded. See all those things further and before that, I'm going to check this contact page form. It's interactive. You can see that I'm going to type my name and I'm going to type my email ID. I'm going to type something else because I don't want to mention this EML ID. I'm going to type Instructor at a or something else. S.com. After that, I'm going to add my phone number, something like this. So random number was added. It's just fake number. We all know that. Here I'm going to add the feedback. I'm just going to add my feedback like a just a thank you. Here I'm going to read. I choose one or three or five, can see that it works perfectly. Finally, I'm going to choose this option which is submit. You can see that scrollbll works when it was going out of that area. I choose this submit and it shows you, thank you for your submissions. The data was submitted, and you can see that I received the email here. I just click my email, and here I got, fluid new form submission with contact us, and it shows you the name and the email ID which I was provided, the contact number, the feedback data, and the rate. All those information I got through my email ready, which means this form really works in a proper way. That's why this form is highly appreciated when you are using with Canva contact page. 50. Save and preview the contact page: In this lesson, we are going to see the final contact page preview using Canva. Last lesson, we show you how this contact form works. It really works well. Let me show you how we are going to have the other views of those informations. To do that, I choose preview. As we did previously, I directly click this contact button. And when I click the contact button, I got all the information. In our last lesson, we checked this contact form. It really works well. And when I submitted, it shows you thank you for your submission. I come to this Google form. You can see, we have the Google map. I just scroll using control. You can see that it really works fantastic manner. I can also move it. This is also in an interactive form. This works really very well, and I come down I have my social media pages to follow up. We already know that we have added the hyperlink for all those icons using that navigation bar itself. When I click this x, it will go to the X page and when I choose this Instagram, it will jump back to that the Instagram link. We already know that previous itself. All those icons really works well. The Google map is also working very well, and the add application form is also really works well. All the functionalities are perfectly working with Canva. This is what I really need with contact page in website design. 51. Set a Color palette matching your brand: In this lesson, I'm going to show you how we can set brand colors for Canva design works. When you have the brand color, which you will have the dedicated color for your particular brand or hotel or any other thing, you can set that color and you can use anywhere we are designing the works. Let me show you the example. Now I choose this background. When I choose the background, I have option called background color. When I click this background color, you'll have these color values. And in this color values, we can see the option called brand kit. Did you see that? With the help of this, we can set a particular number of colors and we can repeat the same style wherever you do the design work for that particular brand. To do that, first, I come to this Canva. You can do that from here itself or you can do that from here also. Now, here on the home page itself, it has the option called brand. I click this brand. When I click that brand, it shows you this is for only pro users. You have 30 is free trial, but still you have to set up all those things. Now what I'm doing is I just come to this area, which is brand kid. I click this one, you can see that we can share that brand also to someone else. I just click here once. When I click there, it shows you you can add the logo. Again, this is for only the brand users, and after that, it shows you three options. So it shows you three colors. I can select the first color. I can change the color if I want. Can see that how do I change the color? Based on the brand you have chosen, you can change the color and you can utilize for your brand. Now I come to my design. Here I choose the background. You can see that this is the color value, and at the bottom of this, it has hexa resemble color value followed by hash, it shows you 23 a 43. 20 is responsible for red color and three A is responsible for green color and 43 is responsible for blue color, which is showing the hexa Dembal color value. I want to type the same value there, 23 a 43. Here I add that 23 a 43. You can see we got the same color here. If I want to choose this text color, I'm going to choose this and I want to note the color value here. F DD 091 Got it. I need another color which I was used. I'm going to use this color value. I choose this color and I choose this place. I can find my color here, DD 091. Here I want to mention FTD 091 and press in'sdy there. I choose the light color here. F B seven. This is what I'm going to do. So I got all three colors which I was used in my layout design. Generally, what we do is we set up the colors and thereafter only we do the design work. Now you can see that I just close this color value, and this is what we date, we created the colors for our design work. Now I just go back to the home page, again, I go to my brand. You can see that the color values are changed. Now I just refresh my page. After refreshing this page, I'm going to check what are all the color values we have, the brand with the color settings. I choose this background. After choosing this background, I'm going to choose this background color. I choose the background color, you can see that we got the color values which is required for our design. This is how we prefer the color values and we can use wherever we want those colors in our entire design. This is how we use that color palette of the brand kit inside Canva we designing work. 52. Various colour selections in Canva: In this lesson, I'm going to show you what are the other ways we have to select the color in Canva. In our previous lessons, I shows you how we select the text color here using this menu and how do we select the background color for the section or page. Let me show you the other things. First, I choose anyone background. I was choosing this header background. I choose a background color. And I choose a background color that first, you have the option called Document Color. These are the colors I was used in this entire document. If you want to add any color here, you can simply select and you can see that it completely shows you the document colors what I was used with this design. If you want to switch over the colors, immediately, you can do with the help of these options. This is how I choose the document colors so that I can stay inside the color selection apart from the new colors, which will completely dragging your design from the theme. Not do that, just use those document colors inside the design work. Apart from that, if you know that the particular color value you can directly type here and you can search the color value and the name to get that color. The document colors are entirely used in this design and we have the brand kit. We have seen that in our previous lesson. Choose this background. When I choose the background, I choose the background color, it shows you the more options. First one, it shows you the photos color. You can see that this section or the page has the photos. Here I was added the logo. You can see that it's a YouTube logo. This looks like a vector shape, I can change the colors. Here I choose, this is completely bitmap. You can see that it's image, I can edit it. But here it's a vector graphics here also it's vector graphics, not the bitmap. I don't have that and here also, I have a bitmap. Since I was having only one picture here, in this page, it shows me that it was that value I have the color variations I have with this picture. At the same time here also I have a picture, but this is the transparent logo, we know that green color, what I see here is the background only. It was collected the color tones from that logo also and the white. You can see that the image preview there here also. When I go to another page, I come to this third section. And here it shows you all the colors just derived from the images. You can also collect the colors from that. I just want to see all the images colors. I choose see all. If you choose C all, you can get all the images you have added with this section. You can see that all the images I have added with this section. And it shows me the remaining images of these. So this is how it shows you the color. And if you want to add some color, I just click here so you can directly add that color, which will completely set up the proper appearance and keeps that designs within that same kind of field because you have collected colors from the images, what you have inside the design. So that will perfectly match with the design. You don't need to worry about that. This option photo colors are there, you can utilize perfectly for your designs. You don't need to select the new color option, you don't need to manually add. You can directly get it from these options. After that, we have the default colors. We have two categories, the solid default colors and gradient default colors. At first, you have the solid colors. If you want to use directly, you can use it. This was like, how do we have the paint pastels or watercolor paints in a separate places. Next we have the default gradient colors. If you want to add multiple colors within the same the shape or the background, you can use that. Let me show you once. Just click here, linear gradient and you can see that I have the two color variations out there. If you want to edit that color, you can go to the t. You can see that. I have the option called Ad a new color, and when I choose the add a new color, it shows you solid and gradient. Can see that solid and gradient. When I choose the gradient, I just give undo because you have to know that change, you can see that by directly, it was moving to the gradient and you can choose what kind of gradient you need. The linear from X axis or Y axis or from the corner or radial gradient, you can choose whichever the gradient you prefer. You can add directly from this point. However, if you want to add another color with this, we already have the two colors. If you want to another point, you can click here and you got the new value. So there you can add the new color value whichever you require. You can see I was added the third value here. If you want that as a transparent one, you can adjust the Alpha value also. You can see that. I was added the Alpha value and you can change the color value here. And if you want to pick the color from the images or somewhere else from this design, I have the pick a color option. It's like Eye roper tool. You can select the color from anywhere you want. And that will be added. If you don't need this color, you can directly click this dealt color so that color will be eliminated. This is how we to have gradient colors. You can add multiple colors, we can remove the colors, you can add the style, all those things you can do using these options. The same way, if we don't need this color, just roll over that color, you can see that there is a closed button, choose this option which is dealt color. When I choose that, I can also remove that color selected. So this is how we process the colors with Canva. You can simply add new color using this add color, solid color, and you can choose any color to add within the background or text and everything. Now I just give Undo. When you did some changes by mistake or unwanted, just use Undo. Don't change manually. You may not get the accurate colors what you had used previously. So try to give undo instead of changing the colors manually. So I just give Undo. And this is the color I had at the beginning. This is how we use the colors in Canva. We have so many huge facilities for the colors with Canva website design work. 53. Add a logo and content for footer: In this lesson, I'm going to show you how we can add the footer logo and footer content for our website. I was added a separate section for that. I don't want to disturb with the backgrounds. So this is what we have for the footer section. To add the information, I go to the basic page, I copy this logo first. I need the same logo, so I just choose copy. After choosing that, I come down. Here, I just paste using paste. Now you can see that the background was entirely white. I choose the background. I want to use the same color I used at the footer sorry header. Here I have the color. I just click there. I add that color here. Here I just reduce that logo size, and here I want to add the footer contents. The reason why we have that as a separate section is we don't need to disturb the remaining sections or pages. Now I go to my content. And here I have the footer content. So I just copy that using copy option. Here, I want to add the text, so I press T or you can go to this text. Here I have the option called add a text box. Just click that and you got the text box here, but the font says it's only two. So I just increase that. You can see that it's visible now. I just click inside the text, right click and I choose paste. So you got the food content. I just zoom using control and scroll. Now I arge and place, how do I want that? Now I choose both elements and I choose position. Here I check whether it was in the middle or not. Yes. This was in a perfect middle position. After that, I select both objects. I group that, then I choose the same position and make it as a center. So the alignment was center now. You don't need to, you know, worry about the alignment. It was perfectly balanced. So this is how we add those informations for footer. It's a very simple process. Sometimes, you know, the designer and the developer added that more interactive buttons at the footer. Like, you can expand that footer area and you can add no carrier or other relevant information like download prospects or the browcher. Those information also you can add in the footer if you want. But here I don't need. I just want to add this footer information. That's why I was added that information. If you want to add any hyperlink in this, if you are preparing that design and you want to add a hyperlink for your company, which is the website design company you can add here so that the audience will click there and they will get back to your company who developed that website design. So this is how you can add footer for any website design using Canva. 54. Customize visuals to match brand: In this lesson, I'm going to show you how we can customize the color of the background and text and all things according to our brand logo values. Here, we already added the color for the brand, utilize only those colors here and the background and for that interactive text and here also. This is also we used in our design. So we have to ensure whether we used the same kind of colors throughout the design or not because that reflect, you know, in a different way. If you used some other additional different colors other than the brand value colors, that will look entirely different and odd so that um the audience or the users will directly have a look on that text. But if you use the uniform colors in all the pages like we did previously, that will not happen, the audience will read all the information with a proper priority. Now, you can look at this one. We provided the information in different font styles and we used only Canvasans throughout the design. But for the home page alone, we used another font style here to differentiate, which is FX. I didn't use anything other than that. I just used only the e, the text effects. However, if you want, you can use the other effects, what you have there. I just click there. You can see we have a lot of effects out there. If you don't want any effects, you can choose the none option. And if you want to add the shadow effect, you can choose shadow. If you want to use any other style, you can go for this effects. I already used this hollow style and I choose none so that I do not have any styles here. If you want to add any other style like this, can you can also adjust the thickness of the style stroke and the offset of that background shape, which is the text. You can set the direction here. You can also change the color of that value. All those things are there based on the need you can use if you want. Do not use unless it was required. To have outline and lift will lift that design or the text information from the background. The value is less, the intensity value. When you add more, you'll have a better visibility in that contrast background also. To have the outline here. You see that echo and glitch. You can also adjust the offsite values of glitch and neon glow. Based on the knee, you can choose whichever you want. If I want to highlight the text background alone, I can choose this background so I can set the roundness of the edge, the spread value, the transparency. All the things are out there. But anyway, here, I'm going to use only a hollow. You have two more options here you can see that shape, which has a curve and then now if I want to add the logo based text, I just duplicate this and I choose this curve so that we can adjust the curve value here, you can see that what kind of curve you require. Based on that, we can adjust the values here. If you don't need, I just choose none. These are the text ex two you have with the designs. If you want, you can use all those things. Now I come down and I make sure I was reading and I was having all those elements in a proper alignment. Look at this page, at first, my eyes will have a look on that the title only because it was bigger and having the different color, which is relevant to this theme. After that, I have the body text information. Then it's easy to get three different details I was provided as pride of offering. Here also, I was provided the feedback information with individual separate boxes and I just want to move that in front. I choose all three elements, and you can see that I was selected, the background shape, and the text to frame and that element. Now, I press hold Shiftiki and I click the background, I was deselected. I click again the Shift tiki, the text. Now I was selected only this element. I choose this menu and I choose layer and I choose bring to forward. So instead of bring to forward, I chose bring to friend. Yeah, it was already in the friend so that I can directly select and I can duplicate. I can place wherever I want that element. Previously, I need to do that, but I missed it. So now I did that work. I just duplicate and add where I want. I have to check that carefully and make sure you have used the same kind of the brand based font values in all places. It has a proper alignment, and it has proper, you know, the values, including that size of the font. I was used throughout 12. And you can see, I never went away from the color theme. And here also, I chose the section. After choosing the section, I want to change the background color. I can also collect it from my theme. If I want same colors, I can utilize it. But I use the color from my picture instead of using the brand value because it's a gallery page. I want to provide that in a different the color at the same time, that should not move away from our document colors. So after that, I was having my contact page. There also I was provided the information and here I just want to change the color because that color is already there and I want to highlight that color. I may choose like this or I can make it a little more darker, but not too much amount of dark values. I select the first frame and I choose this one color. I choose the color value little bit dark values there and I want to use the same new color. You can see this is that and I want to use the same color for this object also. Now we have the different visibility to this information. This is how I make sure I have the proper text information for all the places here also I just need only 12 text font. I don't need 13. Again, I select both objects and I group. I can use a shortcut key Control G. This is how I ensure whether I have all those information in a proper way. And here I just a little more bright so that it's easy to, you know, read that graphics. So this is how I make sure I used all the text information and, you know, the relevant kind of colors in the whole website for the brand using Canva. 55. Apply Styles from other Designs: In this lesson, I'm going to show you how we can add the styles or, you know, the background colors and the text styles from other designs to our design using Canva. Is that possible? Yes, it's possible. Let me show you that with a different example here. I choose another website we used previously in our course beginning. Now you see that these two have multiple sections with the pages on the website. Now I want to add some other style colors for this. Now I choose this background and I want to choose this background color, you can see that what are all the colors, the document colors they have with this design. Now I want to add the different document colors, which means different style that will to change all those elements. Let me show you how we can utilize that one by one. To use the other designs color inside a new document or another document, just create all the works or edit all the works. Now, after that, I come to the top of this option, which is called a design. You can see here I have option called design. When I click that design, it will show you the different templates of the designs which is available with Canva. I move my mouse to the templates, you can see that there are so many templates out there. And there is another option after the templates. You can see that which is styles. I click Styles, it shows you the very first one is the brand of yours. So when I click there, it will show it will add the brand color to this web page. Let me just click that. When I click that, you have seen that this section alone, I was selected and that color value was added. Now, after adding that to have the shuffle option, when I click that, it will shuffle the colors I was having with that particular brand. Now, I just select this homepage there I add this. You can see that all those colors are changed according to my style I have. Same way I come down. Here I have a lot of preset style values. We can add that. But here we have a difference. You can see that all those style have different appearances it was recently used. I just come down after that. I have a combinations category, which means it'll have colors as well as the typographic combination. When I click that, both things will be applied. So you can see that the typography was changed as well as the color. You want to shuffle that too, again, after applying that, you can come here and click that. I will shuffle the entire value of what you have used. The same way, I can add the colors alone here. I just want to give undo. I don't need all that style. Just imagine. I need colors alone. I click these colors palettes alone, just click there so that the color alone will be shuffle or change, not that typography. I press and do the same way, you too can add the font sets alone instead of affecting all those elements. See here, I just add anyone font set. That alone was changed. I was just, you know, keep on changing that font sets. You can also use the C A button. So there are so many, you know, categories out there you can utilize for the font and color palettes also. I can see that we have huge, palettes support. And if you feel this is good and you want to add this for all the pages what we have with this Canva, you can choose this apply to all pages. So to all pages, that color theme will be applied. That's the beauty of this style. Where you can search here, you can add your own keyword. You can get that color value. You can add that here also. There are so many categories out there, Illustrative, and you can add same combination to all the pages. See that? This is how you can utilize the styles. These styles are predefined. You too can add the styles from other templates. Let me show you how you can add it. I just press undo again and I want to keep that original template. This is the original template. Yes. After that, I come back to the templates again. If you look at those templates, most of them are free like this, this, and these are the templates having free, and this is the pro template. You can see that it shows you upgrade to Canva Pro to use this premium templates. I'm not going to use that. I'm going to use only the free templates. Here I'm going to choose this one and this one, this has the violet colors and I'm going to use that to utilize the particular template colors, the styles, I come to this menu here. After choosing that menu, it shows you the option here, which is a play text only, a play colors only, and a play elements. When I choose Alay text only, it will add, only the typography elements from that design. I click that once, you can see that the typography alone has changed. I just ando. And again, I come to this menu. I choose uplay colors only. So when I choose uplay colors only, the colors alone has applied, I can also shuffle again the colors once if I was added. There are not too many colors, so it was not happening. I just again, get back to the original colors. Yeah. Now, again, I come to this place. I have the option called the elements. So in a design, we used different elements like this and that template to have the elements on that. So if you want to add that elements, we can use this option, which is apply elements. However, if I want to add all the things from that design, I can choose this apply style to page. So when I choose apply style to page, that will be applied to the present selected page. You can see that it was added with the present selected page. And after that, I choose apply to all so that all the pages will have the same styles. So this is how you can add that style to the web pages. You can see that it was perfectly added to the all pages. And there also, you know, um, you can do all those works. Now, I come to this, you know, homepage. You can see that the text was changed and the colors are changed. This is how it works if you are going to add the styles from other websites or separate styles in a Cava website design. Can use the same style, additional process from any template. You can see here, just apply this and I just want to apply to all pages. If you want to shuffle also, you can do that when you are adding those works. Based on the need, I just give undo ones. Based on the need, you are going to design how you need to add those styles from other templates or other styles. 56. Images color adjustment based on theme: In this lesson, I'm going to show you how we can do the color adjustment for our website based on the color theme, what we use in Canva. I'm going to start with this page alone. You can see that this is a purple background, but the image looks more warm. To adjust that, to balance that colors, I go to the edit option. In Edit option, we have the adjustments. We know that I click there when I move and adjust the tint value and the temperature, I can help that image to get to the matching color for my background and theme. Let me show you how I'm going to do that. But here, do not use saturation value because that will increase only the colors, so I'm not going to use that. So here I come and other option called a temperature. Here, you can see that it looks warm. First, I want to reduce the temperature from the picture, that itself completely changes the feel of the picture and here I have tint adjustments, but here you cannot use that that was not that much useful for us. After this, I just add the brightness a little more and I come to the bottom of this. Here I can adjust a little bit saturation value and vibrance. And this is how you can change the values. However, if you want to change the picture color, you can use these options. To do that, I choose reset adjustment. I come here and I select that picture color. But you can see that it was entirely changed. That's why we didn't use. We use only the options directly from the adjustments. I don't need to change this, and I just adjust the brightness and I want to adjust the black values here. So I just the shadow, like how do I want with that. In the same way, you can adjust that, but this color was perfectly matched with my theme and these are fine. Here I can change the values of those images. You can use the adjustments. You to have another option which is filters. I come to the filters, here I have a lot of filters with a different color variations. I can directly utilize if you want. If I want the theme like this, I can directly use that same theme for all three pictures. It's not the most important thing it's the option you have, if you want, you can use it. I was just given undo. You to have other options there at the filters, you can see that there are so many things out there with that color values. If you don't need that, you can simply select these kind of the values also, and you can also adjust the intensity of those informations. So this is how we adjust the colors of the images according to our need. We don't need to have all those colors, what we have with the pictures. And here also, you can see that I need to change the color. But this picture, it was perfectly matched with the background. And here I choose the picture and after choosing the picture, yeah, I just right click there. I can see the image was placed behind. I just detached the image, select the image. Now I go to the Edit option, and in Edit option, I want to adjust the colors. I go to the Adjust option here, and in Adjust option, I have a temperature value. I can adjust that according to my need. I too want to adjust the tint value here, so I just adjust the tint value based on that. So this is how I do the adjustment. After I did the adjustment, again, I come back to the design. I right over there and I set the option called set image to the background. That image will be completely added as a background, not as a separate image. This is how we do the color adjustments for the pictures according to the color theme so that will not disturb the entire design. Now if I select this picture, and I want to recover or just reset all the color changes I was done with a picture. That time you will realize how much it's essential for that website design. You can see this, this is the original value and we change like this. This is why it's completely required to adjust all the images colors based on the theme using Canva. Here in our website also we have adjusted the images colors. You realize that we used those colors based on the theme only. That's how we use the colors in design work. 57. Create a favicon using Canva: In this lesson, I'm going to show you how we can create FAI icon using Canva. FAI icon is the website representation icon, which was widely used in all the web pages. Now, if you look at this web page, we have a website name here, which is Houston, and in front of that, you can see that we have the icon. So this icon is called favicon. It was small in size. You can see that that represents what kind of work we are doing or what kind of website that is. You see, I have another the tab which is having the Google page and there is a Google icon there, which is called a Fay icon. The same way to have a YouTube page there. That YouTube page have the title which is the website named YouTube and to have the fay icon in front of that. Every website have their own fay icon. There they provided that information which is that website or the web page belongs. Now here also we are going to create the fay icon. The five exxon mostly have the 16 into 16 pixels. Here I will show you the different dimensions. This is the minimum optimum size, which is 16 into 16 size. You can see that it was a size. But if you want to add, the better size, you can go for 32 into 32, 64 64. But 16 16 is the optimum value. We are going to create the fare icon for our own website using Canva. To do that, I create a new document with Canva. I open a page and here I'm going to choose the custom size because I want to create that manually. I choose custom size and I choose the unit into pixels instead of inches or anything else. Whenever you do the change with dimensions, first, you choose the unit first. After that, only you are going to give the dimension. That's a proper way. So here I'm going to add 32 into 32. You can see that it shows you what is the minimum pixel size, and I'm going to mention that into 64 into 64. So I can do the remaining things later because I can reduce the dimension while I export that as a fa icon. That's how I can do the work. After this, I'm going to choose the option which is create new design. Now you can see that we have to provide minimum 40 pixel for the design. That's why I was provided 64. Later, I will export with lower resolution, which is the lower dimension. Now I choose this create new design. After choosing Korean new design, you got your facon design area. So here I come to my website. I can use my logo. I just copy this logo. I come to this area, here I paste it. So when I first Control V, I got my logo here, and I choose a background color. Here I choose a background color, and I have my brand kit value here. That's why the brand kit is much important. I clicked that color for the background, it was added. Now I choose the picture and I choose the position. Here I make that middle into the alignment, and for that X axis, it was already in the center. This is how you can simply create your fay icon. At the end, I'm going to download this. To do that, I press Share button, and here I have option called Download. And after the download, I choose that PNG. If you want the transparent background, you can go for PNG, but I need that color here, so I choose the JPG document. If you feel like the particular letter alone with a symbol is required, you can just add that alone. Now I choose this JPG and it shows you the quality adjustment, and this is the present, the dimension. You can adjust that if you have that pro account. Right now I have only the normal account. Now after adding that file type, and I'm going to choose this download option. So I choose Download. It will be downloaded in my local system. So I can rename it and I can utilize that while I was uploading my website online. So this is how you can create Fay icon for your website using Canva. 58. Preview the design in Canva’s mobile and desktop modes: In this lesson, I'm going to show you how we can finally verify the mobile and desta view, and we can do those changes which is required for the website design using Canva. To do that, I'm going to choose this preview. Make sure you have done all the works with each and every page. So after completing all those tasks, I go to this page which is preview. Choose review. In previous sections also we have seen the review and how those animations are working, how the website has a look. But here we are going to check once again how the website has the appearance. In a normal view, it looks good. It doesn't have any problem with the elements. Each and every element was loading. And yeah, this is fantastic, including that logo, everything is fine. Now, I make that into full screen view. In a full screen view, you can see that here at the bottom, the photo is having with a proper appearance that doesn't have any issue. But if I go there, yes, here we have a problem. With these areas, we don't have any problem, but here that local alone have the alignment issue, we are going to fix that. In mobile view also, I'm going to have the preview. There also we have a problem with that. The buttons are fine, but I have a problem with that particular thing. You're going to sort out that in mobile view also. I just scroll and you can see the form is visible, the Google map is visible. Everything's fine out there. Here also the align mode is perfect. This is how we need at the top anyway. Let us see how we are going to do that. Now, first, I just press close button. I just want to keep all the elements in a single group, so I just select all the things and I group it first. Now I just have the preview and I'm going to have the full screen view. Yeah, it's fine now. You can see that since I was grouped, that doesn't, you know, flow away from that design, and this looks really good for the full screen view also. Now I switch over that into the mobile view. In mobile view, we got, you know, problem solved, but here we have the problem. We just have to look for that. Now, I just press close button and I'm going to choose those icons alone, I just break the groove. And for the icons alone, I want to group it, and for these text information alone, I just want to group it. And finally, I make the overall group. Now I have the preview again and I'm going to switch that into mobile view, and still we face the problem, so I have to change the positions of the objects anyway. So you can see each and every group was broken. And now I make this as a single group instead of having multiple group. I group it and I have a preview here with a mobile view also. Now that text has the issue, and again, I group this, I just break this group. Fine. Now I choose all those elements and the group that individually here also, I choose all those elements including logo, and I group that, have the preview again and I'm going to have the mobile view. This looks really good, that doesn't have any issue, but we know that buttons are very small. We'll sort out that in our upcoming areas. After that, I choose those text informations, a per Sando and I just want to group it so that this alignment will be the same in a mobile view also. Let me switch that with a mobile view. Okay, I still shows me the problem. The problem is not that one, fine. I sorted out this issue, and I just group this alone and have the preview with the mobile so here, yeah, we do have the same problem out there. I group and I choose this two alone with this. Now I have a preview here, the mobile view. Yeah, this is fine. This was sorted out that issue. But anyway, I need to show that the navigation bar in a better manner. Right now you can see that with that navigation bar, it was grouped. That's why it looks in a proper order. Upcoming lessons will correct that. 59. Adjust sections for smaller screens: In this lesson, I'm going to show you how we can arrange the sections alignment according to the content in Canva website design. In our header, we have the logo and after that, we have the navigation bar and other all icons there. If you feel like it was so tight and you can select that particular section alone, after selecting the section, you can just reduce the area of the web page. So I just select that section alone and I increase the section area. Now you can see we have more space and I can just deselect this, I can ungroup this and I arches and place where I want that logo. Even if you want more space, yes, we can add more with the help of this section. To do that, I just click that section alone and I increase section space. I can change the positions of each pattern now. So this is how you can change the positions of each buttons. You have enough space here now to represent all the buttons. So I select all the buttons now, and I move down, so it will be better to have all those with proper, the alignments at the top. Now, I just want to have a preview. I just choose the preview button, and this is how we have, which is having enough space out there. You can see that we don't have any issue with the remaining things there. So this is how we can provide the better space to manage all those elements. Just alone with that, you know, the navigation bar. In each section, if you feel like you need the particular space, you can expand or reduce according to the need. Here, you can see that I have enough space, and I don't want to adjust that. Here, I just need a little more space out there. So I choose this section. And in this section, I want to expand a little bit, and I want to choose all the elements, not just this, all the elements. I move down using my arrows. After that, I select the text and I move down with arrows. Providing this the up space is highly recommended and required to balance your design, and here also, I have enough space. But here what I do is I select the elements and I move a little bit to maintain the proper balance. After that, I come down here and I check whether it was having enough space or not. Can see that all those things have enough space. And after adjusting all those the frame sections values, I want to make sure whether the elements on the page have the proper alignment or not. To ensure that I come to this file menu. In file menu, I have the option called settings. In settings, it shows you a lot of options, and I'm going to use this option, which is called show rulers and guides. I just click. Now you can see it shows you the ruler out there. The ruler, you will get the guideline as we used in a software like Adobe photoshop and illustrator. We can get the guideline from that ruler. I just add one guideline here. You can see that that guideline was present all over all the sections. Now I just want to add the same guideline on this right hand side also. Here I add the guideline. Now it will help me to manage the elements within all the sections. I just want to add from my header, not with the second page. So okay, I adjust further now. So this is how I want to place my, you know, the elements. Now, I choose all those elements and I adjust place within that will be the better one. And after that, I come down and I make sure all those, you know, elements was arranged within that proper space. You have to know that this guideline was non printed line and not visible with final website preview. It was only available for preview and editing works. I select all these and I just add here. Instead of doing that, you to have another option. So I just cube undo using Control Z, and here I select all the elements here. And I just want to expand the area so that the space between each object will be maintained. I just expand this and here also, I just expand so that the image frame and the text frame and the shapes will get change the size, but it will not affect the aspect ratio of the images and other things. Now after that, I come to the bottom of this. I select that area based on the alignment I have managed. I too want to adjust that icon of that home page. I select that and I want to manage it. I zoom that area. Now I just select that, just come to this bottom and I arch the scroll. Now after that, I want to adjust that area. I just click and track and place where I need. I need here, I don't want anywhere else. I want to make sure I have that home buttons in all pages in a proper value. I will check that. After adjusting this facility speech, I come to the services page and here also I select the text information and I'll align according to that guideline. I choose that grade. Here I was used the grade, not the image frames. To adjust the home button. I come to this gallery page. In gallery page also, I need to adjust according to the need to do that, I want to select all the pictures I have in that proper order. I was selecting that multiple pictures using Shiftiki and I just expand I'm not going to move the picture because I have a proper space in between each and every image. I just expand the picture area a little bit. At the end, I choose the home button and I place according to the need. This is how I adjust the alignments using grade. Now, I come to the contact page, choose the elements, which I was arranged. And I move that into left hand side with the proper alignment. Here also, I choose this form and other all things and move arrange in a proper place. This is how you can arrange the elements. However, for the food, we don't need to worry about that because that was in the center alignment. This is how you can do those adjustments and changes for the design. The end, you can go to the file settings and choose this show rule and guide. So that reality shows, and it was hide now all those guidelines. Now I have the preview here. So you can see the proper way all the elements are arranged without any glitch or irregular alignments. This is how we can align all those elements using Canva. You can see that all are really good. This is how we can do, the grid and guide based alignment work using Canva. 60. Test image and text scaling: In this lesson, I'm going to show you how the text and image scale itself for the website and desktop with the mobile view. To do that, I go to the preview now. In preview, we know that this is the default view of the website. However, I just go to the home page, and here I want to expand that into full desktop mode with the wide screen. When I do that, you can see the background picture of this layout was automatically expanded up to that complete area. After that, I have the second page which is about us. In about us, I didn't add any background image. But if I add any background image, that to will expand from left to right, from top to bottom. Now, I don't have anything here. Here in a complete desktop mode and the normal desktop mode, that text readability and image scaling is really fantastic. You can see that the text is completely readable and all the icons are arranged in a proper way. The animations are working in a proper way. Now I want to go to the mobile view. I just choose mobile the mobile view, I go to the home page. There I don't have too many issues that buttons are clearly readable home about us and facilities, all those buttons. Now I come down after that, here we have little problem with readability. We look at the text, Houston, below that, we have the body content. That was the Canvas ans font style. The number size is 12. That same font I have here. But due to this background, the shape and the text size, that text was reduced to the size according to the mobile projection view, and the remaining pages having no issues with text informations because there is no any bigger, text information out there to dominate those things. Here also the grid, the images are arranged in a proper way. Here I have the issue, I need to adjust that also. I have two places to adjust. First one is the home page, the body content, and second one is I need to adjust this text information, which is having list. Other than that, I don't have any issue. Let me check how we do that changes. Here I just give grow. I choose this text alone and I just reduce this unwanted space. After that, I to reduce the font size a little bit. I don't need too much amount of font. But that should not disturb the whole design. I just have the preview now to check whether it was adjusted in a proper way. Now you can see the text is the better readable. This is why I has changed that and I group that now and let us check whether it was present in a proper way after we group that no, the text size was reduced. You can see that. Way that the group is the reason, but no problem. I just give. I don't want to group the elements. I just want to keep that hotel name a big size. I don't want to group now and this is how it has the appearance now. Since I was grouped, that element was reduced the text. Now it's fine. It's what I required the better readable text. This is fine. There is no too much of issue with that. After that, I just close this review and I want to adjust that list, I come to this list area. This list was the problem there. I select that and group it. I come to the review now with the mobile view. Mobile view, I had to go and check that how it looks now. Still, it looks the same. I want to adjust further. I just ungroup this. So this element should not exceed to this left hand side. Here I have the issue. You can see that the information was not placed in a proper value. I should touch the grid line. I just again enable the grid line view, and this text was not properly arranged. Now I hope this will be the fine I choose that text also, and I want to choose the position here. After choosing this position, I want to adjust the value. Here, I choose that top. By default, right now you can see that was in a proper alignment only. So now I just want to see the preview. I choose that preview now, the mobile view and the alignment of the unordist. Okay, still we have a problem. I try to move a little bit above. No. That's not a proper way. We know that. And I'll handle that with another way. Like I'm going to add the rectangle shape here. To do that, I press R. So I got a rectangle at the center of the section. Now I move this app and I'm going to place here with that now here, I just want to make sure that shape have zero transparency. I don't need that object here, so I just choose that object alone and I choose this transparency into zero. Now I choose the text information and I select both as a group, and so after make it as a group, again, I have a preview with mobile view. I come to that facilities or still we face the issue. I grew and I just teddi that shave Now I just refresh this page. You can see that all the changes are saved and I just I feel that, that webpage have slowed down. So I want to refresh that I come down again. This is where I need to adjust that information and it should match with this place. Now, to do that, I just select all the images, what I have below this, and I move down because I want to place this information here and before that, I expand this text information and I place this here. This is how I want to place. Here also I duplicate this. I want to keep three things here, and here I want to keep two things. This is how I placed and I group that. Now I have the preview again. In mobile view, I'm going to see that. This looks perfect and still we faced that issue. Fine. Those lists or list. That's why it looks it's fine. Now it looks better. I'm sure that's not a best out, but it looks better now to compare the previous occasions. We got all the things or scattered. Now it looks better and I try to move further to have the preview with a mobile. Okay, fine. So this is how I want to adjust all those information according to the need, and I can expand this area a little bit based on the need. So this is how we can verify the text and, you know, the images, whether all the things are placed in a proper way or that required some kind of scaling or adjustments on the edges. You can see that this black completely disturbs the image. Here also still have a black should avoid those things. So this is how we can do all those, you know, adjustments for the mobile view using Canva. 61. Reorganize navigation menus for mobile usability: In this lesson, I'm going to show you how we can reorganize the navigation bar buttons according to our need. In our previous lessons itself, I shows you how we can do that work and we just separated all those buttons. You can see this is not a group. When a group, all the elements will be merged and it will look only small size button. I don't need that I want the better readability and the better access for the button. That's why I was provided individual single buttons for all those things. After this, if you want to add the same navigation bar at the bottom of the footer, you can copy these elements. I just copy that. After copying that I come to the footer and in the footer, I just expand the area. And I move the entire element area here, and I want to paste here. I just press Control V. So all those informations are placed here. Now, I just want to make sure I was provided that in middle of the design, and I don't need this much amount of font size. I just need ten. Previously it was 12 now it was ten only. Want to change all the text color into white, the button color into white, not that gray value. So now you have the menu here, the navigation bar here at the bottom of the footer. From here, also, you can access all those pages because those informations are already having the hyperlinks to access those information. So if you don't have the proper arrangement, here you can arrange all the things. Finally, you can do that. And here I just ungroup it and I have a preview with the mobile view here and you see how it was arranged and it was scattered. We don't need this condition. That's why we group that with this. I just come down to ensure how it has a look and here also we have the issue. I just come to the bottom, I want to group it. I select all the elements and I group it here also, I just want to group. Before that, I just reduce the space between the elements. And now I group this. Let us see with the preview those navigation bars with a mobile view. Here we sorted out the issue. I come here at the bottom, we group and now it's fine. I don't have any issue with this. This is how we can sort it out the problem what we have with navigation bar arrangements in Canva. 62. Test clickable elements on a mobile view: In this lesson, I'm going to show you how it's simple as well as how it is accessible that mobile view buttons, whether it was working properly or not. To do that, I come to this preview, and after that, immediately, I switch that into mobile view. Here I come to this home. When I come to this home, you can see that when I come over the button, it works perfectly without any problem. And when I click the gallery, it automatically moves the gallery page. Scroll down and click that button which is home. So it was perfectly moving again. I choose a gallery and from wherever I click that button, it simply move and come to that page. You can see that how beautifully that works and I choose contact to load the contact page. And from here also, I can come to this home page if it requires. So it works perfectly with this Canva website in the Canva design box. 63. Optimize loading speed with compressed visuals: In this lesson, I'm going to show you how we can add the optimized content for the video and images. In websites, most of the time, the file size will get increased or the website size will get increased because of images and videos. So how do you can reduce the image size and the video size, according to the website need? Let me show you here. To do that, I come to my uploads. In uploads, I see my folders. You can see that I have a folders. I just want to add only one picture right now on screen, so I come to this house and here I just click this button along. When I add this picture, this picture was loaded and if you look at the picture, the picture quality is really high. Which is more than what I expect or I need with my website design. If you want to reduce the website design, you have two ways to reduce the image size. First one is when you are downloading the images from the websites, you have the download button here and before you click the download button, let me show you one more thing. I just rattle over the picture and I open in a new tab and there you'll have the picture with the different dimensions. Come to this area, which is free download with arrows. I click the arrows. This is the original image dimension with 6,400, sorry, 4,000 pixels in width and height. But if you want the minimum size, we can download this small or medium size, which is highly enough for the website purpose. However, if you are creating a print designs, you can go for this large size design. Otherwise, if you want to create a website, this medium is highly enough because in our website, you can see that apart from the homepage image, we have used all images in a small size. When you have the picture size with less amount of dimension, it's easy to load the website on mobile devices as well as desktop without waiting for that Internet. So there is too much of Internet not required to load the lightweight elements. So when you do the download the pictures that time itself, you should download the lower resolution images, which means the optimum value for the website designs with anything. Or if you already downloaded the high resolution images, if you want to resize means there are so many, you know, the free image resizes are out there. For example, this is image resizerO online free platform. You can just drag and drop the image and you can choose the source and you can just reduce the image size. So you can see that the maximum file sizes ten and B same way, so many websites offering the image resizing works based on the need you can utilize which option you need, whether you are going to download the Royal resolution, or you have the higher resolution at the same time, you can resize the image. After that, only, you need to upload inside the Canva. Don't upload all the images with higher resolution. The elected images first category wise, then resize it, finally, just upload it. That's how you can optimize the website for website and mobile view. Now, in terms of video, I add the elements inside the website. After adding that, I come to this file menu. In file menu, I have option called settings. In settings, I have video playback quality. So I come to this place. By default, it was Auto. So based on the Internet connection, it will select low, medium or high. But if you want to intentionally add a high, you can choose high or if you want to intentionally add medium, you can choose medium. Based on the need, you can choose which one you want. By default, it will be Auto, which is better because based on the Internet connection, they will get the quality. So this is how you can optimize the image and videos for your website with Canva design. 64. Save and preview the responsive design: After replace lower resolution elements like images and videos, which is optimum size, you must go for the final preview because you can see that images will load fast as it can, and the videos will play without any lag because you optimize it in the same way you can add those images and other all elements, the optimized manner for further works. Remember, whenever you do the website work, you always need optimized images, optimized those video files, and when you do add the high resolution, that can be the backroad which is spread all over the page from left to right. Otherwise, you don't need that much bigger file size. You can see that this first homepage image will have throughout the spread appearance when I have that with the full screen view. You're going to use in that way, you can go for the higher resolution images. That also the maximum dimension will be four K. Other than four K, we will not have any television display and right now, which is four k is optimum. You don't need to go for more than four k for those images for remaining images like this, you can just create the placeholders first and based on the dimension, you can just add the images inside. This is how you need to have those things. Then only in preview, you have the elements will load in a fast manner. You can see that all the elements are getting loaded in a fast manner based on that only. And just close the preview and I just make the preview again and immediately I switch over the mobile view. Let us see how the elements loading with animations. All are really fine. It was loading in a proper manner. This is how you need to verify whether it was working in a proper manner or not with optimized content. 65. Finalize all design elements and review each page: In this section, we are going to see how we are going to publish our website using Canva. We completed all the works. We just do the final review of the elements from the header, the header, everything is fine in home page, all are fine here, and I come to the A us page and I come to this services, not the services, facilities you have with the portal. So just verify whether you have all those elements in a proper way as you required or not. So make sure each and every page, verify the text, images, alignment, all those things. So everything is fine here. When everything is fine, you can now go for the web publishing process. 66. Use Canva’s publishing options: After finalize the content, we are going to publish a website. To publish that, we are going to use this option, published website. Previously we used this preview to have the working functions of desktop as well as mobile view. Now we are going to choose this published website. After the published website, we have another option which is share. You should not use that because if you want to share this design with someone else in the form of design, not the final object, you can utilize this. That's why you have this option which is share design. No, I didn't share this design with anyone. It shows you the option download website and the public view link available there, but right now we are not going to use it. We are not going to share with anyone else. Simply we are going to publish the website. To do that, we need to choose this option, published website. After choosing that published website, we are going to do the remaining works here only. 67. Choose a domain or use Canva’s free hosting: After choosing this published option, it shows you the review of the website in the form of desktop or laptop, and it shows you the mobile view. However, you can click here and you can see the expand view of that review. Clot this again and go to the published website option again. So here itself also, you have that view. And after that, it shows you the processing elements or the website contains. So all those elements we uploaded. In between that, you have the option called site address URL. So here I choose this edit option. Here you can mention what kind of domain name you required. So I was just added the file name. That file name was added here. And if you want to change that into Houston hostel or resort, you can add further here. And if you want to get the new domain, you can click here to get new domain. So for that, of course, you need to upgrade so that you can create your custom domain without this third party name. Here you see that I choose the published website. It shows additional third party name here. You can see that cbfs dot dot cava dot side. This will be there when it was a free website. We don't need any paid website now. If you want, you can go for this, get a domain option. Otherwise, you can change the name for free also Houston hoster. And I just verify whether it was available or not. You can see that it's available. So you can change the name which is completely okay with that. That's not an issue. But if you want your own domain name, you had to go get a new domain, and you need to convert your normal account into Pro account and you can register separate domain for paid, and you can pay the amount. You can climb that name without this cbfctmtva dot side, which is the third party name. So that's how we can select your URL for website using Canva. 68. Add Favicon and Title for website Tabs: After choosing my domain name for third party website, I had to go for the settings. Before publish the website, you can do few more settings out there, which is highly required. I choose settings here. When I choose settings, it shows you search engine visibility. If you want the search engine visibility to your website, you can enable this. I just enable that otherwise the search engines like Google or any other search engine cannot find my website. So it's important to choose that search engine visibility. If you want to add part of production for the website, you can enable that. If it is a commercial website, you don't need to add it. If you need navigation menu manually, not manually automatically, you can enable that. But you can enable that when you have multiple pages instead of sections. But here I used multiple sections. I added my customized the buttons. By default, if you enable this navigation menu, the navigation menu will be there, but you cannot customize it. Try to avoid that and have the manually created one and Rs on mobile, yes, I required that. This was a default value. It was enabled and social media link preview, yes, it's required. So you can enable that if you want. Otherwise, also, it will be available. But if you want the social media link review, we just enable that. This is how you do all those fun shines. And if you want to mention about the website, 150 characters or 160 characters, you can mention here this is also the optional one. And when I click this place, it clearly shows you why you need this shows that this will usually appear under the title of URL. So if you want to add, you can also add those general information there. And here you can see that it shows you the title and fay icon. So when you open the browser here, it shows you the title and fay icon here. You can also mention what should be there here. I'm just going to type Houston Hotel and Resorts. Okay. And I can also change the fav icon here. We already know we created the fav icon before that. We are going to upload it here. I choose this place which is clicked to change the website favicon. When I choose that here, the default favicon is Canvas one and I'm going to click this place. Clearly, it shows you the recommended size of the favor icon is 280 into 280 pixels, but we created only for 64 pixels, I'm going to recreate that one. I go to my home page. I just click my command key. I have a content here, here I have a five icon. I just want to open in a new tab and that fav icon have 64 pixels dimension. However, if you have the Pro account, you can directly go for resize option. There you can resize the dimension without any worries. Here you can see that we have different dimensions here. But now here I want to create a new document. I go to the file and create a new design. Here I want to mention that dimension should be in the pixels only and I choose the custom size. I choose the pixel and I mentioned the size it requires 28280 pixels. Here I'm going to mention 28280 pixels. This is what I need. I just choose Create and I just want to copy that logo from this, or I can add from my design also. I just close this five icon and I want to rename this with the favicon name. So I mentioned 280 into 280 px. I just want to mention the name of the file. And here I choose my upload, and I'm going to choose my folder. In folder, I was having the image. At first, I had a logo. I add the transparent logo here, and after that, I choose the background, choose the background color. I choose my brand color value. Here I choose the picture and expand in a corner. You can see how I expand in a corner. This is how I rescale that dimension. Now I choose Download option, which means the share and download. Here I want to choose that JP because I need a background color and I just choose Download option. It will be downloaded in my download folder. I have to choose that and I need to add inside this website, the fair icon. I just copy that and paste inside my folder. After copy and pasted inside my website folder, I just click this plus Mark and I choose that Fay icon, and I choose open. That picture will be uploader inside this and finally, I choose the option done. This is how you can set your own that fay icon and the name at the top of this tab and you can describe the detailed information after showing that tab everything you can add inside the Canva using this website. 69. Publish the website: After set all the information, including Fawka and other all settings, I choose this option, continue to publish. I just click that and I choose this option publish. So it was getting the process. It shows you that the preloader, which is preparing your design and it was published. You can see that it shows you the link of that particular website you have created. When you click this button view website, it automatically load that information on new website page. However, it review that website here also for you for your reference. I just click this view website. You can see the website URL here. This is how it generates the website design using Canva. 70. Test the website on various devices: After publishing the website, make sure it was working in a proper way or not. Can see this is a complete final output of the website. It's not a preview. It's output. Again, I just press entered load. I want to make sure all those layout elements are loading properly or not. Just presenter, and you can see that elements are getting loaded with animations including that picture moment at the background. Now I scroll down and I was getting all those moments. You can see that images are getting loaded including the form details and the Google map facilities. So all are really working without any delay. So this is how we submit or upload the website. Now I just separate that with a separate, Window. Now you see, I just want to reduce the Window dimension. I just reduce the Window dimension. And based on my adjustment, you can see this layout was adjusting itself. Now this is the structure, you can see that it arranges the elements according to my adjustments and if I want to expand, I expand it. If I reduce more, just see that how I adjusted and I want to adjust more, I just reduce the waive. As I told you, it's a responsive layout. I adjust itself according to our need. You can see that. I just adjust the window. This is how we can create the website which is responsive and perfectly work without delay using Canva. 71. Edit and Republish: In this lesson, I'm going to show you how we can do re editing work for the published website and how to do republishing work. This is the completely published website. You can see that. After we published, that website will have this information always if it was published, it shows you that if you continue editing this design, you need to publish it again, update your website because those changes are required to be updated. That's why it was showing the information like that. So you cannot directly edit here, you can see that. And if you want to edit, you have to choose this button, Edit design. I just click here, Edit design. Now you can see that those elements we can edit. And if you think here I was not yet added any hyperlink and I just imagine I was adding some dummy link here. And I just want to add the link with the design itself or I just add the link with that index or that Section one, which is navigation bar. I just added it and you can see that this underline was added. I just removed that using this underline option. So after this and if you did any other changes or update, for example, here I was added only the dummy text. And if you added some real text and you are going to add more sections or pages, finally, you are going to again update it to update the existing changes, you need to again visit published website. And this time also, you'll get the chance to review everything. But here at the bottom we have the option called republished. So right now, it shows you the live view, what you have the so I choose this republish again, and the updates or changes what you have done with the website will get updated, and you can choose this option, which is website view. Let us check whether it was updated or not. So I come to this. Here you can see that we got the link here. And this is how we make sure whether it was updated or not. So all those links are working without any problem, you can see that. I just want to click that home icon again because I want to go to the home page and it perfectly loads. So this is how it works with all the pages. We do have this kind of footer. If you want to add any hyperlink with that footer text or the logo, you can add that inside the Canva. This is how we create the complete website without coding and Canva and you don't need any proper, the website knowledge to study this course, and this is how we have the final output in live manner.