Build Your Portfolio Website Using Squarespace 7. 1 (For Creatives)

1. Intro: Do you feel overwhelmed when you think about creating your own portfolio website on top of a million other things you're already doing as a creative entrepreneur? Well, I have been there and I completely understand how daunting it can feel to launch your website on your own when you don't have any bad experience in web design. Hi, I'm an artist and surface designer from India. I sell my art on various products like fabrics, wallpaper, accessories, and other lifestyle products. In this Skillshare class, I will show you how you can create your own portfolio website using Squarespace Seven, 0.1. If you are an artist, surface designer, illustrator, or any other creative who don't have any prior experience in web designing. I have been an artist since my child, but it was more of a hobby to me. And when you move from being a hobbyist to being a professional artist, you need a place where you can showcase your art and build a community. So when I began building my own portfolio website, I had to place my everything from various different sources. Therefore, in this class, I will make this gigantic task super easy for you by showing you a step-by-step method of building your own portfolio website without using any kind of coating. This class is completely designed for beginners and you don't need to have any prior experience in web designing to take this class. This is not an advanced web design class, so low coding will be involved. You can sign up to the free version of Squarespace 7.1 and you will get a foot in this trial period to see if you like it or not. In this class, you will learn how to plan before starting to build your website, how to design your website in a simple and smart way. Some basics of SEO, that is search engine optimization, how to publish your website, and a bonus lesson where I will show you how to make a link in bio landing page for Instagram. So are you ready to follow along with me? And within few days, your website will be ready to be published. I can wait to see how you design your beautiful website. We have a lot to cover, so let's get started. 2. Your Class Project: The class project you have to design and publish your website. Then you can either take screenshots of different pages and upload the apex to the projects and resources section. Or upload screenshots of one to two pages. If you decide not to publish your website right away. You can share the URL link to your published step, say that you have created in this class. Getting started with something new is the most difficult part. So I would encourage you to not get opened and just get started with it. Share it in the project gallery so that i and your fellow critics can encourage you and give you feedback. 3. Planning Before Designing: Welcome to the class. Now, before we get started with actually designing the website, I would suggest to plan it out first and to make this planning process even easier for you. I've provided you with a PDF checklist download in the projects and resources section. Download the PDF guide and get started with the planning. And take your time with it. Think about what brand name, ODU lake or the domain name, and see beforehand if it is available or not. As productive as it may sound. You have to think about your ideal customer or your ideal audience for whom you're designing this website? Is it an art director who would like to license your art? Or is it an art enthusiast who like to buy your art? Or are you designing it for other creatives who like to learn from you? Also think about who do you like to have a lookup or not? And what kind of colors could do like to have in your website. Those Squarespace provides some basic color themes, but you can also have your own brand colors if you want to. Don't overthink this, because you can always change this later. But at least you need to have a clear idea of how you want your website to look like. There are some great resources available online to make a customized color palette, like Adobe color wheel and coolers. I'll provide all the links in the description. Also, think about what firms would like to use. Now, I use Canva, which is a graphic design platform to design my thumbnails for my website. I choose a font, which is also available in Canvas. You can do that, but do remember to keep it limited to two to three fonts. For this class, you can use a serif and sans serif script and a sensitive for the ease of the process. Likewise, make a rough layout of what pages do actually want to have in your website. Don't overthink this, just make a rough planning. You can also go through Skillshare classes about branding to know more about this, so that this process become even easier for you. Also remember to keep all your images at Lowe's is Alicia, that is 72 DPI. Save it as JPEG or PNG if you want a transparent background. Also keep all your social media links and they are sharp links ready to be used. So I would suggest download the checklist and take your time in planning before signing up for Squarespace. So that within that for me, this dry period, you'll have everything ready. If you like it or not. If you want to continue with Squarespace or not, it's better to have everything ready before. The next class where we will get started with Squarespace. 4. Getting Started With Squarespace 7.1: Welcome back. Let's see how we can work with quizzes. Okay, so let's start by going to squarespace.com. And here we'll scroll to the very bottom and click on pricing. Now here you get four types of pricing options. You can go for the personal plan if you want to, the business plan. And a few sole purpose is to open a store or a shop with Squarespace, then I would recommend to go for the commerce or advanced commerce plan. Took up all these options and the benefits available with the particular options. You can choose according to your convenience and your whatever is the most beneficial for you. And the business plans also comes with the Google workspace. So you can check it out. You can also see the price according to the monthly payment or the annual payment, and choose whichever is the most cost-effective for you. So I choose Squarespace because you get both the domain and hosting right inside Squarespace. And also it provides the built-in SEO Tools, Analytics, URL mappings. Among other things. It is very user-friendly and easily customizable, even for someone who has 0 web designing experience, like me. It is optimized for all kinds of devices. And you also get this beautiful templates that you can easily customize. So it is important for me being a creative. Just sign up for the free trial and see if you like it or not. Now if you click on Login here, you can either continue with Google or you can create a new account. So to do that, we'll click on Create Account at the top right corner. Here also, you can continue with Google or you can continue with email. So I'll just continue with email. And I will I'll quickly just fill up all the details. So now if you click on Continue, it will take you to the sign-up setting page. And here you can click on Account Dashboard to come to this page where you will get all the controls. Now here you can click on Send verification and you'll get an email in your email ID from Squarespace, which you have to verify it. Then you can come back to this page. Now if you click on Account Settings in profile, you can change your profile picture or your display name. And if you click on accounts and security here, I would suggest to switch on the two-factor authentication. You can also set up your account recovery steps by clicking here. If you click on notification, you can choose to get notified from Squarespace or not by toggling this on and off. Here. If you go to language, you can change the language of your website. Now if you click on Help, it will take you to the help center where you will get all your questions answered. You can browse by products. There are many articles. There are also videos that you can checkout or if ever, you face any kind of problem. So you get everything on this page. You can bookmark this page for your further reference. This is it for your sign-up procedure. So let's meet in the next class. See you in the next class. We are going to choose a template. 5. Choosing A Template: Welcome back to the class. Now that you have created an account, Let's choose a template that we will use to design a website. So let's click on Create Website. And here what we'll do is there are so many types already available here. If you want a particular category of templates, you can just click here and it will show you many templates. But in this, for this class, I'll be showing how to make a portfolio website. So I'll click on portfolio. And we'll just check out what all options that are available. If you just click on this preview, it will show you how the website actually looks and you can scroll and see how it looks. Now you can also check how it looks on the tab on the mobile. So you can check out all these things are to choose a template for designing our portfolio website. Specifically, I would suggest choosing something like this maybe or maybe something like this where it has a thumbnail view on the homepage. But then there is no hard and fast rule because you can always customize a template to your liking. However you want. You can just click on this preview and see how it looks like I showed you before. For this class. Particularly, I'll be choosing this Nevins template because of its simplicity. And as I said, it is completely customizable. So let's see how it looks. Let's go to the next top view. You see how simple it is. I think I choose this. And we also already have a blog section, which I'll show you how you can add. And we'll go with this design. So we'll click on Start with this design. It will take you to your controls back-end of the website. Here you can change the site title if you want to click on Continue. Here, it will show a preview of how you can edit the pages and all which I will go in details in further lessons. So don't worry about that. You can just click on get started. See you in the next lesson where I will show you what all these settings are. 6. Squarespace Settings Overview: Welcome back. Let's go through those settings. One thing I wanted to tell you that if you ever want to go back to your dashboard page, you just click on this Squarespace logo and it will take you to the dashboard page. Now here if you click on website, you can go back to the controls are the settings page of your website. Here as you can see, there are different options given here. Now let's go through all of this quickly so that you can feel a bit familiar by using these to customize your website. So if we click on pages, will take you to this page here and here you can see the main navigation. Whatever you add here, it will show on your main page or on your navigation. In the not linked section, whatever you add here, it will be active, but it will not show on your page anyway. I will show you how you can add all these pages in the upcoming classes. If you click on design, this is where you can control all your colors, fonts, your animations, spacing buttons, image blocks, and many other things. If you click on browser icon, now you see a small black cube here. This is the browser icon or the fabric. And I will show you how you can make an add your own favicon in upcoming class. If you click on the lock screen, if you have a password protected page, this is where you can customize your lock screen. Then the checkout page is important if you have a store on your website, the photo for pages, if you have any broken link, then you need to have a photo for page are the 404 page so that you can direct your customers or your website viewers. Some relevant pages. Next is denied screen will not go into that. And the social setting is you feel click on it. You can add a social logo, whatever you share from your website, you can have a logo for it. Here. In the Custom CSS is where you can add your codings, which we will not go into because this is a new coding class. This is all about your designs. Now, if you click on online store, I will show you all of these settings in upcoming lesson where we will add a store to our website. You click on marketing. This is where you can do the e-mail campaigns. If you have e-mail listing through Squarespace, you can use your e-mail campaigns. Then there's profiles. And SEO is where you can make some other optimization for your page. We will see it in upcoming lesson. Location management. You can add your location here. Then there's Promotional Pop-Up announcement bars and many other promotion options also will not go into xi dueling. And analytics is where you will see your store analytics and also your website analytics. We will go into some of this in upcoming lesson. Then the profiles is where you will see your subscribers, customers, and other things. Then in the settings, you'll get more advanced options. Inside availability, you can publish your website here, I will show you how. Then in the members area, as you can see, this is a Mm-hm. Plan because wherever you will see this arrow, this means this is a payment plan. So if you have a business plan or evoke, you can use this. If you have a membership in language, language and reasons, you can use your site language and you can do the original settings here. Then there's business information where you can add your contact phone number, your contact male, and your physical location. In the social links, you can connect all your social media as here you see in the navigation. All these icons, you can link it directly to your social media page here. Then if you go to connected accounts here, also you can connect your Facebook Pinterest and other things to your website, which will show on your homepage. This extension and permission here, you can transfer the ownership of your website to someone else, will not go into this. In domains. You can get a domain that is buyer domain, or use a domain if you already have purchased your own. If you click on data domain here, you can add your name or your business name, and it will show you many available options. You can just click on any of this and buy it from Squarespace itself. Then there's Google workspace. I think you will get this works best with the business plan. There's billing, which is a subscription payment information invoices. Then there's mobile information bar, which is a premium feature, so we'll not go into that. And the cookies and VistA data, I will show you how to make a cookie banner. This is important and there's blogging where we can make more advanced customization of our blog page. And the advanced where we can add our own code if they want to. But we will not go into any of this because this is a no coding class. So yeah, this is all about the settings of Squarespace. Now, let's meet in the next class. The next class, where we will start with our website building by adding. 7. BONUS1-Squarespace Update: Before we start creating the pages of your website, I want to give you an updated information about the recent launch by Squarespace, because this is going to change how we use to edit in Squarespace. So in this class I have shown how to edit using the classic editor, which I still recommend for the business. And now squarespace has launched the fluid engine for 7.1 version, which is no doubt giving a lot of flexibility and creative freedom to designers. But it can be a bit overwhelming for beginners. But I want you to know both the options and choose whichever you want to use. If you follow along with me. You can use the classic editor that I have shown in the upcoming lessons and later you can upgrade to the fluid engine editor if you want. So for my website also and still on the classic editor, I have not upgraded it yet. But if you hover around here, you will get this upgrade option. If you use the classic editor, you will get this option in your website also, you can just click on Upgrade and upgrade to fluid engine. But once you save it, it is permanent. You cannot then come back to the classic editor. So I would suggest to first get used to the classic editor. Then you can duplicate a page and you can see how the fluid engine works. And then you can upgrade it if you want. Now, if you go to pages and you want to add a new page, you have to click on Plus. Now, don't worry about all of this. I will be covering everything in detail in the upcoming lessons. So if you click on Page Layout, you get these templates you can choose to add to your page. Now if you want to go, this is the fluid engine templates. If you want to go to the classic editor, you'll see this option here in the bottom. The book. They just use the new Fluid engine editor. And if you want to use the classic editor, you can click here. So here also you will get all these options. Now though these templates may look very similar, but the editing would be different. If you want to follow along with me, you can choose this option and come to this page. From here. You can use whatever layout you want and continue with the class. But if you want to use the fluid engine, I will show you how you can do that. So let's first go back here. Let's add a page. Maybe. Let's see. Let's add a simple page. Let's add this page. Now I'm not showing the customization or the SCO of this page because I will be showing it in the coming lessons. If you click on Edit and the classic editor, what happens is you also have this Add section in the classic editor. So if you click on Add section and it's just add something to our classic editing so that I can show you both. And I'll just add this. Section two are classic editor. Now this is the classic editing. As you can see, the upgrade option is appearing. That means we are in the classic editing. The main difference is you cannot move these blocks anywhere you want. Whatever layout you choose. If you want to add some space or if you want to move to this side, then you have to click on plus, and then you have to click on spacer. And this spacer, you can drag and drop to move it towards the same and maybe make space between these two sections, whatever you want. But if we come to this section that we had previously added, now this is the fluid engine. How we know that if you click and move this, you can move anything anywhere on this page. You'll see these boxes are these grid behind this text block. So that is the main difference between the classic editor and fluid and J. Now, if you want to, if you want to make the grid visible, then you have to press G on your keyboard. To make it visible. This grid will allow you to place all the content blocks properly to add any new section or any block in this classic editor, you have to click on this class. But here you have to click on Add block. Let's say you want to add an image block. So an image plot is added. And now you can drink that block to innovate on. Let's say this is your art board. So all your content block. And you can move it anywhere here. Now if you click on Edit, you can add the image. So now as you can see, the image is added. And if you click on it, you can make it larger or smaller. You can just drag it and place it anywhere you want, but that is not possible. And the classic editor. And another thing, if you click on this Edit Image, you can edit them. Design of this image also, you can click on Fit. If you want to change the proportion. And let's say you want this text block above this image. You can do that also. So to do that, you click on the text, you get this edit option. Now here you can add a background to the text if you wanted to. And you can make other changes. You can make it smaller or larger by dragging it manually. And you can also change the alignment of audio. Can just drag the corners and do it yourself manually by clicking. So if you just click on the text, and here you see move forward. If you click on the move forward, it will come to the front. Now let's say we want this image above this text. We click on this image and we'll get to this by chance, got grabbed. This is how you can arrange all the layers as you like, which was previously not possible. Now you can increase the size of this grid also by dragging this symbol below, above, which will increase or decrease the rows in the grid. You can also do it by clicking on this edit section. Here you can increase the row count or you can decrease it. You can also remove the gaps between the grid if you want to. Or you can click on these three dots and you can manually do it. Here also, you get all these options for height and alignment and everything. Now, these options are also available in the classic editor but in a different way. But keep in mind some of, some of the things that has not changed for fluid engine, like the gallery layouts and the list layouts, those have not changed. So this is the same as the one we see in the classic edit editor that we will see in the upcoming lessons. Now, another thing to keep in mind also is if you are using the fluid engine, then always check the mobile view because whatever changes you do in the next version may not get arranged properly in the mobile view. But then it is also giving you that flexibility to change everything in the mobile view. You can have a completely different layout for your mobile view. And it completely different layout for your desktop view. But you have to keep that in mind. Previously in classic editor, everything was getting arranged pretty nicely for the mobile view. But then you didn't have this creative freedom that crude engine keeps you on. So at the time of recording this video, there is still no customization available for the tablet view and for screen readers also, the blocks will appear in the order as they have been added to the page. So be mindful of that. And other than that, I think this is a pretty good step up by Squarespace, which gives you so much flexibility and creative freedom to change or to design your page. But then use whatever is convenient to you. If you want to keep it simple, just go with the classic editor and later you can upgrade it to the fluid engine. I also wanted to mention that there are some things that are still missing in the fluid engine like the image block layouts and animation, which hopefully Squarespace will take care of very soon. But for now, it is not an option with fluid engine. So this was all about fluid engine. Launchpad questions. 8. Adding A Home Page: Welcome back. Let's see. How do I do? Now, Let's start by adding a homepage. So to do that, let's click on Pages. Now here's some page. Some of the pages are already added. You can customize this page already available. Click on this plus sign. And then you can choose from different options here. But you can click on a blank page also, if you want to customize everything yourself. But if you're a complete beginner, I would say click on Page Layout. Here, you will get many more options. Now you can explore all these options here, but let's click on gallery, and I choose one from here. Let's choose gallery fight. Now you'll see here, Let's name it home. Now when you hover over this page, you'll see a delete option here, and you will see a setting here. So let's click on this settings. And here you can customize your page. So now we'll keep the page. Here. You can duplicate the page and you can set it as homepage. Let's say you have a different page and you want to set that page as the homepage so you can go to that setting way and you can set that wage as homepage. You can delete the page here also. Now we'll go to a CEO. Now here's the most important thing is to give SEO title and a description door does retain optional, but I would suggest to you to customize this for every page because this is how it does. Search engines will find your pages. So let's just give some title to your homepage. So we'll hide this page from search results will not do that. But I'll show you where you need to hide it from searches and we'll do it later. But for now, we'll just keep it like this. And in the social image. If you want to customize each page with a different image, you can do it here. But if you want a generalized or a single image for every page, then you can do it. In this social sharing option. I'll show you where. For now. You can just add anything if you want to advance. We don't need it. If any code injection is required, then you can do it here. So well to conceive, always click on Save. So now we'll edit our page. So we'll click on it. And here, as you can see, there's three sections here. When you hover over any of the section, you'll find this Add Section button. When you click on it, you will get other options like you can add more images or you can add a text section, or even add a blank page if you want. Now to edit this section, we have to click on this Edit section. When you hover over each of these, if me show you what it does. This will duplicate this section. This will delete it and move it down. If you click on move down, it will take the section down. And you can click again here to move it up. And if you click on the edit section here, you'll see the grid is now on. Simple. If you click on strips, this is how it will appear. You can also click on my Sundry azure slide. So whatever you want for this video, I'll just keep it on simple. You can keep one full plate or bowl. And you can also change the aspect ratio. Let's say you don't have all the images in a square aspect and you have some in rectangular also. So you can do that by changing the aspect ratio. I'll keep it in square. You can add or delete the columns here. You want to. You. Here you can change the spacing between the images. If your slide it, you can change the spacing. I forgive the captions on, let's say you have given some description to your image, which I'll show you in just a minute how you can do that. If you keep the captions on, the description will appear below the image. And then if you flip an animation, we can keep on feeding, scaling, whatever you want. If you keep the light box on, what it does is if someone clicks on the image, then it gives up full-screen view. And people can just scroll through the images here. So I like to keep the light box on. This is x and the colors you need not worry about this. We'll change it. Later. I'll show you how you can change the colors and the fonts for the whole site. So we'll do that later. So now let's do the images and add our own so critical that you can click on this image. Sane. And here click on one image, hold the Shift key, and click on the last image and you can delete. Now, I just add some images from my computer that I've already saved. If you click on the plus sign, you can either search images if you want to. If you already had some immediate, I already had this in my library. So destroying. You can also click on free images. But for this video, since we're making a portfolio images, so we'll obviously want our own images. So I'll just click and upload it and it will take you to your to your computer folders. And from there, you can just add as many images as you want. So I'll just quickly add some, some images now. So as you can see, the images has been added. So if we click on one of the images now here we can give the description which will show below the image when we have the captions on here also, you can link the image if you want to, which is not required here. But if you want, you can do that. We'll close this and we can close it here, and it will save it. Now you see, since I've kept the caption on, it is showing the description of the image below. Here, we can change this font when we are doing it later for the whole site. So here we have added. Then, let's say here you want to add something. So you see here is a spacer, which is a way of adding some space between maybe a text sections or between two images or anything between anything if you want to add some space. So you have to do, do it using a spacer. So let's say I don't want this spacer, I'll just click on it. And the delete option will show, and we'll click on Delete. Now there is a text option here already, but if you, let's say you want to add something else. So we'll click on this plus or this plus. If you want to add a below this or above this, you can always drag and bring it to wherever you want or so. Let's say I want to add another text box. So you see now here is one text box and here is another textbox. Now, if I just drag and hold it, I can bring it to the top. Let's say I'll add something else here. Maybe I'll add, I'll add a button here. So we'll click on the plus and we'll click on button. Here. You can keep a name to the button. Here. You can link the button to a separate page if you want to order a web address. Let's say you have a freebie or something and you want to direct people to that freebie, you can give the link here. You can upload a file. If you have a PDF file or something, you can upload it here so that people will click and they can download the PDF fights. And also if you want it as a contact form, then you can do it on your phone number. I click on Design here. These are some of the options for this button, which you can just click and see how you can do this and the alignment of the button also, you can change from here. Select that. Let's see, I want just write something here. So I can change this text also shared. If I click, I can make it bigger. If I want to, I can make it bold and select the text and I'll make it bold. So you can change the, you know, the align also. I'll just make it center aligned. And whatever you want or you can say you already have something written in a Word document or a Google document. You can do that by, if you click here, you can copy and paste it here. And if you click on Okay, it will be pasted here. Now, let's say I want to undo something that I don't by mistake, I did something and I want to undo it. You can always go here and click on Undo again. So this is how you can add text and a button. If we click on this edit, we can change the section height here. Also, we can click on here and manually, we can drag this to change the section height here. We can change the width here. And alignment. Now here we can change the background. I can just strip the background. I'll click on Replace. And I'll just take a image from already that I've already saved on my computer. And I'll upload it here. Once our image is uploaded, we can just change the image back on bid to insert or full bleed. And we can also change this overlay opacity if you want. And also if you click on Image effect, you can give some effect. Image which is not always ideal, but they can die and see how it looks. I just get none. That's it. Had this is how we can customize a section. And this section, I'll just delete it. I don't need it. And it is ready. So our homepage is almost ready. And please do not forget to click on Save. And I will suggest to keep doing it in-between. In-between you're editing, you know, jets or you're editing something, click on Save and then Edit. Click on edit again and do the rest of the editing. This is how you can add a homepage. The next lesson, where we're going to add an About page. 9. Adding An About Page: Welcome to the class. Let's see how we're going to add an about page. So now that we have added our homepage, now let's add an About page or a bio page. So we'll click on this plus sign and we'll go to Page Layout again and care about. So you can see there are different layouts given here. You can choose the one you like the most. Let's just add this one. The first one, Georgia Strait about. And we'll click on the Settings way and we'll check if everything is correct here. Not letting me go to the SEO and give a title. Here, you can give us a description. And social image. As I said, you can add different social image, but each pledge, or you can have the same social image for every page. And we will click on Save. So she had really click on Edit. And related. This section. Will click on this edit section. And we'll see this smaller. Let's see what the content width. No, I like it. Maybe larger. And the background. I want to keep it clean so I not add any background colors. We'll do it later. Now, let's edit the image. So if you click here on the image, you'll get this edit option. Here. You can change the image, so let's remove it. I'll just add profile pictures of myself that I've already saved to my computer. Once the image is added, it can add some alt text if you want, so that you can be good for your SEO. Something you can add it here. Like I had said in my preparation and planning class, they have to rename your images properly. It is important for the ACO aspect. So I'll just do it. Something like that. I'm happy with this. And we can change the design here also. Now it is in guard setting. Let's see if we do the overlap collage. Maybe. I like this better. This one also, you can change the image to be on the left or the right. You can change the shape of the image on. So here, if you want to do that animation, let's see. Let's do flight up. Okay, let's skip it for now. And we'll click on it, click somewhere outside. And if ever you find that, you're clicking on it, but this is not getting closed, have to save it because that is an indication that something may happen now. So you just click it and we'll flick on a date again. So here the image shape is changed, so I'll change it back to originate. And here you have to write something about yourself. If you have copied somewhere before, then just click here and you paste it here. And you can paste the text here, directly. Here also, you can change these letters. Style, the textile, self, we can do that. And the fonts will change it in the fonts and colors class, the design class. So we'll see how we can do that. So this was about the About page or the bio page. You can customize more if you want. You can add a section here. If you want to. You can click on Add section. And maybe you want to add some more text or some more images. Whatever. You can do that here. Or maybe you want to add newsletter or anything. Anything you want. You can add it by clicking on the Add section. And you can add it here. And always save it. So yeah, this is it. Now let's meet in the next class where I'll show you how we can add a contact page. See you in the next class. We're going to add on deck which overdosing. 10. Adding A Contact Page: Welcome to the class. Let's see how we're going to add this. In this class. I will show you how we can add a contact page. So to do that, we'll click on plus, and then we'll click on page layout. And we'll click on Contact. And from here, we can choose a layout that we like. I just go with the first one and we'll just name it that me or contact, whatever you want to name it. Click on this settings and check if everything is correct or not. Go to SEO, like I said, Give us your title and your description and click on Save. Now, I have not written anything. That's why it's not moving and just change this one. We'll click on Save. So now let's click on Edit and related this section. So now we can customize this. Now you see the spacer here. So this is to add some yellow, some distance between these two sections there, tech section and the form section. Now if you don't want the form section here, if I still need the spacer and bring it to the bottom, maybe. Maybe I want to show a link to this site. Maybe I put it here like this. We can customize it. So you can customize it however you want. And let's say you want to customize this form also. You can do that by clicking on this Edit. And this will take you to this form section. Here you can edit the form. Let's say you want to add some more section to this. There is only name, e-mail message. You can click on Add Field. And maybe you want a website. So we'll click on that. You can again add. And maybe this time you want the literary text. And here you can click on this text and you can also change the name of the text. Also, like, I don't want it to be written texts. So you can do that. You can add some description so that people filling up the form will have a clearer idea of what exactly do you want them to fill. So you can do that. You can click on required or not required. If we want to make this mandatory and you click on Request. And you can also delete the field if you don't want to. Say similarly, you can edit all this, all this form sections by clicking on this. And you can do it. After you're done. You can click on post somewhere. Let's say someone submitted this form and you want to give personalized, customized message to them. So you can do it here. Now if you can redirect them to a separate page, maybe if you want to. Let's say they have submitted the form and now you can redirect them to your portfolio page or your blog page anywhere you want to. You can do here. This is how you customize the form. Here you can change the design of the form also, if you click on the lightbox option, what happens is this forms. This form is now compressed and whenever someone will click on Open Forum, it will open as a full form. So here, the open form section also you can write something else like click here to contact. For something like that. You can do that. And you can click on storage. And here you can connect to your email, newsletter. You can connect to MailChimp or to Zapier. You can connect through email, useless provider like floating scandal. Or you can connect to the Google Drive, which you can connect to your e-mail if you want. You can do with here. Now, this is how it is done. Now another thing, if we click on edit, the form section, you can also change the alignment of the button. Now I want to keep it in the middle since I have played boxed it. So now what happens is let's click on Save first. So that will save everything here. Now when someone will click here, it will show them this fall and they can just fill it up and click on send. And it will click on Edit again. We can attach our social link here. So we'll click on this Edit. And here you can instagram or your Facebook, or you can also add another social link, maybe your Pinterest. And you can change the design of this. Let's say you have 12 border or make it round like this. You know, all these many options are here so you can see which one you like most and you can do it. So this is how you can customize your contact page. Let's add some background or something here. So what we'll do is click on here and we'll click on background. And here maybe we'll add an image. I have saved an image, stock image already. So you can either do that. What you can do is you can click on search image and we'll go to free images. And maybe we'll search something like contact. And you see some images of years and we can, we can just choose anything. Okay? So this is how it will appear. But if you don't want it, just delete it. And we'll click here also, you can change the section height or the section with anything you want. You can customize it here. Okay? So yeah, this is how you can customize your contact page. You can add a contact page. You can change this layout however you want to. Maybe if you don't want only text section, you can add an image here. You can do as many customization here. In the next class, when we do add a shop or a store. 11. Adding An Online Store Page: Welcome back to the class. Now let's see how you can add a store page to your website. So let's click on this and we'll click on store. Now here you can choose any layout you want. Let's choose this one. And we'll just name it as store. Pick out. Say. First of all, I'll click on the Settings. And we'll check if everything is correct or not. If you click on Category, you can create your product's category. Let's say if you want to add art prints are stationary or different kinds of products. So you can do that by clicking on Create category. And just type in your product category name here and click on Add. Let's add another one. Stationary. Maybe. We click on it. And if we click on SEO, as I said before, their SEO title and the description is very important. That's how the search engine, we find our shop. So you have to type it in here. And in the social image, you can put a customized image for your shop or your store. Now click on Save. Now if we click on this arrow here. So now here we can click on add a product to add a new product if you want to. Or we can also click here to add a new product. And if you click on the Settings, you can add your categories and SEO everything if you've not done it while creating the store page. If we go to this old category, we will find all the products here that are already listed. So if you click on any of this product, now here it will take you to the specific product page. You can edit your product here. If you click hover over here, you can click on Edit Product or edit design. Let's click on Edit product. And you can edit a product here. If you click here, you can edit it. You can send it to the top or bottom or move it, or you can delete it. Now, let's say these are physical products and you want to add a digital download maybe. So to do that, we'll untick this and we'll click on Add product. You can click here or here, anywhere is okay. And here you can see the different types of things that you can sell. You can sell a service membership, gift card, and all these things. So we will click on digital download and it will take you to this page. Here you can give a title to the product. And here you will have to give a description. Here. If you click here, you can add any additional info, like any videos or images, and you can click on Apply. Here. And here we'll click and add some images of my products that I have already saved on my computer. Now you can add multiple images for the same product. It is better to have two to three images for a single product so that people can scroll and see how the product actually looks. For digital product, you can mock it up in different ways and add it here. Here if you click on Upload file, you can upload an actual PDF for the product here. I'll just quickly do that. So after we have uploaded our product, we can just give a price. Let's say it's $25. Here. You can keep it on sale if you want to. And let's say after, say let's 20. So if you click on Add here, we already have added some category. Now let's say this is a printable download. Will click on Add. This product will be added to this category now. And now here we can add tags to type in your tag and click Enter, and you can keep on adding more texture. And here, you can toggle the visibility to public. If you are ready to publish it. Otherwise you can keep it hidden, then it would not show it to the public. You can make it a feature product. If you want to add, you can add any related products. Also if you want to, you can add product reviews. And here below you can change the SCO and the URL. If you click on Edit here, you can give a SEO title and description, which is very important for your shop because this is how your sharp will be. It will be ranked in the search engines. Here you can give a custom URL. Let's say this is a loop, and we'll click on Apply here in social said also, you can click on edit and add an image. If you want to, and if you click on Apply. So if you click here, you can connect it to your social media accounts, which I will show you in the upcoming classes. And here you can customize your buttons and forms, which we can do later. Also. I will show you how. After you're done with this, if you hover over here, this will give you three options. Save, Publish, and she did. If you save it, you are not ready to publish it. You can save it as a draft and you can edit it and publish it later. You can publish it right away. On also, you can choose. If you click on shader, you can give it a time and a date. And it will she do to that particular time and date. So I'll just click on Publish. And here it is. We have our product published here. Now if you click Edit product here, you can again go back to that page. If you click on Edit design, it will take you to this product page where you can click on edit section and you can edit the layout of this page. Also, if you like. You can keep it in full or half. I'll just keep it in simple. You can also change the colors. You can change the aspect ratio also if you want to. The text alignment product navigation, and emits spacing and other things like gallery with. And also there are some other customization options available here. You can do that and you can also change the color of this page here if you want to. By clicking here. This is how you can change it. Now, let's click on Save. And this is how our product page will look. Now if you don't want all of these products, you can just click on it and click on Delete. Now if you go back, we'll go back here also an online store. So this is where you get even more advanced settings to customize your store page. Now here, it will show you how to set up your store. We have added the products and you have to add, wait to get paid. We can connect to PayPal. But remember this is a premium feature. You need a business or a commerce plan or about, well, this feature, you have to choose a subscription and then you can publish your store. I just wanted to do to show that it is really easy to set up a store on Squarespace. But this needs a commerce or advanced commerce plan. So here you can make other changes. Like you'll see the orders here and your inventory, whatever you have added, and your customers, and you can give discounts. You can also use this selling tools like print-on-demand or Facebook and Instagram. So here you can have other customization, like if you click on payments here, the same thing it will show here another thing, you can change the currency, your store currency, mine, it is set on USD by clicking here, you can change our choose any currency you want. And if you go on checkout page now here you can make other customization like the abandoned cart recovery. Your customers will receive emails if they have something in their cart, then you have this collect e-mail subscribers if you want to. Do you want to use shaping our tastes as a billing address by default? If you want any minimum order amount or not. So all these settings you can customize according to your convenience. If you click on additional fields. Now here you will get even more options. Now. You can also use, if you're using a dark theme, then you can use this light color scheme for your cart so that your cart will be visible to your customers. And your checkout page policies. Here you can give your written policies, you're terms of services and your privacy policy, you need not write everything here. You can just click on the link here. You can link it to the privacy policy page and you can do the same for all the others. So these are some of the customization that you can explore. But for this, you need to have a commerce or advanced commerce plan. You have to check it out what is required. So this is how you set up a stoppage. 12. Adding A Shop Page: Now, what if your dorm, they'll want to set up a store, but you have some online stores already, like some print on-demand stores which you want to link it, link on your website so that people can come on visited, which will take them directly to that shop. So for that, what we do is very good, again to pages and we'll click on this plus sign. And what I'll do is click on page layout. I like this services page. So I click this one, we click on services and you get the first one. I rename it sharp. And we'll click on the settings well, and we'll check if everything is okay. And the same tree will change the SEO title and the SEO description. And now let's edit this page. We'll click on Edit. And you can just edit everything here. So if I click on edit content, now, different types of sections are layouts, has different ways of editing, like somewhere it will show to edit the content, but somewhere only this will be there. So this is swaying because this will enable you to edit each of these images here. So if we click on edit content, now, here, you can choose this title to appear or not. Will it off? I want this button. That button. Maybe maybe we'll add a different button. I don't want it. There. I want the image and the title and the body. And here a control button so that I'll have this button here. And then we'll click on content. And we can click on each item and we'll just edit this. So let us to place it with something. You should keep your mockups of some of the images from your shop so that they can add it here. I'll just add baton of mine. And then in the title, you can click Sharpening. Let's say it's a cyclic six. In here. Give a description like that. Naked bit, elaborate. And in the buttons text, I want shop. Here. Here we'll link the shop. To click on this. We'll share what you could do web address. And here you put the URL of your shop and click on open a new window. So what it will do is when, whenever someone's click on shop here, it will take them to it will open in a new tab and they can see your shop there. So accordingly, you can just edit all of this. If you click back. If you want to add more, you can just click on Add and the list will be added. You can do that, follow the same process to edit. Now if you click on design, nowadays in simple list, you can choose banished slides so you can choose whatever you want. Just keep it simple list. You can change the alignment of the text here. You can choose to keep the content first of the media. Who can increase or decrease the columns here, and also the image size if you want to. And now we'll click outside. And now if you click here, you can give a background image to this whole page if you want to. Or else we'll just change the color and the font here. So yeah, this is how you can add your online shops to a page on your website. Now we'll click on Save. So oxide is on there. Let's say I want, I don't want to keep this tour site on my main navigation page because as we're adding the pages, you can see all of these pages are getting added here. Now, if you want to arrange the order of this, you can do that just by you click, let's say I want the home to be at the top to be up to a better The first. And then I want maybe about page and then maybe contact like that. And let's say I don't want this store pitch. So I'll just bring it to the unlinked section. Now here, our contact page was already there. You can use this for this template. Since we have made our own contact, which will just click on delete whatever page you don't want. You just delete it. Let's say you don't, your story is not yet ready. You don't want to show it to search engines night right now. What you can do it is you just click on this and you go to SEO and go to the bottom. And here, hide pages from search regions. This we can hide because we don't want to confuse the searching use. We don't want our store to show there because we have not yet made this page active. So we'll hide it from the search results and say, This is how you can make us toward page auto shop page on your website. See you in the next class where he agreed before For You page. 13. Adding A Portfolio Page: You're doing great. Now let's see how you can add a portfolio page to your portfolio website. Okay, so now let's build our portfolio page for which we are building our site. I'll be using this work page that is already provided with this template, which is perfect for your portfolio. But if you want to, you can add a different one. You can just click on the plus and click on portfolio. And it will provide you with different layouts. You can choose anything else you want. But I'll be going with this one. So first of all, let's click on the settings wheel and we'll just name it our portfolio. Navigation title also. The urate URLs. In the SCO. We need not do anything right now. So we'll just click on Save. And now we'll click on this arrow here. And here. If you click on this box, it will allow you to edit the individual portfolios. So we'll click on edit. But before that, if you click on this three dots, you can go to the settings of this page and you can change the settings here. Awesome. Let's first go to Edit. And here you can change the text. You can write something about your collection or anything, your card collection or your illustrations or whatever. And I'll just write something here. Here. You can change the text, make it bigger or smaller. And also if you click here, you can change the height and the width. Make it smaller or larger. You can give a background image also will change the color later. Now let's click on this image icon. And we will first delete all of these images by holding Shift. And we click on Delete. Here. I liked some of the images that I have already saved in my computer. And you can give a description of each of the images here. If you want. Let's quickly write something. And I'll click on Close. Now we'll click on this edit section. And here you can change the gallery type if you want to. Let's see. I make it a bit smaller. You can keep it in full, bleed, full, or insert whatever you want. And you can make the caption on so that you can see the description here. You can also increase the spacing between the images and animation. Also, you can click on light box so that anyone viewing it, if they click on the images, it will give them a full screen view. Now, what all we can change? We can change the color later so that you can do. And now let's click on Save. And let's click on this settings now. And we'll change the name here. And here you can change the image and add a different image here. I usually make my thumbnails in Canada. So if you want, you can do that. And you can make your own cover images and upload it here. Now here I change the URL Slug also. If you click on a CEO, here you can add the SEO title and the description of the particular collection or the collection of illustrations or art books. And you can click on Save. And now here the image is changed. Now, you can do for all of this accordingly. Now if you click on the image, you can just click and hold and you can place it anywhere you want. This is how you can make your collection, your portfolio. Similarly, if we click on one image, it will take you to that page. And here you can edit the individual pages. Now, let me just click on all of this and select multiple and we'll click on Delete. This is how you can create a portfolio page. I'll just quickly create two more here. Yeah, I have made two more pages here. And we click on the other two and I'll just click on date. Now to view how our pages looking. We click on this upward arrow here. And it will give us a full-page view. And if we click on this image, it will take to one collection page. And here we can scroll to the other pattern pages or the other collection pages in your portfolio. So whenever you design a page, always check how it looks on the mobile preview. So click on here and click how it looks on the mobile. Those Squarespace does a very good job in customizing everything for the mobile view. But still just check it if it is looking good on mobile or not. Yeah, I didn't change the cover image of that. You can do it while you're doing yours. This is how you can make your portfolio. Now let's meet in the next class and we're going to refine our portfolio page. 14. Refining The Portfolio Page: So now let's refine our portfolio page a bit more. Let's say you make are different kinds of art like you make hand painted watercolor drawings, but you also make patterns. You also make digital illustrations, and you want to keep all those separate. You don't want to include it M1 page. So to do that, first of all, let's clear create a folder and we'll click on this plus. And when you click on a folder, name it as my artworks, you can name it anything you want to. First of all, let's drag our portfolio page into this folder. So whenever you make this folder, you can drag multiple pages into that folder and I'll show you what happens if you do that. So very click this portfolio inside the folder. Let's create another page, and let's click on pages layout. Maybe you can choose a gallery page. And let's choose this one. And we'll name it and paint it. Okay, Now we'll bring this inside this folder to see how this is getting connected inside this folder. And now let's add another page. You can click here to add a page. And we'll go and they just lay out again and click on gallery. And we'll choose this one again. And we'll name it illustrations, maybe digital illustrations. And now let's click on this setting screen. And we'll just see if everything is okay or not. And we'll pick on Save. So now when we click on this arrow and hover over this one, it will show you these folders, drop-down menu of your folders. So you can click on any one and you can go to that page. And it will click on digital illustrations. It will take you to that page. So this becomes very convenient if you have different types of categories, artwork you're making. So you can do this. Now let's bring it to just below. Maybe. And click on this hand painted art. Here you can change your SEO and the descriptions and the title. And you can do the same for digital illustrations. So let's click on the hand painted art and we'll just edit this page first. I'll click on Edit. Write something about your art. Click on this image. Icon, will delete all the images first. We add some images. Now, I don't have any watercolor or handmade images right now saved. So I'll just search from Unsplash. So I'll just add some of these images. You will obviously add your own images, but for this class, I'll be adding some free stock images here. And again, you can click on this edit section and you can change this gallery type. The columns, layout, the spacing, and animation, and the lightbox. Now, I would suggest if you are adding animation to your pages, didn't try to keep it consistent in all your pages. I mean, don't keep it on fading on one page and then scaling on the other. Just keep it consistent so that it will look more a good cohesive. So yeah, this is how you can do it. And let's just click on save. And similarly, we'll add some digital illustrations. And so I just quickly add and get back to you. So yeah, I have added some images and I'll just quickly edit this section. So you can edit this text section. In the similar way like we edited everything before. You can change the section height, section birth, and the alignments. You can give a background image also, if you want to say at this is how you can set up your full portfolio page. Now, if we go on a full page view and if I click on, I mean I hover my mouse over my artworks. I can click on portfolio. Then here I can click on any single collection and I can browse. This. I can see a hand painted art is looking good. And also digital illustrations. If ever you see your page is not loading, then just reload it, refresh it here. Because sometimes it happens because when we add more and more images, it sometimes happens. It's maybe the next class. We'll see how to add a blog page. 15. Adding A Blog Page: Welcome to the class blog page. Okay, so now let's add a blog page. Now. A blog already provided with this template. But if you want to create your own, you can just click on this plus sign. And you can click on blog. And it will give you some layouts. You can choose whichever you like the most and precipitate. But I'll just go with this. So first of all, I click on the Settings and I just keep it as a block. Then the acyl give a proper title and description. Social limits you can choose now or not. You can make some other changes like Manage Categories and all. But since we don't have any anything yet, so I'll just close it. So now if I click on Block, I get this page here. And here. To add a new block, you can just click on this plus and you can customize it. So first of all, let me just show you whatever is there already. So I'll just click on this and click on Delete. So by mistake, if you ever delete a post, then it will be stored in the recycling bin. So first of all, let's click here and let's go to the settings. And here you can edit the image. So let's remove it and add a image by clicking. I'll just add something. Here. You can give us small, like one to two sentences about describing about your blog. And here's the author name you can give the source URL also here and go to option. Here the status is published. But you can keep it as draft or needs review so that you can come back later and filter it by these options. And you can do the editing articles she really for a particular date or time. So you can do that also. Another thing in options. If you go to tags, we can add your tags here. Let's see. Let's add something. And if you keep on pressing Enter, it will allow you to add many taxa. And then we'll click on back. You can add a category two. It also, you can allow the comments or not. If you want to. You can make it a feature post. If you were to SEO Jia, you can give a title to your block. And here we can give a description like we have been doing for all the other SRA. Just so you can do it similarly here. For the social image, you can choose to add different image also if you want to. And you can either location and click on Save. So now you see it is showing since I had clicked on here, if you click here, you can filter it by. Maybe you can see how many posts are there too that are already she don't have a need to publish. So similarly, you can do that. Now, if you click on this box, it will take you to this blog page. Now here, if you click on edit, first of all, it will allow you to edit this section. Here you can change the text alignment to center or left. And you can choose the content width to be narrow or medium or white. Or you can manually change it by dragging this one. You can change the Meta position, means this date or whatever it is here. Here you have given maybe the author name or something so you can choose to have it below. Here. They can show category. It will show the category, and it will show the date. Let's click on Show author name. So addition, the author name. Now, the auto profile to auto profile is if, if you remember, while we registered with Squarespace, you have to go to account settings and give a profile picture and everything. So if you have done that, then it will show at the bottom and some other styling options and also there which you can explore colors you can change for this page. If you want to. Now select this, you can give the title of your blog here. And here you can change the image. So if I click here, you can add a image. If you have already saved in your system and we'll just ask something. And the caption here you can change if you want to have the caption below. You don't want to overload the caption. If you click on Design, you can change it to 4x2 lane or other options. Here you can see we can flip it on lightbox and other things you can do if you want. You can also link an image to a different page or web address. So yeah, this is how you will add image. And here you can give a description. Here you can write about your blog if you can just click and select everything, delete it, and write about your blog post. So this is how you can add a blog post. And you can, if you want, you can click on this plus and you can add a text section or image or anything else you wanted to. Now we'll just click on Save. And here you can see your blog post. And while you're on this page, if you click on Edit, you can also edit this page too. So if you click on the edit section, it will give you how you want to have your layout. So there are many options. You can just diode which on which one you like the most. And just keep it in basic grid. And you can also choose to add more columns if you want to. And the horizontal spacing and the vertical spacing. And here you can click to show you except so that whatever small description you have given it will show here. You can change the text alignment here also. This is how you can edit your blog page two, and you can change the color. Also. See in the next class, which is going to be fun because it is all about. 16. Changing The Fonts And Colours: Welcome back. Now let's see how we can change the colors and fonts about website. So now that we have added all of our pages that we wanted to. So now let's change the color and the font of our site. So we'll click back here and go to Design. And we will click on site stays. Here is where you can change the fonts, colors, animation, spacing buttons, image blocks. So let me just click here. And we'll click on fonts. Here there are many font packs. So if you click on the font here, you can choose from the pairings that Squarespace has already provided. Their sensory serif and also mixed. Let's choose something. So sometimes it happens, you won't be able to see this, but you can click on Save and then you'll be able to see. This is looking, okay, but I want something else. Let's click on font again, and we will click on font here. And it's go with this one. So for the sake of this class, Let's go with this. So you can also change these individual headings and paragraphs here you can manually change everything, but I just go with the default. But if you want, you can change it. You can change your buttons, also. The button text and everything. You can change it. If you click on Assign styles, you can assign it. If you want a heading on your site title. Obviously we want a heading. We're on the mobile site that how do you want it? But for this also, I usually go with the default, but you can change it to and we'll just go back. And another thing, if you click on fonts, you can add your own font, but it will request some coding, which I won't be showing in this class. But if you want to, you can, if you want to change, use a different font or you want to change this font here, you can do that. Also. Click on these headings, and you click on this family here. And here you can browse all fonts. You can search for the font if you want to. Rl, so you can just browse from here. You can choose any font you want. If you click on, let's go back and now you click on paragraph. Remember to have one kind of font for headings and one kind of font for your paragraphs. If you're not sure with the font pairings, I would suggest you to go with the Squarespace, defer default things that they have already provided. But otherwise, you can also search from all the fonts here. And you can choose any anything you want. So now let's click on Colors. And here, if you click on Edit palette, you can add your own brand colors here. So this is how you can add, click on one color and you can just choose the HSL or click on hex. And you can change the hex code here if you want to just type in the hex code here and you can save your brand colors here. Also, squarespace has some default color pairings. So you can choose that if you want to. For this class, I'll be using these themes here. Let's just go with this color. To keep it simple, either go with these palettes provided here, or you can just click here and save your brand colors here and you can use it for every page. Now this is getting applied for all the pages, so you need not individually click on every page and edit it. But if you want to, you can do that too. I'll show you how this shows your theme style. If I click on this, you can change all of this. The sake titled colors. All of these colors are customizable and you can change everything you want here. You can do that if you want to. Now, we'll click on back. And we'll click on animation. And as I said, keep a single kind of animation for Altair, all of your pages. And you can do that here also. Let's click on Scale. And you can have it at slow, medium or fast. Then if you click on spacing, this also you can change for the whole site the buttons. So you can change the text of the button. And there are different kinds of buttons also like secondary, primary, and tertiary. You can do all kinds of customization here. And it will apply to all the buttons. Site weight. Similarly with the image block, if you want, you can change all of this. Now, this is a collage style. I think you can just change it if you want to hear. This is how you can apply these changes to all the pages of your site. I feel close here and we'll click on Save. So all of your pages at a building. And now if you want to change a particular page, you can click on that page. And you can click on edit section, and you can go to Colors. And here you can also change the colors and the pitch style of that particular page if you want. This is how you can add colors and fonts to your website. Now that we're done with the colors and the fonts, now let's see how we can edit the header and add a logo. 17. Editing The Header-Adding A Logo: Let's see how we're going to add a logo to a website and also edit the header. So now that we have added some colors to our website. So now let's edit headed. So we'll click on Edit. It's okay if you're on any of these pages. So we'll click on Edit and here you see Edit Site header. Click on it, and it'll give all these options. Now for the site, title and logo. Click on it. And if you don't want to have a logo, you can just have your site title, which is your business name or your name. If you want to add a logo, you just pick hips here and upload a file. I've already saved a logo for this class that I have made in Canva. But if you are well acquainted with Illustrator, you can do one in Illustrator. I have uploaded the logo here. Now here you can increase or decrease the logo height. So I want my logo to be bigger, that people can see it and Mobile also. Now, let me just increase the mobile height and then later and just check. Otherwise if you want, you can add a separate logo for mobile view angles. But let's see how it does here. We'll click on back. If you click on elements, these are whatever elements or icon status showing on the, on your header. So that is that if you keep it off, it will not show here and it's better to have it. And if you click on Edit, you can add other social media accounts. I like Pinterest or TikTok or whatever you want. So you just click on here and you give a link to your Instagram profile. And you click on Save and connect your Instagram and Facebook and other social media to this icon. This one also, you can decrease or increase if you want to. If I increase the social icon size, the size is going to increase. If you're having a store page, you can click on this cart and the cart will show here. And this cart icon size also you can increase a bit if you want to. And if you click on the buttons, if you want to have a button on your header to link it to somewhere else, you can have it here. But I'll just keep it off. Let's go back. And if you click on style, here, it will show you different logo styles and your navigation state. Let's see, it is in dynamic. Now, let's change to pink. And according to the thing, the colors might change. Struggle with this. And you can keep a border. If you click on the border here, a border will appear. And if you don't want it, you can choose to turn it off. Or if you want it, you can also increase the thickness here. And also you can change the position. Maybe you want just one line below it. So you can do that. And we click on back. And now you can have, you can choose to have it as a fixed position. And here you can change the staying ahead ST. Now click here to see how it is visible on a tech stock and on a mobile device. Header layout. If you click on this, there are different layouts. Like if you want to have your logo in the middle, then you can have it like this, or you can have it like this also if you want to. You can keep it in insert or you can decrease the vertical padding or increase it. And also the element spacing, you can increase or decrease. And here the link spacing also, you can pinch and all this navigation you can do here. And also check on the mobile how you logo is visible. So to me it is appearing good enough so I'll just go with it. If you want to. You can. Additionally added different logo for your mobile also. Here also you can change the mobile navigation style. The local setting. You can have a different setting for both mobile and desktop. This is the menu icon. And you can make the thickness small, medium, or large. And this is how you can customize your header. Let's say we are in this team. So we can change the color of our header also if we want to. So you can do that here. And here. Let's say you are on this team. And if I click on this Edit option, here, you see header. Now the navigation links are black. You can change the color to blue if you want to. So that you can do. Any of these teams is customizable. You can just click on the Edit option and you can change anything you want. Starting from buttons, images, everything. A lot of settings are here. So you can customize it according to yourself. So we can come back. And yes, this is how you customize your head. And let's meet in the next class and they will editor. 18. Editing The Footer: Welcome to the class. Let's see how we are going to edit the footprint. Okay, so now let's edit our footer. So we'll just click on edit and we'll go to the bottom. And here you will see Edit footer. So click on this. So let's see what all we can do here. If you click on Edit section. Here, you can change the section height. You can click here and you can change it manually if you want to. You can change the width of it. There'll be small, medium or large. And the alignment, if you click on the background, you can add an image to the background if you want to. If you go on colors, like we had done with the header, you can change the footer rows. And here also you can click on this and you can change the legacy here There's header. And if you scroll down to the links here, depending on what kind of section it is. Let's say this is a text link here below the menu option here. We can come here and we can change the color if you want. You can change the icons. If you want to. All you can do it here sitewide. Also. Then you can customize everything here. And if you go back and close this and really to connect it again. So this one, if you don't one to have this, you can choose to remove it and then click on this. And here you can take on the design and you can change how it appears. And you can add more links also by clicking here. And you can add another link here. Now here it will show you how you can. If you don't want it, you can choose to remove it here. Or else you can just add another link if you want. If anything else you want to add here, you can just maybe click on. Maybe you want to use later. So click on this plus and then you can click on newsletter block, and it will appear here. And this one also you can customize however you want to use. You can change the design here. If you want it in stack or float. Now, we'll just click on Save. And now this is how our footer is, and this is how our header. Now if you click on the mobile view, Let's see how it is in the movie. This is how it will appear in the mobile. Okay, so now that we've added our food, now let me show you how you can add a cookie batch yet, which is good gdpr lot. So we'll go back and we'll click on Settings. And we will click on cookies and visitor data. Here we'll click on this cookie banner. Now, here you can keep it in octane or opt-in and opt-out. You can make it a pop-up, but if you want to and you can keep it as a bottle. So and also you can first of all save it and then you can customize it even more. You can keep the cookies but on the top. But I prefer to keep it at the bottom. You can have it as light or dark. What do we want to? And you can have a button for the call to action, this accept and decline button. And you can also customize this if you want to. This is the grid. And you need to have this. And now we'll click on Save. So yeah, this is how you can add a cookies manner to the bottom on your website. Now let's meet in the next class where I will show you how you can add an Instagram connect to your website. 19. Adding Instagram Connect: So now let's see how we can add our Instagram page to our homepage. So to do that, go to Settings. And here we will go to connected accounts. And we click on Connect account. Then we click on Instagram. So if you already have your Instagram logged in here, then you can easily do that. Otherwise, just let me just quickly login. You click on Allow and shear. We can click on Save. So now what we'll do is we'll click on Add to Chrome here. We can click Consortium. Here. You will see this, you know, layouts for how to share the art of social media. So let me just choose one of them. Took this one. Now we'll click on Edit section and change all the settings here. Let's make it smaller. And click on this. Edit here, and click on connected account, and you click on this. Now your Instagram profile will display here. So here if you click, you can increase the items you want to show here. Or you can decrease it. You want to click on Design. And here you can change the aspect, but I would suggest to have it in Scratch and we see the Instagram feed in squares. And here you can do some more settings like again, increase the thumbnail size and all. We can decrease or increase the padding between them. If you want to. If you click on a light box, then click on the images, they will go to instagram page if, if they want. We click Okay, now let's see what more we can design. If we click on open links in new window. So it will open in a different window so that you can do, you can change how it is showing you. I mean, if you want it to be a slave to our grid, I stacked whatever you want to sign to skip it and grid dishes how you can do it. Now we just click on Save. And now school on the homepage, we can see the Instagram connect feature. Now you can change this one also. Just go back to it. And if you click here, you can change this fixed or if you want to. This is how you can collect her Instagram account on your website. Maybe in the next class we'll show you how you can make an icon. 20. Making And Adding A Favicon: Welcome to the class. Let's see how we're going to make an add a browser. Now let me tell you how you can add a browser icon. You'll see this icon here, the cube here. We can change it to whatever we want to have there. So let's see how we can do that. We will go to Design and we will click on Resnick. Here, we can add a fabric on. First of all, let me tell you how we can do that. So I just opened a new GUI page and I will search for fabric on generator for website. Here you will have many of these options. So you can just go with anyone you want. Let's just click on the first one here. So you can add a PNG image here and make it a browser icon or a text, which is the easiest way. Here you can just click on this. And now here you can write whatever text you want to change all the settings here. And in a few minutes, you can have your browser icon, which will look something like this if you want. But if you want to have an image like I have for my website also, I have this small flower icon. So you can do that. Let me show you how you can do that. Now, if you click on the PNG here, we can drag and drop a PNG image. Now, I usually have my image in a bigger size, like 2 thousand by 2 thousand pixels or 2500 by 2500 pixels. I'll just upload the PNG, that dimension and we can have it. I would suggest to have a rounded or a square image. Most of the sites you'll see there'll be having this round or square image. So just drag and drop something here. And I have this icon and I'll now click on Download. You'll get a zip file. And you have to extract the zip file first. Now we will go back to our backend of our website. And here we will click on Add family car. And I just use from the folder here. Now let's see this 192192 to five. How it looks. Now, just click on Save. Immediately. The polygon doesn't get updated. You can refresh it, refresh your page a few times. But even if it doesn't get updated after that, then what you can do is you can just clear your browsing data or you can refer to Squarespace help center. They have articles about how you can do that. And you can log out and log in again, and it will appear. So let me just quickly do that. And now you can see the browser icon has been updated here. So this is how you can add your own image or text Azur thousand. Now let's meet in the next class where I will show you how you can add a password protected page to your website. 21. Making A Password Protected Page: Welcome back. Now, let's see how we are going to add a password protected page two of x. So let's say if you want to make some portion of your portfolio password protected. So to do that, let's first duplicate a page. I'll just duplicate this homepage and we will click on the Settings page. Here, we will click on Duplicate page. Click on Confirm. So this will give us another page. So we will limit password protected and made sure to keep it in the not linked section. Because we don't want it to be visible in on main navigation. We'll click on this six settings wheel again. And we will go to SEO. And here we will hide it from the search results because you don't want to search engine. So we will conduct searches and we will click on Save. Now, click on Edit. And here you can delete all these images and you can add. Those patterns are artworks that you want to have to be password protected, that you don't want to display and keep it secret. For someone who has the password, they can just login and they can do this page. So you can just do that. I'm not going to do it now. So after doing that, click on Save, and now again, go to the settings. And here we will give a password. So you have to remember the password, whatever password you giving. So let's just give a password. And we'll click on Save. Now you see this lock icon appearing. That means that now this page is password protected. Now another thing you can do is you have to provide a link to your audience to reach to. Otherwise, how would they know that you have this page password protected? So to do that, maybe somewhere on the homepage or maybe let's say on the Portfolio page. We'll just click on edit here. And maybe we can add a section. You can add something like a text, like some texts with a button. Let's edit text here. Let's add this one. You can write something and make it a bit smaller. And then here you can click again and you can add a button. He has, you can write the request for password or something. Then you can. What you can do is you can click here and link it to your contact page or your email. If you're linking it to the contact page. And people can go there and they can meet you. And from there you can send them a password for viewing this speech. You can do that if we want. We click on Save. And now whenever anyone clicks here, it will take them to the contact page. So first of all, we'll click on Done. One more thing you can do is on the contact page. What you can do is you can attach like I had. So do in the where we had added the contact page, how to add this form. So here you can edit the form fields. And if anything else you want to add to it, anymore details you want from them. You can do that. You can attach it like that. Now when anyone visits the portfolio page, they'll also get this option to view your full portfolio. So they get a request for password here. And if I click here, it will take them to your contact page. Here and here they can click and do best for the password. Now, let's customize this password protected page, where people will type in the password. So there is a way to customize that page also. So to do that, we'll go to Design and here we will click on lock screen. Here what you can do is you can change the layout if you want to. And there are different layouts here. You can choose this or this may be. Then you can click on Save, Kia. And in the branding and text, you can change all this text here. If you want to. You can give your logo here, or you can just type in your name. And here you can write something like x is my portfolio here. And in the body you can write something. Also if you want. You can click on this to display the lock. Then you can click on Save. Again. If you go back here, you can add any images if you want to. Then again, if you go to stay here, you can change the color of the background since I've already put an image here. So I love to do that. You can give a border to the page if you want to. Now here you can change this lock saying if you want to make it bigger, you can change the color of the lock also. You can change the shape of the lung and the password text and all. You can change it to a rectangle. You can change the font if you want to list things, you can change here. And you can change the color and the text. Now again, click on Save. And now remember if you decide to do this and people are asking for the password for the page, then you have to give the link of your password protected page. So to do that, go to pages. And if you go to password protected page here, you click on this circle. And here you have to give them this URL Slug alone with your domain name is www.example.com slash URL Slug password protected. You have to give them this link so that they can click on this link and they'll come back. They'll be directed to this page that we just customized. Lead. They can just type in the password and they will be able to view your full portfolio page here. This is how you can add a password protected page. Let's meet in the next class where I will show you how you can make a custom 404 page for your website. 22. Making A Custom 404 Page: Welcome back to the class. Let's see how we can make a custom 404 page. Let's save some, any offer link is by chance it is broken. So people shouldn't be left stranded in an error page. I mean, even if it is an era or the link is broken, you should provide them some link so that they can come back to some other page. Or maybe they can search for something else if they wanted. So they should be able to do that. So first of all, let's create, in the not linked section, let's click on this plus. And we will theater blank page. And we will name it 404. So here we'll click on Edit, and here we can click on Add section. And maybe I love, Let's add this here and we'll pick on this, and we will click on Background. Now let's delete this and let's search for images and add something. Let's change this. Grade something. Let's just delete this button here. And I don't want this here. And then I'll just add some more text here, maybe. Here you can redirect them to your homepage. Let's say all your portfolio page. Maybe. Let's write something here. So we can change the color of the text also if you want to. And let's change the color here also. And click and select under text here, and click on this link symbol. Here. We can click here and go to page here, select your homepage and click Save. Now if anyone clicks here, they will be able to go back to your homepage. And you can even make it a little bit more pretty if you want to. Let's say, let's make it larger. And you can add some other image also here if you want. The idea is to direct people to correct page if they ever faces. So they shouldn't click out from your website immediately. Now click on save, and now you can just click on the Settings and go to SCO and hide it from the search results. We don't want it in a socialism, so we will click on Save again. This is how you can make a custom 404 page. Now to check the links, if it is working or not, we'll just click here. And this is taking this back to our homepage. 23. Let's Talk About SEO: Welcome back. Now let's talk about search engine optimization. So let's talk about SEO, and that is search engine optimization. Now I know it may sound a bit technical and scary, but it is not. You need to know about search engine optimization because that is how you will improve the visibility of your site. And that is how your site will rank on search engines like Google. First of all, Squarespace has a very good SEO checklist that you can follow. If you go to marketing and click on a CEO. Here you will find the SEO checklist. So here they have provided what you should do before publishing and what you should do after publishing. And also as your site evolves. I have already covered some of this in the classes. Like how you can add a site title, how you can add SEO descriptions. I will tell you about how you can add site description in the next class. And you also know how to add the Titles and how to add a browser icon and choose shell saving images, create a custom photo for page. I've covered all of this. Then other things like how you can connect the custom domain that I have also shown you. How to connect to social media. I will show you how you can ensure SSL is enabled. You should also check your URL slag that I've also shown you how you can do it. And choose your blog post URL format, how you can add your location, and how to publish your location online. So I have already shown some of this in my lessons. I will show you in the next lesson. So just go through this list and see if you have done all of this. This is a great way of optimizing for the search engines. You have to go through this. Then they also have the content best practices. What kind of images as required, what kind of how to write the text, content and your pages and collections, everything. So just go to this list and this is really helpful. The next class will meet and I will show you some of the ways that you can use to optimize your site even more. 24. Optimize Your Website: So now let's see how we can optimize our site. So first of all, let's go to marketing and it's cool to SEO. And here is where you can give a site description and give a proper description of the site. This will help your site visibility. Give you a description and describe it with relevant keywords. Like, let's say if you're an illustrator, write something about it. Just a description. Like they have written here. It should be within 50 to 300 characters. Then the next step is go back and now click on Settings. Now here click on connected accounts and click on Connect account. Now you will see a Search Console, google Search Console. So Connected site, Google Search Console, sign-in with email that you have used and just quickly sign in here. So after you have signed in, it will ask you to make sure you trust Squarespace and elitist search console. And you will have to click on Allow. And then this pop-up will appear where it is written that Google Search Console is connected and it may take up to 72 hours to index your data. Remember one thing that here. If you go back to this page, if you go to Analytics. Now here, many things are there, but some of these are premium feature. So let's say like a sales type products in the commerce section, as you can see, this is a premium features. So some of these will be visible and some of these will not be visible. If you don't have a commerce basic auto commerce advanced plan. So you have to see which is visible and which is not. Then Let's confirm that if SSL is secured or not. So to do that, we'll go to Settings and we will go to Advanced. And SSL is active. So we'll click on that and make sure it is ticked on this. Secure. And we are good. Now also I have shown you how you can optimize each of these pages. So if you go to pages and click on the Settings and go to here, you can give an SEO title and a description. Like I have told in all the lessons that is important. And this is how you can optimize each of your pages. Then also acts on how you can add a site title, keyword. So if you go to edit on any of the page, you can click on Edit Site header. Here if you go to site, they learned Logo. Here you can write or give a description. So I have only written my name, but I would say to write something more, like let's say something about what you do. And also you can include your place. Something like this. Like for my side, if someone types in the URL of my site, you'll see how it is retained surface pattern designer, artist. So this is how I have optimized it. You can do it by giving site title here. You can also include your place. Now we can click on Save. Next is if you have a lots of pages in the not linked section and you don't need some of this or any of these pages that you are not using it. Then just click on this and we will toggle off page. You can also do that. If you go to SEO, you can also hide it from the search results. So any of these two things you can do either disable it completely or you can hide it from the search results. Next is you should optimize your images. And let's go to this About page first of all, give some alt texts to all your images. Let's click on Edit. And if you click on the image, here is where you can add some alt text. And you can also include a few keywords if you want. And always make sure that you are uploading compressed JPEG images. I usually, if it is a small image like a screenshot, I keep it at maximum 500 pixels within tend to 200 KB. And if it is a medium image and it is a square, then you can have it at a thousand by thousand pixel. Or if it is a rectangle, you can have it a thousand by 51500 pixels you to create within a 100 to 400 KB. If it is a large banner, then you can have it at maximum 2 thousand to 2500 pixels, but it should be less than 500 keeping. So keep in mind all of the specifications. Otherwise what happens is the loading of your pages affected. The page will not load properly. So that is not good for your site. In this next, as I have told you that you have to rename your images before uploading. So rename it with proper keyword, relevant description. And I have told you how we can make a food 0 for page already. So this is also important for you as CEO. So these are some of the few things that they can do. And for more information, you can always follow Squarespace SEO checklist and see if you need to do anymore optimization of their site. 25. Publish Your Website: Welcome back to the class. You did it. Now, it is finally time to publish your website. So now you should be proud of yourself that you have built your website completely and now it's time to publish your website. So let's do that. So before publishing, you can buy your domain here by going to settings and then click on domain. And here you can get a domain. If you click your name, it will show you the availability of all the domains. And you can click on one and decode byte here. Otherwise, you can just use your own domain that you have already purchased. And we will go to Settings. And here we will click on Site availability. And here we click on Upgrade to publish. Now ILP not doing that since I have to pay for this. But when you do this, you'll be prompted to select a plan. And you can choose a plan according to your convenience. And then it is pretty self-explanatory. Squarespace will prompt you to how you can do that. You can just do the payment and review it and then you'll be able to publish it. I hope this step-by-step method was easy enough for you that you were able to create a website. In the next class, I will tell you all about how you can get support and help from Squarespace. Now the hard part is done. We will meet in the next class where we will learn all about Squarespace support and help. 26. Squarespace Support: If you ever faced any issues while building your website, or even after that, then squarespace has a very good Help Center. You can access that by clicking on this help. And here you will get the knowledge base where they will provide many articles. You can read. Our, they'll have a video workshop for you. And they have webinars, or you can hire an expert if you want to. Many of these things are here. So you can do that by going to the knowledge base. Here. They'll provide many articles that you can have a look and find out if your problem is solved or not. And if you click on this question mark. Now here you can check with them also. And this is the support assistant. You can do that if you want to. There are many things. There is a forum also very can ask your question and you'll get two answers. And you can do that. There is a nice robust health system that within Squarespace. So you can access that. 27. What To Do Next: Welcome to the class. Now let's see how we can connect our website to Google Analytics and Google Tag Manager. So now that you have a blister website, the most important next step is to connect your website, your Google Analytics using Google Tag Manager so that you can track all your data and statistics of your website, which will be helpful for the search engine optimisation and marketing aspect. If you're a complete beginner, then it may seem a bit confusing even if I showed you how to do this. So I have provided you a full guide with step-by-step description. Starting from setting up a new account, you're connecting your account in Google Analytics. You will find this guide in the projects and resources section. So do not forget to download it. 28. BONUS2-Landing Page For Instagram: Welcome back to the class. Now this is a bonus lesson where I will show you how you can make a link in bio landing page, but it's different. So in this lesson I will show you how you can create a link in bio landing page. For instance. Usually we do it using link tree, but you can do it using your own website also. So let's start how we can do that. And let's go to Pages. And here in the not linked section, you click on this plus. And let's add a blank page here and we will just name it. Now we will go to the settings wheel and we will go to SEO, and we will hide it from the search results. Click on Save. Now. Now on this page we will click on Edit. And here we'll start adding some text and some buttons. So first of all, I want to add some text. So let's see. You can write anything. Let's write welcome. Select it, and change the color of this. Now here we will just keep on adding buttons. So let's say this is your link to your shop maybe. So you write shop and you will click here and give you a URL of your shop and click on Save. Similarly add another button. And we will just write, let's say it's Pinterest. And similarly, you go here and click on web address, and you can give the Pinterest URL here. And let's add another button. Maybe lead to you having some freebie or your newsletter. So you can do that. And here, same deal, just click here, click on web address, and you give the URL here. And maybe just direct them to a page where you have your freebie, your newsletter, whatever you want. And then let's add another button. And let's write contact. And you can link this page, this button to your contact page on your website and click on Save. So now let's give a good background. Maybe you can add some of your image if you want to. Add an image and I have already saved something. Yes, something like that. This is looking good. So we can click on Save. Now what we need to do is you just need to click here and copy this URL. Slug, maybe name it something different, like links or something. Or click here. Something like that. And you can click on Save now. And now what you have to do is if you just click on this page here and you have to copy this URL Slug from here. That means www dot your website.com slash links. And copy this URL and then you have to paste it on your Instagram bio bed. You have to provide a link, so pasted there, and that's it. Anyone clicking on that link will land on this page. And there'll be able to click on all of these buttons and go to the respective pages. So let's see how it looks on a mobile. So here this is how it looks on a mobile and it is looking quite good. So this is how it will look on your Instagram page. So this was for your bonus lesson. I hope this was helpful. 29. Final Thoughts: Thank you for taking this class. I'm so glad that you decided to take the first step of getting started. I hope this class was helpful to you and it made that overwhelming task of building a website very easy. Now that you have created a website, I would suggest to work on optimizing, defining a website slowly so that you can attract your ideal audience. I wouldn't encourage you to upload your projects to the projects and resources section so that we can all help each other improve our work. Also, delivery if you can, because that would be helpful to both me and other students who wants to take this class. I really appreciate it. You can follow me on Skillshare and on Instagram at color by manmade. And also you can access my freebie by signing up to my newsletter. See you in the next class.