Canva Website Design Essentials

1. Welcome to this Canva Website Design Class: Hi there and welcome to this class where you'll learn how to design a website in Canva. In this class, I'll guide you through the basic elements of building a simple website, and we'll also explore different designs by analyzing other websites for inspiration. I'll show you how to connect your website to your own custom domain name, giving it a professional touch. This class is perfect for anyone who wants to create a simple website in Canva, whether it's for a portfolio or personal brand. If you're looking to build a complex, highly technical website, Canva may not be the best choice for you. But if you want to design a website that's fast, easy, and free, with a stylist layout, then this class is for you. So join me in this class, and let's get started on creating your website today. 2. Benefits of Having a Website: Hi there, and welcome to this section where you discover the benefits of having a website. Okay, so let's get started. Firstly, a website makes your brand appear more professional and trustworthy. A website provides professionalism and credibility with a user friendly design, consistent branding, SSL security, clear messaging, testimonials, and accessible contact info, while attention to detail shows reliability and commitment to quality. Let's look at the second point, showcasing projects as portfolios. Many individuals showcase their work as online portfolios, which is invaluable when applying for roles like graphic designer. Okay, so now let's have a look at a portfolio website example. So you can see here, I've created this website. I'll just quickly go over now to different pages. So the first page here has a name of the person and the links to their work and a link to contact them. Next, we have some information about why they could be hired and a photograph. For your portfolio, I believe it's important to have a professional looking photograph. Then we have an at me section, which has more information about the person's skills and knowledge. I've also added an image here, which is relevant to the role of a graphic designer. Then we have a page that showcases their different creative work. These can all be links as well that can link to other pages that displays the work in more detail. Then going down, we have a page about work experience. So if you do want to create a portfolio website, it is important to display previous work experience. If you have any images from previous workplaces, you can put these here as well. And then we have a page about services. So this talks about the different skills and services that you can provide. Then we have a page about skills. So you can see here we have these icons about different software, which make the design a bit more interesting. If it was just text, it may not look as fun and creative as having the icons here. And then we have a hobbies and interests section. This adds a bit of personality to the website and can make the person look friendly and approachable. And then we have a quote. I thought this would just make the website look a bit more interesting and also makes the person look professional and hardworking with this quote. Then at the bottom, we have the contact section. So here they can click on contact, and this will go to an email form, and we also have the phone number, website, email, and address. I've also added these icons here to make the design a bit more interesting. And at the bottom here I've added some social media icons that can link to their social media accounts. So if your portfolio website, it's important to add your creativity into your website, design it how you want it and add your own flavor and style. The third one, helping you collect customer emails. A website helps with online business by collecting customer emails to send promotions and increase product sales. The fourth point, ecommerce websites help with online payments. An ecommerce website facilitates online payments, allowing clients to purchase products anytime, anywhere. For example, offering multiple payment options such as cash on delivery, credit and debit cards and digital wallets. Another benefit of having a website, avoid high cost of shop rentals. Avoid costly shop rentals by showcasing and selling products on your website, saving money efficiently. Additionally, a website reduces the need for extra staff, allows you to manage tasks on your own, reducing the need for additional staff, and saving unemployment costs. Next, websites can link to other platforms. The website can link to other platforms or websites, including social media platforms such as Facebook, Instagram, X, YouTube, and services like Google Maps. For example, this photo shows the photo of a website containing all contact information. The next benefit, get paid in full with your own ecommerce website. With your own ecommerce website, you keep the full price of the sales, like on third party platforms where you must share a percentage of your earnings. For example, the image on the left is from a coffee website showcasing its own platform, or the image on the right displays Amazon seller fees, including referral fees, closing fees, and refund administration fees. Okay, so that's the end of this video where we've looked at the benefits of having a website. Hope you found this video useful. Thanks for watching, and I'll see in the next one. 3. Important Things to Know for Designing a Good Website: Okay, so now let's have a look at important things to know for designing a good website. First of all, I recommend understanding UX and UI, UX, which stands for user experience, refers to the user experience created when interacting with a product or website, focusing on ease of use, satisfaction and accessibility. UI, which stands for user interface, refers to the design and interactive elements such as buttons, colors, and layouts that make the interface visually appealing and easy to use. The combined efforts of UI and UX, create a smooth and engaging user experience. An important aspect of designing a good website is that it should be responsive. Customers now prefer real time information due to shifts in behavior. For example, consider devices like smartphones and tablets. A good website should enhance the user experience by displaying properly sized content across all devices. The second point, design the website to be clean and easy to understand. Avoid using too many colors and stick to a consistent tone throughout the website. Choose colors that reflect the essence of your business. For example, if your business is a plant shop and green is your brand color, make sure the website incorporates green. For example, this website here, dis uses dark green, light green, dark gray, white, and cream. These colors complement each other well and emphasize the business's focus on plants by incorporating green tones. Okay, so let's have a look at this website, which is patch plants.com. So you can see here this website uses this green color at the top. We also have this white and cream color, and we also have the company's logo up here in the top left. Going down, we can see there's many images of the different plants offered on this website. And you can also see that there's this arrow button here, which has the same green color. Going down, there's more photos of plants. And again, the buttons have the same green color. Then going down, we can see these buttons here have the dark gray color. And then at the bottom, we have this hotter. This photo uses the dark gray color. There's also this green signup bottom. Then there's a section over here that has links to different parts of the website that uses this white color here, so it stands out on the dark gray background. Then we have the social media links down here. Let's look at the next example. This is twinings.code.uk. This brand aims to convey luxury, which is white, uses gold, and it's branding. The website features white and cream tones with gold accents on the buttons. Let's look at the next example, which is walkers shortbread.com. The brand aims to showcase the traditional style of Scotland, which is why it uses black and red to evoke the iconic kilt. You can see here that this button also uses a dark yellow color. Then going down, you can see more of this tartan design, which uses black and red colours, which is a very traditional Scottish pattern. And we can see the same pattern here on these buttons. Then going down, we can see more of these shortbred images. Then going down, you can see we have this collection of photographs. This makes the brand seem very old and traditional. Then we have this image here, which incorporates a shortbred. At the very bottom of the website, we also have this tartan design. Okay, let's now continue. Use fonts that are easy to read. For example, if your website is for older customers, make sure the font size is not too small. The font for product names on the website should be bold to catch attention. Remember to check how your fonts appear on desktop, phone and tablet views to ensure they display correctly. Use icons to make the website more engaging as they are more appealing than only using text. For example, use a house icon to navigate to the homepage, a phone icon to display phone number information, an envelope icon to represent email information, and a pin icon to indicate location or address details. Next, use high quality photos on the website, ensuring the file sizes are not too large. Also, be mindful of copyright issues. For example, the background photo on the left is a high quality image, and the photograph on the right is also a high quality image, making the website appear more professional and trustworthy. Each topic should include all relevant information and categories, making it easy to find what you're looking for. For example, the photo on the left is from the Sony website, which has categories such as headphones, cameras, lenses, TVs, sound bars, and mobile phones. When you click on Lenses, it displays a page like the image on the right, showcasing all available lenses. Additionally, there's a side bar on the left that allows users to explore more options. This design help keeps the website clean and user friendly. Next, are the key elements to know before creating a website. Knowing the key elements of a website is essential for ensuring it's user friendly, functional, and consistent. This improves navigation, enhances the user experience, and ensures accessibility, contributing to the site's overall success. Creating a website on Canva is simple, but it lacks advanced functions like payment processing or drop down menus that are linked to other pages. Okay, so that's the end of this video. We've looked at important things to know for designing a good website. Next, we'll look at the key elements of a website you should know, which we'll cover in the next video. Thanks for watching, and I'll see you there. 4. Key Elements of a Website You Should Know: Okay, now let's look at the key elements of a website. You should know. So let's get started. Let's now discuss the essential website design components, starting with the header. The header is typically located at the top of a webpage and contains essential elements such as your logo, branding, login or sign up buttons, search bar, and sometimes navigation links. For example, here are three different designs. In the first example, we have a logo followed by buttons for the homepage, about us, blog and gallery, along with a search bar. The second example is very similar, but uses icon buttons, which can make the design more visually appealing. For instance, a human icon is used for locking in, a shopping cart icon represents a cart, and a magnifying glass icon is used for search. In the third example, there are three lines on the right, indicating the mobile view of a responsive website. This design accommodates the limited screen space of a phone, ensuring a user friendly layout. Next, let's have a look at the navigation bar. A navigation bar or Navbar is a menu on the website that helps users easily access different sections or pages through buttons or links. For example, the image on the left shows a phone view of a Navbar designed for mobile devices, while the image on the right displays a Navbar as it appears on a desktop. This image is from the clove and store ***.com. Here we see a subcategory indicator for the Navbar. This feature makes it easy for users to see where they are on the site and navigate back to broader sections if needed. Enhance the user experience by reducing confusion and simplifying navigation. For example, in this case, we clicked on Home, then selected the women category, followed by face and beauty, and then finally makeup. The subcategory indicator displays the path you've taken through the website's categories. Next, we have FUTA. A FUTA is located at the bottom of a webpage and provides links and additional information such as contact details, important links, social media accounts, newsletter subscriptions, and copyright notices. Let's look at these examples. For the first example, we have the Pizza Company website FUTA. He can see their contact information, including links to Facebook line and their phone number. It also features downloadable links for their app, the copyright notice, and details of the digital payment methods they accept such as Visa, mastercard, and credit cards. The second example is for the footer for SF cinema. He can see links to their social media pages, including Facebook, Twitter, or X, Instagram, YouTube, and line, as well as their phone number. It also includes DBD registered, indicating that the business is officially registered with the Department of Business Development. Additionally, the footer contains copyright notice. You can also spot logos from SFW, SFX, and SFC, which represent the different types of cinemas the company offers. At the bottom, there are clickable links that lead to various pages of the website. The third example is the central website. Here you can find social media links, including Facebook, Twitter, or X, Instagram, YouTube, and line. There's also an email capture box where you can enter your email to subscribe the latest deals and trends. As with the other examples, there are clickable links that direct you to other pages of the website. Additionally, the Futter includes the copyright notice, the company's address, phone number, and email. There are also downloadable links that take you to the Apple App store and Google Play Store. We can download their app. Next, we have the dropdown menu. A dropdown menu is a type of menu that reveals additional options when clicked or hovered over. It helps to keep the website tidy by hiding unnecessary choices until they're needed. Next, we have the side bar. A side bar is a vertical section of a website, typically positioned to the left or right. That doesn't take up space in the main content area. It may contain additional information or navigation links. The different types of sidebars include static sidebar, thick sidebar, collapsible side bar, and sliding sidebar. The static side bar is a tab that remains fixed on the left or right hand side. As the user scrolls up or down, the tab moves along with the content. The fixed sidebar is a tab that stays in a fixed position, even when the user scrolls up or down. The tab remains stationary and does not move. Collapsb sidebar is a tab that appears on the left or right hand side and can expand or collapse when clicked. This feature helps keep the website clean and organized. The sliding side bar is a tab that appears when you hov your mouse over or click on it. This feature helps keep the website neat and organized. Let's look at these examples. The first side bar is commonly used on shopping websites, as it helps users search for the items easily through categories. For example, when you click on Eyes, it expands to show related I makeup items such as eyeliner, mascara, and eyeshadow. This type of tab is called a collapsible sidebar. On some websites, when you click on one category, but others will collapse automatically. However, on other websites, the categories remain open and do not collapse when you select another. The second image is from Google Drive. This side bar appears on the left hand side of the website and is a fixed sidebar, meaning it stays in the same location even when you scroll down. When you click on My Drive, it expands to show more folders. If those folders contain subfolders, the side bar will display additional layers as needed. It is also a collapsible sidebar, but unlike the other example, it does not collapse the previous section when you click on multiple items. The last image is also from Google Drive, but this time, the side bar is on the right hand side. Initially, the side bar displays only icons. When you hover over an icon, the text appears, and selecting it reveals more information. Additionally, this side bar includes a hidden side panel at the bottom right, known as a sliding sidebar. Next, let's take a look at buttons. Buttons are interactive elements that users can click or tap to perform specific tasks. They're essential for actions such as form submission, navigation, and other functions. This image shows examples of different types of buttons, including those with varying colors or just text, all which are clickable and direct you to a link. Next, we have accordions. Accordions are UI elements that control content displayed on a website by hiding and revealing different sections. They're useful for organizing large sets of related information such as manuals or FAQs. Typically, only one section can be expanded at a time with the previously expanded section collapsing when a new one is opened. Next, we have an input box. An input box is a single line text field that allows users to enter text. It is commonly used in forms for input and information such as names, email addresses, and search terms. Then we have text area. A text area is a multi line input field that allows users to enter longer texts such as notes, comments or detailed information. It's commonly used in forms where more extensive input is required. Next, we have Custom Select. Custom Select is an input box with a drop down menu that offers additional features like searchable options and multi select capabilities. It is style to match the overall design of the website. Then there's chatbox. A chatbox is a small square box that users can click to select or deselect an option on a form or webpage. It allows multiple selections with a chat mark appearing when an option is chosen. Next is radios. Radio buttons are small circular buttons that allow users to select one option from a list on a form or webpage. Only one radio button can be selected per group at a time. Then there's switches. Switches are toggle buttons on websites and applications that function like light switches, allowing users to turn features on or off. They are commonly used for settings or preferences and provide a clear visual indication of the current status. Then there's custom file input. A custom file input is a styled file upload field that allows users to select files from their device. The first image shows different styles of custom file inputs. When you click Choose File, a Window appears allowing you to select a file from your device as displayed in the image on the right. Next, let's talk about validation. Validation is the process of ensuring user input meets the required specifications. It involves checking for proper formats, mandatory fields, and acceptable values, all of which contribute to data security and quality. The next one is indicators. Indicators allow users to navigate directly to a specific slide. This example is an image from the DJI website, which uses indicators to make the website design more engaging. Next is modal components. A model is a pop up window or dialog box that appears above a website's main content. It often dims the background to focus attention on the modal, requiring user interaction to proceed. There are three main sections in the modal. Modal Title, the section that contains the heading or title. Modal text body, the section that displays the main content such as texts, forms and images. Modal Futter the section for actions like the save or Counsel buttons. For example, you can have the modal title as delete file with the mood or body text saying, Are you sure you want to delete this file? The modal Futter would contain two buttons, the first labeled yes, and the second labeled no. Next, we have an album. An album is a collection of pictures or photos displayed together, often in an organized and visually appealing way. Users can browse related photo collections such as images from events, product showcases, and memories. Next is pagination. Pagination is a method of organizing content across multiple pages in a web design. It helps users navigate more easily and improves website performance. Next is alert. An alert is a message box that appears on a website to draw the user's attention to important information, warnings or confirmations. Alerts can be used for various purposes such as success messages, error notifications or important updates. Let's take a look at these examples. The first image shows an alert that appears when a password entered doesn't meet the required criteria. The alert message says, Please enter a password with at least eight characters, including both uppercase and lowercase letters. The second alert example appears when the registration is complete, using a green color to indicate the process was successful. Third alert example says, please confirm your email address. This alert users are to convey a sense of urgency, making sure you don't forget. Also, a good website should load quickly and respond fast. A fast responding website is essential for retaining users, improving search rankings, boosting conversions, and ensuring a positive experience across all devices. This enhances user satisfaction and contributes to the growth and success of your online presence. Okay, so that's end of this video. We've looked at the key elements of a website you should know. So I hope you found this video helpful, and I'll see in the next one. 5. Let's Create a Homepage in Canva: Okay, in this lesson, we will explore how to create website using Canva. There are many ways to create a website. For instance, a more advanced approach involves coding the website yourself. You can also use paid website Builders, which offer a wide range of features. There are also free options like Google Sites or Canva, which allow you to design the website without any cost. Keep in mind that designing a website with Canva is relatively basic and offers limited functionality. However, it's an excellent starting point for beginners. Now let's dive in and build an example website for media made fun. Okay, let's get started. Okay, so now I'm going to do a demonstration to show you how to create a website. For this example, I'm going to create this media made fun website. Let's just have a quick look at this now. So once we've created our design, we can go over and press this preview button here to preview our website. I also want to view this on the mobile, but I'm just going to uncheck resize on mobile, so we have the same design layout as we do on desktop. Okay, let's now have a look at the desktop view again, and we can scroll down to view the different pages. Okay, so this is what we're going to design in the next few videos. I've also added links to the website as well. For example, if I click on this link here that says, go to our YouTube channel, I will link to the media made fun YouTube channel. Okay, so let's create this website now. So in Canva under templates, I've typed in website template. So you can see here we have many different website templates. If you hover over some of these templates, we can scroll over on our mouse or trackpad to view the different pages. Okay, I quite like the design of this one, so let's click on this and we can scroll down to view the different pages. Let's click on Customize This template, and this will open up this template in a new tab. We can scroll down to view the different pages, and of course, we can customize the different elements in this design if we wish. Okay, so here's another template that I found previously. I think this could work for our website as well. I like the layout of the pictures for this design. And here's another one as well. For this, I like the layout and the colors as well. So I do recommend going through many of these different templates, which will help inspire you get ideas for making your own website. Let's have a look at this template here. This one's actually different. But this, we can click down here to view the different pages rather than scrolling. Let's now click on customize This template. When we open up this template, we don't have the preview button. We just have the Share button. So this might not be the most convenient, but we can still use it to gather some design ideas. Let's go to this template here and you can see we do have the preview button. The preview button can be very useful, so you can see what your website will look like. For example, let's click this and let's scroll down to view the website. Okay, let's just have a quick look at a few more templates. One thing I recommend doing is having all the texts for your website in a document. So this could be a Word document or a Google Doc, for example. So here I have a Google Doc that contains all the texts that I want to add to the website. Okay, so let's start building the website. Let's start by copying over this title. So I'm going to use this website design, and let's paste this in here. Let's just resize this. And now let's add the subtitle. So I'm going to copy and paste this into the textbox below. I also want to have a button with text, but right now, this is grouped, so we need to ungroup this to adjust this text and box. Okay, now let's drag this text above the box. And now let's copy and paste the text over from my Google Doc. Later on, I will make this a clickable button. Okay, let's just change the color for this. I want to use more of a yellow color. So let's try this one. It's quite hard to view the text here, so let's change the color of the text to black. Now you can easily read this. Okay, now I want to add a line. So in the elements and shape, let's choose a line. Now let's click on the line Style button up here, and I want to make the line a bit thinner, so I'm going to decrease the line weight. Now let's drag this down so it underlines the subtitle. Let's just resize this and put this in the center. And let's now make the subtitle text a bit larger. Okay, let's just resize the line. And I'm going to increase the line weight now as we have made the subtitle text bigger. Let's just increase the text for this button as we have a bit more space, and let's just resize and adjust the main title. Okay, let's actually change the image now. So let's delete this image we have here by clicking on it and pressing Delete. Now I'm going to add my own image. So let's click on uploads and click on Upload and image or video. I have all the images I want to use for this website, on the folder on my desktop. So let's locate this now, and this is the image I want to use for the homepage background. So let's select this and add this. Okay, let's just resize this so it fills the page. Now let's change the layer as I want to have this behind the text and the bottom. So let's right click on the image and go to layer, and then go to center back. Now we can see the button shape. Okay, I'm just going to move this line up slightly, and let's click and drag over the text line or button, and let's drag this down. The reason for this is because I want to add the medium made fun logo above here. So let's click on uploads and upload an image or video. Now on the folder on my desktop, I'm going to add the medium made fun logo. Okay, let's click to add this. And I want to remove the background. The background remover tool is only available on Canva premium. So if you are using a free version of Canva, you won't be able to use this. But in this course, I do show you a free alternative to this in case you're not using Canva premium. Okay, so now remove the background. Let's resize and reposition this. I actually want to add a shape behind this logo, so the logo stands out a bit more. Let's click on elements and under shapes. I'm going to choose a circle. Let's reposition this and let's change the color. I want to use the same yellow color I have for the view course button. Okay, let's just resize this and let's right click on this and go to layer, and then click on Send backward as I want to have this behind the logo. Let's now reposition this. And you notice we can't see the yellow color from the logo so well, as it is very similar to the yellow color of the circle. So let's actually choose a darker yellow color so we can see the yellow from the logo a bit easier. So under solid colors, let's select this darker yellow color. To keep things consistent, let's use the same color for the view course button as well. However, I'm not too happy with this exact color. So let's actually click on this add a new color button, so I can customize the color a bit more. Okay, let's just change this yellow color. And let's have it around here. And you can see we have the color code here. This new color should appear in the document colors area, but if it doesn't, you can always copy and paste this color code. Okay, so let's use the same color for this circle. Okay, now I want to adjust the brightness and contrast for this background image. So let's click on this image and then click on Edit. And now click on adjust. So here we can adjust the brightness and the contrast. So let's make this a bit darker, so let's decrease the brightness, and let's try it with more contrast. Adjusting this image allows the text to stand out, but let's now add some effects to the text, so it stands out more and looks a bit more interesting. So let's click on the text and then click on effects. And now let's click on the shadow style. Let's change the shadow to black. And for this, let's adjust the offset and direction. And let's increase the transparency to 100 so we can see this clearer. Okay, so now our homepage is complete. So in this video, we've looked at website templates, and we've built our homepage. The next video, we continue building this website. So thanks for watching, and I'll see you there. 6. Design the Next Page of the Website: Okay, so let's now continue building this website. So previously, we added the homepage, and now we're going to add another page. On the template we're using, we have this page here. I obviously don't want to use this image, so let's delete this. For this, I just want to have a small area with some text, so let's actually resize this page. Let's now resize this textbox and reposition this. Let's make this even smaller, so let's drag it from the bottom, and let's now go back to our documents and copy and paste the next title. One thing to mention, I do recommend naming your design just to keep things organized. So let's click up here to rename this. Okay, let's just resize this textbox again. And let's actually unbold this and make this histaic so it stands out and looks a bit more interesting. Let's make this a bit smaller, and let's actually change the font. The font I have in mind is called Inter. So let's choose this. So right now, all of the font is capitalized. So let's click on this button here, so it's not all in caps. So it's like what I had in my document. So in this box below, I'm going to copy and paste a text from my document. As you can see, there's much less text, so I'm going to make this a lot bigger. Let's see what the text looks like when it's aligned in the center. So let's click on this button here, so the text is in the center of the box. Let's reposition this. I think this text looks a lot more balanced now. I want to have this subtitle on two lines. So I'm going to hit Enter after here, so it's on two lines. For this, as well, I want to use the Interfont. So let's select all by pressing Command A on Mac or Control A on Windows, and then click on Font up here. And then again, select enter. This looks a lot more consistent now as it's using the same font. Let's just increase this font size, and let's also make this italic. I'm going to adjust the font for the title, and let's drag this page up, so it's even smaller so we have a smaller area for the text. I don't want to have a whole page for this, but I do want to display this title and subtitle. And let's make sure this is balanced and in the center. Now we have our homepage and this area that we've made in between the next page. So let's now work on the next page. So this will be this area here. For this next page, I'm going to get inspiration from this other template. I want to have something similar to this. So I want to have an image and some text. Also similar to this template. And let's have a look at a few of the other templates. But I do think this one here was the best. So let's create something similar to this. So for this, I want to have text boxes and images. For the website template we're working on, I'm going to delete this background image and also this text here. And for the background, I'm going to add a solid color. Let's use this yellow color that we're using before. I'm also going to delete all of this here as well. So let's click and drag over this and press Delete. So for this, I want to create a layout that displays our course and also our YouTube channel. So I have an image here about our course. So let's add this from the desktop. Before I do this, I'm going to add a square, and this will help me divide the page into four. So let's click and resize this, so it's one quarter of the size of the page. Let's now click on the duplicate bottom, and I'm going to put this in the bottom left. Let's just resize these squares again so they're exactly one quarter of the size of the page. Okay, so this page has two black rectangles and two yellow rectangles. I'm just going to copy and paste this textbox, and we're going to use this for one of the squares. Let's just resize and reposition this. And for this, let's click on the italic button here, as I don't want to have this italic. So it's different from the text above. Now let's go back to our document and copy and paste our next text. So this tux box talks about our course. Let's now copy and paste our next text, which is some more information about the course. Let's just resize this textbox and reposition this. I'm going to make the title bold, so it stands out a bit more. Again, let's just resize this. I'm just going to change the color, so it stands out from the text above. For this, I'll use this white color, but I could use another color, so it stands out a bit more. But for now, let's just use this white colour. From the home page, let's select the button and text, and let's duplicate this. Let's now click and drag this over to our new page, and let's now change the colour of the button. Let's just change it to this gray color. And let's also change the text color to white so we can read it a bit easier. I'm just going to resize this gray rectangle box as a text I'm going to add this longer. Let's just resize this text box and drag this over here and resize this, and let's also resize this gray rectangle. So it covers all of the text. Let's now select this text and gray box and group this. So we can move this and they're both move together. Let's just hold down Shift and select both of these. And now let's resize this so it fills this yellow rectangle a bit more. I'm just going to ungroup this textbox up here, and let's just move the subtitle up a bit closer. Let's now hold down Shift and click on the title above and then drag both of these down. Let's now drag the text and button up as well, so the design looks a bit more balanced. Okay, let's now add an image into this black square. Remember previously, we uploaded this design. So let's just resize this and add this into this square. However, I want to have this look a bit more interesting, so I'm actually going to add this design to a mockup. So on the left, let's go over to apps and let's type in mockup. And click on Mockups. So here we have many different mockups, so this can help make our design look a bit more interesting. So for this, though, I want to have it on a laptop. So next to the computers category, let's click on CEO I'm going to choose one of these laptops. I think this one here looks quite interesting. So let's click on this. And now you can see that our design has appeared on this laptop. Now let's click and drag to reposition and resize this. However, it's not quite the right size. But one thing we can do is we can actually duplicate this rectangle shape and then drag it over. So the black rectangle covers the design. Now, let's reposition this mockup. So I'm going to right click on this mockup design and then go to layer and then go to center back. So I'm going to delete this black rectangle as we don't need this anymore. Let's just change this black rectangle to the yellow color we're using in our design. And I'm just going to resize and reposition this mockup to get it in the center. Okay, I think that looks quite good. Now I'm going to change this black box to one of the colors from our mockup design. I think this gray color here looks quite good. And now let's click on elements and type in YouTube. So for this, I want to talk about our YouTube course. So I'm going to find a photograph about YouTube. I think this one here is suitable. So I'm going to resize this and put this on top of the bottom left rectangle. Let's just trim this back so it's the right size. Let's now click and hold down Shift and select all the text boxes and the shape. And now let's copy and paste these and drag this over to the bottom right rectangle. Now I'm going to copy and paste the next set of texts from our document. Before paste, let's just ungroup this. And now let's paste over our title. I want to have this on two lines as it doesn't really fit on one line. So let's hit Enter in this textbox here to put it on two lines. Okay, let's just resize and reposition this. And now let's change the color of this textbox so we can see it. So we have some contrasting colors here. In the bottom right rectangle, we have the gray background with the yellow textbox, and the top left rectangle, we have the yellow background with the gray textbox. So this adds contrast, but it also balances out the design. Let's also change the color of the font to black, so you can read it a bit easier on this yellow background. Now let's copy and paste the text from the document into the next textbox. I want to have on two lines from WhetsaysGraphic Design, and let's hit Enter here, so it's on two lines. Let's just resize and reposition this. And now let's also reposition the textbox and shape below. Now let's change the text in the box. So let's go back to our document and copy the next set of text. And now let's paste this into the textbox in the shape. Also later on, we'll be adding links to these boxes. Okay, so that's the next page of this website, and that's the end of this video. The next video, we're going to continue building this website so thanks for watching, and I'll see you there. 7. Building a Project Section: Okay, so let's now continue building this website. In a template here, we have this page. Let's have a look at another one of these templates. Let's look at this one here. So I want to have something similar to this. So for this page, I want to display a portfolio, so I want to show some of the different things we do and media made fun. So I want to have some images similar to this design here. Let's have a look at this template. So I want to create something like this, as well. Okay, let's go back to the page we're working on, and let's change the color for the background of this page. So let's click on this page and then go to color. And let's try some of the colors from these photos. We can click on CA to see all of the colors from these photos. So let's try some of these. But for this, let's actually choose our own color. So let's click on Add a new color here, and let's choose our own color. Okay, I think about here is good. Now we have a bit of contrast from the other gray color. Let's just adjust the size of this textbox, and let's put the text in the center. And now let's copy and paste the text from our document and paste this as a title. Let's change the color to white, so this clearly stands out on the page. And let's click and drag over all of this now and delete this. Let's have a look at our other template. So I want to use an image similar to this. But let's have a look at the other templates, and I want to have one similar to this. So let's copy and paste this over to our page. Of course, I'm going to change the image, I want to have an image that's a similar size to this. Let's just trim and resize this as I do want to fit eight of these on this page. Let's copy and paste this design and add another one. And remember, I want to add eight. So let's keep on doing this. Now let's click and drag these and move these to the center, and let's resize and reposition this. Remember, I want to add eight of them. So let's make a bit more space for some more here. And let's click and drag over all of these. And now let's press the duplicate button. And now you can see we have eight of them. Let's just reposition these so they're equally spread. And let's just move them up slightly. And also the title. Let's make a bit more space, so let's drag down here. And let's just move these images down a little. And now I want to add some buttons below. So let's copy and paste this button here, and let's resize this so we have a button for each one of these images. Okay, let's add some text to this button. So let's go back to our document and add the next text. Now let's copy and paste this. And let's rename the next text box. Let me just reposition this first. Let's go back to our document and copy and paste the next text. Let's now copy and paste this box, and we can also use a duplicate button rather than using copy and paste, if you wish. We can also click and hold down Shift and click More to select multiple items. Now you can press this duplicate button, and this duplicates these four boxes. Now let's drag this down below the next four images. Okay, let's add the next text, so let's copy and paste this from our document and the next one. And again, for the fifth box. Then for the six box. Then seventh box. And eighth box. I do believe it's important to have all your texts ready before you start building your website. Okay, let's now add our own images, and then click on Upload and image or video. Here on the desktop, I have my next image I want to add here. Let's now click and drag this over the image. Let's click on Upload and image or video again, and let's choose the next image. Let's now drag this over to the second image. Let's just reposition this, and now let's click on Upload Image or video, and let's add the third image. Again, let's click and drag this over, and let's reposition this. Now let's do the same for the fourth image. Let's just resize and reposition this because we want to have these images balanced. And let's do this for the fifth image now. Let's just resize this so we can see a bit more of this book. Let's rotate this slightly, as I think this will look a bit better. Okay, let's do the same for the six image. I can't see all of the laptop here, so I'm just going to resize this so we can see more of the laptop. And for this example, I'm actually going to make this image a bit wider as it's still trimming off the laptop. Let's actually make the image above wider as well, so it's balanced. I'll do this to all the images, actually, so they're all the same size because it might look a bit strange if there's just two images that are larger than the rest. One of the great things about Canva is that when you resize an image, it tells you the exact size. So you don't have to guess to make sure it's the same size. You can see by these numbers that it's the same size. Also, let's do the same for these text boxes below. Let's make them a bit wider so they match the size of the images above. Let's also make sure that the text is in the center of the box so it looks balanced. A Let's just group this text and the box together because it's in the right position. And if we group it, it'll stop us moving stuff by extent. So I don't currently have images for web design or resume design, but this is something they'll add in the future. So right now this website is a work in progress. And remember, if you're building a page or website in Canva, you can always come back to it later on. You don't have to finish it all in one go. Okay, so that is the creative work or portfolio section of the website. If you have links to different websites, you can always link these buttons here, and I'll show you how to add links later on. Okay, so that's ended this video. Next, we're going to continue building this website. So thanks for watching and I'll see you there. 8. Design the About Me Section: Okay, let's now continue working on this website. Next, I want to create an About us page. Let's have a look at some of the other templates. I'm not too keen in any of these for what I want right now. Let's have a look at the other template. Same for this one. There isn't really anything I want here. And let's look at the other template. Something like this is quite good, but I do want to have a picture to make it a bit more personal. As I said, I want this to be an about us page. So I'm going to click and drag and delete all these contact details, and let's actually delete this background image. Let's click on color here, and let's change the color of the background. For this, let's choose a white background. Let's now add another page, and I'm going to make this last page a lot shorter, as this will be the futter that I'll add later on. Let's change the photo color to this gray color, and let's now create the At us page. For this, I want to have a textbox, copy and paste this textbox here. So let's copy over this textbox and paste it to our page. Let's change the color because the color of the text is white and we can't currently see it. So let's change it to black. I don't want to have this text centered. Let's click this button up here, and now the text will be on the left of the box. Okay, let's now go back to our document and copy and paste the next text. So this will be our title for this page. So let's copy this and paste it in here. Remember, you can copy with Control C on Windows or Command C and Mac and paste with Control V on Windows or Command V on Mac. I also want to have this on two lines. So I'm going to press Enter before this word here. Let's just reposition and resize this. And now let's add an image. So let's click on uploads and then upload an image or video. Now we're going to add a photo of myself. So if you do want to have a photo of yourself on your website, I do recommend taking a professional photo. This can help add credibility and makes you look a lot more professional, and now I want to add another textbox. So let's click on this text from the other page and paste it here. Again, it's in white, so let's change it to black. I also want to have the text aligned on the left, so let's click on this button here so it's no longer centered. I want to have another textbox, as well, so I'm going to press the duplicate button here to duplicate this textbox. Let's now go over to our document and copy and paste the next text. So next is my name. I'm just going to make this a bit larger. And let's also make this bold and italic, so it stands out and looks a bit different. And now let's go over to the document and copy the next text. And let's paste this into the next textbox. I also want to have this italic, so it stands out and looks a bit more interesting, but let's not have it bold, so it's different from the text above. Again, I want to have another textbox, so let's duplicate this. For this next text, I don't want to have it italic, and I want to have the text a lot smaller as I'm going to add a lot more text here. So let's go over to our document and copy the next set of text. And let's paste this into the textbox. Let's just resize and reposition this. And I want to have this textbox line up with a photograph. For this, I want to have the text spaced out. So let's click on the alignment button up here and choose a space text alignment. Okay. I think this looks a bit more balanced now. And again, let's just resize and reposition this text. Let's just move the image over so it's a bit more balanced, and let's just resize and reposition this again. So this is quite a simple page, but I do think it looks quite effective and it's well designed and well balanced. Let's just drag up the footer here because we don't need all this empty space at the bottom. Let's also just reposition and trim the sides of this photo as well because we have a bit of dead space at the side. Okay, so that's the about a section. Next, we're going to create a footer and add some links, which we'll do in the next video. So thanks for watching and I'll see you there. 9. Footer and Links: Okay, let's now add a footer and add some links to this website. So down here previously, we created this footer section. We can drag up or down here to change the size of the page. For this footer, I want to add the textbox. So let's go up here and find the textbox and copy this with Command C. Now let's paste this and reposition this to the center. Now let's go back to our document, and here I want to put the copyright information for the website. So let's copy this and paste this over to this textbox. Let's just move this down slightly. And now let's add some icons. Here I want to add some social media icons that can link to other websites. Let's first of all, find a YouTube icon that will link to the media made fun YouTube channel. So in the elements, let's type in YouTube icon. And let's select this one here. I also want to change the color, so let's click on color, and I want to change this to white so it matches with the text below. Of course, the YouTube icon is red, but I do think using white will match this design a lot better. Okay, let's just resize and reposition this, and now let's add another icon. Again, I want to have this as a circular icon, so let's also type in circle. Okay, this one here looks good. And again, I want to change the color of this to white. So let's click on color and click on White again. Let's click and direct this over the YouTube icon and resize this so we can get it the exact same size. So now these icon designs are very similar. So we can link these icons to our course and also to our YouTube channel. Let's now zoom out and have a look at our website. So we have a homepage, information about our course and YouTube channel, then we have a portfolio section and about a section and a Futter. This is a very basic website, but if you want to create a simple website like this, Canva can be great. If you want a more complex website, then you may wish to use something like WordPress or another website builder that has more features. But as I said, if you just want something simple, Canva can be great. Okay, let's now add some links. So for this button here, I want to add a link to the course. So here I have a link to the course in my document. And let's right click on this and go to Link. And now we can paste in our link. So when people click on this, it will go to our course. So you can see here this is our thLlink. You'll notice that once we added the link, it has underlined the text, and then press the underline button so it's not underlined. Let's now link this button here. That goes to our YouTube channel. Here we have the link to our YouTube channel. And again, let's right click on this button and go to Link, and then paste it in here. I also don't want this text to be underlined, so let's press the underline button so the text is not underlined. Okay, let's add some links to the icons in the Futter. So let's select this YouTube icon here by clicking on it. And now let's right click and go to Link. Again, let's paste the link that goes to YouTube channel here and press Done. Let's now do the same for this other icon. Let's go back to our document and copy the link for the course. So let's right click on this, go to Link, paste this and here, and select Done. Et's just close this tab on the side, and let's have a look at our full website. We can also preview this by pressing the preview button up here. Let's just uncheck Include navigation menu for now. You notice down here we have this checkbox for Include Navigation menu. So you can see up here we have these different tabs, and these don't actually match up with our website. We can also resize this for mobile. And for the mobile, we have the navigation menu, if we press on this button in the top right. So what we want to do now is change the navigation menu. So let's have the navigation menu match with our website. So let's close this preview. We can change the navigation menu by pressing notes down here. So for this section here, learn from experts. I'm going to copy this and paste this for the page title of the notes. So this will now be part of the navigation menu. So let's go up to this other page here where I display the projects. And in notes, let's name this page projects. Now let's go up to the next page here, as this has information about the course and YouTube channel. We could also call it content or courses. But for this, let's call it contact. And now if we click on the first page here, it says home, and let's leave this one at home. Okay, let's close the notes. And now let's click on the preview button. Let's go over to desktop view, and you can see now the navigation menu matches with our pages. Okay, so this is just a really quick way of creating a website in Canva. Canvas website Builder is quite basic, but if you want to create a basic website, then this can be very useful. As I said, if you want to create something more complex, you may wish to use Wordpress or another website builder that has more functions and features. But for a website like I've designed here, I think Canva can be great. Okay, so that's ended this video. We've looked at building this website. So I hope you found this section useful, and I'll see you in the next one. 10. Publishing Your Website in Canva & Linking a Custom Domain: This lesson, we will explore how to publish a website using Canva for free, as well as how to publish it with a custom URL or through Go Daddy and Canva. Okay, so now let's have a look at publishing our Canva website. So I'm going to show you the freeway of publishing your website that uses a Canva domain, and I'm going to show you how to use a custom domain that we're going to link with Go Daddy. If you want to use the custom domain, then this is only available for Canva Pro users. Okay, so first of all, I'll show you the freeway. So I'm going to publish this design here with a freeway, which uses a Canva domain. So all we need to do is go over to publish website up here in the top right, and I recommend checking resize on mobile. And for this, I'm also going to include the navigation bar. And then for website URL, type in your website name. As I said, this will be a Canva URL, so it will be whatever you type in herem dot canva dot site. So you can't choose anything, some things will be taken. For example, if I type in MMF, you can see this URL is not available. But for type in media Made Fun, you can see it is available. So remember, it's media Made Fun, dot my dot cava dot sit. So let's click on published website now. And this may take a few moments to load. And here we go. It says our website is now live. So we can copy and paste this. And you can see it's live. And you can also click on View website here, and this will go to our dotm dot cava dot site website. Okay, let's close this for now and let me show you how to link this next design with a GoDaddy domain name. So this is the other design. And for this one, I'm going to link it to my GoDaddy domain. If you don't have a custom domain, then this won't be relevant. And this next method is only available for Cava Pro users. So I have my godaddy site here, and under Demins you can see my domain is mediumdfun.com. Okay, so now let's go over to a published website. Now under website URL, let's click this Edit button here. Now we're going to click on Get a New domain. So we can click this to use our own domain or we can buy a new domain. For this, though, we're going to use our own domain. And as you can see here, we have this crown icon, which means it's only available for Canva Pro users. As we're using Canva Pro, let's select this and let's click Continue. So here we can enter our domain. Remember on Go Daddy, it was mediamdfun.com. So let's copy this and paste this in here. Now let's click Continue, and now we need to connect with Go Daddy. So let's now click on Login and Auto Connect. And now it says connect tomdimadefun.com and change your domains DNS records. So for this, I'm going to click Connect. Okay, so now it says mediumadefun.com. It's now your Canva domain. So let's now click Close, and it's now sinking our domain. So it says here, it's usually done within 20 minutes, but can take up to 72 hours in some cases. We'll also get an email when it's done. Okay, let's now click Hughes's Domain. And now we can go to this drop down arrow here, and we can choose our free domain, or we can choose our custom domain here. So for this, I'm going to choose our custom domain. We can also include a subpath if you wish, and a subpath is part of the URL that comes after the main domain, typically used to organize content within the website. For example, medmadfun.com slash Blog. For this, though, I'm going to leave this blank. We also have some settings here where we can describe our website. So I just put in here, Let's make Learning Media fun. Okay, now let's click publish website. And this will take a few moments to load. So it says now your website will be live soon. So we can click here to preview the website. You can see here it's not the media made fun URL. We may need to wait for this to be live. So let's copy it over this URL and paste this into a new tab. And you can see it's not ready yet. So we all need to wait for this to be live. Okay, so now it's been about 12 hours, and you can see our website is live. One thing to mention is that the name of your website in a tab up here will actually be the same as your Canva project title. So make sure you name your Canva project accordingly. If you don't have the correct name, you can always edit your design and then republish your website, and this will update as your website name. Okay, so that's how you can publish your website by using the free my dot cava dot site, and also by linking your Cava website with your custom Go Dadi domain. So I hope you found this video useful, and I'll see the next one. 11. Create a Mailchimp Signup Page and Link It to Your Canva Website: Okay, in this lesson, we're going to look at how to link Mel Chimp to your Canva website to capture customer emails. So what is Melhim? Melchim is a marketing platform primarily designed for email marketing. It helps individuals and businesses send emails to their audience and track the performance. Popular among small to medium sized businesses. It also includes features like building landing pages. In this video, I'll show you how to link Mailchimp to your Cava website to capture custom emails. With the right setup, you can build an email list to promote your products or services and maintain direct communication with your audience. Okay, so now I'm going to show you how to create a signup form on Mailchimp, and then link this to your Canva website. So right now I'm onmilchip.com, and I've signed up for the free plan. The paid version of Mailchimp does offer more features and functions, but let's set this up by just using the free plan. So Mailchimp, you need to set up an audience, and this is a list of email addresses and names of people who want to join your mailing list. So once you've set up an audience, go down to SignUpFms. And now we're going to click on Create a New Form. So a sign up form allows customers to enter their email address and also their name, and then this will automatically get added to your audience. So we have a few different types here. The easiest one is a signup landing page. So this will create a landing page, and then we can link this with our Canva website. So let's click on this. So I'm going to call this medium made fun signup and then click on Continue to Builder. Then we have different templates here. But just to keep this simple, I'm going to click on this one, which is grow your list. But if you wish, you can choose one of these templates here. That may be a bit more stylish, but just to keep it simple, let's use this one here. Okay, so now we can customize this signup form. We can drag over textboxes like so. And we can also drag over the image box and add images if you wish. If you hover over to the box, we can click on this four arrows here, and we can drag to reorder or we can click on the trash icon here to delete. For this example, let's delete this. I'm actually going to add a logo here, so when people click on this link, they'll know it's part of media made fun as they can see our logo. Let's click on the Edit icon here and then click on Upload Logo. And then click on Upload. And here I have my logo as a PNG file. And now let's click on Open, and this will upload this logo. Obviously, that is too big, but we can adjust the size here. I'm going to have it about this size, though. Then we can click on Save and Close. I'm just going to delete this textbox that I added previously. So let's click on the trash icon and click Delete. And now I'm going to add a title here. So I'm going to join our mailing list, and then click on Save and Close. Then we're going to add some more information here. So let's click on this pencil icon here to edit this textbox. So I've put here into your name and email address to be added to our mailing list where you will receive emails about our latest news and offers. Okay, then I'm going to collect save and closes. And for this, I actually want to add the name as well as the email address. So let's click on this Edit button here. And you can see here we have these checkboxes for first name and last name. So I do think it's important to capture the name or at least the first name, then you can always add their name in the email address to make it seem more personal. Okay, this is a very simple sign up form, but I think for this example, it's fine. So let's click on Save and Close and Save and Close again. And then we have this next page here, and you can see here under Audience and tags that contacts will be added to media made fun, which is audience or list that I've set up previously. When the person enters their email address and name, there will also be a confirmation message. We can click on Edit Design here to edit the confirmation message. So you can see right now it is the same signup form, but if you click on the Edit button here, we can see it says here. After form is submitted, send visitors to confirmation message. Then we can update our confirmation message here if we wish. I do think the default one is fine. You can always change this if you want. We can also click Preview confirmation message to see this here. Okay, this is all fine. And let's click on Saving clothes. And now I'm going to publish this sign up form. So let's click on Publish here. And then you can see here we have our URL. So let's right click on this and go to Copy. And now let's go back to our Canva page. So we did previously publish this website, but if we edit this design, we will need to publish it again, which is fine. So let's click on Edit Design. So we're going to add a new page now. So let's click on this button here, add page. And this is a bit large, so let's just resize this. Then I'm going to add a clickable textbox where people will be sent to our signup form. So in the elements, let's add a shape. Let's choose this one here. And now into text, let's add a text box. So I just typed in. Click here to join our mailing list. Let's select all of the text here and change the color. Now let's change this to white and then drag this up here so you can see this text. Now I'm going to click on this textbox here and then click on Duplicate. And I'm going to type Join our mailing list for the latest news and offers. Okay, let's put this in the center, and let's just drag over both of these to move this down. And let's just make this a little smaller, and let's select all of this text here and change the color so it stands out a bit more. Let's just choose black for this example. Now let's right click on this shape here, and now let's go to Link. Now I'm going to paste in the URL for the male chimp signup form. Okay, so let's click On Done. And then press one again. Let's also do the same for the text. So let's right click on this and then go to Link and then paste in our URL here, and press done, and then press one again. I also don't want to have this underlined, so let's highlight this and uncheck On D Line. Then I recommend previewing this to make sure it works. And now let's go down to this button and text and click on this. And you'll notice, it'll go to our signup form. But just for this example, I've added my email address and my name. Okay, now let's click Subscribe. And you can see now it says success, you've been added to the audience. And now if we go back to Mailchimp and under audience, you can see here my email and my name has been added. So once someone adds their email address and submits the sign up form, they will be added to a Mailchimp audience. So let's go back to Canva now, and let's publish this website again. So let's click on published website here. And now let's click on republished website. This again may take a few moments. Okay, so now let's copy our URL here and paste it in a new tab. So here you can see we have our link that goes to our sign up form. Okay, so that's how you can link Mel hintwv Canva to help capture emails of your audience and customers. So thank you so much for watching this video. Hope you found it useful, and I'll see you in the next one. 12. Thanks and Bye + Class Project: Okay, so we've reached the end of this class. Thank you so much for watching, and I hope you found it useful. For your class project, I'd like you to design your own website in Canva. I then want you to take some screenshots of your website and then write a short paragraph about how you made it and why. Then post this as your class project so I can check out your website and read about your creative process. So thanks again for watching and hopefully, seen another class.