Build a Portfolio Website With Squarespace

1. Intro: Hey, I'm Maya Favor and am a surface pattern designer from Stockholm, Sweden. This is a class for creatives who wants to make a simple portfolio website. Your website is the base of your marketing online, and to have a nice-looking, functional website to present your work is a must nowadays. To create a website can feel like a huge task, but I'm here to show you that it doesn't need to be like that. You don't need to spend months on creating a website, you can actually take just a few days once you get the hang of it. In this class, we will use Square space as a platform to build a simple portfolio website. It will be based out of a template, but I will show you how you can tweak and personalize a template if you wish to do so. You don't need to sign up for a paying plan of Square Space to take this class as you will get 14 days trial when you Sign Up, which is plenty of time to follow the class and try Square space as a platform before you decide to start paying for the service. This is a class for you who wants to learn how to create a simple portfolio website. You don't need to be tech savvy we won't use any coding. You can be a complete beginner and you don't need any previous experience in creating websites to take this class. 2. What You'll Learn: Before we start with the practical parts of this class, I just want to take a moment to talk about what you will learn in this class, and what you won't learn. In this class, you will learn how to create a simple portfolio website in Squarespace. I will teach you the steps you need to take, to create your website. But I won't show you everything about Squarespace. This is a class for beginners, and therefore, I will keep everything really simple, so that you will be able to follow along, without any previous knowledge about creating Websites. If you want to know more advanced features, and functions within Squarespace, they have an excellent help center with everything from articles, webinars, and even customer support, via chat, and e-mail that is free of charge. I am not a Squarespace support center, and can therefore not answer all of your questions about Squarespace. I'm here to show you how you can build a simple portfolio website, without coding based on a template in Squarespace. I will show you a bit about how you can tweak, and personalize your template. But I want to mention that even if you feel that you need to take on many hats in your creative business, you don't need to be a web designer, to create a very simple portfolio website. It's okay to create the website straight off a template without tweaking it. The purpose of your website is to show what you create, your art photography, or the craft that you're making. The website is not made to show off your web designing skills. With that said, I think that is important to have a professional looking website, that reflects you and your business. That's why I choose square space as a platform to create my websites. You get a professional looking website, with everything included in one invoice. That's why I feel that Squarespace is such a great tool. It's easy to understand, everything is included, and you will get everything you need within one platform. We will create a simple portfolio website with just a few pages. We won't however, create a web shop and a news letter subscriptions, or go further in this class, then the basic pages that you need on a portfolio website. We won't do any coding, or advanced features in Squarespace. This is a class on how to create a portfolio website in a quick, and easy way. It's not an advanced web design tests. One thing that seems common, when creatives are about to create websites, is overthinking it. Maybe you plan for months, and how your website is supposed to look and somehow, you just never seem to make it all happen. Well, I'm here to tell you that it doesn't need to be like that. I actually urge you to create a very simple portfolio website, in a quick process, publish it, and then you can tweak it, and make changes further down the road. With personal portfolio websites, I feel that you need to try it out before you know what works. Don't try to create a really complex website at first. Go for a simple one, like the one I will teach you how to create in this class. With time, you can make your website more personal, and more complex if you wish. 3. Your Project: Your project in this class is to create your own portfolio website in Squarespace. You can share a link to your published sites, if you publish your site when you're taking this class, or you can take a few screenshots at your trial website and share as JPEG. 4. Make a Plan: So let's start with making a quick plan of what to include on your website. When a web designer works with a website, they make wire-frames and design the whole side of line before they start to build it. We won't work like that in this class because we have pre-made templates, that will make it all so much easier and save a whole lot of time. So what will we plan out in this lesson? We will plan the content. So let's just have a quick look at my website and my content, so that we have something to compare with. I have a bunch of content on my website nowadays, as I work with many branches in my business but the first website that I created was more like the simple portfolio website that we will create in this class, then I've added content to my website during the years as my business expanded. So for a simple portfolio website that we will create in this class, I think that you should have a homepage, which is the starting page of your site. You definitely should have some portfolio page, this can be a start page or it can be a separate page with your portfolio. You should have an about page and a contact page. It's really just three or four pages in total that you need on your site. In this class, we will also add a blog to your website, as I'm guessing that many of you want to have somewhere on your website, where you can publish like newsworthy content. To be able to create these pages, you need text and images. First, take a while to think about who the visitors of your site will be. Will it be, for example, possible clients? You should always aim your content to your target group, so make sure that the text you write and the images that you use matches what your target group are interested in. Any other secret is that I've never made a huge plan before I started to build my websites. I like to work more intuitive and I write the text and add images as I create a site. I figure out what suits a certain page and write a text and add images that matches that. If you do want to plan a bit more than me, you can just write a simple text document with headlines over different pages and write the text that you want to include on those pages. You can gather images that you want to use on your site, you might not know at this moment in which size you need the images in but you can just gather images in a folder and tweak them later on. One important thing to mention is that your images should be in RGB color mode to be viewed correctly online. To learn more about color modes, you can check out my other classes on skillshare, prepare your files for print and learn how to change your files to RGB color mode. For this simple portfolio website, you need some images of your artwork and I would suggest that you have a portrait photo of yourself to add to your website and if you do have a logo, I would prepare a PNG logo file to add to your website. If you don't have a logo yet, no worries, you can always write out your name or your brand name as a site title on your website. That's actually all that you need to plan to start with this class and to start to build your simple portfolio website. 5. Get Started With Squarespace: Let's get started with Squarespace. Go to Squarespace.com and we will eventually get started with a site with a free trial. But first, let's take a look at other features that are included in Squarespace. If you scroll all the way down, you can go to feature list under products. Here you can read all about what is included and what the Squarespace platform can do for you. I won't mention all of these for you. You can read about it yourself. But basically why I use Squarespace is because everything is included. Everything from web hosting to great quality of your website. You can have a shop, you can have an e-mail connected with Gmail. There's no coding needed. There's responsive design, which means that your website will work on all sorts of devices. They offer very easy drag-and-drop editing tool to create your sites. Basically it would just give you a really high-quality websites. You don't need to be a professional web designer to create Squarespace website. It can look really good if you just use the pre-made templates and if you want to, you can even add custom code to make them really personal. Let's just click on pricing and the products to see what all of this will cost for you. Some people think that Squarespace is a bit more pricey than other similar platforms and tools. But I feel that with everything that you get included and also that you know you get a high-quality site or you won't have any troubles with your site. I actually feel that it's worth the extra money because it's so simple and it is possible to create a small website at first and then expand it as much as you wish. We will just have a quick look at the cost and which type of plan you should use. But in this class, we will start a free trial. You don't need to sign up to anything before you try to create your site and make sure that this is a tool that you want to use. You can even create your whole website before you sign up. Let's scroll down and have a look. Usually the pay annually is a bit better than the pay monthly. If you pay annually, you will save 30 percent. I would definitely recommend that and you could start with a personal plan. Especially if you haven't started with the business yet and maybe you don't have any incoming in business. The personal plan might be the best for you, because you can always upgrade whenever you want. But if you do have a business going or if you feel that you can afford the extra $4 a month then I would definitely recommend the business plan. You can read all about it here, what you get extra. It's everything from a personal e-mail with Google to advanced analytics and fully integrated e-commerce. If you would like to start a shop in the future that's great and everything is just more available on the business plan. The basic commerce and advanced commerce plan is for you who are creating online shops. If you are creating a portfolio website as we're doing in this class, and you think that you might want to expand with a shop in the future, I would definitely recommend the business plan. But you can read all about these different types of plans on your own and decide which one you want to sign up with later on. Because in this class, we will create a trial website. Let's just head back to the start page and click on "Get Started". Here you will be taken to a page we can select the template and start with your page. But I will go through what to think about when to pick a template and a little bit more about templates in the next lesson. Let's just start with creating an account in this lesson. Click on "Log In" in the top right corner and "Create Account". If you want to, you can click in, "I do not want to receive e-mail about new features and products". Then you can continue to create an account with Google, with Apple, or with e-mail. Let's just go for e-mail, so just write your name and e-mail address and creates the password. Hit "Continue". Now we have created an account of Squarespace and we can start with our free try. Let's head over to the next lesson where we will pick at template to start from. 6. Pick a Template: So let's pick a template for our site. All Squarespace websites has a template to start with, but what is good to know in this new version of Squarespace, this 7.1, which is what we will build our site in, is that all of these are actually one master template. You can basically rebuild all of the templates to make them look as each other. Which template you choose nowadays in the Squarespace 7.1 version matters a lot less than in the previous version of Squarespace, where the templates had different functions. Because now all of the templates has the same base functionality. You can really just think of them as a starting point and choose a template that you like. There are so many to choose from, so it might be hard to pick a template. In this class, we will create a basic portfolio website. I think it's more important that you learn how Squarespace work. I would build a basic portfolio website, so that you later on can explore more with Squarespace when you learned the base of how to build your portfolio website. Let's just select a template that we like. In the left menu here you can browse by popular designs, portfolio photography, online stores, and all of that. You could go for portfolio as we're creating a portfolio website. But to make this class as logical as possible, I've found a template that I think works really good for our purpose. I will click on photography and we'll select the TALVA templates. You can click "Preview TALVA", if you want to see how this template looks. Remember that you can change basically everything with this website, but you have a template to start with which makes it all so much easier. Click "Start with this design". Here they ask you what to call your site. Let's just type in your brand name and hit "Continue". Then you will get some instructions on how to create and style your pages, but we can just hit skip here, because that will show you everything. You can just shut down the assistant if you get one of those. As you can see at the bottom, you're trial ends in 14 days. When you created your website, you can upgrade it to make it public and start to pay for a plan on Squarespace, but in this class, we will build a site with just a trial period. Okay, great. Now you picked a template and have started with your site. Let's head over to the next lesson, where I will show you how to make some of the general settings of your site. 7. Overview & Settings: In this lesson, I will walk you through some general settings of your Squarespace site and how the platform works, and how you make some different settings. If you have a look at your left menu, we can start at the top at Pages. Pages is where we will add pages and build our sites, so I will go through this much more, thoroughly in the lessons where we build different pages. Design is where you set the design styles of your site. I'll go through a lot of these options later on in class, so I won't go through that more now. Commerce is if you have an online shop, so we won't go through this at all in this class. If you see this little symbol, it means that it's a premium feature. So if you choose to sign up for the business plan, you will get some of these features. Marketing is where you make settings on everything from Email Campaigns, which we actually can create inside of Squarespace. SEO, some promotion things. Instagram Stories, Products on Instagram, and also Promotional Pop-Up, which is one of these things, and Announcement Bar. Both Promotional Pop-Up and Announcement Bar is available on the business and commerce plan, and I won't go through that more in this class, but these are really great to get your visitor's attention on your site. That was a little bit about the marketing things. You can explore that further on your own. Scheduling, I won't go through at all in this class. That is if you have a business where you schedule appointment with your clients. You can add this extension that is powered by Acuity, but I won't go through that more in this class. Analytics is where you will get your analytics of your site. So you can see everything from sales if you sell products, to traffic, where your traffic comes from; which part of the world? Traffic Sources, Search Keywords, Popular Content on your site, and all of these things. Analytics is included in Squarespace, and for me, this is all the analytics that I need on my site. I won't go through this more in this class because you need to publish your site and also to have it up and running for a while before you start to see the analytics. But it's really easy to read these analytics and you can find more about them in the Squarespace help enter. Settings is where you can make some general settings to your site, like the site availability. Now we're set to private because we're on a trial period, but you could also set it to password protected, and when you upgrade your site, you can set it to public. Language & Region is where you set your standard time, your country, language, and all of those things. Business Information is where you put in your phone number if you wish to show it on your site, contact e-mail, and your location if you wish, and if you have business hours, you can put them here. I won't go through this more in this class. Social Links is the links that are attached to your social symbols on your site. As a standard, Squarespace has typed in their social links, but here you should add your own social links. So I will just type in my Instagram, Facebook, and YouTube channel, and then I will remove the Squarespace links, so I will just click the links and hit Remove. Now I have three different social links with my Instagram, Facebook, and YouTube. Connected Accounts is where you can add social accounts to push and pull data to your site. If you for example, want to show your Instagram feed, you can connect Instagram. Hit Connect Account and Instagram, and I'm already automatically logged in to Instagram on my computer in my browser, but if you aren't, you will just type in your login and then hit Save. You can also connect your Pinterest, Facebook, Twitter, and all of these accounts. For this class, I will only show you how to use the Instagram-connected account. We won't use any extensions in this class, but you can explore more about it here. Permissions is if you want to have more contributors to your site and you can even transfer your ownership of your site to another person. I won't go through this more either in this class. Domains is where you can get a domain to your website inside of Squarespace, or you can use a domain that you already own. The best thing is to get a domain inside of Squarespace if you don't already own a domain, because then you have everything included in your Squarespace platform and you will only get one invoice for everything. You can also use a domain that you own, and if that's the case for you, you can hit Learn more and read more about that. If you want to get a domain inside of Squarespace, you will just type in a domain, and here you can see which domains are free, what they cost inside a Squarespace, and you can add a domain to your site. In this class I will show you how to build your portfolio website, I won't show you how to transfer domain or how to add a domain, but it's really simple and you can read more about it in the Help Center of Squarespace. So I would suggest that you do this at the end when you've built your whole site, and are ready to either get a domain or use a domain that you already own. But I won't go through this more in this class. Email & G Suite is where you can connect an e-mail address to your site. First you get a domain, and then you can connect an e-mail address to that domain. I won't go through this more in this class either, but that's a really great thing to have included. I think that was included in the business plan. So if you have the personal plan, you won't be able to do this, but if you have a business plan, you will be able to have an e-mail that ends with your domain name. For example, hello@mayafavorite.com, which is my e-mail address. Billing and Account is where you make the settings to your plan. Here it says how many days left of your trial you have. You can see your future invoices here, and you can even delete your site. Mobile Information Bar is a premium feature that is available on the business and commerce plan, and I won't go through this more in this class. Cookies & Visitor Data is a good feature. You can enable a cookie banner to your site, which basically says that by using this website, the visitor agrees your use of cookies. I won't go through this Monday's class, but if you don't know more about this, I would just suggest that you use this default text, so that you inform your visitors that you use cookies. You can read more about this in the Squarespace Help Center and also Google more about cookies. For now, I will just unable the cookie banner. Blogging, we will go through more later on in class where we create our blog page. Advanced is basically more advanced features that you don't need to use, actually, ever, when you create a simple website in Squarespace. So this is if you want to add code and things like that. So you don't need to worry about that. That was all the settings. Some settings I will go through more later on in class, and some I won't go through further because I don't think that you need to know more about those settings to build your website. But the good thing is that you can find all the help you need in the Squarespace Help Center. There will be a full lesson later on in class, where I will show you how this Help Center works because I am not a Squarespace support, and there's so much to know about Squarespace and they have really good support for you. So for now, I'll just shut that down and go back. The last thing I want to show you is if you click on your account at the bottom, you'll get to a dashboard. This is the first thing you will see when you log into Squarespace. This is your websites, and later on you will be able to see your domains here as well. To go to your website and be able to edit it, you click Edit Site. That was all that I wanted to show you in this overview of the Settings and Options in Squarespace, let's head over to the next lesson where we will actually start to build our home page. 8. Page: Homepage: Let's start with building our home page. The first thing you will do is to click on Pages, and this is where we build all the pages of our site. When you first start with a template, you will see that it says Demo, on the pages. What you need to do is to just click on the Page. That will make it a page that you can build instead of a Demo Page. Usually when I start with a template, I start with the basic pages that are included in the template, and then if I want to change something or add pages, I do it from there. First I will show you how to build the Homepage based exactly on this template. We will just add our own images here. I think that this homepage is really good for a starter Portfolio site. You can build all portfolio sites. I will show you how you can tweak your homepage and all other pages, but first let's just start with the template that we have and add our own content. You can easily see which page is the homepage by the little house symbol, at the left of your page. If you hover over the page, you can click on the little settings symbol. Scroll down, you can see that it says that, "This is set as your Homepage." You can easily choose another page as your homepage if you wish. You have some settings that you can change here, for example, I think that Home, is a good title for the page in the navigation. The URL Slug should be Home as well. You can add a password to your page. I will show you how to do this when we create the password protected portfolio page later on in class. You can even duplicate the page if you want to create an exact copy of the page you created. If you click on SEO, you'll see how your site will be viewed in search results. I won't go through SEO a lot in this class because that would be a whole class on itself. It's so much information. The square space makes some automatic SEO settings to your site. As a beginner and on your first website, I will say that SEO is something that you can do in the next step when you publish the site and want to work more with developing it. Social Image is how your site is shown on social networks. You can add a specific image to this page. Advance is available in business and commerce plan and that is where you can inject custom codes, and scripts, and all of those things. You don't need to do that for a basic portfolio site. Let's hit Save, because we've changed the title to Home, both the page title, the navigation title, and the URL Slug. The Page Title, I forgot to mention, that is the title that appears at the top of the browser window. Hit Save, and now we change the name to our homepage to Home. Next thing we will do is to edit this page. If you look at the top left corner, you have a little button that says Edit, so we click on that. Here you will get into editing mode. If you hover over the different parts of the site, you can edit all of the bars. Let's start with adding our own images to this gallery. Click the little image symbol, and I will delete all of these images. Hold down Shift, and click to get all of them selected and then hit Delete. Then you click the little Plus Sign and upload images. I've saved a bunch of images of two of my pattern collections that I will use as an example on this site. For this example, I'm just using one collection on this homepage. But I will suggest that you show a range of your artwork or what's included in your portfolio so that the visitors will see a variety of your portfolio. But for this example, as I said, I will just add one of my collections, some mockups, and some patterns. I'll click open when I've selected a few images. This might take a little while to upload images or speed up this a bit for you. I'm using square images here but you can use any type of images. You can move them around by clicking and dragging. Sometimes it's a little bit off, so you need to really click, hold down, and drag it to the next image inside of it. I will try to make a nice variety between these mockups and the patterns, clicking and dragging them to new places. Now we have added our own images. If you want to you can add a description to your images and you can even add a link where you go to if you click on the image. You can choose web address, a page on your site, we don't have that many pages yet. You can choose an email link, a phone number, or a file. In the next lesson I will show you how to create a portfolio page with clickable images that takes you to another page on your website. For now I will close this one down and close the gallery. Here we have our images added to the gallery. If you hoover over you will see a little pen symbol. Click on that, and here you have some edits that you can make to your gallery. You can choose if you want the full width, full bleed which will make it bleed all the way to the edges of your sites or the inset. Let's try out the inset for now. You can select the Spacing between your images I think that 30 looks good, Row Heights, if you want to add the Captions, the descriptions that we put on the images, cats pattern under the images, I won't do that for this homepage. If you want any animation happening, no animation fading, or scaling, I think the scaling looks good. The animation will happen when your visitor visits your page the first time because if you want a light box, which means that when you click an image it will get bigger so that might be a nice feature. You can choose the Gallery Type. For example, it's Strips. Let's try out the Simple Grid. Here you have some more options that you can explore. For example, the layout, how many columns you want, and all those things. Let's try out another layout. You can choose to have a slide show, and the height of the slideshow, and all of those things. Let us go for the strips that we have from the start and the spacing 30. They're all height 360. You can try that out to see if you want to change something but I think that 360 was good. If you want a specific number here you can double click, and type in 360. Under colors you can select a theme. I will show you more later on in class how to change these themes. Let's hit for example, Dark Minimal. You can see that your whole background changes to a dark color. Light Minimal and it changes to a lighter color. So let's just hit White Minimal for now, and then you click outside of the settings box, and here you have made your homepage. To save this hoover over Done, and click Save. At the top right corner you can see how the site will look under mobile view and if you click the arrow you will get a full-screen view. Let's unclick the mobile preview and click the full screen view. Now you made a basic homepage to your site. 9. Tweak the Homepage: Now that we've made a homepage, I will show you how to tweak the homepage if you want to because as I said before, all of the templates that you choose is actually one master templates. So you can make them look as each other and add different sections to all of the pages on your website. In this part of the class, I won't go into tweaking the navigation, which is at the top, or the footer, which is at the bottom. That will be separate lessons later on. But for now let's just concentrate on the middle of the page. This is how our page looks like at the moment, but let's say that I want to add maybe some texts above my images. All I need to do then is to go to the edit mode and click on the little plus sign that shows up, and here you can add sections. This makes the new squarespace 7.1 really really flexible. You can make all of the templates look at each other as it's all part of one master template. Just as an example, I can show you how to add a headline. Let's just add this one and that will make your page look completely different. You can build your pages actually from scratch with these sections. Maybe after the headline, you want to have some text and then you can just continue to build your page like this. Exploring this on adding sections to your site is something that I will leave more to you. In this class, we will focus on building our site based on the template that we've chosen. Because I feel that that's a good start when you're starting out to build your first website, and when you're new to squarespace, otherwise it would just feel too much to learn. Let's just delete this first section. Click on the little "Delete" symbol and remove, and let's delete that section too, and maybe I'm just going to add one headline to tweak this page a bit. Here I might want to say something about me, and I can change the format of the heading to different preset headings, or paragraphs, or whatever I want. But let's choose the heading tool, and let's go into the editing tool, and here you can change the height of your section, the width, let's go for small, and how your content will be aligned, so we'll for center, you can go for full bleed and instead, you can select to have a background at the back of your text and the color is the same. You change them according to the preset themes. So we'll go for white, minimal, click outside of the options box. This is one way that you could tweak this page, for example. With all of the design settings, like the font, and the colors, and all of that, I will go through that later on in class, so at this part of class I will build the pages, we won't mind the font or the colors or any of the design styles. We will just place the content. Let's just make one more example. You can scroll down and click the little blue plus sign underneath your images, and let's say that we want to add a social section with our Instagram feed. For example, I like this one, let's try that out. Click the little "Editing" tool, section heights small, you can have the content width as you wish, background and the colors, and to get your Instagram feed to this section, you need to click the little "Edit" tool in this section and select your connected account. Here you can choose how many items you want to view. Click on "Design", and maybe you want to have more images per row. You can select if you want some padding around and some other settings. Let's just make six images showing and hit "Apply". Now we added our Instagram feed to the bottom of this page. If you hover over your section, you can see that it says spacer, so let's just try to delete this spacer, that looks better to me. If you would like to add a spacer, you can click the little drop sign, and here you can select to add spacer, a button, and a lot of other things. You can add a line if you want to. But let's just remove that one. Hit "Save", click the full screen preview, and there you'd have added some more content to your homepage. I will actually delete this first section because I don't like that one in this template, so I will just hit "Remove", "Done", and "Save". That's a little bit about how you can tweak your homepage to make it more personal. But for this class, I will just keep it like this. You can experiment more yourself and see if you want to make some other changes to your homepage. 10. Page: Portfolio: Okay, so now we made our homepage and we tweaked it. Now I wanted to show you how to create this homepage as a portfolio pages then and what that means is that this page for now is a gallery, which means that you can click on the images and as we choose in the light box setting, you can make the image is larger. But that's what happens. You can also add a link that will take you to a different page when you click on the images. But if you want to have pure portfolio page where you have projects and you want each project to be displayed on a separate page and be showed like a thumbnail here, this is how you do it. Under Main Navigation and under not linked, you can click on the plus sign. When you click on the plus sign, you can add pages, collections and more. What we will do is to add a portfolio so click Portfolio. Here are some pre-made portfolio templates that you can choose. Let's add this one portfolio too. I will just rename it to portfolio and here you have all of the projects. Under Project one let's click Edit and we can say this is a collection about something. Then we can add our own images. Delete these images in the gallery and now we can click Search Images and here you can add images from Unsplash, which is a great site for royalty-free images. If you want to use those, you probably want to use your own images as you're creating your own portfolio site. Let's add this image and let's add some more images. Okay, so three images might be enough here. Hit Save. Now click on the little three dots on Project one settings and remove the image under General and add an image that you want to use as your car image. You can change the title too, for example, cats and dogs and the URL slag. You don't need to change anything with SEO or the social image for now. Just hit Save and then we can go back to our portfolio page and there you have your portfolio. I will just go ahead and create a few more projects and speed this up a bit for you. Project two, this page looks a little bit different, so I will just click the little edit symbol and change the background image here. When you have your image can change which part of your image is viewed by adjusting this little circle. You can adjust the section height. You can add some texts and then add some images. When you upload the images, you can hit close. You can also adjust the gallery type on these pages as you wish and all of the other settings. Okay, so maybe something like that. Hit Save, hit the little settings symbol at Project two and add a new image. Can change the title and the URL slag and hit save. Go back to your portfolio page and let's see how that looks. If you go to edit on your portfolio page and on the little edit symbol, you can change how many columns you want to be showing. Maybe three, and what type of layout you want. You can experiment with all of these settings. Let's add some spacing and make them square and maybe I want four columns. Okay, hit Save, as you can see here, you can create the portfolio page that looks the same as our regular gallery page on the homepage or wherever you want on your website. The difference between the portfolio page and the regular page with the gallery is that on the portfolio page, you will be able to click on these projects and come into another page where you get more information about the project. Depending on what creative area you work with and what type of products you work with, this might be a really good solution for you or you might go with the simpler version that is just the gallery homepage. For now, I will just drag down the portfolio page under not linked and for the rest of this class, we will use this standard page as the homepage where you will get light box images. But I just wanted to show you how to create this portfolio pages because for some of you, that might be a better way of doing your homepage and for some of you, it might be too much information both to learn and also you might not have all of that information to put in your portfolio. 11. Page: About: Okay, so let's create the about page. You already have about page in the template. Let's click on that one, and we can click on the little settings assembled to see how it all looks. That looks good. Let's see what we want to do with this page. So basically what you want to add here is a picture of yourself, and some information about you. What do you do? What you can offer to customers, and maybe you why you are doing what you're doing. So let's hit the edit button and see how we want to change this. First, let's edit the image. Click the little edit symbol, delete the image, and upload a new image. I've saved a portrait of myself that I will use as an example here in class. There you have the image. You can click on image editor if you want to change the size of the image or if you want to tweak it somehow. So you can change everything from saturation, to size and you can add filter and all of that. Let's just change the size of this portrait image to maybe 3:2 , will probably look good and hit save to make the changes. When you get the little option box. So you sure you want to make this permanent changes, just hit save. Case that Alice can have fun, and then we can change the design of the image if we want to. You can click around and see which one you want. I will go for the original one. You can choose if you want some animation like collide or focus in. Focus in looks good. So don't mind the colors and the fonts at this moment. We will change all of that later on. For now I will just write a little bit about me. I can change the heading to, maybe Heading 2 and maybe I want to use the Paragraph 1. So when your written a little bit about yourself, that's good for now. We will tweak all of the design styles here, the color and the fonts and everything later on. Save your about page. 12. Page: Contact: Let's move on with the contact page. That's also included in the original templates. Click on the contact page and here we can just add our own information. Let's click Edit and you can just write something about why the visitor of your page would like to contact you. Here we have a little form that is added. So if you click the edit button, you will see a form. Basically, you can add your own form if you click the drop sign and scroll down to form. The only difference is that this form is viewed, and if you click Enable Lightbox Mode, you will get a little box instead that will open up the form. Let's just discard those changes and click the little delete symbol and adjust the form that is already on the site. The form name might be e-mail, your name and here you can add form fields and you can edit them. So you probably want a name, an e-mail, a subject line is good and a message. You can add a description and you can add more form fields. So basically a contact form, this is all you need. You could also add a website box if you want the visitor to write in their websites, check boxes, if you want to ask questions and a bunch of different things that you can explore yourself. You can choose where you want the storage to be. For example, you can connect it to Mailchimp, Zapier or Google Drive. The normal thing to connect it to is your e-mail address. If you connect it to your email address, you will get an e-mail as soon as someone fill in your form. In the advanced section, you can choose what you want the button to be named, how you want the button to be aligned and if you want to send the visitor to another page when they've filled in the form. You can also add a post-submit message, which will show when someone filled in your form and that's all there is to that. So hit apply, and to try out this, you need to hit Save and then we can go to the full-screen view and click the little button and you will get your form. So here, the visitor can sign their name, e-mail address, subject and a message and submit. Let's edit the other things on this page. You might not have press inquiries if this is your first website. So let's just type in your e-mail address, and here's a little trick. If you select your e-mail address and hit the little link symbol, you can click the little settings symbol, click e-mail and type in your e-mail, and that will make this text linked to mail to: hello@mayerfaber.com. So when someone clicks on this link, their e-mail software will automatically open and they can send you an e-mail. Here are some social links that might be nice to have here. You can design them. Maybe you want to make them bigger. You can even design the style of them. Let's just go for regular. Maybe you want to add some space between the text and the social links. In that case, click the little drop symbol and space there, and there you got some space. At this contact page, they have image. Let's add a different image, and this time, we might want to try to use the unsplash images. So click Search Images and Free, and maybe you want something like a phone. Type in phone and scroll down and see if you find something you like and click add image. You can adjust where you want the focus point to be in your image and that looks pretty good. So at this moment, don't mind the fonts or the colors or how the button looks. We will tweak that later on in class. So just hit Save, click the full preview and here you have your contact page. 13. Page: Blog: Let's create a blog on your page, and this template already has a blog, so we will just click on that one. You will get in to these blog options. These are the blog posts that you can edit, and you can save drafts, you can save to review and schedule your blog posts. Let's start with editing this blog summary page, so click "Edit" and click the little edit tool. Here you can choose. This is the single column blog, where you have one column and the whole blog isn't showing. You can select all kinds of settings here, if you want a full post to be displayed, or if you just want the excerpt and title as it is here. Let's try out some other layouts. Side-by-side, looks like this. Masonry blog, looks like that, basic grid blog or turning side-by-side blog. I think that I want to have the basic grid blog, which basically means that all of the blog posts will be shown here. You can select how many columns you wish. Let's choose three columns if you want full or inset, and how much spacing and all of those settings. You can choose your image placements. The ratio, let's go four squares. Text alignment, if you want to show the excerpts or not, Read More link, and there's a bunch of settings that you can explore here, so let's just go for this layout, hit "Save". If we click into the blog posts, we can just delete all of these and add our own blog posts. To add posts, you click the little plus sign, add post, and here it's just like building another page so you can enter a post title, for example, New Pattern, and you can add whatever you want to blog post. Let's add an image. I will click "Search for Image" and add one that we have imported. You can choose the design and animation, but I will just hit "Apply" and maybe I want to add another image, and then you can hit "Save", "Publish", or "Schedule". Let's just try out what happens when you hit "Schedule". You can schedule the post to another day and time. You can just save the post, which will make it a draft, and you can publish the post. Just click "Done", and there you have a new post. Let's add two more posts. Now, we are going to speed that up for you a bit. In your blog posts, you can, as I mentioned, add whatever you wish, so let's add a quote here. Make the settings of the quote, and you can even add a gallery, a button and everything that you want to add to your blog post. Now we added three posts, so it looks like the template. To edit the posts even more, go to Edit at the blog post and at the top right corner, go to the settings symbol. Here you have more settings to make to your post, so you can actually create more of your blog posts here. You can add categories if you wish, and tags, and decide if you want to have comments on or off, and you have more options. What's important here is to add a thumbnail image, click "Upload" an image, and I will just add the same image as I had on the post. Here you can write an excerpt, that tells your viewers a little bit about your blog post. You can link your post title to the source URL if you want to link it to somewhere else, you can choose the author. You don't need to do anything with SEO if you don't want to. This is the social preview where you can upload an image if you wish, and you can share it if you have connected your account to, for example, your Pinterest, you can share your blog post on Pinterest. You can type in your location, but the most important thing is that you add a thumbnail image, click "Apply" and click "Save". Let's go back and do the same with the other posts. Click the little settings symbol, "Options", "Upload" an image and write little excerpt. Go back and do the same with the last blog post. Click the settings symbol, "Options" and I will just upload the pattern. Click "Apply" and click "Save". Now, we can go back to our blog page and see how this looks. We have three blog posts viewing with the heading and the excerpt and read more link. If we click on the "Read More" link, you will go to that blog post. That's the basics of creating the blog post. Let's go to the settings of the blog. Go to home settings and blogging. Here are just some simple settings that you can change. You can create the standard URL structure for blog posts, and if you click the little question mark, you can see what this means. The percentage and T means the title of your post, which is the normal settings. Go to common settings, and here you can decide if you want to enable comments and if you want to require approval and all of those things, and some more settings for your blog posts. You don't really need to mind these settings for now, but you can go in and experiment with them more further on. Now we've created our blog that looks like this, so let's head over to the next lesson where we will start to change the design styles of our website. 14. Design: Fonts: So far in class, we've placed the content of our site. We created all of these pages. They're Home, Blog, About, and Contact. Then we have our extra portfolio site that I just created to show you how you could do that. But these are our four main pages. This is the first lesson where we will talk about the design styles. In this lesson, we will talk about the fonts. Let's click on a page where we have some texts. The About page, for example, go back to home, in the menu and click on the sign and click on fonts. This is a really nice feature in the Squarespace 7.1 version, that they already have font combinations for you, which makes the whole process really quick to choose fonts on your site. You can also, of course, go in and tweak and adjust certain fonts as you wish. But let's just change the font and see what happens. You can choose sans-serif, serif or mixed. Let's just click this Poppins font and there you can see the different fonts is changed and even the navigation is changed to another font. This is probably some bug that makes it a black square, but the font is changed. If I hit "Save" I'm guessing that the font will be changed. Yes so don't mind that little bug. But let's try out the serif fonts instead or the mixed font. For this website, let's go for something classic. I will choose this Futura. Here you can change the base size if you want to have a smaller size. Let's go for 14. If you click on the little settings symbol, you can go in and change the certain fonts and tweak them. Like maybe you want to have more fat. Just hit "Save" and maybe we will get rid of that bug. You can even change the font styles here to another font if you want to and you can go in and change the weight, the style, the line height, the letter spacing, the text transform. It seems as if I hit save, then you will view the text and the bug seems to go away. Let us go back here. You can change the size of the different headings and hit "Save." Now let's go back and go into the paragraphs. That is the Poppins font. You can change the weight of that as well and the style and line-height, the different paragraphs, the size of them and all settings. You can experiment with that by yourself. If you don't have that much knowledge about typography, I would just go for the standard font combinations that Squarespace has pre-made for you. Basically, you can make all the changes that you want, to make it as easy as possible. I would just go for a pre-made font combination that Squarespace already put together. That's how you change the font of your set. 15. Design: Colors: Let's change the colors of your website. In the design menu, click on colors and here we can change color palette and section themes. Click, "Edit" on the color pallet and you have designer pellets that are premade, which is pretty nice so you don't need to think that much about the color palette. If you use the designer pre-made palettes, Let's go for this pink one. You can either, get an pellets from an image. You can drag and drop from a color to start with a color and choose which color palette you want to go from there, and custom colors. Even if you have a designer palette, let's go for this one and click edit custom colors. You can go in and change the colors to a more custom palette that suits you. Second is go in and make that a little bit more pink for example. Okay, so maybe something like that and if you click on section themes, you can go ahead and edit all other pre-made themes on your website. Here you can see what the themes are selected on this page. It's white minimal up here and white minimal at this content. Let's go for white minimal and see what we can change. This is an image collage. You can change all of these settings on the white minimal section theme. I'll just scroll down until I found the image block that says image block collage and I can see that the card background is set to this light pink color. If I click on that, I can change to another color in my palette or go for custom color if I want to do that. I like the light pink ones, I will just go for that. There's so many options here in the section themes. I won't go through them all, but you could just click on something that you want to change it. You can see what type of block it is and how you can change that. For example, here you can see the header and this is the image block collage. This is the social links, which you can change the color if you wish. I will just go ahead and click cancel here because I haven't made any changes and if you think that this is just too much to learn and to many settings, I would just ignore the Section themes and go in and change those and just change the color palette to something that you like. 16. Design: Buttons: In this lesson I will talk about buttons. As we don't have any buttons to our page really, I don't think I would just add a button. So click on "Edit" on the About page. I will just add a button below this where it says Contact me. Now I'll just add an e-mail address and we'll make that button large. Maybe I want it to the right or to the left, let's place it to the left. Hit "Save" there we have a button that we can change the design style. In the Design style menu, click "Buttons" and you will get these different options outlined or solid, square rounded or pill. Let's go for a pill and the padding is how large the button is around the text. Let's go for something like this, 1.5 RAM, hit "Save". To style the button even more, we go back to Design, and go to first Fonts and you can click on the "Little setting symbol" at your font pack and click 'Buttons". Here you can make some settings, let's make the button uppercase layers. Maybe you want some more letter spacing, like that, maybe higher weights. You can change the size of the different buttons so I can change the large button, which is the one that I've chosen here. The medium button I don't have that on this page and a small button. Hit "Save" go back, back again to the design panel, and then you can change the colors of the button. Go ahead and click "Section theme" This is the white minimal theme on this page. You can click on the "Button" and then you can change the background of the button if you want another color. Maybe want the color from your palette. I will just go for black and you can change the text color. Now you know how to style your buttons so let's move on to the next lesson. 17. Design: Animation: Let's check out the design style as called animations, and this is a really quick lesson because there really isn't that many settings to do here. If you remember, when we created the different content on our pages, we could adjust the animation on the certain sections. For example, here, scroll down and you could change it if you wanted; scaling, fading, no animation or site default. Let's just use site default and hit "Save". To change the animation on your whole site, you click on "Animations" in the design menu, and then you can choose one of these styles, none, fade, scale slide, clip. I think it's scale looks good and you can decide the speed, slow, medium or fast. Medium might be good and save. This means that which ever page that would click on will have that animation if we haven't set a certain animation to that content block. That was a really short lesson about animation. I feel that to have some animation on your site makes it look really professional. You can easily change it here, so you can just try it out and see what you like. 18. Design: Navigation: Now let's go ahead and tweak that navigation of your site. First, we can look at the fonts within this in the previous lessons. When we selected fonts for your whole site, you go into the fonts design style, and then the settings. Then you can just click at the top here and you will get the Advanced settings, that is the Site Title, site navigation, and the header button. Let's go ahead and have a look at the Site Title, so that is this one. You can choose to have a site title which you type out, or you can choose to have your logo. I will show you how to add a logo in the next lesson, but for now, let's just change the font of this Site Title. We can try out the Poppins fonts, that looks pretty good, or you can browse on All Fonts and hit Save, Back, and here you can change all sorts of settings like the Weight and the Style, Line Height, Letter Spacing and all of that. Click Save, and then Back. Then you can go in and change the Site Navigation. The pre-made settings is that you have the Paragraph as the style. But you can also go in and change this. You can go ahead and change it to another font. Let's just go for Poppins for this and back, or you can go back and choose Paragraph. You can change the size of the Navigation. If you wanted a bit bigger, 1.3 looks good, or you can change the size to Paragraph one, Paragraph two, Paragraph three. Hit Save and Back. We don't have any Header Button at the moment, but if we did have one, we can change the settings here. Let's click Back and I will show you how to change the Header Layout. You click on Edit a page, Edit Site Header and then Header Layout. Here you can change where you want your Menu and Site Title to appear. Let's try to have my Site Title in the middle and Site Title and Logo. We will just go over Site Title for now and I will show you how to add a logo in the next lesson. Elements you can choose if you want to have a button, Social Links, if you want them to show up in your Menu, that Social Icon Size. If you have a shop, you can add a Cart. Let's click Back and Colors. You can use a transparent background, or you can choose to have a color of your Menu. Let's go for a transparent background. Hit Style and here you can select how much padding you want on your Menu, how much spacing you want between the Elements, and how much spacing you want with the Links. If you want a Menu to have a fixed positions so that when you scroll down the Menu will always be there, or if you want it to be just on top of the page, let's use a fixed position. Here you can choose if you want to fixed Header Style to be basic or scroll back. Let's just choose Basic. You can choose if you want to have a full-width or inset. Go back and I think that I will change the Header Layout to the one that I had before. Because like that one better. Then you just click "Save". That's all there is to it to change the design style of the Navigation. 19. Design: Add a Logo: In this lesson we will add a logo to your site instead of the site title. That is if you have a logo already, you can upload it and add it to your site. If you don't have a logo, you can just use a font as I showed you in the previous lesson and add your brand name to your site. But let's add a logo. Click "Edit", and "Edit site header", site title and logo. Here it says that the logo replaces the site title on all pages. Click the little "Upload" button. I have saved my logo as a P&G. If you want to make sure that you have a transparent background on your logo, you save it as a P&G. Click to upload the logo. Here you can choose the Logo Height, which basically means the size of your logo, and the Mobile Logo Max Height. Let's just try out either and go to the mobile view and the desktop view again. We can go back to the Mobile Logo Height and increase the size to 50 pixels and see if that made any changes. Okay, that looks better in the mobile view. That's all there is to it to add a logo to your website. So hit "Save". No matter what page you will click into now, you will have your logo on top of your website. 20. Design: Footer: In this lesson, I will just show you how to change the footer of your site. The footer is bottom space of your website. Click "Edit" and here you have edit footer at the bottom of your page. When you change the footer, you will change the footer on all of your pages, on your whole website. Maybe you want to have it made with square base there or maybe you don't, so you can just remove that one. You can tweak the social links, maybe you want them larger and you can write your name here, or maybe you want to even add your logo. If you want to add your logo, you can click on the little drops symbol Add image, and search for image imported and add the logo that we just uploaded. We don't want any caption to the logo and just hit "Apply". If you want the image to be smaller, you add a spacer by clicking the drop symbol, "Add spacer", and then you can just add more space at the side of your logo. Let's remove the textbox, and here you have your logo and you have your social links. If you want a menu at the footer as well, I don't think it's necessary when you have this small website with only a few pages. But if you do want to have that, you can add either a content link, which means that you link to your pages, or you can add a text box and write your pages, and just remove the content links and then we can make them aligned to the right. Another trick, if you want to have just one row down is to hold on shift and click ''Enter'' to get a closer distance. Then we can add links to this text, so click on the text, click ''Link'', and you can add a page, the home page, and hit "Save". Do the same on the blog, page, the blog and hit "Save". Select the above text, click, ''Add link, Page, and About." The same with contact, click the "Link, Page, and Contact." I forgot to click apply on those so they didn't really get links, so let's do it again. Make sure you hit "Apply", hit "Done" and save. Now you made a footer that shows on all of your pages. If you want the footer to be in a different color, click ''Edit footer'', and click the little "Edit" symbol. You can go for background if you want to have some image or something as a background. But otherwise you can choose color and add a color to your footer. Let's try out the light minimal and see how that looks. Let's go for white minimal. In the format, you can select the section height or go in and tweak it yourself. The content width if you want to have it in the middle of your page, and also the alignment. But I think that this looks good, so hit "Save", and here you have your footer. Now you can see when you scroll down that the navigation menu is scrolling down with your page as you scroll down. 21. Design: Image Blocks: So the last design style that I want to show you how to tweak, that is the basics of what you need to know to create a basic portfolio site is the image blocks. So go to "Design" and "Image blocks." This one is an image block, it's an image block collage, and there are some more image blocks. So let's just add an image blocks to this page to see the changes that we can make. Click the little drop symbol and image and we will just add an image and click "Design" and these are the image blocks. So it's poster, card, overlap, collage and stack. So let's go for card, hit "Apply," now we just write a title and a subtitle. I will just change the title and change the subtitle to different paragraphs and headings and hit "Done," and save. So in the image blocks, you can change some settings. This is the image block card, if you click on that image block, the image block card will show. You can choose if you want the content position to be center there top or bottom. Let's just go for center, the text alignment, let's go for left image width, image separation from the text, and title separation from each other, the title and subtitle. So that was the settings that you could do for the image block card. So let's go ahead and see what you can do on the image block collage, and that is the content position. Maybe you want it to be centered and takes the alignment image width, it's 70 percent now. So I like them overlapping, so 70 percent looks good. Content width is the text width, let's go for 50 there content offset and then all of these settings that you can experiment with. Let's hit "Save" and "Design" and then go back. Hit "Edit" and I will just delete this new image block that I created just to show you. Here we've created some new settings to this image block that the the text content is at the center of the image content. Hit "Save." Now, you know a little bit how to make some settings to the different image blocks. 22. Final Tweaks: Okay, so now we've created our whole website, all of the pages and made all of their design style changes. Let's just go over the whole website and see if we want to make some changes. We'll click on the full screen view and I will just scroll through my pages to see if I want to make changes. This first page looks good, although I don't like the font of the navigation, so let's change that right away. Click on "Font" and the ''Design''. Click on "Settings" and click on that ''Navigation Font'' and here you can change which one to use. Let's try out Futura instead. I like that much better. Click "Save" and maybe you want to have some more weights to 400. Let's see if we want to have it uppercase. That way we want to have more spacing between the letters maybe. I think I like the lowercase better and remove the letter spacing and maybe increase the size a bit. Okay, so something like that. That looks much better for me. Let's go back and full view again. Actually I don't feel that it's very logical to have the blog first and about that contact. I also might want to add the home page. This page to the main navigation. At the moment when you're on another page and click on the logo, you go home, which is standard for all websites. But you could also choose to have it in your main navigation. That makes more sense to me at this basic portfolio site, where you only have these four different pages. In the main navigation menu, you can also click and drag to select where you want the pages to show up in the menu and click on full-screen view again. Click on the "About Page " and scroll down. That one looks good. The blog looks good as well. The contact, maybe I want to change this bottom because I can't really see that font on that one. Otherwise, I think it looks good. Get out of full-screen mode. Click on "Font" and the bottom Button Text and style. Maybe it just works if I increase that paragraph sides. No, that didn't work. Let's go ahead and customize the size to a bit bigger and that looks better to me. Maybe we want to custom the weight as well. That looks much better to me with the 500 weight on this button. You can just go back and forth on your site and make sure that you're happy with all of the settings. For me, I'm really happy with this now, go back to home and scroll through it again. If I click on the images, I will get a light-box mode and will be able to scroll through the images. Click on "About" and that's a little bit about me. The blog. If I go into a blog, how does that look? That looks good and a contact page. Okay, so I'm really happy with how this looks now. Now we've created our whole website. 23. BONUS: Add Browser Icon: I guess this is a little bonus lesson about how to add a favicon or a browser icon, as I believe is the new name for this little icon that is displayed at the top of your page. For example, at my website, I have a little flower as a favicon or browser icon. Standard settings for Squarespace is to have this black box and that doesn't look that nice. You can create a favicon in any type of design software, you could probably create it on your iPad or in Illustrator, Photoshop, even in Canvas if you use that. But as that would be a whole other class on how to create a favicon in all of these different ways, I will just go through how to really quickly create a favicon online. I will just Google favicon. I found this site, favicon.io, where you can create a favicon from text, a PNG file to ICO, if you want that format and from an emoji. Let's just create one from text which is the simplest way. Maybe I want to have an M and an F or just an M, Maja Faber as my favicon. I Can select the background. I like circle and the font size a little bit smaller so that it will roam in this in this circle, you can change the font to whatever your font you want. Let's just use this literally one font. I think that I would do is use an M instead of an M and an F. Adjust the size of it to maybe 70. The font color I want light and the background color can be, maybe pink. Then I just hit "Download." This will download a zip file that I've opened. Here you have all different favicons that you can upload to your site. Let's go back to our Squarespace site, click "Home," design and browser icon and add favicon. Here it says, using the field below, you can upload a browser URL icon for use with your site. This icon can be in PNG or ICO format, and will be resized by the browser for display in your URL bar. Note, ie does not support PNG format. Maybe we should choose the ICO format, you just click and drag that in, hit "Save" and see how that looks. Maybe you need to reload the site. There you have the ICO favicon. Actually, I feel that that doesn't look that good. I will just go back and we'll actually select the PNG favicon anyway. I have that on my website and I feel that it works really good. I will do is go ahead and delete that one and drag in the PNG hit "Save," and refresh the site. There you have your favicon or browser icon. As it's shown so small, you really can't see what it is, but it's nicer that it's a little dash of color instead of just a black box. 24. BONUS: Password Protected Page: In this lesson, I will show you how to add a password protected page. You might have certain content that you want to have password protected. For me, that is my catalog with my artwork, my patterns, that I only show to potential clients. So I have a catalog with over 200 patterns that is on my website but protected with a password. Let's just create a duplicate of the homepage, where we already have a gallery. Click on the latest settings and duplicate the page and let's name this catalog. So it looks exactly as the homepage for now. I placed it under the not linked pages and I will just edit this page, delete the Instagram and I can just add some more images to make sure that we keep those pages apart. If you're creating a catalog with the password as I have, there's really no standard as far as I know, as how it's supposed to look. My suggestion and my tips is to keep it as simple as possible because what you want with this catalog is to sell your art work, so you just want a visitor or the potential client to scroll through your page to be able to view your artwork. In my catalog, I don't have any images or mock-ups, so I can just remove those. Let's just add a few more patterns. I will just hit "Close" and we can edit the gallery type, making it maybe a simple grid with same size of the images. So maybe something like this. If you're creating a catalog, you could also choose to maybe sort your patterns or artwork out in collections or in what type of patterns they are or whatever you want to sort your catalog in. But this lesson is about how to create a password protected page. How you choose to design the page of your potential catalog is totally up to you. So hit "Save" and now we have our catalog here. We can just make sure that we have the right URL slugs, so hit the "Settings" and URLs slug catalog. Here we can choose to have a password on our page. Let's just use the password catalog and hit "Save". When you see a little lock symbol, you know that that page is password protected. To see how it looks when you try to access this site, you go to design and lock screen. You can have different passwords for different pages but you can only have one layout on your lock screen. For example, choose something like this, like a layout, then go back to lock screen and here you can change the branding. Maybe you want your logo there instead or just your name and you can choose if you want to display a lock symbol, so hit "Save", back and "Media". You can hit "None", if you don't want an image in the background and style the color of the background. Let's go for a pink. You can change if you want the border to the page. What type of lock you want. The color of the lock, the password style. Is this style? Which font you want in the password box? Lets just choose the same as on our site and hit "Save". So there you have your password protected page. This is a general lock screen, so it will show up on all the pages that you have locked with the password. The difference is that you can use a different password on all of the pages. That's how you create a password protected page. 25. BONUS: Create New Pages: In this lesson, I will show you how to add new pages to your template. In this class we're mostly focused on using the template that we've chosen. Because I feel that if you're a beginner Squarespace, that's a really good start to not make it too complicated. But if you do want to add pages, I will show you just how to do that. As I mentioned before, you have the main navigation under Not Linked pages. If you add a page to the main navigation, it will show up in your navigation. If you add a page to Not Linked, you can't find it in your navigation bar. You can find it via a link or URL Slug. You can drag and drop the pages from main navigation to Not Linked. It really doesn't matter where you create your page. Let's just start with how to create a new page. If you're a beginner at Squarespace, which I'm guessing that you are if you're taking this class, I find that it's easiest to start with a page layout. Let's click on Page Layout. Here you have all pages that you can use as templates. We have the general pages, appointments about page, contact, services, gallery, team, reviews, menu, RSVP, FAQ, privacy policy, and terms of service. Let's just go for general and see what type of pages we have to choose from here. Let's start with this general 2 and see how that looks. When you click on a Page Layout, you will get the full layout of that page. You can of course tweak it as you wish. If you want to do that, you click edit and then you go into different sections and tweak them. You can hover over, change the image, for example, as we did in the previous lessons. You can format this section with any height, is the section height and the content width. Also, you can change the colors if you would like a different section theme. Let's just go for light minimum for that one. If you want to add a section to your layout, you click on the plus sign and add a section. Let's just add this list. You can go in and edit the sections as you wish. Change the font, heading, a paragraph to something that you find looks good. Let's just change that image as well and see what we can come up with. Maybe to this image. As you can see, you have a little bit of overlay in this image, which means that it doesn't show it's true colors. It has an overlay on the image. If you don't want to overlay, we need to go into the design style, colors, section themes, and this is why it's minimal. Click on your image block. Here, you can change the image overlay. If you drag your image overlay to the transparent side, you will get no overlay on your images in the image block. Clash in the white minimal section theme. Hit Save and go back. You can also edit your paint by adding blocks. I showed you how to add sections by clicking the plus sign. If you click the little drop symbol that appears when you hover over something, you can add blocks. Click on the little drop sign, and here you can add all blocks. Let's just add text block. Change the alignment to center and write something here. You can change the paragraph style, maybe something like that. There you added a block in your section. Hit done, and save. If you move your page to the not linked section, it won't show up in the menu. So let's add another page. You can also start with a blank page, of course. But I think that a page layout is good if you're a beginner. Let's go for a review page maybe and review 2, click on the full screen mode to see how that looks. Maybe you want to add some image or something here to make it a little bit more interesting. Let's just add this one. Let's just add an image from Unsplash and apply. Maybe you want to remove something. You hover over that block and click the little trash can. Hit Done and save. Basically you can start with the page layout and add blocks to your page layout to customize it as you wish. Let's just drag that down as well. What if you have a shop outside of your web page, like an Etsy shop or Society6 shop or something like that. Well, then you can add a link. You click on the little plus sign and add link. Let's say shop. We can add our favorite design company webshop. Drag that down so that we have it in the end of the navigation. Then I will just click Home full screen and try to click shop and see what happens. That will take me to an external link outside of the website. The last thing I wanted to show you on how to add pages is how to add more pages under one heading in the navigation. Click on folder. Let's just name it news. Drag that down to the end of the navigation and then drag in pages to your folder. Let's add that one and that one, hit home. Now as you can see, you have a navigation that shows up underneath your folder. If you hover over news, you can click on the pages that are underneath and find them in the menu. Let's just drag out the news folder because we want to use that one. Click on home. There, we have our website. You can explore more about adding new pages. You can add stores which I won't go through in this class because you need to have a business or a commerce plan. You can add events and portfolios which I showed you earlier in class, blank pages, page layout, folders, and links. 26. Publish Your Website: Now we have created our whole portfolio website and we've finished and all we need to do is to publish it. I will show you how to publish it, but I won't publish my site because then I need to pay for a subscription and a domain. I will show you how you can publish yours. Click on "Home", "Settings", "Site availability", and then click "Upgraded to Publish." Here you will select your plan and everything, and then you can publish your site when you sign up for a plan. I will just click "Back" and show you where you will connect your domain. You will get a built-in domain, which is a strange domain, crocodile-cello-yaak-squarespace.com. You can customize it if you wish, but you will still have the squarespace.com in the end. Let's try to rename it to majasquarespace.com. You can actually use this domain if you want to, it never expires. It doesn't cost anything. You can also use a domain that you own. You can learn more about how to connect that here. I've done this before, it's not that hard, but it takes a little bit of patience to get through all the steps. You can also get a domain through Squarespace, which is great because then you will have all the invoices for your website within Squarespace. This is what I've done with my websites. I bought the domain through Squarespace. You can choose your domain and click "Add." For more information about this, you can check out the Squarespace help center, which I will show you more about in the next lesson. It's not hard to connect the domain. If you don't have a domain already, I would suggest that you buy it through Squarespace because it makes it all so much easier. It's not that hard to connect the domain if you already have one either. 27. Support and Questions: I just wanted to s take this time to go through the Squarespace support and help center with you. Because I am not a Squarespace support. I have built a few websites with Squarespace and I know my way around it. But in this class, I'm showing you the basics on how to create a simple portfolio website. If you want to know more advanced techniques and have specific questions, you should have a look at the Squarespace help center. When you're logged in, you can access the Squarespace help center by clicking on "Help" in the menu and then "Knowledge Base". Here you have a bunch of guides or you can search for some keywords if you want to have help with something specific. Let's say that I want help with image blocks. You can click the article about image blocks. You can see if you scroll down that it says that this video applies to Squarespace version 7.0. That was the previous version of Squarespace. It might mean that this help guide is the same for both the old version of Squarespace and the new version of Squarespace. The new version is called 7.1. You can see here if you scroll down that the inline layout supports a caption styling set by section styles, version 7.1 or template version 7.0. I've found that Squarespace have just updated their help center and added the help for 7.1, the new version of Squarespace. You can find that information on the different pages. Let's just click on a different page, Blogging, for example; Blogging with Squarespace and see how that looks. Here they have version 7.1 and you can also click on version 7.0. Version 7.1 is what you want to read about, templates and designs, working with templates. Here it says, this guide is for version 7.0. All version 7.1 slides share the same template. To learn more, visit about Squarespace 7.1. You should make sure that you read about the version that you're using, which is the 7.1 that we're using in this class. But you have so much information here that you can access. You can also check out the community where you might get help with your answer. You can join our webinar and if you can't find what you're looking for, you can contact an advisor, so click "Contact Us". Here you can select what your question is about. Choose a topic. Let's say Blocks and you will get these articles. If you still can't find what you're looking for, you can email Squarespace or you can live chat. At this moment the live chat is closed. But for me this has been really useful. So the live chat is a free service and also the email. But with the live chat, you can check with the support and they can help you find the answers to questions that you can't find in the pre-made articles. 28. Final Thoughts: That's all for this class. I hope that you found this class useful and motivating in creating your own portfolio website. As I mentioned earlier in class, it doesn't need to take months to create a website and you don't need to create a really personalized and unique website as a creative. It's okay to create the website from a template. It's the art that you create that you want to show, not your web designing skills. With that said, thank you so much for watching. If you like this class, hit the "Follow" button by my name here below. If you have any questions at all, please ask them on the Community page here in class. Feel free to leave a review to let me know if you enjoyed this class, I would love to hear your thoughts. Also, make sure that you share your project. If you post your project on Instagram, feel free to tag me @maja_faber. Thanks again for watching.