Transcripts
1. Getting Started: Is This Course For you?: do you or your company require a website? Have you looked into Web design companies in your area and found that the good ones cost thousands of dollars and the cheap ones have zero experience? Well, you're in luck. Who better to create the perfect website according to your standards than yourself? In this course, we will teach you how you can create the most beautiful website using Squarespace as your platform. Squarespace websites are extremely easy to set up in. The best part is, you don't need to know how to code. Squarespace is a visual builder meeting you simply dragon. Drop different parts of your website, with prices just starting at $12 monthly. You don't have to worry about draining your bank account, either. The monthly subscription fee includes a domain name and hosting, so everything is in one place with support for e commerce blocks, landing pages and third party integration. It's no wonder that more and more companies are migrating to squarespace. Enroll in this course today to save yourself the thousands of dollars in Web design fees and the trouble of trying to explain your vision to someone else.
2. Getting Started: Why Squarespace?: welcome to the creating a Squarespace website course. My name's be Ghassan, and I'll be instructor for the duration of our valuable time together. Before we begin with the actual learning, I'd like to present you with a few reasons why you or your company will find value in cyberspace when compared to other CMS systems. Squarespace itself has one major benefit, and that's the fact that it's extremely easy to use. All you need to create a beautiful website is a little bit of time, some basic knowledge of the layout of squarespace and a vision for the perfect website In regards to pricing, squarespace is actually quite fair when you consider the fact that hosting a domain name and a visual builder are all included in the fee, which starts in just $12 per month. Getting started with squarespace is his easiest grading account, choosing a template and adding your content. There are many options to find tune if you'd like to, and we'll cover these in more detail throughout the course as well. And for those of you that want to get a little bit more technical loss to cover some custom CSS that you can use to make your website stick up from other squarespace websites. So what you waiting for? Click on the next lecture and let's get started.
3. Getting Started: Creating an account: Okay, so the first thing we're going to do is actually very straightforward. We're just gonna register for an account, so we'll head on over to squarespace dot com and we'll sign it. Since we don't have an account yet, we're gonna go ahead and sign up, and now we have three options. Get a domain, create a site or build a store. I would say Hold off and getting a domain name for now just because you might change your mind as to what the ideal domain name is throughout the development process. So pick between a site and a store. Now, don't get me wrong. You can sell products on the site, and that's what most people do. But there are some small differences that will highlight now the first differences. Price websites start at $12 per month. Where's online stores started $26 a month. Ah website has a 3% transaction fee for anything you sell. Where's an online store has no transaction fee. So that means that the $14 difference between the plans you can actually make up for it If you sell more than $467 worth of products. So let's say that I wanted ah website, so I'll click on create a site. So now we're gonna choose a template now for knowledge of pick around. When I picked the very 1st 1 we're gonna go over and change the template later on. But I just want to show you how to create the account. So we're gonna fill this in. So I'm just gonna put in my information here, and we'll go ahead and agree and sign up and create site. Okay, so now we're gonna click on start, and then we're gonna pick the category. So let's say this is going to be a business website. Okay? You can pick between our personal site of business site or for somebody else. So we'll pick on business, say, and we'll pick one of the categories that it falls into. So I'll say mine is going to be an art and design website, and the point of the website is to showcase and create a portfolio of my work. So we'll click next and then a site title. So let's say this is the U Demi website, and then we'll have done, and that's how you create an account and we'll go over some of the other features that's available in the next lectures
4. Getting Started: Choosing a Template: Okay, So in the last lecture, we covered some of the basics, like creating an account would squarespace and filling in some of your basic website information, not. Let's go ahead and change the template into one that fits our needs So we'll go to design and then template when we have right now is called Wells. Let's go ahead and install a new one, so there's dozens of templates to choose from and you can install as many as you'd like, and you can switch between them as often as you like as well. You can filter them up here, depending on your category that you want your website to fall under so we'll leave it at all, and I'll show you some of the ones that I really like. So there's Bedford Marquee and Allah, so they're probably the three that I use the most often for my client websites. So first will preview bed frayed. I used this one for a lawyer and another company that provides a service so kind of looks like this. We can customize everything about it, so don't really look too much into like the images and the wording just more of the structure. So it has like a button up here. There we go. So let's take a look at Marquis. So Markey's a one page parallax website. So there's lots of sections put together into one page and the images air nice and parallax , and you can create more than one page. So it looks something like this. Now, finally will take a look at Alex. So in this example, they used for a wedding. But you can use it for anything. Doesn't have to be a wedding. I've used this exact template for a drone company that does photography. So again, parallax images. Very nice looking website, and those are the choices that we have. So let's say that the website that we're gonna be using is for a website development company. So I'll go ahead and I'll pick the Bedford one because I think that looks a little bit more professional and well, actually, click on preview just right over here, So I will show us what it looks like and we're gonna set it is a live template. Now, don't worry about these air here. That's perfectly fine. We're gonna go back, we're gonna go back again and we're gonna go into pages, okay? And then I'll show you how we can modify these in the next lecture.
5. Tour: Pages: Hey, guys, welcome back. So over the next few lectures were going to be taking a quick tour of squarespace to see where these menu items lead and what we can change. So today we're going to be looking at pages. So here we can see that there's all the pages we currently have on our website. They're sorted into the main navigation, the secondary navigation and then not linked. The main navigation is what shows up at the top here in your menu. The second, a navigation usually shows up on the left hand side or at the bottom. It's kind of different, depending on which template you're using on that. We have not linked these air pages that you have, but they're not. They don't show up anywhere on the page unless you specifically linked to them, and I'll show you more about that later on. So right now, the first thing you'll notice is that each one of our pages says Demo beside it. What that means is that these here pages, I came with the template and aren't actually live right now, So if somebody visits this website right here, they won't actually see those pages and I'll show you what I mean. If I take that link and I go to maybe Internet sport, where I'm not signed into squarespace and we go into visitor access and I'll type in this code just to view the website, you'll see that that page actually doesn't exist. And neither does the about page or the news page because these are all demo pages, and this is just to make sure that visitors never see demo content. So what we have to do is we actually have to make these pages our own. So we click on this gear icon right here, and then we can click on Create and will actually create the page exactly how it looks right now. So now if you look appear beside home, it no longer says Demo. And if you actually try to go to the website through, let's say Internet Explorer, because right now I'm using Google Chrome and I'm signed in to Google Chrome on my squarespace account. So no matter which page I go to, it shows that it's available. So I'm seeing things on the back end. Not really how visitors would see it. So if I go to Internet Explorer and I go to my website. We will see that the home page is now set up. The other pages aren't set up since we haven't actually made the demo content life, But this one, this home pages, okay?
6. Tour: Design: Okay, So in the last lecture, we went over what was underneath the pages. Many white. Um, today we're going to go over design. So if you go into design, there's quite a few options here will go through each one. So under logo entitle, you have the option of changed the website title. Right now, I have a set to you Demi website, which is also what shows up right here. Now, you could also had a tagline. So something like demo website. Now, some temples will actually use this in the actual like home page. Except right now this template doesn't so if you go down a little bit, there's local image. This is where you would upload an image that you have or you can create a logo. Now, show you what this looks like. I wouldn't really recommend it because it actually doesn't have that many options. So you'd put in something like you don't me and you basically just pick an image that you like, and that's it. And you can change colors by clicking on it. But that's about it. Okay, so we'll go back to our website. So that was a creative logo option now. Browser icon. The favor con. Now this is usually a dot i CEO or dot PNG format, and this is the image that shows up just at the top here, beside Where's the Square Space? Or Beside you, Demi or this little D here. And it's also the image that's used by mobile devices. When you save a website as a bookmark onto like your home screen now, since international or is such a terrible browser, some of the older versions of it didn't actually support PNG format. The recent ones do. But just to be sure, it's better to use a dot i CEO format. Now. There's not a lot of ways you can convert a PNG image to and I seo image while still keeping the transparency. So I actually found one called Dynamic Drive. So you just upload your dot PNG file and it will actually keep the transparency when it converts it. So you just create icon, and then you would upload that just right over here, which is out of favor con. And then finally we have the social sharing low. So if somebody shares their website on on social media, the icon that shows up would be whatever you upload right here. Now, if they share a block post, it will automatically take the thumbnail image of the block post before with all the other pages it will use the icon you upload here. Okay, so let's go back to the previous menu. And the next item is template. We've already covered that in the previous lecture, so I'll skip that. That's where you change the template. So next we have style editor and check out page dilator. They're both very similar style editor. Just once you change colors, text size and all that stuff, whereas check up Hey, just specifically for the Checco page, you'll see it in second year. There we go. So next we have the lock screen so you can actually password protect certain pages on your website. So if you're developing a certain page, you can keep it protected and so that nobody sees it until you're done. So this is basically styling for that page, so we'll go back and then we have the announcement bar. The announcement bar is what shows up at the very top of website, if you enable it. So let's a type in big sale. He'll show up right up here, and you can make that into a link. That show goes straight to your store. Okay, so we'll close this up will disable this for now, and we'll go back to the previous page. So next up we have the mobile information bar, so this is usually disabled by default. So when you enable it, you can either pick that it's dark or light. So when it's enabled, what you could basically show is email, full number, location of business hours. So this is actually something that shows up only when people visit on a cell phone on a smartphone at the very bottom. And it's something that doesn't really move, so it's always earns an option for them to actually call You were look up locations. So just to show you how that would look on a mobile device, if you just look right here at the bottom, email call map and hours, that'll actually always be on the screen no matter where they scroll. So that's kind of what the information bar will look like. So now let's go back, and next up on her menu is course based badge. So if you click on Squarespace and basically just is powered by squarespace at the very bottom, I wouldn't I don't really know why somebody would enable that in the first place. So next up is custom CSS. So this is where you had any CSS that can also the Web site. But it's not available as an option in the style editor. I'll go more interests later on in the lectures. So for now, I just know that it does exist. So finally we have advanced in here. There's actually only two options. So there's disabled mobile styles, which basically makes your website and got mobile friendly, which actually greatly affects your search engine optimization. So your page might actually go down in Google ranks, so it definitely don't disable it. And then we also the type kit kit I. D. So this is if you have adobe type kit, which gives you access to a lot of different funds. It is a paid service. If you want it, you could always just put in your type kid. I d here so you can use those farts. So now that we've covered the advanced portion, if we go back in the next lecture. We're going to cover what's in commerce and analytics. But I just want to take a quick moment to let you guys know that usually at this time or maybe even at the end of next lecture, you'll be prompted to leave a review. Now that's something you Demi does on their own, and I have no control over when that problem comes up. So if it does come up and you feel like you haven't learned enough to leave a review yet, just click the button that says, You don't want to leave a review right now and then you can do it later on one of you like But please do leave a review, and I do want to say thank you in advance for leaving that review.
7. Tour: Commerce and Analytics: Okay, guys. So now we're gonna take a look at what's under commerce and analytics. So if we go into commerce first, there's only three options. They're pretty straightforward as well. So anything to do with orders and any kind of purchases on your website will show up here. So orders Pretty straightforward. It will have a list of all your orders. Like who made the order? What I p address. They use what day it was made on what item? How much it cost, etcetera. You can export all that to comment, comma separated value sheet so you can import it to a different software if we have one, and then we have inventory. So that shows you how much product you have. I just put in a temporary product just to show you what it looks like. And then if we go back, we have discounts. So here you can create coupons and provide discounts to anybody that wants to make a purchase on your website. So if we click on add discount, we have four different options. So any order. So it's pretty much a flat rate discount, or we can have percent discount. So, like 10% off of the total purchase or free shipping. And then there's also orders, at least so that's the same thing as any order. Except there has to be a minimum purchase, so anything over $100 can have $5 off or 10% off for free shipping. And then there's products by category. So let's age, so T shirts and pets. You can offer a discount only for T shirts, but not for pants and then single products of specific product. You pick a product and that can have a discount. Okay, so now that we've looked at that, let's go back and we'll look at analytics. So here we have a couple of different options of first owns traffic overview. So if we click that, it shows you pretty much all the visitors to your website. So we had one visitor. That person looked at seven pages, so that was probably just meat and I was on November 6th so we can look at it hourly, weekly monthly, and then we have mobile usage. So this shows only people who visited on their smartphones. So here nobody's visited our website on our Smart on a smartphone ever, and then we have RSS subscribers, so that's pretty much shows who subscribe to your blood. Next, we have popular content, so that shows you all of your pages in which one has the most page views, so you can see what's popular, what's working and what's not. Then we have search. And in Corey's this is pretty fascinating. It shows you what people exactly searched in a search engine in order to land on your page . So what? They typed into Google or Yahoo? And then we have sites where search query. So this is what they searched on your website. So right now, I don't really have a search button on my website, so they're not searching anything. But if you did have a search button up here or on the side, then it would show like what people are searching in here. And then we have activity log. So this shows who visited from where and what page they visited and on what date And then finally, we have sales overview, so that pretty much shows what you sell, how many units you sold and when you sold it. So as you can see, the commerce and analytics portion of the website is pretty straightforward, kind of just provides you with kind of feedback on how your websites doing, and then finally we have the settings, and I'll take care of that in the next lecture.
8. Settings: General Settings: Okay, guys. So over the next three lectures were going to be filling in some business information. Now, the main purpose of this is basically search engine optimization. So search engines like Google will know what your website is about. So we'll head on over into settings and in this actual will just cover the 1st 4 which fall under the general information. So first will goto business information here. We're going to enter our legal business name now since visits, I'm just gonna make this for my own personal company. So we'll fill in a B g tec. Okay, now the legal address. I'm just gonna leave that out, But I put in the city in the state, so that's Tronto, Ontario. And that's in Canada. Now, I won't put in my tax registration. I d. I would suggest that you do. This just goes on your invoices so that people will know, like, who they're paying their taxes to. So contact number. I'll just put in a random one here, Okay? And then finally contact email. So I put in my email address here. Okay, So some temples actually show that on the website. Um, this one I don't believe it does, but we can put that in ourselves. That's not a problem. So again, we just put this in here. That's for the map. Okay. Perfect. And then finally, business hours. Now you have a couple of options you can put here these air, basically the different types of format that you can actually using here. So I'm just gonna put open for all the days because I don't really have specific time. Perfect. And we'll go ahead and save, and then we're done. Now we're going to regional. So this is basically where your actual offices. So I don't want to put the exact setting, but I will. Sorry, I don't want to put the exact address, but I will put, um, like, roughly where I am. So first, the language I am Canadian and then geography. So again, Canada, there it is. Perfect. And the closest city is Toronto, and I'll leave it at Imperial. Okay, so next we'll take a look at permissions inside permissions. What you could basically, dio is give other people access to your account without actually giving your user name and password. So, for example, you can invite somebody to help you with the website. You just putting their name and their email address here and you can give them specific permissions. So some people can only adblock poster changed the wording, but they can't change templates or, um, like change of plan. And then another thing you can do. Another thing you should do actually is at a basic author, especially if you're going to blogged. So you would put in their name, their picture and the Google plus profile. This will show up on search engines as well. And then there bio. So first name, last name, their personal website and a little blurb about himself and then where they are, you don't really have to fill in the location, but the other two I would definitely recommend. And then the last option you have here is to transfer ownership. So if you're a developer, you can create a website and then transfer ownership to whoever is actually going to own the Web site. But do keep in mind that you have to add that person is an administrator first. Okay, so the last option in this section is building an account. There's five things we can pick Here's the first of billing here. You can cancel your trial. You can see when you've been online since and you can change your plan between the ones that are available underneath invoices. You can see a list of all your invoices per month that you paid to squarespace. Now, these aren't the same invoices as when customers order through your site. These are only for your own account. Log in history shows you all the different days that you've logged in. And you can delete your side by clicking here and then delete site. And then finally, we can switch. Right now, we have it set up a website. We can also switch to commerce or a cover page. Okay, so that's what was in the general section.
9. Settings: Website Settings: Okay, so we'll take a quick look at what's under the website sub menu. So the first thing we have on the list is basic information. So right now my website is set to a business website, which is what I chose when I created my account. Now you might have either commerce, nonprofit, personal or business, depending on what you chose. And then we're gonna pick site description. I'm not gonna type up a new one. I'm just gonna copy and paste what I have on my own personal website. Now I'm gonna give you guys a tip that's going to save you a lot of headache. Okay, if you just copy and paste from another website You see, I have this font looks kind of weird and large compared compared to like the rest of the funds here. So what happened is it actually took the style of the text that was here. So when you copy and paste text, you want to click right here, which has paste is plain text. And then now it's a smaller font. It's the proper finds How it should look. Okay. You also have the option of turning off squarespace promotion What that is is if your websites are really good looking website and Squarespace thinks though it'll actually include it and promote it for you. So, for example, if we go to this is like the initial registration page, So from here and let's say we had picked this template rate if you actually scroll down instead of previewing, it will show you what companies are using this page. So these are actual what sites created using the specific template. Now, you could be included in there. Squarespace thinks that you're worthy. Okay, so now that we have that set up, let's go ahead and save and we'll go back and then we'll go into domains. So domain is what people actually typing up here to come to your website. So this is what it said to right now, and I don't really like it. But this is what comes free with the trial. When you actually purchase a plan, you'll actually get a free domain. So if you go here and you type in what domain you would ideally want, so dot c a or dot com. It will give you a list of what's available so pretty much anything that's $20 it's free and included, um, with your actual package. But anything more than that, you'll have to pay the difference. Okay, and then we'll go ahead and go back. And if you have a domain that you bought from Go Daddy, your name cheap, you can actually connect that here. It's pretty straightforward. Most of the popular ones it does automatically, but anything like one and one. I believe you'd have to actually go in and change the domain name. Settings yourself. Now we'll go into email. This is actually pretty cool. You can actually get a domain email, So if I got a domain that was www dot a b g tec dot c a. I could get an email that's info at a b g tec dot c a. So, first of all, you have to connect a domain before you can do that. But this email is connected to Google maps, so you'll get pretty much anything that's included with Google APS included with your email address. Now, social media is definitely a major part of a website, especially because it helps with your S e o quite a bit. Now, Squarespace makes this very easy. You just have to go to connected accounts and then you can click on connect account on. Do you pick which social media platform you want to connect? Some of them actually called that you have to log in before you can use it. For example, Instagram And what that does is it gives you the option to put pretty much pull all your data from Instagram. So all your images and display on a page so you can have, like, a stream of images and you can do the same for Facebook or Twitter. I'll actually had one of my accounts or maybe a few of my accounts, just so you can see how the process goes. So I'll click on Connect Account Will do Facebook first. I'm already signed into Facebook, so it should automatically signed me in here. There we go. And then the pop up comes up. So showed the social icon. So it'll show up where we wanted to our tree where it's gonna show, actually, And then this is my Facebook profile, and I don't want to show that actually want to show a B g tec page, okay. And the will hit safe. So now down here, where have the icon? It'll actually show up. Now. Any social media that I adhere will show up here. So, for example, if I connect Twitter next, let's go ahead and find Twitter. Let's search for it. Actually, Twitter, Here we go. Now, this one, I'll probably just sign in to my personal account and then authorize. And then there we go. So now Twitter's added, and maybe I want to hide this from the footer. But I still wanted to be connected. I would do this. So now in the Footer is not actually showing up. If you want to add it, you just check off where says show social icon and where the option for download data is. That's how you actually download data from Twitter so he can display it on a page. And I'll show you that later on in one of the lectures as well. Okay, so that was connected. Accounts next up is marketing, and first option in marketing is for S E O. And in here we can fill in our search engine description, which is what shows up underneath your websites. You were well on Google or being or anything like that. So again, I'll just copy and paste my website description from my personal website. Okay, Now this one is only plain text there, so there's no option, actually paste as plain text. Ah, home page title formats or what you want your home page to look at. So right now is just as percent s which if we go up here, is the title of our website. So it would show you Dem unc and then collection would be things like Blawg. So what the bloc would show is and right now it's percent c So which is which so would be blawg and then title and then finally items. So this is like a specific block post would show up as the block the name of the block post . Okay, so we'll go ahead and save that description that we put in there and we'll go back and then we have share buttons. So these air buttons that appear at the bottom of blocked pages and it allows people to share to different social media. I usually like to check off everything because why not? Like they can share wherever they'd like to gives me more exposure and then pin it buttons again. Those are the little buttons that show up in the corner that let people pin. I like to enable just for blog's so that button doesn't show up all the time. So it'll look like this And we can change how it looks like we could make it smaller, large, and we could be a rectangular circle and white, red or grey so we'll save will go back and then Facebook page. Okay, so this option lets us link our Facebook page to our specific gallery page. So, for example, if I sink up a b g tec, which is my actual Facebook page, which is right over here, it will actually add a top to the left side here that will say gallery now, another, anything we can do is actually install a page. So one of the pages I have up here so home about news, read me. I could put one of those on the side here as well, so it's really cool. Way to keep things inked up. If you like. Now I won't set it up, but you can. And then next up we have Google AdWords credit. So you get a credit. So $100 credit with any business plan that you have with squarespace So neat little way to start advertising your website and marketing it next will go to blogging. So here we have. We can change how the u R l is so how this is on a block post Right now. It's set to be my website slash The year was posted slash the month it was posted slash the date was posted and then slash title. I don't really like that. I usually like it. Just be the title. So I'll leave it like this and then for comments. Well, first say fat and then enabling comments. I love to enable comments Jessica's when people leave comments that's bringing more traffic to your website and giving you more social validation. So I'll enable that and then we'll head on back Now discusses the way that people can leave comments using discuss instead of square spaces built in commenting system. I don't really use discuss too much, so I won't be putting anything in here. I find that the system that squarespace has naturally works pretty well. Okay, so simple. Liking is enabled so people don't have to be signed in. So that's fine. And accelerated mobile pages will turn that on because that's actually a really cool way that people can share your block post to social media. So actually it saved and will go back. So next up we have Security and SSL. This is actually a feature that just came to Squarespace very recently before what would happen is any check out page where people would put in their transaction information like your credit card information and all that that was SSL, so it was very secure. But now the entire website can be secured, so by default that's turned off. But we'll go ahead and click secure and then down here you can set a password to your website if it's still under development. I keep that disabled just so if I'm working with a client, they can see their website without logging in and they will go ahead and go back and in the final thing under the website Tab is advanced. So here we have the four old four page. So if you had a website page that you deleted, but people still go to it. It will automatically take them to a four a four page, which looks like this. And then they can just click through to one of your other pages instead. Okay, so you could actually make that your home page, so any any time they visit a website page that's been taken down, it redirects them to the home. But I like to leave at 404 so they know that the page doesn't exist anymore, and they stopped linking it. So now we can change the default text editor. If you would like from rich text a markdown, I would say Leave. It is rich text. Just because mark down makes it a little bit harder to get stuff entered. Okay, so now we'll go to escape key. So this is basically log in with this Kiki. So if you're not signed in, if somebody comes to your website and they want to sign in, they just press escape. This makes it really easy when you're still developing the website, but I think it's kind of like an unneeded future once it's gone life. So I'll actually disabled it. No, because I can almost guarantee that I'll forget to disable it later because I don't want users to be able to log into the website by pressing escape. Now, import and export is an extremely important part of squarespace. If you ever decide to leave Squarespace or come to Squarespace after using one of the CMS is, you can easily bring in all of your block post from there. So, WordPress tumbler, the older version of squarespace Blogger Shopify or Big Cartel. So it'll save you quite a bit of time having to copy and paste your actual block posts all over again. So next up, we have external services. So here we can add a Google Analytics account number if we want a little bit more analytic information than what Squarespace itself provides and then your Amazon associate tag. So if you ever selling products anyone collect your actual of referral money from Amazon, you can enter your tag right here and then develop remote. It opens up squarespace so he could actually change anything about it that you that you want. I would say keep it off unless you know what you're doing just because once you turn it on , it doesn't actually website. We'll update anymore. So Squarespace will stop updating it because it looks like you know what you're doing. Okay, so make sure you leave that off and then code injection. We're actually gonna come back to this later on because this is extremely important. Um, here you can add things like your Google Analytics code. If you don't want to use the tag in the previous section, you can add coat to the footer, the header, the locked pages, all that kind of good stuff. Okay. And then we have you are l mapping. This kind of goes along with the 404 page earlier, and it adds a little bit of features to that. So let's say you had a blawg and it was originally your website slash plug and then you change it to a website slash info and tips. You can actually redirect the website so that anybody who visits your old block gets redirected to the new block. So again, extremely good. If you're making a lot of big changes, and then finally is image axe. If by default, this is turned off, what it does is anytime you upload an image to squarespace it'll pull in the title of the image and the tags. If you have that populated already, most images that you upload won't have that anyways, but you can enable it just so that you can save a second or two when you import images that do have that so we can do that there and then we'll go back on back again and that covers everything in the website section and the next time will go over the commerce section and then finally will be done with setting up the settings and we can move into the actual website.
10. Settings: Commerce Settings: Okay, guys, I hope you're excited. This is gonna be the last lecture that's gonna cover the back end information of the website. So starting next lecture, we're gonna cover creating the actual website. So the fun stuff. Okay, so And underneath the karma section, there's a couple of options. I'll go through them, and then we're done. Okay. I like to get this boring stuff out of the way. First. When I do, we're say, just because otherwise, I know I'll procrastinated, and it won't get done on time. Okay, So first will go into payments, okay. And payments. We have options for two different methods. We have stripe and PayPal for stripe. All you do is click connect stripe and will take you to a link where you can sign up. So I'll make this a little bit bigger so you can see the full form so you can sign in. And if you don't have an account, you just click on, sign up. So once you hit, sign up, it'll take it to a form so you can create an account, and then you can go ahead and fill out your information and take it from there. for PayPal right now. For me, it says in beta, but for you, depending on when you view the course, it might not. So PayPal is actually that just came out today, actually. So like, squarespace dinner? Um, an option for you to actually use that until now. So what you can do is you can entry email address. So, for example, if I enter my business one and then enter the code so you won't be asked for a code I am because I've tried to sign in a couple of times now, So if you click on next, it'll take you to create an account. Now, that's because right now this email address isn't part of a business account. So if you have a PayPal address with the business account, for example, if I enter my actual people, so go here and then go there we go, E h. And then I go ahead and go next. It last made of signing, since it actually sees that that is an account. Okay, so that's I used to get that set up. And you can also change your store currency here from USD to a different currency. So next up is check out, and from here you can connect your mail chimp pick out if you want to collect people's email addresses. So in the future, if you have a sale on your Web site, you can send them a newsletter. Then we have the default country. So if you only sell to people in the United States, for example, who would make sense to set the default country to the United States, So it saves them one less feel that they have to fill in. Then we have the shipping and billing address, so you can automatically set the shipping address to be the same as the billing address. Now, if the customer washed after due to different addresses, they can just check off a radio button, and then they have the option to do that. And then after that, we have expressed check out. So what? That is this? Let's say you only have one product on your website. It doesn't really make sense for the customer to add that to a cart and then and then clicked on the check out button. So what this does is it replaces the add to cart button with the purchase button. So as soon as they click purchase that automatically goes to check out. Okay, so next up is shopping cart style. Here we have the option of changing the color scheme of the check of page delight instead of dark. So right now our website is ah, white background with black text, and the check out page will look similar. So let's say you change this background to black. You want the text to actually be white instead, and all the other colors to be a light colored as well. And that's what this button is for. And now the next order number. Actually, just it's pretty basic. It's what number appears on your invoice for the very next order that a customer places so you can start it at one. But let's say you've been doing business for a while without your squarespace website, and you've already made 100 orders you could actually started at 101 so that you don't get confused between the invoices and then we have additional fields. So from here you can collect extra information from the customer on check out. So full number is collected with shipping and billing address. I personally don't need full number from my business. I'll turn that off and then you also have a check out page custom form. So let's say you do something like sell personal training online. You can collect somebody starting weight. They're ending. Wait, um, the exercises they like to do and what they don't like to do all without having to email them personally. So if you go to additional information so that would be the name of the form and then you could add an extra field and we can make that maybe a check box, and then we can call it what exercises do you like? And then I'll show you, actually, how you add it forms later on as well. But basically, it's one check box per line. So squats and then dead lifts. And I spelled that wrong. So dead lifts okay, and this is what it would show up, like on the form itself. And I don't really need additional information. So it looks something like that. Now, I won't actually use this for my website because I don't really need it. So I'll click discard, and I won't actually use the form. But, I mean, you're free to use, and you can see what kind of like powerful features that adds to your check out. So that was everything for additional fields, and now we'll go to check up age store policies. So in store policies we have three different boxes we can fill in the return policy, the terms of service and the privacy policy. So, for example, some things you could put in here is no return after seven days, please don't share this product with anybody else. If it's like a digital product, like an E book, that after doll mode privacy policy, something like we don't sell your email address to other third parties, that kind of stuff. Now you can actually Google for privacy policies and use like a template that you can kind of work out toe work for your business. Or you can have your lawyer do for you without probably be the smart thing to do. And then finally we have invoices. So under invoices weaken basically change how attacks appears on the invoice. Okay, so just have a look at this as well. OK, so we'll head on back, and then from commerce and I will go to notifications. So now anytime somebody orders something from your website, they automatically get an email. Now, if they try to reply to that email, you probably won't get it just because it's automatically sent to no reply at squarespace start info. So again, you can change this If you would like, um, so that if somebody has a question about the order, they can just hit reply from the order page, and then we have the from email address. So any time a customer gets an email, this is what will show under from I would actually recommend leaving it as it is, unless you have your own personal domain, like a b g tec dot c a. And you have the email address info just because if you use something like Gmail or Hotmail , it's nine times that attend. It will be marked a spam, and then they won't even get it, or it'll go straight to their spam or junk email. So again, just leave it as it is now. You can automatically get emails if your items fall below a certain stock level. So let's say you you always have 10 stock and suddenly goes down to two because somebody ordered eight. Then you automatically get an email saying, Hey, you're running low on this item. Do you have more? And then we have customized email. So here you can actually change how the email will look when it's being sent. So for order confirmed. So once you confirm it, order. But the email will look like so you can change this. And this is a convention that squarespace uses for order number and what product it is all that kind of stuff. So we'll go back and you can also customize the order fulfilled and order re funded and also the header and footer that shows up on the email. So in the header you can put something like Thank you for your order. So thank you for yeah, and that way that's automatically added to every email relating to orders. So then we can save that, And then again, this is a footer and you can send a test email just to see what it would look like. So that was for the header and footer. So we'll go on back since we covered this and then shipping. So here is pretty basic. You can have different shipping options, so flat rate or depending on weight. So flat rate of let's say it was called next day shipping and and then we can put like a base fee. So let's say all the shipping is gonna cost $10 then $2 per every item that the order and we can set that to just a specific country. So right now it's anywhere in Canada, gets that shipping, and then we can add another one for a different country. So maybe to the United States it will be $20. So next day, shipping again and it will be $20 then $10 per item. And that's where the U. S. So we'll close out Canada and we will add United States. So the United States okay, and then let's say that's the only two places we ship, so we'll hit back. And then, though that set up next up his taxes. So here you can actually set up a specific tax rate. So, for example, add country. Let's see Canada, and we'll use Ontario, so HST would be 13% and you can charge the actual attacks on shipping and services as well instead of just products. Because again, your products can be something you ship out or a service like personal training so you can charge it on both and then we'll save and we'll go back. And then finally we have donations. So if your website if for Laker church and you're collecting money as a donation, something like that, you can send a message any time somebody actually donates to your website and you can change what the message says, what the title of the email is, and then you can also send a test email just to see what it'll look like. Okay, so we've covered everything there and we've covered everything under commerce now. So if we go back and now everything under settings is done, so starting at the next lecture will be starting with creating an actual website. So I hope you guys are excited for that
11. Cover Pages: Creating the Page: Okay, guys, as promised, we're finally gonna get into the fun stuff. So creating actual pages Just a quick reminder. Like I mentioned earlier in the lectures. The pages that says demo beside it aren't quite live yet. So anybody that visits those pages, so if they actually click through to those pages, it'll actually show nothing. Where's the home page here? I've already made it a natural page, but I don't want this move my home page right out just because it has nothing to do with my business. So I'm gonna set up a cover peach. Okay, so today's lecture is about cover pages. So the freshly we're gonna do is we're gonna click the plus right up here. How long we can choose what kind of page we want to create. So we're gonna go ahead and click on cover page, and we'll name it may be home page. Okay. And then now this is a menu that comes up these air pages that I would recommend he used while you're in development. Just so that people know that the website is being worked on and that they should come back at a later time. You can also collect email addresses here so you can actually directly send a newsletter when your work site is up. So the first thing we'll do as well go to change layout, I will pick one that we like. Now there's quite a few here. You can filter it again. Some of them are lining pages. Some of them are profile. So they will show, like, your picture or like, a picture of something, and then show a description. You could also have audio, which will play. For example, this one plays a single song or music track. Where is this place? A playlist that you can upload. Then you have video. So you connect a YouTube video or video video and they will play once somebody presses the play button and then you have location. So if you're opening up a store, you can show where it's gonna open up just so people know ahead of time. And then finally, Twitter. So you can show your recent tweet on the actual lining page, so I will actually pick landing page, and I'll use this one. Okay, so when that opens up, what I'm gonna do is go ahead and hit save, and then we'll head on back and there will change the different aspects of this page. So the first is branding and text so we can change the words that appear just up at the top . Here. I don't want to use words. I'm going to use my logo. So let's go toe logo will add an image. And my image is, I believe under here. So right here and then logo and I'll just upload that. There we go, and that logo will show up in just a second. There we go. Now we'll go ahead and change the headline to coming soon and the body to just my tag line . Maybe. Okay, and the we'll go ahead and it's safe now. Most of the layouts, like the different layers we could choose, have similar settings under branding and text, so you shouldn't see anything to different in their next up. We have media, so this is the background. So first I want to download a background I don't really like. This doesn't really match what I'm trying to do, So let's go to free images. So the two that I like to use the most is picks obey and pixels. I'll put both of those in the description so you guys can go ahead and download images from their these air free to use images that you don't have to put any, uh, make where you got it or who took the picture, anything like that. It's just free and royalty free. So let's go ahead and type in, maybe website, and we'll see what comes up. I went through the same over here. Okay, so that's what shows a piano. Really like any of these. Maybe this and over here. I guess maybe this one's a nice one, so we'll go ahead and we'll download it. I would recommend using this for this size because the maximum size allowed on squarespace is 1600. So no point using an image of this big. So we'll click on that and we'll go ahead and download. Okay, so that's downloaded. Now look over here and upload the image so we can either use Getty or just a regular image from your computer. Getty images are paid images, but you can see what they'll look like before you use them, and they have quite a bit of selection, so For example, if I type in website, these are the different ones that come up so you can use them with a stamp until you're actually ready to go life. So there's quite a few images up there, so I will upload my own image and there's when I downloaded and that's uploading perfect. So I'll go ahead and save and we'll go back, OK, and the next up we have actions. So this would be like this contact button right here. So let's go to actions right now we have a contact button that leads to a contact or actually sorry, it actually straight to the squarespace website. Um, we can leave it like that. We can add like a menu. So it would be like home about contact so we can have different pages in there, But I'll just leave it as a button and we'll put in Actually, no, I won't even put in a button. I'll just put in a form so get notified at it form and will put in Yeah, they'll ask their name and just email address. I don't really need subject and message. If it was a contact form that I would but I'm just gonna connect this to mail chimp. So make it, um, male chimp form and it'll go storage, and then we can connect it to mail chimp, or we can get it toe automatically sent to our email address. So this is how you would connect a male jump. You just click here and log in. I'll actually show you guys what that looks like. So we'll go ahead, I'll sign in. Perfect. And and now I just have to pick the list. I think I only have one list. There we go. Go, go for that. And then under advanced, we can change what the submit button looks like. And what they're what prompt their given after they submit something. So we'll go ahead and we'll save that. So that way people can sign up for a mailing list. When are my website goes life? So it will be sort of like like that? Okay. No, I don't like how that says military form, actually, So let's go back and change fat into get notified. Perfect. So we'll save will save that and we'll head on back. So from here, the next option is social icons. So That's basically just a check box if you want to show you your social icons down here or not. And obviously I want to show it just so people can get more information before my website goes. Life so safe and we'll go back now. There are more changes we can make to this page, and that's under the style section. But I'm gonna go over that in the next lecture just cause there's a little bit more detail in there. Okay, see you soon.
12. Cover Pages: Styling the Page: Okay, so we'll continue where we left off. We were just about to take a look at the style sub menu, so we'll head on in there right now. So this is actually what the style editor will look like for the other pages as well. There'll be more styles that you can actually add it, but this is just for the cover page. Okay? So when you actually let me just show you real quick. So when I click on the home page that we created and then go to style letter, that's only for the style on this page of the cover page. Whereas if we go into design and then style editor, that's actually for the entire website minus the cover page. Okay, so cover pages have their own specific style editor. So let's go to the cover page. I'll go back in the style editor. The first thing I see right away is I want my logo. Three bigger. Right. So there's a couple of things you can do you on the left hand side. You can look for branding and image, and then you can increase and decrease. It here would make things easier. You can actually click on your logo, since that's what you want to edit and then will automatically pull up just a branding. And then you can increase it and decrease it here. Now, the maximum it allows through their slider is 100 pixels, which is about this big. I wanted a little bit bigger. So what I'm gonna do is actually click in here, and then I can actually make it a little bit bigger than the slider allows me. So many. 1 25 So then I'll save, and then we go back to show all so we can see everything safe. Didn't quite take place there. Really? Now another thing I notice is that coming soon? I think it's a little bit too big. So quick directly on it or again, you get on the left hand side, go to headline. So I'm gonna click on it, and I don't want it to be great. It's kind of hard to see. So stick with black or maybe actually read. Yeah, we'll stick with red, Okay. And then we'll change the font to you can pretty much pick any of the fonts here. Yeah, we'll leave it at that not a major difference, and then we'll change the sizing to make it a little bit smaller. There we go. And it will make the beautifully crafted websites a little bit bigger and will make that one black a tiny bit bigger. Okay, so about 45 books looks good and it doesn't look like we can make it any bigger just because of there not being enough room. So 45 even 20 actually, biggest weaken get, I think so. We'll leave it at 23 since that's where kind of maxes out. And there will it save and we will go back. Save is just being a little bit weird on me here. There we go. It's just taking a little while. Okay, then. The final thing is a background picture D. C. How it has that little Hayes. It's not fully like 100% opacity like it should be. So if you click on the image right here, auto overlay color. So right there, that's where the problem is. So we can pick a color for the overlay. So, for example, I can overlay a black color, and you can actually pick what percent you want it to be over late. So if you pick a 0.8, which is 80% or like 90% or even one, so it's completely black. So I think maybe like it. 0.3, maybe five. Actually, I think five looks the best, so we'll leave it at 0.5 of the black and, well, it's safe. And I think that's about it. Like I like how that looks right now, so we'll leave it like that. You know, I've done what I think looks best for this page. But of course you can go through the different options here. So, for example, there's positioning. Now again, thes options are different, depending on which cover page template you chose. Remember, that was when there was like, 18 or 19 different ones that you could pick from. So this is one that I picked, and this is the options I have for this one. So first off, we have positioning so we can move that little white square and left, right or center, and I like it in the center and you can make the text itself left the line center right? I like it center then you have the imagery. So in the background you may get a great image which obviously I don't like. And another quick tip. You can actually click this little x your toe under the change you made for that particular setting and then auto overlay color. I didn't like that. And then we had image height, which was actually the logo here. The headline was right over here. Body was over here on background, So background color right now such a gray. So that's the color behind this image right here. Since we have an image, the background color we choose doesn't really matter. But if you decided, wanted like a black background instead of an image, here's where you would change that. And then the color behind the text is whipped in the background right here so we can make it read black again green, and we can change the opacity down at the bottom. Right now, the value is in hs l value, so that's hue, saturation and luminosity. So down here we could add, for example, 0.2, and that will put in the OPC for us. But I think we have added a here Yeah, so hs l A And then we can put in Opie City. Another thing we can do. If you don't like putting NHS l values, you can put a hex values. So, like, for example, 000 would be black F f f would be white. Technically, it's f f f f f f so you can use any kind of hex values like that, and you can also use RGB or RGB. Any values or 2 55 to 55 2 55 0 would be no pay city of zero on the color white. And then you can do 0.5, for example, and a cool thing you can do is actually just goto hex values. So the website would be the W three schools website. I'll include Does that as well. So you could, for example, pick like a blue color and then the different shades in a pay cities of it. So that's a cool way you can pick the colors that you want, or again, you can just go through here. This makes it pretty cool as well, and I'll show you one more tool. Actually, it's a color palette. The real destined that I use. So here you can actually pick some colors that you like, and it'll automatically pick the best colors for you to use based on that. So let's go on over to just refresh this. Actually, there we go. So we pick some colors that we like, So maybe I want I want red and Gray, since that's close to my website. So these were some colors that work well together. So put that in the actual description of the lecture as well. No, I don't want to keep that change. Obviously we have page border. That's the white border on the outside. And we can pick how big the border is. Actually. No, I might actually like the border to take a quick Actually. No, I don't. I don't, but you can pick the color. I don't want a border on the website. I like the full image. Then we can choose what for? It is used in the actual button here. I don't like that grey, Actually, I wanted to be suiting Thea. Other colors will make it in black. Actually. Let's copy the color from here. I like this color, so just copy this and well paced it for this, for this color of which pasted into here. Okay, just to make sure that's the same color and the most safe. And let's go take a move there. We'll see what else is available here. So, social icons. Yeah, they are kind of small right now. I don't even notice them at first. Let's make them maybe even extra large, because there's really nothing else on this page. And then we'll make them solid. No, that's kinda hard to see. Not with Border was make. It actually was probably best how it was before. So we just undo that regular know it waas Nacchio and not standard colors. Okay, I liked it quite better. Um, maybe read, remember, copied the last red color. So no white looks better. Okay, so we'll leave. It is wait and we'll go ahead and and hit Save And we have one final thing to do here. This is a page that I want to show up the actual home page for people when they visit the website. Sorry again. There we go. So let's go back, and we're gonna click this little gear icon here because you see the little home hut that's beside home right now to the left, just right above my mouse cursor. So that means that that page is a home page. So when people type in my would say, this is what they're going to see first, I want to change that. So we're gonna click on the little gear icon here beside home page and we're gonna hit the gear icon here, and they were going to scroll down and set this as the home page on the will confirm. Okay, And then let's save. And that way we have that as a home peach. And now the whole icon shows up underneath that page. So we're good to go. Okay, guys, So in the next lecture will cover the different types of pages besides cover page, and we'll take it from there.
13. Editing Pages: Different Page Types: Okay, guys, selling this lecture, we're going to take a look at the different type of pages that we can create. Now, before we do that, I'm just gonna make two quick changes. The first is my logo. Because initially, I put this as you dummy website, and I wanna change that now. So I'm gonna put in my logo now, so I believe my logo is actually right here. Okay, Perfect. So that's doing so Put that in. I'll change this as well. Just cause halfway through, we decided that's gonna be for my actual business website, so I'll put my tie going here. Okay. Perfect. And then I'll also put in the favor con because I actually just had that generated as well . And the social will make it a square logo because most social media sites take square logo . So we'll put that in, and that should be done processing in a second. And then we'll just sit safe, go ahead and save. We'll go back just so I have my logo up here. And then one more change I'm gonna make is I'm gonna go to pages and change homepage into home. So just home by itself. And I'm gonna change home into home page and I'll show you why I did that in a second was mainly just to keep you from being confused between the different type of pages. Okay, let's take a look at the different type of pages we have available so quick. The plus sign here to create a new page, the fresh ones. Pretty straightforward. It's just a regular page. The other ones are the ones that need a little bit of explaining on. The reason I changed this cover page to just home is because I didn't want it to say Cover Page because it might be confusing between cover page and page so we'll just leave this home. The second thing we have is products. Now Products is it's not really a page is more like a store, so I'm actually gonna rename it store just so you guys know what I mean? And it's actually down here. I already made one before, so I'll actually delete this one. I'll show you the one that I meet so under store. If you click on it, you can actually add different products. So you click on this little plus up here. And then what kind of product do you have? So it could be physical digital service. Um, and then I'll go more into the store later on. But that's basically what that is. So you can have multiple products in there, and this is what the store page would look like. Now. I never use the store page by itself in the menu. I usually linked to a specific product in the different pages. And I'll show you how to do that in a later lecture as well. Okay, so now we'll quit the plus icon again. The next type of pages cover page which we've covered in an earlier lecture. And then we have folder. So this right here the about page is actually a folder. It's not an actual page. So if you click on a boat, it doesn't actually go anywhere because it's not a page. Um, actually, let me quickly just make all of these all of these pages, because right now they're demo content just so I can actually click on them. So is create, create. I'll just create all of them. I'm gonna be removing some of these pages later on because I don't need all of them like the news page. Not gonna need that. So create. Create. So you can also do this. Just go through and press create for all the pages that you want to keep. Of course, you don't have to keep everything either. So I go back. I believe there's one more cream perfect. So So the about page. If you click on a boat, it doesn't actually go anywhere because it's just a folder. The stuff inside of the actual pages and what happens is if you go up to the top, the about is a folder, so it's like a drop down. Okay, so the about isn't actually a page. Okay, so next up we have the album page, so if you click on album, we can name it whatever you want. All name it songs. So what we can do on the album pages actually upload album art and then put a description for the album and the artist name. Haven't also add track so you can upload music tracks and then people could come to this page to listen to those songs, and they can also share it. So that's what the album pages. It you don't really use it for too many websites, maybe for somebody who actually like a D. J or somebody who actually composes music. But for anybody else, not really useful. So I go ahead and I'll delete that because I'm not gonna be using that. And then next up we have the index page. So the index pages kind of similar to the folder. There is a difference. And I'll show you right now. So if we make it about so what happens is if we drag everything from about into the index page. So again, this is how you can drag stuff between make up and down by clicking and dragging. So now if you go into the about page one that we just created, what you'll see is that we have the what we do at the top, and then we have projects, and then we have partners, which is over here and then contact, which is down here. So we have all four pages on the same page. Now, the only down side to this is that if you hover over it, you can't go to different sections. So if you want to see contact, you actually have to click on a belt, and that's cool down to the very, very bottom. So that's one reason why wouldn't use that. But the cover page is really good if you want, like, ah, one page home page. So you have, like four or five different sections on the home page. Okay, so I might use that from my home page. But I'll delete it for now, and I'll show you what else we have. So next up, we have blogged, of course, very important. So has a little lower case? A. So we already have a block here. It's called news, so let's click on that. And then what we can do is compose a new block post. And so if we click here, this is what we would see, and I'll go through this later on in the in the lecture, specifically on blogging. Right now, I just want to show you the different types of pages really quickly, so let's see what's next. We have events, so that's basically just like a calendar. You could have events like yoga meetings or like um, that's a a specific course that you're having in its on a specific day. You can put that now You can't have people registered for these events is just like a showing what kind of events you do have. So you kind of fill this in with the name of the event, and then you can add a description of the event. Um, and what dates Start? So you just click on the start day and then you can entry time. And when ends, you can put in tags. It's not really too helpful. It does help a tiny bit with CEO, so you can add Italian, make it like, you know, yoga, retreat, um, or something like that. And then you put the events into a category. So meetings, um, sales, that kind of stuff. Next up in options, we can choose an image for the event and then event you are also is always gonna be calendar because that's the name of our page. And then who's who authored this event and if you want it to display some sort of u r l that something can click to go to a different website and then an excerpt is basically a short region of what you have up here so you could maybe use the first you know, 50 or 60 words. And you can also add a location to your event, like where it's gonna take place. And then this is if you want to automatically, like, right now, I have my Facebook connected so automatically update Facebook with the event, like saying that I haven't event going on. So that's event page again. I'm not going to use it cause I'm gonna be making, like, a Web design website so not too useful for me unless I was having some sort of like event where I teach people how to do it. So let's see, Next up we have Gallery Gallery is very important. It's probably the second or third most used page that I like, I find, so we'll make it maybe photo gallery. And basically it's ah, you just add images so you can, you know, upload multiple images, and I'm selecting different images on a windows by holding down control so you can hold down control and click multiple images on. Then you hit open. So one of the tiff format so you have that's on supported be PNG gifts and J pegs. So upload those three and the last two are slightly larger images, So we'll take a while, so I might not wait for it. Actually, while I'm waiting for that, let me show you something else. Really quickly. Do you see this little circle that shows up in the middle? What that is, is it's basically like it shows right here is the focal point. So if somebody had this image blowing up on their screen and the entire image wouldn't fit , Squarespace would automatically zoom in on just that important stuff. So right now it's set to the middle, which is my actual local. So I don't mind. That's actually a good focal point. So we'll leave it as it is. Then we'll go back. So this is what the photo gallery would look like. Okay, Now, again, I don't use the photo gallery up in the menu like it is right now. I would usually move it to the bottom, so it's not in the menu. And then I would link to it from one of these pages, so he actually let me show you really quickly what I would do So from one of these pages, I would click on, edit and then add in a gallery. Okay, Don't worry too much about how I got this done. I'm gonna be going over this again in later lecture. But basically out added in like this because I don't really have a page just as a gallery. I used the gallery in it to kind of advertise. Are there things so close that and I will delete the gallery that added fracture. I just want to save the changes or discard changes. And then finally, we're on the last one, which is just a link, so this wouldn't be a page would be just a link to somewhere else. So let's say a click it and then we can make it YouTube. And then I could add my actual. Just put youtube dot com and then I'm opening in a new window since it's to a different website and then we'll hit safe. The reason I set that to open in a new window, and so that now, if somebody clicks YouTube, it'll open up a new tab here. So then you. So they still have your website open as well. So when they're done with YouTube, they can go back to your website, whereas if it just automatically took them to you, too, without opening up a new window, they would get lost on YouTube, looking at different videos, and odds are they will come back to your website. So that's why I do it that way. No, I don't want to link to YouTube right now, so I'll delete it. And then we're back to how we started. So that covers all the different pages we have available. So in the next lecture, where will actually start creating pages?
14. Editing Pages: Adding New Pages: Okay. So last time we talked about the different types of pages that are available on squarespace , and this time, what we're going to do is actually change this navigation to better suit our needs. So I'm actually gonna follow the same navigation I have on my other website, and we're just gonna copy that over here. Um, another thing I'm gonna show you actually is right now, you see how it says home and that home page? Because I wanted people to see this page first while my wife site was under development. So I actually don't like I don't want this page to be in the menu. So what I'm gonna do is I'm gonna drag it down here to not linked, and I'll show you what that does. So if I go back to this home page So this is ultimately what my website will look like, like obviously with my own images and everything, but I don't want that home that's down here to show up here. So that's why I moved it down to not linked. Now that page still does exist, and it is the first page that people land on, but as soon as they go into my website. Like when I give them access, Of course. Then they will have no option of going back to that website except by clicking this logo, which takes them back to the home page automatically. But once I switch this to the home page, all that will be gone. So I can even delete that page if I wanted later on. Okay, so let's go ahead and copy over some pages. Now the very first thing that I like to do with any website, its first set up the page structure just so that the menu at least is in place. And then I can start editing each individual page. So I'll do that. I'll do that same thing here with my own website. So first I have home. So I'm gonna change this back to home now, just because now that you know what the different page types sorry, there's no need to call it the home page. So that's perfect. We'll call it home, and then we have portfolio, and we also have about Celeste. Add a port for you. P direction. Jealous? I didn't put for your page, so make it portfolio so that's a new page. I'll ignore everything here for now and just click start editing, and I'm not gonna add in any, like text or images in just yet. So I'll just hit safe a little drag portfolio into the second position. So it's the second thing on the menu. So next up, we have hosting, so we'll put that in a swell. So put plus at a page and hosting. Right now I'm adding everything is pages. If something else is gonna work better, like, ah, store or a block, then we'll change that as, like, other comes up so hosting, because I know for sure like pages can support everything. That's what I'm adding. Everything is a page right now. Next up, we have about us now we already have in a boat folder. Uh, I only wanted to be a page. I don't need it to be folder, so we'll make it a page and will delete the about folder and change the what we do to about us. So about us, okay? And then I'll also change the u R l to about us now. If I put a space in there, automatically put the hyphen, which is what I want because this is nothing to see. Oh, it's just a misspelled word it won't even detected as Anabelle pH where if we have the hyphen, then it will know that a boat is a different world than us. So it will know that this page is about us, and that's the search engines himself. Where is under? If you use an underscore, it won't even let me use an underscore. So if you did something like about underscored us for the girl that actually won't be detected as two separate words because, um, search onions don't actually use underscores a word separator. So that's why squarespace automatically changes it to the hyphen. So if I put a space so about space, sorry about us and the space, it will automatically change it to a hyphen instead. So let's go ahead and save fat, and the next up we have blogged. Now I know automatically. This is gonna be a block type page, so I'll actually actually delete this and reality. So you know how it's done. So you press plus and then blogged and I'll actually name it blogged, So that's perfect. And then we'll go back and move that down here and then next up, we have contact us, so I don't need to read me. Page, take action. Let me see what that looks like. So, yeah, I can just change that to a contact page. We're gonna change all the images and text anyways, I usually like starting with blank pages. Uh, like always. But in this case, I'm just gonna rename it just to save a little bit of time here. So they were just a home portfolio hosting about us blawg. And then contact us so that all the pages I have here, so that's perfect. So that's how you set up the menu. Now I'm gonna stroll you What the secondary navigation looks like here. We put photo gallery and store in here. So in this theme, in this specific names, some have it on the left hand side. The secondary navigation actually shows up in the footer here. So what you can do is you can put something like your terms and services, your copyrighted information, your privacy policy, that kind of stuff in here. So this is just for this team, which is a Bedford theme I'm gonna go back to home, Okay? And then in the next lecture, I'll show you how we can actually style the different pages how we need and start with, like, a default template for these pages, if that helps.
15. Editing Pages: Banners: Okay, so now we're going to do is we're gonna take a quick look at how we can change the background banner. So the battery is just at the top there, behind the header. It doesn't show up anywhere else on the peak. So what we do for that is we hover over the banner until this little pop up comes up. So again, that only comes up when you hover over the actual banner itself. And they were gonna click on banner. So what comes up is the actual image that that we're using right now. Now, what you'll notice is that if you click on basic, we see this green. And we have seen this before. I'll show you where. So on home, if you click this little gear, this page will come up. So this is the very same page. You can actually click on media right up here. And that will take you to where you can change back the banner right now. We can actually remember. I told you about this point. You can move it up and down. So if you look right now at our home page, you see that it's being cropped at the top of the trees right here at the bottom. It being crop right over here. So right across here. Now, let's say I had a little like a a tent over here that I really wanted to show and that that person doesn't really matter. What I can do is drag the focal point down to the corner and then hit Save, and now the entire corner will be shown. Okay, Now I'm gonna show you how it actually change the image. So the first thing you do is you hit, remove, and then you can get an image from Getty image by clicking here, just like before. How should you or you can click on add an image so I'll click on Adam Image. Now, I have some images here that I can show you. Just one quick second. I have some saved. There we go. So it's I used this one. Yeah. I want you to work. Que will open that at and then I'll hit safe. We'll see what that looks like. Okay, so that's not bad, but I can't really see my logo up at the top here, so I'm probably gonna change that image, and it doesn't really say it's about Web design or anything. It's kind of hard to tell what the websites about from that picture. Let's go ahead and move removed that and we'll add a different image. I have one of the one we can use, which is this one. But this is a very large image. And like I told you before, squarespace doesn't really handle large images. Well, so it's better to resize this. So let me go ahead and copy and paste that. So I just did control, copy. So control, See? And then control V to Paste. And then I'm gonna edit this. Just opening it up with Microsoft. Yeah, just with paint. And they will hit resize. And I'm just gonna switch over the pixels and I'm gonna make the horizontal edge, which is the largest edge, just 1600 and then save close and will use this one. So then it's a smaller image to the website loads faster, especially since a larger image doesn't really change anything when it comes to Squarespace . So we'll hit, save and then there we go. That one's a lot better than what I had before. I'm gonna end up changing this color later on as well. Now, what we will do is next will click on banner again. And I just want to show you that you cannot. You can actually also have a video in here. So instead of image appear top. You just click on video now YouTube or, um, the media works the best. So let's go ahead and copy a YouTube video URL. So I just typed in a search for squarespace. Ad pulled up the 1st 1 that came up and I copied the URL, and then I just pasted over here. Okay. And then this opens up and I can choose a filter. So, like a blurry filter can invert the colors. You could make the brightness more or less. You probably don't want it full brightness. But I'm sure we can edit that a different way by putting a color over talk and then playback speed. So 1.5 times 0.5 we'll leave it at one and then on a mobile browser. The video won't actually show up because videos on mobile devices will use up a lot of data . So by default, it won't show up. What we can do is put in an image so that the image shows up on the mobile Web site and the video shows up on the desktop. So well put indeed, that same image I used here and the, well, head safe. So now what we'll see is the video playing in the background. It might take two or three seconds to load, depending on the Internet beat. So here we go. So kind of powers up in the video starts playing now. I'm kind of lucky because these white fonts actually show up over top of this. But the logo is being hidden in some of the screens. So there's like, there's something we can do here. Let's take a quick look. OK, so we're going to design and then style editor, and what we can do is actually just click right up here over top the logo so that you see, the blue bar goes around that navigation bar and the logo, and then we're says transparent on batter images. We can turn that off, and this is what will happen. Okay, Now, this work sometimes, and it doesn't work. Others, like right now it doesn't really look too, too good. I liked it better how it was before. So we'll try our next option, which is the hover over the banner. And we're gonna put in a darker color or sorry, a lighter color since our logos dark. So we'll make it maybe like a white. See, I will make it a white, but it still doesn't work. You know what? Let me put in a white here. And then there we go. We could do something like that. And then, of course, we would have to change the navigation bars. Color is well, so navigation would be black. And then the active, which is a navigation page that you're on right now. So right now we're on home. That's why it's white. We could make that bread to kind of go with the logo and then also this pill right over here. So that's the navigation button. If you don't want that button, you can just click right here. So goes back to regular. I actually I don't know if I like it. Let me see. Yeah, I think I Yeah, I actually I don't like it, so I'll get rid of that, But not all templates have the option for that pill. This one does. So we have that available in the style editor. So look, like back, back. Okay, so now I'm gonna do something here. I don't really want to use the video. So what I'm gonna do is I'm gonna switch the overlay color back to the great here, the black that it was before. I'm gonna switch back to the image. So let's go back back, and we're going to pages, the gear, media and all you have to do. We can leave the video in there and just switched to image. So that way, if you ever want to switch back to the video, it's very easy. So there we go. We have the image now. Andi, the black actually doesn't look too bad. Might have to change the Europe a city of the black overlay just a little bit, because it's a little bit too dark. So we'll click here and then batter overlay. We'll just bring it down a little bit again. I'll be going through these options with you in a leader. Lectures. Well, right now, I just want to show you how we can make sure that this image is perfect because this is the first thing that people see when they come to your website. So it has to be perfect. Okay, so that was how you add a banner, image or video. Now, what we're going to do is quickly change this text right here, because obviously my website isn't about sustainability. So let's click on this gear icon. So under description here, you'll see that each one of these lines up with this, right? So anything that you bold right over here by bold we'll show up with a large volunteer and anything that you leave is normal will have this little italicized light writing. So what I'll do is I'll put an A B g tec. We're gonna try to different things here. So a b g Tech. Yeah, Capitals. Fine. And then here I'll put in from my website. I'll put due to their Maybe I'll take that. No, it doesn't. Copy. OK, so actually take where Press the eyeshades. Okay, let's take that in. Because I remember I put that in with slider revolution so it won't work. Html and CSS on PHP. There we go. Actually. Wordpress as a capital there. And then it's going to say get started today. So get so what? Right now, you see, that underlined a need to learn more. That means that it's a link. So right now it's a button. So anything that you make a link will automatically become a button on Lee in the description for this template. Now, most templates have that same feature. So first, I'm going to remove that link, and then I'm gonna put in get started. I mean, now, today get started today. And then I'm gonna make this a link, and it's gonna go to my contact page. Sorry, that's italicized. Link is right here. So it's gonna link to my contact page, which is right here. So again, I'll go through the, um, linking structure again as well, and they will hit safe. And I just noticed that while I was linking to contact us, it's a capital you in a capital s. So I guess I made that mistake earlier. So safe there. So now I go back to home and it looks like this now the other thing I wanted to try was to put the A B g tec at the top. And then the second line is the smaller line. See how that looks? No, I like the other way that air. So, yeah, As you can see, there's quite a bit of experimenting to see what looks better and again, like how something looks its objective. So you might like it better this way. It's just I like it better. How was before? So I saved. And then one final thing I wanted to do go back in this dialect ITER, and I'm gonna change the color of this, and we'll use that read. I don't remember which read. That was so quick. It copy this? No, ideally, I'd want to copy the same red in my logo. But just because I'm in a little bit of rush to show you guys, I'm just gonna use the closest red I can think of. You know what I'm pretty sure was C c Yeah. I'm pretty sure that was my local color. So well, believe it is that keep changed this as well. I just remember that from previous website. So will it save? And I think that looks pretty good for now. WordPress html CSS ph B. Yeah, I think it looks actually know it. I'm just gonna change one last thing, because when somebody sees WordPress, html and CSS Ph. B, it doesn't really say that is a Web design company. It might be somebody who offers tutorials on those subjects. So I'm gonna change it to beautifully crafted websites. And then it's kind a little bit more obvious what? It what the website is about right away before you even start to scroll. So there we go. So that's how you do a banner image. Okay, Now, if you go into the portfolio page, I'm gonna show you one more thing. Some people don't want just one image here. You might want two or three images as a slider. Now, when you went up here and then media, you can only upload one image. So I'm gonna show you how you can use a slider. Now, this works for this template and a few of the other ones. Um, not all of them. The OK, so you click on at it. So this is actually not in the batter itself, but on the page. So you click on edit. So instead of banner on the page content itself. So where you would actually type in your information, you put that in and then you'd hover right here at the very, very top. The very first thing that's on the page has to be a slide show. Okay? And they were going Teoh. So this is some default images that they put in automatically may actually see if that works for my needs. So what you also wanna have is show title and description not really important, but automatically transition and show next and previous would be ideal toe have on Let's save and then saving in. Now I see how you can. It's a slide show, but it's not showing up full width like the other like home was. But if we actually refresh the page or just leave the page and go back to the page now you'll see that has taken on the features that we actually wanted to take on. So if you want to change the image, you have to click on edit and then edit it down here. Okay, Now I'm gonna actually show you with my images because I want to show you how to change the actual wording on top of it. So let's take this image and this image, and we'll upload them. Don't just give it a second there to upload, because there are two larger, larger images. I didn't resize these two. Now, with a squarespace, you'll notice that sometimes the spinner just days there, Um, that's it could mean that it's stuck, but very rarely that happens. Usually, it's just a larger image in, like your Internet connection might be slower. The server might be slow, so just give it a second, usually should correct itself. So this is fine. Will it apply? Who will save? And I just want to show you, like if you press refresh here, that'll work, too. Or you can go to a different page and then come back to portfolio. So there's that. Now you see that there's no wedding on here. And if you actually go toe like the gear icon and typing hello, what happens is nothing shows up. So that's not how you change the wording. If it's a slide show, you actually have to click on edit, and then we're gonna hit at it again on the slide show, and then we'll click on the gear icon right over here. And then we can actually type in it like a title and description. Now, the cool thing about a sliders, you can have a different wording for each image. So this one could be beautifully crafted websites which I misspelled so beautifully crafted websites. I'll just copy this for now, and this one can be WordPress html and CSS JavaScript. Will it save? And then this one can be, um, contact us for more information and let's safe and they will it apply Save again. So again, we'll visit another page and then come back to portfolio. And then what we see is again absolutely nothing. Now the reason for this Let me just show you really quickly. We do have anything set up perfectly for the images, but on the slide show itself. If you click edit and you go to design show title and description, we didn't check that off. I actually unchecked it so I could show you guys that now this doesn't matter where displayed, it doesn't really matter too much. I'll leave it at center. But again doesn't matter because this is only if you want to leave it as a slideshow, but for us it's going into the header. So there's only one way that that's going to show up. So I go ahead. I'll refresh the page here, and then you guys will see that the wording will actually be there this time. So there we go. Wordpress. So one thing you'll notice is that this page there's no wording for and this page it only has this second part, but not the beautifully crafted websites part. And let me show you why that happens. So for the home page, when we wanted something to appear bold like a B g tec, we have to put it in the description box and actually bowled it. The page title doesn't actually appear anywhere here. So when we go to the portfolio page and we go to page content and then the gallery, and then also to this image, this we put in as a title, right, the image title. So if we wanted to show up here, we actually have to paste it here. So, matri, um, you don't just paste like that you used Ah, the plain text editor. I recover like copying, pasting content into pages. You'll see why that using this is very, very important. The next will bold it. And then we'll hit save. And then we'll go in here and we'll copy this and well paced it here. Okay? And also bowled this. Okay. And then we'll hit safe. So now if he had apply save Now we'll cross our fingers and everything should be perfect. So go to portfolio And there we go. Everything is perfect.
16. Editing Pages: Basic blocks: Okay, so now that we've discussed the batter up here, let's scroll on down to the actual page content. So change the page content. You hover over it until you get this little tab that says page content and then you click at it so pretty straightforward. So next up, you'll notice right away in this user interface that when you hover, you'll see little raindrop looking circles that appear so right now, if I hover over here, I'll put in a block that's gonna take up the entire whip from the left here, all the way to the right here. And if I put one here again, all the way from the left to the right, If I put one here, it will appear just at the bottom underneath here. So the line shows you how wide that block is going to be. So, for example, if I put a text block here, it's only gonna be that wide, So it'll be like, Hello, and then I'll copy and paste it, and that's what's gonna be quick. It's only gonna be that white. So I'm gonna delete this block and now put it up here. So text block up here will stretch the entire width of the page. Okay, so that's the first thing you have to know about the interface. The second, when you hover over something you need click you can add in the block, and there's different types of blocks you can add in. So first, I'm going to cover the basic blocks, which are the seven up top here. Okay, The 1st 1 you've already seen me use quite a bit. It's the text block. So when you hit text, it's just a regular text editor. Nothing too fancy so you can put in like Legal s a header. So this one can be my home page. So I'll put a little about section in here. So it will say about us. I want this to be not a normal text, but heading one. Okay. And I also wanted to be centered. And then now it looks a little bit then. So let's go ahead and bold it with the highlight it and bolt. There we go. Okay, so that's that's that. So that's how to add a text block. Now, if you want to remove all the formatting, you press this, it just moves everything makes it regular, just like how it was before. So again, center bold and make it a heading. And you can also undo redo, and then italicize is over here. Sorry, we do. Didn't take italicized. Um, you can make it a link so you can link it to a different page so you can link it to, for example, google dot c A. And you can make it open in a new window when somebody clicks it. And another thing you can do is linking to a page that's on your website. So my blood page or my about page, which is probably what I'm gonna do, but not on the title on a different maybe learn more section. And then another thing you can do is actually link it to a file. So when somebody clicks on the actual wording, it'll download a file. So a document or a pdf for an image, anything like that, he just click on add a file, and then a pop up will come pick the file you want upload, and then you can click open in a new window. Ah, but usually they just downloaded, so that's not too much of a concern. So I go ahead and I leave this year. Actually, I don't need to delete it, but I don't want it to be a link. Um, so let's go ahead and remove the link. It's just hidden behind your okay, so it's it's a 50 50 chance. So let's try that. There we go. So the link is removed. Now, another thing you want to watch out for with the text block is when you copy and paste, um actual content from another website. So, for example, if I add in another text box and then I go to my personal website and copied this and then I try to paste it here, you'll see that it pays pretty much exactly how it is here. So the bold about and then unfolded you us. So that's not how I wanted on my website, because obviously I don't want the first part Bull did. But let's take a look. Let's say if I go to here and I make it normal text because I don't want it bigger, it doesn't actually change because you can't actually style it like you can actually put in like italicize or make the US part. Boulders Well, but you can actually change what it actually is in order to be able to actually change the formatting. Using these buttons up here, you have to pace that as plain text. And to do that, you go up here. So this little clip board right here, paste in the information press, OK, And then now you can actually style it. How you want. So we'll make this heading. One will sentry it. We'll send to that. It will make it bold. Okay, I just had to go back. So again, I'll show you. This is well, if if up here, I have no bold and it's normal and I accidentally pressed enters of those an extra space there. So if I press backspace to bring this up, it'll take on the styling of what that line was. So we'll have to restyle it. So if that happens, don't panic. You just have to restyle it and they will actually center this as well. And I'll delete this part because I don't like how that looks. Okay, so now that's done. Before we continue, I'm just gonna save so that if something was wrong, I don't lose this change right here. So that's the practice You probably want to adopt a swell just constantly saving. So we'll hit edit again, and then I will show you actually delete this first cause I already have about up there and then now we're going to put in a different block and let's see what else is available. So next up, we have marked down. Now, remember I told you guys in an earlier lecture that markdown isn't entirely too important, So I mean, you could put in, like, regular text. So actually, I can kind of replicate what I have up at the top. So about us, then I could make that header one and weaken center it. We can center it if we'd like by putting in tags. So that's the center. Um, I don't really like using mark down. I mean, it just makes it harder for me, so I'm actually not going to use it, but just know that it is there. If you ever need in the future. There's one case where, actually, user and that's where frequently asked questions section on the website that's gonna be in the bonus lecture just because it is a little bit more advanced and that you need to coat a little bit. But if if that's something you're interested in, it will be in the bonus lectures. So next up we have quote. So this is again pretty straightforward. It's like a quote that somebody said So something like Hello and now said by me So look like this. Okay, there's really not too many ways you can style this. You can go to design style editor and change the text like the font and the color and the size. But besides that, there's really no way to, like, put in a closing quotation or anything like that sometime. Place do come with that. So some I'm not sure which ones, exactly. But some of them do have, like opening and closing Quotation Mark, this one doesn't. So I'm not gonna keep that. But yeah, I just know that it's there, and this is what it would look like with some demo text there. So close that and delete it. And then next up, we have image again. Pretty straightforward. It just like to add an image. So we click. Add an image, and I would pick an image that I want to add. So it's a this one, so let's go ahead. So it's up loading. And then here I could put in a caption if I want, um, if you don't want to capture and just remove it and then do not display caption you also have the caption show up as an overlay or only when you hover over the image so goes away. And when you hover it comes up and you'll see that better when you actually save. So save It's not there you however, it'll come back that must not have taken. Okay? And then you hover over. Oh, sorry. I didn't actually put in an actual caption so that make it text. Here we go. Now it'll show. There we go. So now you know why wouldn't show up. Okay, so that was image. You can also stretch it. Um, you won't really notice it much here. Uh, let's see how I can show you what the stretch would look like. So if I put in like a spacer to the side No, we wouldn't work in this case either. Um, okay. Later on, when I get in. When I get the chance to show you what structures will show you what it does. But basically it just stretches to the full width. So instead of taking up, half the container would take up the full container. Hopefully, I'll get an opportunity to show you that in a future lecture. So next up, we have lightbox. What that means is when somebody clicks on the image, it comes up in full screen so they can kind of see it in full screen. So show you what back does. So somebody click on it and there we go, comes up in full screen. So this is good for like, any photography work, that kind of stuff, Not really for regular pictures that you're using in a case like this. And then you can also style the lightbox to have a light overlay. So instead of being black around the edges, it'll be wait like that. Okay, so that's lightbox. And then finally, you can also put a link to it. Now you can't have lightbox and link because obviously when somebody clicks on it, they either go to a website or a link or it pops up. Was a full size image you can't have both. So if you have lightbox, the link will work so quick to add link. And we can put in again any, um, website content or file and then let cancel. And then again here you also have that focal point you can control, but that's pretty much it. Here you have file name, which you always want to fill in. So this is really good for s CEOs. Or you put maybe something like, um, man in and blue suit, right, So you can save it like that. So go ahead and remove that image. And I believe we have a couple more to go through. So video again pretty self explanatory takes you to video. You can actually click here to see all the different services that you can link in. So if I take like a YouTube video that I have and he just copy and you just paste control C control V and the video pops up. And if you don't like the image that is showing, you can actually upload your own image. So that's our upload, this one, right? So you can use your own image so it would look like this and they press play again. You can have captions below it. So pulls the caption straight from YouTube. So I'm not gonna use custom. And that's with captions. So and you can again change the caption here. But let's click. Do not display. So that's how that would work. Let's hit Cancel. I don't really want to show a video, so I will delete that, and then we'll move on to audio. So audio works. You can either upload an audio track or you can actually click on external file and link in an audio file that you might have stored on your hosting platform where somebody else is hosting platform and then people can download it. You can also, if you if you podcast that all you can also put put in your RSS feed information and stuff here through iTunes. But again, just take note that this only works if you're adding it into a blocked page. So right now, if I feel this in, it wouldn't actually update my iTunes. Um, just because this isn't a blocked page, it's just a regular page. Okay, you can find out more about that by actually you know what? I'll put the link in that in the lecture war, actually, right here. If you click on, learn more you'll. It'll pull up a little section that'll tell you exactly how you could podcast using it so I won't go through a just cause. Not many people podcast. And if you do, then you could always go and figure it out here cause it's not it's not really too hard. You just have to fill in some basic information here, and you can also change the design to be you know how it looks and you can let people download the audio file and you can have it later. Dark. So that's the audio file, and then we have one more, which is embed Now in bed is like, Let me actually just show you. Embed is like a combination of video audio, and there's one more here and soundcloud, because what you can do is you can pretty much put in any u R l. And it'll take it So, for example, if I take a video and put it in that in bed becomes a video if I taken audio, so it's a copy, this one copy link I put in here. Then it becomes an audio. And then if I, um if I put in, let's see, what else was there that I could put in? Yeah, So you could put in pretty much any kind of, um, investable u R l there. So it could also be an audio. Now I don't have an audio file like this is a soundcloud, but I don't have a specific audiophile I could put in, but it would do the same thing like it would look like the audio block. And then you could also embed specific code, like Google Maps or something like that here. So it also works like a code. So it also works like beat code block the code block. So it's a good combination of different ones I've never really used in bed. I've just used a specific one I needed, but if you ever find that you need a bed, you can go ahead and find that here. So that's pretty much the different seven blocks. We have four basic blacks. We'll take a quick look at gallery and summary in the next lecture, and we'll continue from there.
17. Editing Pages: Gallery and Summary Blocks: Okay, so in this lecture, we're going to talk about the summary in the gallery block. So we'll go ahead back into our page content, and I'll go to add a block. So we have gallery and summary. The two are very similar. That's why I'm gonna cover them together. So let's start with gallery slideshow so pretty straightforward. We can, um, upload images that we want to use for the slide show. I did this for the lecture on banners. If you guys remember that, if not, um, basically just press upload and then pick a couple of images. So let's say that in that, and it'll automatically upload those images. We'll give it a moment there and the ones done uploading. We'll have a little cider. Now we have to go into design, and we can change some features about this fighter. So a transition between slides automatically every five seconds every two seconds if you want to show next in previous control. So that's a little arrows on the left, and the right is automatically crop images. If we don't crop the images, the slider will become like different, like the images are obviously different sizes, so you'll have like little blocks on the side. So white blocks. I'll show you what that looks like, actually, just so you can see what it looks like. Um, let me add a square image they should do. So we'll give that to second to load, cause these two are very similar inside, so you can't really tell what the actual re sizing looks like. So we'll hit. Apply. Will it save? So there's that image. There's that one and there's that one. So you see how this one has a big chunk of the image actually missing because it's supposed to have way more of the tree visible, whereas it only has up to around here. So if I click on let's see where did it go automatically crop images. So if I don't do that and I'd save, he said. Already there's a little bar on the side, and for this one, there's a huge bar on the side, so this will actually show the full image by kind of stretching it to the aspect ratio and throwing in some bars on the side to allow for that stretching. So we'll hit at it now, so that's automatically crop. I don't really mind the crop too much, because again you can decide where you want that crop to happen. So you can change where the focus is, as you just saw. So here you can change a little bit here, you can change a lot. Okay, so that's kind of you can also show the thumbnails at the bottom here. Not too important on then the size and also how far away it is from the actual pick picture . So really far, very close. And then also where we want the title in the description. So none of my images have descriptions. Let me actually throw in a description. So you just click on this little gear and we'll just put test. So the test shows up on the bottom left. Here, we can change that to top. So it's at the top and again, Center will appear right here. And then you can make it so that it only appears when you hover over it like the actual description alone shows when you have her over that image. Um, now, within here, you can actually change the carousel. Great and attack. So remember back here for gallery you had to slide. Show care. So great and sack. If he didn't know which one to pick, just pick around them. One. You could switch between them here so you can see what they all look like with your images . So carousel would look like this. Okay. And then grid would look like this. Pretty pretty obvious what a great would look like. So you can make you can have the images of squares you can have. It is a three to so it's a little bit wider to three. So it's more, more in height than it isn't with you can have 43 again wide screen so you can kind of pick What you what you think looks best. I didn't mind the square. You can show the title which I only put for the first image And again you could pick if you only want three images. So remember here it had enough room for one more image. But I only uploaded three images so you could make it three and the increase or decrease the pad ings of decrease increase. I like it with less padding. You could make a light box when you click on the image, it actually opens up. And if you wanted to actually link to a different part of your website, you can actually may be linked this to the contact page. This to the portfolio, that kind of stuff. And then we have stack. So that's just images stacked one on top of each other and the Rio, so we'll hit. Apply. So that's kind of like the gallery block. No. Oh, actually, one more thing with a gallery block. You know, I uploaded the images. I already have a gallery block. Sorry. A gallery page that I made over here, if you remember earlier on. And I put these three logos in there, so if you have a gallery page, you can actually use that page instead of free uploading images. So, for example, if I add in a gallery and then instead of uploading media, I click on use existing media photo gallery, and then I could make it care. So grid, just like before. Except now, I don't have to re upload the images again in a different spot. Okay, so I'll remove this because obviously I don't want to show that. Okay, so now let's take a quick look at the summary section, so we have wall Carousel list and grid. So this is very similar to a gallery section. Except now, instead of just photos and videos, we can actually use block posts and products as well. So, for example, a click on wall and just like I showed you before, you can switch between wall Carousel List and Grid three here so you don't have to keep going back to add. So let's go to content. Now we can pick my blawg, my photo gallery or in my store. So first we have blawg. Now I've put in three temporary block posts, and I put an image for each one. You learn how to do that in a leader lecture on specifically on block post. So right now it's set to be a wall so you can put let's say you have four block post and you want them all on the same row. You can just make each call them smaller with, and if you want this to be, like to to block posts and then another two down here, you could increase a column with So the gutter with is the space between each block post so you could make that less so to bring them kind of closer together. Then you can change the text size too large. There's a little bit larger wedding and you can also center. So there we concentric. I like things better when centered so we'll leave It is that And then this is for the actual date. So you can put that above the title below the title or below the content. I like it below the title. Perfect Ellen Display. So right now, set to show 10 block post I only have three, but I usually put this to 30. You can change it to, like six. So it only shows your most recent six or the six that you designate using featured so you can set a block boats that featured and then the other thing you can do is maybe in addition to date, you also want to show the author so you can pick author so we'll show the author as well. There we go. Or maybe the category. I haven't designated categories, so that won't show anything right now, the only ones I've set up is author. So that's pretty much the only thing I can show you. And if you don't want date to show, you can turn off the date. So I changed that to none, and the date goes okay. And you can also show the read more. So obviously, this isn't the entire block post. There's a lot more to it, So read more. So then let's take a quick look, uh, photo gallery. So using the wall is actually a little bit different compared to using um, for example, of one of the gallery blocks because the gallery blocks don't have wall as a predetermined template. And I really like how the wall looks. So, for example, if I change this to more than six pictures, so I said it all on, then I don't want to show the picture because there's no sorry the date for the picture. There's no point in showing that, and you'll still see that there's more of a height here than there is a wit. I like that to be even. So you just hide the title and hide the excerpt. So now they're even. I will actually reduce this basing their maybe 20 Terry off. See, I just love how that looks compared to just regular gallery. So a regular gallery, if you remember, the closest thing you had was grid right And the great would look like this grid. And I don't really like how that looks. I like the wall a little bit better. Okay, so there will be times where you'll definitely want these images to be links to different websites or different parts of your own website. Now, before how we did that was we came here to where we actually uploaded the images. But now, since we're pulling it from a different gallery page, we actually have to go to back gallery page to, like, set a link. So the gallery page arm using his photo gallery. So I go there and then we'll click on the middle gear and then we'll go to options and we can actually set You are all here. So, for example, google dot ta And then what? Save? So now if I go back to my home page, if I click on, we'll give it a second to load up there. So if I click on this, it'll actually take me to Google this time. So Google. Jason is perfect, and then now we'll go back in to edit Calorie Perfect. So that was the summary section. So in the next lecture, I'll cover what's what. We can add through the more option and the filters and lift. So all the different icons that we have here and I'll see you then
18. Editing Pages: More Blocks: So the first thing we have this search search lets people obviously search on your website . So for a block post something like that. Um, if you put search specific page, their social only show results from this page, I don't want to actually do that. So we'll leave it as it is right now. And the theme is dark, so that should be fine. So I put in. I think I have post one was one of my posts. So this is my block post one. So shows a thumbnail of it. So pretty cool you can use in your sidebar. That's probably where people use it the most often. Next up, we have content link so you can actually link to one of your pages. So, for example, your block so people can click that link and go straight to your block, Where events or you you can actually put specific pages. So the about peak and I'll give a quick run down of what it's about. I never actually uses I used buttons if I have to. So next up, we have button so you can style the buttons, so contact us and it can link to the contact page. So not an external website. Not a file, but a content which is my actual. Contact this peach and then just click outside size. You could make it small, medium, large, and you can change the color of this through the style editor and you could make it left or right or center. We'll make it center and then save. So contact us. And then next up we have take cloud. So that's for your blawg. Um, so you pick something, obviously the most common way to use it, as with the blogged, so it will cover all the different types that are available in your blood. So, for example, somebody clicks on website, takes him, shows all the block post that have the tag website. We'll cover more about tags when we talk about blog's as well, so it will become a little bit more obvious what it is, and you can also make it like your photo gallery. But I don't have any tags on my photos. I don't have tags on my, um, products, either. Just on my block, I put in tags so you can also use categories if you don't morning ism specifically takes. I don't don't think I have categories set up for any of thes yet. No. So we'll leave. It takes and then sort by weight. So that's which is used the most often and which ones viewed by people the most often. So right now it looks like people went to my block post. That's its websites the most, and then how many takes you want to show? So I think that's it. I don't think there's yet so well, it discouraged, and I'll delete that again. You can use that in your sidebar. So people quickly access a specific type of post, and then we have finally archive. So, for example, if we click on Blawg, it'll show archive all your blog's in November, then December. But I only have blocked boats from November, and then you can have products, photo gallery, everything I polluted in November and events and even displayed as a list or so. If it's a list, you actually have to be sure you real quick you actually have to click on it and then we'll open up the list. Okay, so it's a list of everything, so November and then we'll say December and in January. Then we have. I think it was dropped on. Yes. Okay, so for this one, it'll say November, December, January, February. Again, these are best used in the side buyer. That's where they're mainly use, actually the local group by month, year author category tag. I only have one author, so doesn't make sense to sort it by author and then show how many. How many different post we actually have for that author. So for products, it'll show how many products etcetera again. It's a neat little feature, but I've never actually used it before. So it's a So that's everything that we have listed under the filters, Um, and finally in the next lecture will cover these ones, and then we'll be done with the different blocks.
19. Editing Pages: Filters and Lists Blocks: So the first thing we have this search search lets people obviously search on your website . So for a block post something like that. Um, if you put search specific page, their social only show results from this page, I don't want to actually do that. So we'll leave it as it is right now. And the theme is dark, so that should be fine. So I put in. I think I have post one was one of my posts. So this is my block post one. So shows a thumbnail of it. So pretty cool you can use in your sidebar. That's probably where people use it the most often. Next up, we have content link so you can actually link to one of your pages. So, for example, your block so people can click that link and go straight to your block, Where events or you you can actually put specific pages. So the about peak and I'll give a quick run down of what it's about. I never actually uses I used buttons if I have to. So next up, we have button so you can style the buttons, so contact us and it can link to the contact page. So not an external website. Not a file, but a content which is my actual. Contact this peach and then just click outside size. You could make it small, medium, large, and you can change the color of this through the style editor and you could make it left or right or center. We'll make it center and then save. So contact us. And then next up we have take cloud. So that's for your blawg. Um, so you pick something, obviously the most common way to use it, as with the blogged, so it will cover all the different types that are available in your blood. So, for example, somebody clicks on website, takes him, shows all the block post that have the tag website. We'll cover more about tags when we talk about blog's as well, so it will become a little bit more obvious what it is, and you can also make it like your photo gallery. But I don't have any tags on my photos. I don't have tags on my, um, products, either. Just on my block, I put in tags so you can also use categories if you don't morning ism specifically takes. I don't don't think I have categories set up for any of thes yet. No. So we'll leave. It takes and then sort by weight. So that's which is used the most often and which ones viewed by people the most often. So right now it looks like people went to my block post. That's its websites the most, and then how many takes you want to show? So I think that's it. I don't think there's yet so well, it discouraged, and I'll delete that again. You can use that in your sidebar. So people quickly access a specific type of post, and then we have finally archive. So, for example, if we click on Blawg, it'll show archive all your blog's in November, then December. But I only have blocked boats from November, and then you can have products, photo gallery, everything I polluted in November and events and even displayed as a list or so. If it's a list, you actually have to be sure you real quick you actually have to click on it and then we'll open up the list. Okay, so it's a list of everything, so November and then we'll say December and in January. Then we have. I think it was dropped on. Yes. Okay, so for this one, it'll say November, December, January, February. Again, these are best used in the side buyer. That's where they're mainly use, actually the local group by month, year author category tag. I only have one author, so doesn't make sense to sort it by author and then show how many. How many different post we actually have for that author. So for products, it'll show how many products etcetera again. It's a neat little feature, but I've never actually used it before. So it's a So that's everything that we have listed under the filters, Um, and finally in the next lecture will cover these ones, and then we'll be done with the different blocks.
20. Editing Pages: Commerce, Charts, and Social Blocks: Okay, guys. So today we'll cover the last few little bits of blocks that we have available for pages. So we'll go ahead and hit. Edit. So right now, I'm just showing you guys like a quick tour of the different blocks that we have available and the later on I'll go over each one specifically when I use it on my own website. So let's go ahead and we'll look at I believe we covered more, So we're unfilled. No, we did that as well. So Karmi's so first we have product. So that's pretty straightforward. We could put in like a specific product so well, quick there. And I only have warned. I believe so. I just take that in there it is so I can hide the image. I can show the image again. The title is right over here. I could hide that and same with the price. And it also description. And then finally at the card button. So it looks like this and you can pick the quantity. Now if you only have one in stock, it won't show the quantity. So we can also align everything center or right. So again, like I said. I like Central line best you see, Right now this image is very large. What you can do is what I mentioned earlier with the spacers. So put a space on this side in this based on the other side as well to keep things centered . There we go. So now it's not. So if you throw in the line here, so better separation. So yet now it's not so large. Okay, so that's how you would add in a specific product. Next up, we have Amazon. So this is actually an extremely powerful feature, so you can actually link any product on Amazon. So, for example, if I type in, um, let's see, website probably pull up some books. Yeah, so building website for dummies and you can center so you can actually put an ad buy button , so that takes them to Amazon on The really cool thing about this is I'm actually delete that the really cool thing about this I mean, if I go into settings and then advanced and then external services, you can put your Amazon associate tag year so that any product that you actually sell you'll actually get revenue for so you'll get a little bit of the cut when people actually make a purchase. So you have to sign up for their affiliate program first, of course, but again, very powerful, cause you can search through the entire Amazon, put in exactly the products that you want. So next up, let's see what else we have here. So we have the donation button. So if you're running like a chair two year something on your website, you can actually take donation. So again, um, charity fund, we could name it. Don't give a quick description. Fun this charity and what you want the button to say So you can make it make a donation, for example. Center that, and they can put any mounts. You want to let them donate, so you could actually label each one like beginner donation Professional automation. So something like a business donating and you can add more different values, and they can always specify, like a specific value like $26. They always have the opportunity to do that, and then when they make a donation, you can collect additional information by putting in a form. So if you want to take in their name. You can ask them for their name and make it required. So what that will look like if they click on make a donation, it will take them to this page and then they'll actually, once they hit, continue. I'm actually see if I can continue here. Yeah, so it lasts for actually. You know what this is? Just let's just put in a random number there, So yeah, the last time for the name. So this is the goes under the more category. So you can collect any kind of information you want, like emails. Anything like that. So that was the donation button again, remember? I didn't I did say, Father, we go popped up now. So delete that to leave this because obviously I want to put that product on my website, trying to keep things clean here. I'll leave that there for now. So then we have move on the charts. So these are the different charts that you have available. They're all pretty straightforward. I mean, bar chart line chart by chart. If used excel before this is ah much easier version of its O bar graph, you can change between the charts year on. Then what information you want putting? You can actually import information of the comma separated value. So, for example, like this. There we go. So it's just right now showing the population of New York Las Vegas in San Francisco. Um, we can actually put in captions, show the legend populations in cities and then see that. So this is like the caption population on this chart. Okay? And we can, of course, make it different colors. So you pick one of the different ones available here, so that was you could also export the data. Okay, so you just copy this and paste it in like a text, a text document, And then you can insert more data here so we can put in, for example, Michigan and make it 200 and then you can add another, another type of value. So, besides population, we can put in, um, let's say businesses. So a count of how many businesses there are, so it'd be like 2345 So again, you see, it'll show it's harder to see their little make it like 20 20 40. There we go. So you see what that looks like, and then we could make that a line chart. So this would be the population. This would be the business and its label right over here. It would be easier to see if you make this one a color. There we go. And then also, we have pie chart. So that's what this one would look like. Okay, so for a pie chart, it's using population right now and not business. So if you move business first No, I see period. So now showing the number of businesses. Well, they're pie. So again, I've never had to use this, actually, but it can be handy in some specific cases. So next up, we have the social blocks, so none of these will actually work unless you have social blocks set up in settings. So you actually have to go into settings, connected accounts, and then you'd add, like a connective specific count, and there's tons of them here. So I'm sure you'll find everything that you need here and then once you add the man, So as you can see, I have Facebook and Twitter connected, so those were the only ones I can actually use. So if we go to Twitter. I can actually put in how many tweets I wanna pull up. So maybe three is a good amount, and then I can put in, like instead of using my profile, like into a search for a specific hashtags. So that's a search for Squarespace. Okay, and then apply. We'll see what this looks like. So that's what that would look like. Okay, so that's the search, showing my image or not, and showing my user name or not. Of course you want to show your use name. Just cause the whole point of having this year is to send more people to Twitter, not search, but show Avatar she'll use name had a follow button, so just follow. Pretty straightforward, but again, extremely powerful. So what? Delete that? So we also have four square. I don't have that connected, but it's similar to what Twitter does. Social links actually puts a link to all the ones you have connected. So for me, that's Facebook and Twitter. We can align it, change the size, changed the different types of styles we have and also change the color two x standard. So this is the color should be we could make it black where we can make it wait. Okay, then we have not social links. I would actually put in the footer. That's where you put in most of the time or on the contact page. And we also have our SSO for your blog's. If you want to have an RSS feed, I don't have one, so I'm not gonna use it 500 PX. So that some a photo sharing service. Um, so you can put that in? I don't really have one, so I mean, I haven't account, but I don't want put it with this because it's not associated to my business. Then we have instagram so you can pull up your pictures flicker just like 500 picks its again photo sharing on the soundcloud So you can share your albums that you released or any tracks that you released. Okay, so that's everything under the commerce charts and social blocks. And one more thing is when we use that twitter feed. So down here, the only reason it actually pulls up my twitter feed is because when I go into my connected accounts here and then Twitter, I have download data turned on. If I don't have that turned on, it won't actually be able to pull up anything. So So right now it looks like it doesn't have any post or you don't have dollar data turned on. So we have to go in. Turn that on now, by default, that is turned on. So there's really no like reason why it should be turned off by default unless you turn it off. Course. So we'll hit. Save. We might have to refresh. So try going to portfolio and back to home. Looks like the connected account save didn't take so reset data. And what save? There we go. So it just took a little reset. OK, so that's the end of this lecture. And in the next picture will cover a little bit more detail, stuff about pages, specifically images. Okay,
21. Editing Pages: Creating a Form: So let me go to my Contact us page, and I'm going to put a in form here. So we for that to load. Then we'll click at it. And I can actually remove all this demo content because, of course, it has nothing to do with my business. So delete now, when there's no blocks left on the page, Squarespace will automatically create a textbook because you'll see in a second Dario automatically make the textbook. So it once you put in a form a minute cancel. We didn't modify it yet, and then I'm gonna delete that text block for now. So there's just a form, so it's going at it. I'll change this into contact form. I don't need people to fill in their subject, but name email message. All important. Um, if you click on edit name is required, that's good. Email is required. That's also good, and message is also required. So it's perfect. So if we go back to name the description, whatever you typing here, so please enter your full name. Well, for example, come right under here and then email. We can put something like, um, this will the email you use most often now we can change all these font sizes later on because it is very small. Um, and for each one, there's also placeholders. So this actually goes straight into the input box so we can put example dark example at example dot com Just the people know what format we're expecting it in, so that's pretty straightforward. I mean, there's only one format for him. Also believed is that and then we'll take a look at some of the different options we have. So if we click on the plus will have a different, like a different box that comes up that shows what kind of feels we can have. So first is text, so text when you put it in, it's pretty straightforward. So, for example, um, city, So what city from their from and we can make it required. We could put in like a placeholder like Toronto, so I don't need them and taking that out. Then we have text area, which is the same was text, except it's a lot bigger. So, for example, you see our text areas like multiple lines. Where's text by itself was just one straight line across, and then we have select. So here we can have, like, a drop down that they can pick. So, for example, um, are you male or female? And then here. So we put one option per line. So male, female. Okay, so we can have something like that and then let's go ahead and remove that So next that we have check box. So this is the same as what we had before with the drop down, Except they can only sorry in the drop down, the only pick one. Where is with the check box, you can pick as many as they want. So hobbies. And then we don't need a description until the options. Let's say, computers, science, tech games. So he had apply and save so they can check off as many as they want. Okay? And they can even leave it blank so nothing's building. So let's go ahead and delete that. Next up we have Radio button, which is same check box, except they have to pick only one so radio, and we'll put in, for example again, we can do male or female again if you if you want so male or female and we'll put in mail on one line and female on the other. So they have to pick one of these two. Okay, so that's the radio button. Then we have survey, So Yeah, this one's pretty straightforward as well. So, for example, let's say I like this website. Okay, so that's that. There's only, like, five options. We can't really change those five. So this is what you think. So that's just a description. So we can't change the strongly. Agree? Disagree All that stuff. So I like this website. You can put another one called. Um, this is the best word. Say so. Something like that. Okay. Pretty basic survey there. Next up, we have name no name automatically takes the first name and last name. There's no way to turn that off. Um, I don't really like it just cause I mean, what the name? Some You don't really need the last names sometimes. So what I would do is, instead of a name, I would just put in a text box and maybe put in first name and then make that required. I would do that more often than having first and last name, but again, it is up to you how you want to store, um, information in your database or in your mail trip? Let's go ahead and take a look. So password. So anything they type in here will have stars automatically. So let's go ahead and it save so password. It's like that. Okay, now, I've never had to use password before. I don't really know why you would use it. Maybe if you were collecting somebody's using him a password if you were selling like S CEO service and he walked him to enter their log in information for their website, so you can log in, make changes. But I don't really know why you would need that beside something like that. So let's delete that and let's see what else. So we have address so you can ask people to enter the address again. What I don't like about this you can't control what's actually asked. So it automatically ask for address one address to city state, zip slash, postcode and country, and there's no really way to actually modify what shown there. And then we have Twitter. So again, that's where their Twitter information the at symbol is automatically filled in for them Next up, we have email, so you ask them for the email address, just like right here. Website. You asked me to put in the link to their website, and then we have date so they can fill in a specific date again. There's no way to modify what order comes in. Okay, Next up, we have time. So if you're scheduling like a meeting, you can ask him what time is best for them. And then we have phone numbers. I can collect some of these phone number and then a specific just number. So you could ask, like, how many websites do you have and then apply Save. So, yeah, they would just enter a number here. No, I've never actually tried submitting it with just letters in, but, I mean, I think it should work. Let's give it a shot. Actually, let's try with just text. Oh, yeah. Okay. Um yeah, it must be numbers and no mother nor the character, so at least we know that works like it should. So let's go ahead and delete that. And then we have currency. So, like, save So you think Here you can put something like how much do you want to pay for their service? Like what? What's your budget? Something like that. And then line to separate the different things. So, for example, if I don't, So if I don't want a line and I just wanted to be section so exact, for example, it could be, um, personal information. And I could be collecting that up here, and then underneath, I could have another section call it business information, and then I can add a text. What is your business name? So, as you can see, that's how you divide a form up. And you could, of course, take away that line. But, I mean, the line adds a little bit more organization, so I would leave that in. Okay, Next up, we have hidden. So this is a hidden value you can collect. I mean, you can read about read more about it here. I'm not gonna go too much into detail with it, just cause I don't see too many people using it often. So, um, one of the reasons you might want to use that is, if you send somebody to your website, you can use the contact form to take a specific part from the URL. So you know where they came from? Um, just so you can kind of keep track of were, like, what metrics like, where people actually coming from It's not too important. You can use Google analytics and stuff like that, but if you do want to learn more about it, just head on over here, Okay, so close that and we'll hit storage. So here, this is what email any anything that people send here will go to this email. It's automatically filled into the like the email address that you used to create this account. You can change it to any other email you want here and just connect now if you don't want it to the sentry mode, but rather you want to collect emails using mail chimp. You can click here to connect it like I showed you before and in an earlier lecture, and you also said it to go to Google Drive and then if we go to advanced, we can change what this button says. So send message and we can center that And once they hit submit. This is a message that pops up for them and This is a post message HTML. So you can have specific actions performed using HTML code and the lightbox modes right now . If they click on open form, then they could fill out the form. And obviously it's just one more quick. So I don't really want toe like have the user do that. But if you did want to do that, you would change the form button here, so contact. But again, I I almost never use that. And I don't really think it's a good idea. So we'll hit. Apply. Okay, so this is the contact page. Will it save? Okay, so that's a contact form. Will Will kind of modified his page again later on.
22. Editing Pages: Images: Okay, So definitely the biggest part of a website is images, Especially in this day and age where nobody wants to take the time to read all the wording on and on a page. So, for example, if somebody came to this page, they wouldn't really take the time to read this unless they were actually interested in our website. So immediately they look at the pictures that look at the menu. Look how to look right here. Look right here in Lincoln F shape. So they start at the top, left, go across the menu, they go down, then they go across. Then they go down, and that's about the farthest ill. Probably go. They probably won't even scroll all the way to the bottom of the page. So they're just kind of looking for valuable information before they hit back and go back to their Google search. That's usually how people navigate websites. So what we have to do is right away captivate their like their attention with an image, so images are definitely very important. So I'm gonna cover just images in this lecture. So go ahead and I put in an image. Okay. Now I never display captions for my images. So I'm gonna hit, Do not display because I don't really like how these caption show up. They're small, and I don't really like re sizing each one by itself. So So first I'll put in a small image. So as you can see from the pop up, this one is 250 pixels and wit and 1 81 in height. So I go ahead and put that in and you'll notice even though the block was that big, it shrunk toe hold the image at its full size. So right now, this is 250 pixels wide, so it's the size of my original file. Now, if I want this to be larger, so it covers the full with its going to stretch the height as well just to keep the aspect ratio. Otherwise, it's kind of just looked like gonna look really stretch out so it would look like this. So you see how it stretches both with and height, Okay, But this is a very low quality image. Just cause the resolution was very low to begin with. Okay, so that's how it that's what that stretch button does and if you ever have to use it, you're better off finding a higher resolution image. If you don't have one, you can use it. Although I really wouldn't like it. You can see all the pixels on the corners here. They look like little squares. I hate how that looks, so I never use that. So let me go ahead and put in an actual image like a larger one. So let me put in. Yeah, I believe that's a larger one. So put that in, so that should load up in its full size. So it's taken quite a while to process, which is telling me it's probably a larger image. There we go. So that's as smooth edges because it was a very large image to begin with. So here, if we stretch, nothing happens because it's already at the full with because it's it's wide enough. Okay, so again, we can have to click through. You are all here. So if somebody clicks on this image where it goes, so let's see what we can do with this image. Okay? So first we will see that we have this little dot here if you hover over it. You'll see this little it changes to like these two lines with an air going up and down. If you click and hold and go up and down, you can resize the image. Okay, so it'll kind of pop Here we go one second. So when you're going down there we go. So right when it starts, like going from stretching vertically to stretching horizontally. That's where you know your back, the original image. So if you go all the way here and you wanna go back to Original, you can pull down until the start, stretching horizontally. So a little bit more. There we go. So that's about how the original image started or the easier way you just double click the circle, and then it goes back to the original site. Okay, so now let's say you want to use this high resolution image, but you don't want it to be this big. The easiest way to make it small as to put in spacers so spacer you'll need to space is one for the left, one for the right, So one for the left, one for the right. There we go. So and then you can change where it is so moving more to left. Move it even more to the left. Move it all the way to the right. So there we go. And if you want it right flush with this right side, you can delete this spacer. I love this more. Okay. And one more thing with this image, if you actually go to resize it and you hold down shift on your keyboard so that's just above control. If you hold down, shift and go up and down, it will automatically resize in 20 pixel interval. So 2020 2020 20. Whereas if you leko it's more smooth and you can actually find Tune it more. Okay, so I will delete this. Yeah, I'll delete that. So that was just like a quick, um displayed images. Now another thing you might want to do is show an image to the side of text. So, for example, if I actually put that image back in so right up here again, click on that and do not display caption. Okay, so we'll wait for that to load up there again. This usually happens because it's a larger image. One is re sizing like once processing here. Don't hit. Apply yet. Wait for this picture to show up first because I've had a lot of bugs that come up like the picture won't load properly. So just make sure it's finished loading here and then hit, apply, and a lot of text block. And in the textbook will just put random texts actually yet bio. So I could be like a Let's pretend this is a picture of a person and a little bio. This is me. This is what is what I do. Okay, Now we're gonna take this text and put it to the side of the image, and you'll see that what happened is let me copy. And paste is a couple of times, just so you can see what it looks like. Okay, so you'll see that is not really lake text wrapped, So the image is not wrapped like the text. Sorry isn't wrapped around the image. So, for example, if I want it on this side, it will go straight to that side. Second, I move this image all the way to the left. Instead of just that block, I went all the way. So let me actually put a chest in that block. There we go, so you'll see that it's not really wrapped with this image. Like this text could theoretically go over here, go all the way across, but it's not. So if I make this smaller, this text should really be going all the way over here. But not now. How do we fix that? Let me show you. So you grab this image and remember when you when you came here, it was, ah to move it to the left side and the right side. What we'll do is we'll bring it in. So there we go. So it looks like this. So you have that little overlay of grey instead of that line. You have that overly. It's a very small area. Like, for example, this is above Go left, left overlay left, left, and it's now is gonna be left the line. So you have very small room, so you'll have to play with them a little. There we go. So once I pulled it in there with make it how it was. So let's try double clicking. There we go. So now we have it flushed. Sorry. Text rap to the left, and we can do the same with the right. Okay, there we go. So that's to the right. Okay. So you can play around with that. You can use that if you want to put, like, an image inside of text to keep it kind of not so boring. But you also want it to be text wrapped. Okay, so that's how you wrap text around an image. So one more thing I will add is that squarespace recently changed how images air dealt with on the Web site itself. So now you can actually have images that are up to 2500 pixels in width or height on. What that means for you is that you can upload really high quality images that you could, for example, use as your background. Um, now, how that's dealt with is that when you upload an image, squarespace automatically creates about half a dozen different versions of your image, each with a different width and height. So when somebody visits your website on a mobile device, it loads to image that's, you know, the perfect size for that device. So it might be, you know, 300 pixels and whip, whereas if they visit on like a desktop computer, it might actually load the four size image or even, like, you know, 1000 with image. So you don't have to worry too much about page speed. When you upload images, just go ahead and upload the highest resolution copy of the image you have now. The only time this doesn't actually work is if you're setting an image as your background image, because then it actually uses the full size of your image. Now I'll show you where you can set your background image, and you can't do that for every template. But I'll show you how you would find that setting. So the first thing you would do is you would go ahead and go into your going to design and then style editor, and once you're there, you would scroll down to where it says page background. Now, right now, I can only set a color, and that's only because this is the template that I'm using only allows for color. Now, if you can actually set an image, you'll see a picture of a little mountain here, and when you see that mountain and you click on it, you can actually upload an image so you can use an image for the background here where I have just wait. So, for example, I can set It is black. You could actually change that to an image if your template supports that. Okay. Now, when you actually set an image like that for the background, it will automatically use the maximum resolution that it can. So if you upload an image that's 3000 pixels white, it will use that image without re sizing it. So make sure you know what you're doing. Because if that image is really white, it will take a while to load on slow. Where? Connection. Okay. Thank you for joining me with this lecture, and I'll see you guys in the next one.
23. Editing Pages: Creating Layouts with Spacing: Okay, So today we're going to take a look at the different types of spacing we can have on squarespace so that all the pages aren't just text. So some of the layouts that you want to use the main ones are actually pre made for you. So Squarespace has taken the liberty of creating them. So you just have to fill in content. So, for example, if I were to make a new page of a call it a test page, there are some layouts here you can already pick from No, right now it's set to all layouts. I can choose a specific one. So, for example, about pages, contact pages, details, features, images, team and other. So I don't have a team page. I'm not going to add one, but I will show you what it looks like. So this is the first team page. So I would put a picture of a like, whoever's on my team at the little description and the name of the teammate, and we can also have it like this are the two main so maybe CEO of the two Sears or Kohls founders and we can have the staff so we could have just everybody listed out with small images and even smaller images. So that's for Team. And then, for about we have again a layout like this. We have this. This is very, very small, like very narrow. We also have this and then contact page. We have this, so it's like just different variations. Um, to be honest, I usually go with the blank page and just fill in how I want it. But there are some pretty neat ones here. So, for example, images. So this is already pre formatted for you. Still, they'll be that size when you upload them. So if you have, like a photography website, anyone upload a specific album and these could be like the featured images. So let's say I went to team actually know what I'll do about Paige and about Peach. There we go about. So that's what it would look like. And I start editing. So you're immediately taken into the editor, the visual editor, so we could click here to add an image. Let's try that several. I'll just put in. Let's see what I can put in. I put in this one. I believe this is a compressed image out there we go and no caption. The focus can be just on the left here because I think that looks the best. And then we'll hit, apply. And then So that's the image there. And then we could put, like about us page here, so I'll just copy this. This is from my existing website, and I'll paste it as plain text because, of course, I don't want it to take that fucked with it. There we go. Now that looks OK. I'll hit save. I'll take a quick look at what that looks like. So that's what that looks like. And, um, let's take a quick look. So what? What I want, explain to you guys, is when you make like an about page that's probably going to have the most text on your website. What you don't want to do is have all that text is a paragraph just coming down because people will get bored of reading it and they'll stop after, like, the first sentence. So, for example, if you had something like this, let me just show you guys real quick. So if you guys had something like this on your website. I guarantee you nobody is going to read all that. That's that's a promise I'm making to you. They'll probably get like, you know, first sentence 1st 2 sentences. Maybe if you're lucky, even three. But nobody is gonna waste that much time reading it. And I mean, it might have the most interesting content in the world, but unless you know, it's actually like something that's gonna provide them value, they're not going to look at that. So keep this short and concise and make sure you break it up. If you If you have to have, like, a long paragraph for, like, you know an essay, make sure you break it up into sections. That makes sense. So, for example, on my current website, you'll see that I have a little about me blurb there and then more about, but it split up into, like, mobile friendly. So if they want to learn more, they can read here that expand your business and then split up further here and then split up into customer service over here and finally about the hosting itself over here. So if I had put that all into just like a paragraph, it would have come make. Probably like half a page here just of text. It would have been full of text. And again, nobody would have read at all that. Except now, people actually mean maybe even read just the headers himself. So mobile friendly, expand your business instead of the text. So that's definitely something you want to work on when you're doing spacing. And definitely take advantage of these layoffs that a pre made for you. Because they're ones that squarespace have tested and they know they work well. So, yeah, take advantage of that. Okay? So finally will go into footers. So footers in the next lecture, and then we'll actually start creating this website.
24. Editing Pages: Prefooter and Footer: Okay, So in this lecture, we're going to take a look at how we're going to modify the pre footer and the footer. So if you scroll to the bottom of the website, this is the pre footer as a shows here, and this is a footer now. Not all templates have a pre footer, but every single one has a footer. So in my template, the Bedford template, I have a pre filters, so let's go ahead and modify that. So right now I have a subscription box here, and that's actually what I want to keep. Except I'm actually going to connect it now so that that red box doesn't appear around it. So let's go storage male chimp. And I'm actually going to just sign in and pick my email list so that people can actually start signing up for newsletters. So let me go ahead and pick a B G tec, and then I'll pick free hosting Upton. And will they play? There we go. And if I had saved that outside box that was read is now gone, so let's go back in, so I'll change this to subscribe for one. So usually when people subscribe. You want to give them some sort of offer, like something for free or like an e book download, just to entice them to subscribe. And then after that, you could actually send them, you know, promotions and any sales that you might be having. So this is actually kind of small. Actually, I like It's well, we can change it. I'll show you how it would be through the style editor, Um, or custom. CSS. If they're the option for this, isn't there? I'll take a look in just a second, so we'll keep it. Senator, float the fields or we can stack the field. So this is Stack. You'll see more if I say require name. So this is what it looks like when it's that and when it's floated. Okay, so I don't like to collect names. Let's remove that because that's that's easy enough to, you know, just they enter an email address and then they can subscribe. It's easy enough that they're not put off so advanced. So submit, subscribe or changes to subscribe. Okay, so that should be good. Yeah, so that is good. So we'll hit, apply and tape so that that mouse is subscribe. Let me see about this fun because it is kind of small. Let's go to style editor. Click here and there's only style light padding, button color. There's really nothing for text here, just text color. So it looks like I might have to show you guys how to change that font like the size they're using custom CSS. So I'll cover that later on just because I don't want you to get bogged up too much with the semantics and like little the syntax, I mean for the coding. So we're worried about that leader. So without led the custom CSS in here leader. So for for now, we'll just leave it like it is. It's not too, too bad. So we'll leave that I also have my social media length here and that one I put in earlier in one of the lectures and actually like that. So leaf out there and then finally will move on to the footer. So before actual move on in the pre footer and the footer, if you just hover here just like with regular pages and blocks, you can add any block you want so you can add you know, a map, chart, commerce, anything. You could have a product. If you are up cell, you can. It's just like a regular block. Except now, in the Footer. Now the footer and the prefigure are going to appear on every single page exactly the same . So this is the same footer that we will see. For example, I'm in the home. If I go to portfolio and then I scroll down to the very bottom. It's exactly the same. So if I make a change on one page, it'll automatically apply to all the all the pages, so you don't have to keep changing it. So in the Footer right now, it's is powered by squarespace, and that's all I can edit. I can't actually added this part where my name is started. The A B G Tec, Toronto, Ontario. I can actually change that because that's my business information that I filled in. I mean, I could change my business information, but this is what it is, and I don't want it to display. I can just go to style editor, just click on it and hide site info so it just disappears just like that. Okay, And you can also change the font of this. So this part you can actually change the font of, but not the subscript subscription box. So it's all caps, locks would make it, you know, capitalize. So it's you know what? Uppercase looked really good, so leave it a zit is, and we'll go back. So now what I'm actually going to do is remove this. Okay? So remove this entire part right here. I don't want to stay powered by squarespace. What I would rather it have is a secondary menus. Because when people scroll down to the bottom of your website, that menu is gone, so you want them to be able to quickly navigate to the different pages easily. So we had home portfolio hosting, so home portfolio hosting. And then we had about us blogging. Contact us about us blood and contact us. Now with this, we can actually go ahead and center that or we can write a line. Okay, now, another thing we can do is once it's entered, we can put like a divider so we can put like the little line right there. So that's just above the enter key on your keyboard while shift is held down and that'll so it would be this with shift. How that would give you that just to kind of separated out. Or another thing we can do is I sometimes like it. So there's like home portfolio hosting about us block contact kind of spaced out evenly. So in order to do that, what we have to do is let me show you put in a text, I'll make it home, and then you put in another text, make it portfolio and we take portfolio. Put it to the right side home and it'll center. This sent through this and I will put in hosting. So basically, we're adding a block for each one of these that we can evenly spaced it out along the bottom. It's a little bit more work, but I think it looks better. There we go. I think it looks much better, but too high up. There we go. And again, it doesn't work for all cases, so if you have a lot, it won't really work too well. So home hosting per for you I had that mixed up. So next is about us. I tried to put in the same order. It appears in the in the menu at the top. So take this and put on this side in the center of this. And then we have blogged. I just want you guys to see what this would look like when it's finally done. I like this way best. So that's why I'm taking my time to do this. And then we have contact us, sent you there. It will drag this a little bit tricky cause it's only one line of text and also center this . Okay, so now what you'll notice is that since I put in six of them, they're all weirdly size. So these two are very small. Then there's this, which is like regular size, and the rest seem pretty OK, so we can Mattingly go ahead and fix this like this, or we can leave it at five after five. The with kind of starts getting ruined. Um, and there's really no way to fix it even when you actually drag it. Like when you drag it and make it different wits. It looks weird on different devices for five is the most I would really go with. Um so in this case since I have six joining Sure have six yet So it won't really look good this way. I could leave one out, like the contact page, which is probably what I'm gonna end up doing. Or I can just go ahead and do it this way. So me delete these because I actually want to put all my links in there because the contact page is pretty big and so are all my other pages. There's nothing I want to really leave out. So let me go ahead and delete these Not a complete waste of time, because I really wanted you guys to see what that would look like. There we go. So now what you can do is you can highlight each one so you can double click on it or just violate it. And you can click on Edit Link and you can change the link to home page for this portfolio hosting about us block and contact us. So that way they lead to the page. They're supposed to. Okay, so that's how you would have links to the footer. And there's one other thing I usually like to add Two footers and that's a copyright. So I would write like copyright 2016 a B G tec. So this is like the standard I usually follow. And I also like to put a copyright symbol right here to actually get that symbol. What I do is I go to Google by typing copyright symbol. Just grab this highlighted. Copy it and come right there in the middle. Uh, so right there. So between these opportune spaces, go back one. So I'm right in the middle. Paste is plain text. There we go. So it's one space between another thing you can do on your keyboard. You can hold out, Ault. And if Azzam's you have no block turned on, this will work. So you hold out off and put in 0169 And that will also put in a copyright symbol right there. Okay, so that's usually what I like to put in my footer. Okay, so that's everything for a foot. And I'll see you guys in the next lecture.
25. Blogs: Learn to Blog: Okay, So in the last lecture, we did the footer in the pre footer content. Now I'm going to show you guys how you're gonna be using this website to Blawg. Now, blogging is extremely important. It keeps your website fresh so that you keep appearing. You know, first on Google searcher anything like that, if you're actually providing valuable information to your customers And like people who visit your website, obviously. So once you get on the first page of Google, it's easier to stay on the first page if you actually block and you'll learn more about that once you actually take, like, a marketing course if you haven't already. So first thing we're gonna do is create a block post on the actual page. So I showed you guys how to make a page earlier. So you just click on plus and then blogged, and that's how you make the actual block page. So my block page looks like this right now. So I have one post here to pose three post. So I have three altogether if I click on the actual blogged page on the left hand side. So if I click right here, my post come up. Okay, So if you click on the plus, let me show you what's in here. First block settings. So this is just a name of the blogged, the Earl of the Block and a password. If you want a password, protect it. So let's click on Adblock Post. So this is the name of the block, so of the block posts. So let's say there's going to be first blogged post or actually make it welcome to my block . Okay, so here is where you would actually type of your block post. So this is a new blogged welcome. See you soon. So cause you're just gonna be a much longer. I'm just putting this in front because I don't really know what to put in there. So that's your actual block post. Now you can add tags to your bark post or something like it's a welcome and maybe squarespace and courses. So these air tags. So people will be able to click on a specific tag to view all your block posts that have a welcome tag in it. And you also have categories, so you press plus created category so we can make this random facts and then press enter and that will create the category. And we can make another one called, for example, tips and tricks. Okay, so these are gonna be different from tags. So right now, if you have a category selected, it will be a darker shade. So right now I have zero categories picked will make this round, in fact, and then I click outside. It's no, it's in the category. Random facts. Now comments are turned on. I can turn it off here by clicking on it, and right now it's a draft. I can publish it, schedule it in the future, so it'll go out tomorrow at noon. I can market is review so that my actual like let's say I'm only an editor if I put it is review. The admin on the website has to come in market as like he reviewed it and then publish it so we can also publish it. Ourself here, saving, published. Since we have the option, um, and then another thing we can do, we can just like editing pages. You have this little symbol here which will let you add blocks so you can add your social links, for example, Just like before we can put in audio text slide shows, newsletters newsletter sign up. So it's exactly like a page except not to block post. So there's a lot of customization is you can do to the actual post. So here's again adding blocks. And if you go to options on another cool thing, you could actually go full screen with this so you can see the entire block post and it was good options. And then we can add a thumbnail image. I definitely recommend you adding it. I'm no image. So, for example, if I go to, let's add, this isn't some now, Yeah, we actually use this one because it's a smaller image. So it'll probably load faster here. How we can actually change the Earl of the Post here so we can make this welcome post. Okay, I don't really like the the generated one said squarespace supply. So I use this. We can leave that alone. You almost never need that. So that's like your sources like reference list. And the excerpt is actually what appears on this block page. So in the background, me show you so this before it says Read more so if I go to my blocked page there, we got so there we go. So right now says, read more. This is the actual excerpt. Whereas here, it doesn't save Read more because this is the entire block post, cause it was a very short post, so I can put in an excerpt right now. I'll do it. So copy this. Good option. Put this in as an excerpt. It saved. So now it actually shows. Read more. Okay, If you don't put in an extra pill, put your entire block post, which, if it's really long, it won't really look neat here. And you also need an extra pay if you're going to use your block post as a gallery or a semi block, which I'll show you just just a second after this. Okay, so here you can pick the author. I'm the only author on my website, and I can actually also mark this is a featured post, which I will just because it's my actual block post. For now, you can add locations which you don't have to, and I'm not going to and you can put in social. So if I check this off when it hits. Ah, publish. It will automatically take this post and push it out to my Facebook page so people will know that I wrote it out. So let's hit save. Okay, so that's what that looks like. No, I don't really like how this looks to be honest, cause I mean, you have the header here, and then just all these post listed out here, I'd rather have it as like, just like a page where it's a little bit more neat, so I'll show you how to do that. First off, I'm gonna remove this from my menu, So I put it down here. Okay, So now if I go to home, you'll see that block is no longer up here. Let's go ahead and add a page called Blawg. Not a blogged, but a page animal name it block. And then all its start editing and what I'm going to do is here. Maybe I'll put in block and all century, make it a header. And then down here, I'm going to put in a summary. Maybe actually, we'll see what this will look like. Let's try wall first. We'll pick log. So Leo actually display first, So it'll display 30 which is a maximum. Let's go to content. Let's make it so care. So So this will show that little tag up there. This is featured. Let me actually hit save because the images aren't popping up here. There we go. There were just too large, so I can change that word There featured two featured pose latest block pose and then we can show more than three per lines of four or five. So four would look like this. And then, of course, is just like the summary that I showed you guys. Let's see what looks the best. So we go to lay out Paul would look like this list. I kind of like the look of list and great. Yeah, let's keep it list because I like how that image shows perfects the images on left and showing 10. She'll read more. So again, if you Markoff show excerpt, it'll show nothing. It won't show your block post, so if you don't have an excerpt, it'll show nothing. That's why excerpts are really important to make sure you feel that in, and that looks good. I like the look of this a lot better. Yeah, this is a lot better than actually how this looks, at least in my opinion. So it is up to you guys, but do keep in mind, um, we just move that where it belongs. So it should be about us then. Blawg. So about us, then block. So do keep in mind that right now there's a limit of 30. So after 30 block post, they won't be able to see any other block post. So what you can do is actually go right here, put in a button search button and read more block post. And then I can link that to my actual blogged. So block and you can also link to a specific category. But I want them really read the entire blogged, and we'll make it a medium size button. And now I'll change this to three. Because if you want, if you put 30 on, there's gonna go all the way to the bottom of the page. It's gonna make it a really long page. So let's make it three. So I have four block post, but I'm only showing three. So if they want to see more they have to click on, read more, and then they'll be taken here where they can see off for the block post. Okay, so that's the two different ways you can have a blocked page. One would be a blocked page and one would be an actual block, and you guys can go ahead and pick which everyone you think looks the best.
26. E-Commerce: Adding Products: Okay, So if you're going to be selling anything on your website at all, or if you're going to have an e commerce type of website, then this lecture is very important. What we're going to be doing is adding products that people can actually purchase, so you can start making some revenue on your website. Okay, so the first thing you have to do before you even add products is create a store page. So I don't want mind to be linked up at the top here, so I'm gonna put it under, not linked. So I'm gonna press the plus and we'll make a page for products and I'm going to name it. We'll just leave. It is products. Actually, that's a pretty decent title, okay? And you'll be taken to this page. Now, if you ever have to come back to this page, all you have to do is click on products right here and we'll take you here. Okay? Now, from this page, we're gonna go ahead and add a product by clicking on the plus sign here. And then we'll see that there's three types of products physical, digital and service. Physical is something that people would pay for and it would be shipped to their house. So if they're buying like an electronic device, or if they're buying like an actual physical copy of a book, digital is like a file they would pay for, and they will be able to download it for a certain amount of time. So that's something like an e book that bacon purchase and services something you'll do for them. And there's no shipping costs associate ID. So if they were buying like S CEO service or if they were buying hosting or you're gonna make a website for them in exchange for money, you would put it under service. So what I'm going to add is my hosting package, 10 steps of product I'm actually going to be selling. So let's go ahead and click on service. The first thing I like to do is out of product image. So let's go on over to my folder, where have all my images and will put an image of a server, okay, and I put in the prices Well, in just a second, I was gonna wait for this image to be done. I'm gonna be taking the the information for this page from my actual website. So it's gonna be 45 discounted to 20. So let me actually put in hosting for one year first. Okay, So hosting one year a copy of the description here as well, I don't paste it here. So again, in plain text, okay. And then I'm going to make each one of these a list such down so again or the cursor doesn't have to be at the very front. It could be anywhere here. When you click on the list icon, so make each one a list they're regarding. That's the last one. Perfect. And then next up, if you click on pricing here will take you to pricing at the top. So if I click, pricing will take me here. So, in stock, I have limited and pricing regular prices. 45 myself. Prices 20. So right now, it'll be listed as 45 if I put it on till it'll take the sale price. Any additional information? I don't really have any for this product at a form if at the end, they have to fill out a form in order to purchase it, So I will create a new form so product and actually business information just so I can get some information about them to set up the hosting. So I'll ask for their name, which is required a last for their email address. See email, which is also required. And I also asked them for their domain ing domain name. There we go. So that's also required. And I will also had just a texture year where if they have any questions, you can ask questions over comments. And that's not required because if they don't have questions, they don't have to fill it in. Okay, and then I'll save. Then we'll go. Options make this product you are l into hosting because again, the one that Squarespace generates isn't always the best. And I think that's that should do it so well, actually put into categorias well category I'll call hosting and then give it to take. I didn't enter. So who's staying? Enter on your keyboard. There we go. And then for tags, output hosting. I think that should be the only one there. And then I'll go ahead and save and publish. No, I have my product here. So that's how you add a product, let me actually change how the image appears. So I double quick and I wanted to be more focused on here, and I'll hit safe. One more thing that you might want to do with the product is at different variations of it . So I'll just show you how to do that on this product, so you'll know So for variation. So I'd say I want to have a variation called Duration. And now you can have one called color size if you're selling T shirts or clothing. So I'll make the 1st 1 a one year duration and they'll add a second product with a three year duration. And I'll change the price for that. Because, of course, it's not gonna be the same for different duration of time. So this is 1 35 discounted to 50 so 1 35 discounted to 50. Go ahead and I'll hit save, and I'll show you what that looks like. So if I go to products now and I click on this product, you'll see that when somebody is going to purchase it, they'll see duration and quantity so they can pick one year and I'll show them $20 or three years and will show that $50 so you can have different products. You can have different stock for each product. So, for example, let's say you only want to sell 10 products at At this variation, you can limit that you can go stock and change that too limited and still have the other one is unlimited, so that is also an option. Okay, so now if we go back, the product will look like this. So it's perfect. So on the left hand side, you see categories that you can filter by so hosting the only product I have. So that's all you're gonna see for now, So that's how you would add a product.
27. E-Commerce: Taking Payments: now that we have our product actually added to the website, Let's go ahead and go into our strike settings so we can connect our stripe account and start taking payments. One thing that I want to mention is that as a December 1st 2016 scores, please does have support for PayPal. So in the next green, when you're taking a look in my settings, it'll show just ripe, um, on your screen. When you're making a website, you'll actually see PayPal as an option as well, and to connect it. All you have to do is sign in with your PayPal business account, and it'll prompt you to create an account if you don't have one already. So we'll go into settings and then the commerce section. So I should you guys just before and now we're actually going to start using it, so going to payment and we'll click on Connect Strike. Now, If you don't have a straight account again, you can create one by filling in this form here. I actually already have one, so I'm gonna fill that in here so it's going to be let me just fill in my information and we'll go ahead and sign in and I'll hit safe password and connect my stripe account. So now it should automatically pull in all that information into Squarespace. We'll give it a moment there. There we go. And now I have a couple of choices. I can accept Apple pay. I will go ahead and turn that on. That's just another way to make it easier for customers, so why not? And test orders? I won't really enable that because I'm not gonna be making any test orders right now. And then I'm safe now. We'll go back and store currencies Canadian dollars, which is perfect. You can change it if you want. But Canadians what I accept. So that's perfect. And then check out. I will connect my mail chimp so people can sign in. Sorry, sign up for my newsletter and I can collect email addresses. So let's go ahead and pick my account and I'll make the default country Canada, since that's where my target, our audiences and enable melt at least opt in. So that's the second. The second lose lighter that people get. Get saying Are you sure you want to subscribe? So I will pick that. So that way they only have to subscribe here, and they don't have to confirm. And then I'll hit safe. So everything else I set up earlier, so it's all perfect. So now stripe is connected. So any time somebody, for example, clicks on the product, add to cart and then checks out that money should go straight to strike. It's a simple is that Okay, So in the next section, I'll show you guys how we can have these products to the actual page that they belong on, and then we'll go from there.
28. E-Commerce: Displaying Products: Okay, so now that we batted the product to our store, let's go ahead and added to a page, So we'll go to hosting. That's where I want to show my hosting product. And I believe it's an empty page for now. So we'll click on Edit will ignore the text block, and we'll click here and we'll do a search for product. Perfect. We'll click on the product and we'll just type in hosting. There's the hosting I wanted to show and we can show the title show the description. Yeah, actually. Descriptions fine show. Add to cart button, and that works really well. So let's go ahead and save. And I will change this to hosting just to kind of reiterate what it's about and we'll make it a header. Number one. Like I said before, you wanna have at least one headier will not. At least you wanna have exactly one heading one on each page because that's really good for ASIO. So then we'll hit safe. Now I think this image might be a little bit too wide, so let's go ahead and make it a little smaller. So while we're here, we can central align the text because, like I thought, I like everything central line and one thing you'll notice is that the little dots they on the left in the on ordered list where it's a text move to the center. Now I'll show you how you can make a small change to move those dots as well, using custom TSS. But for now, we'll leave it as left. Okay, you'll see that in the bonus lectures. So to make the image smaller, let's go ahead and put two spacers, one for each side, and we'll put it Justin left of that section. So there we go, and then we'll go here. That will make it a little bit bigger here, and that's perfect. So we'll go ahead and hit save. So that's how you would add that product of specific page. Another thing you might want to do is going to your main page and add your top three sold products, for example, so you can put, for example, a summary will make it a list of products and we'll pick just the featured products. So for me, that's this one. The only flour with using a summary is that there's no way to add in. Add to cart button so somebody actually has to click on this product before they can buy it . And let's not make it a list. Let's make it a great yeah, Grid looks better and will make it to with Actually, three is fine. Okay, that's perfect. And will center align the text? And then everything else looks pretty good below. Yeah, that's good. OK, so we'll hit. Apply Well, it saved. And so how I made this a featured product was, I simply want to my products double clicked on the product I wanted to change, and we go to options and said it is featured. Okay, on the third and final thing you might want to do is just put like products in a specific category. So let's say you only want to show your hosting products here, and you had more than one you would go to display and you turn off featured. And for category, you would put in something like hosting. So now it'll display all the products you have that air under the category hosting, or you can use tags. I think the one I said it was hosting so again. Any product has take with this tag will appear here. Okay, so that's how you set up, Um, like different products on different pages. And then the next lecture will show you how we can change some of the looks using the style editor. So that might be a little bit longer of a lecture. Just because there's quite a bit to cover, so stay tuned.
29. Style Editor: Using the Style Editor: So this lecture is all about the style editor, which is where we would go to change fonts and font sizes and all that good stuff. So we'll go into design and then style editor, the third option. So this is kind of like the command center where we change everything. So let's first off, I'll show you down here. You see how my links the color of the links is his green color, which I don't really like. So right now, if I click on it Page Link color is this this green color that came with the theme with the template and I don't really like that. So I'm going to go and choose my regular red color that I really like. I mean, a copy it and they're going to click on this green, and I'm going to pasted in. Okay, that's the first thing I do because I noticed right away while I was making changes that I didn't like that. So, as you can see, this is what my style editor looks like. Yours will inevitably look different just because you most likely will pick a different template to go with. If not, then yours will look the same as well. So let's see. So right now site navigation. This I changed earlier in one of the earlier lectures. So you guys know what's there? So site header is up at the top here, and we have site navigation than the binder section. Is this entire section here? Main content is the page content in the white years, all of this. And then we have the blogged, which is I'd have to click on block, I'll show you. And then we have the summary block, which I believe this is a summary block. So yeah, it is so I can make this red. Make it same. Red is my red color from on my logo. And we can also change the font. Right now it's proximate nova, so we can make it like you make it. Adobe Chairman will do Brie. We'll leave his briefer now. And then there's the pre footer content after that which is right over here and in the footer content right over here. So the footer I like the color of I like this grey suits my the black in my logo. So we have this actual make this a solid black if it isn't already. Yeah, it isn't so we'll make it a solid black. I will make the font for the text color into white. There we go, in full weight. I will also make this the full weight. There we go. So again, this is like the brightness. Okay, so that's the full white 100% weight, and then we'll go back to show all so again, I can make the headers into that red color as well, just to kind of make it stand out from the rest of the text. So I will show you the block now. So for the block, we can actually click on Blogger up here, and I'm pretty sure Yeah, I had. This is a summary. So let me show you my actual block, post or block page. It was when I click on here, period. So that's my actual blog's local back in this violated her. And we have a section just for Blawg. So right here. So this is for the slide shows. I don't have a slide show on my blog's, so that doesn't really matter for me. And then we have the matter priority, which is date we could make into category, which is one of top here. We could make it to author, or we can make it into nut. So I think let me see what the 1st 1 look like. Date. I think I like none better just because then both. So right now it's date and then the category here If I picked none dating category come down here. I like that the best. This is center. Which center looks nice, actually. So we'll keep center hide out there. So something only one blogging on this will actually hide The authors just gonna say my name over and over. Hide Lis entry. Yeah, this is the tags. How many comments? Everything we have looks cleaner like this, but I guess this shows more information and people can like it. Great away. So I guess we'll leave this in and this side bar. So right now there is a There is a side bar just along here. See how when when I go here is there's a little bit of space left from here all the way to here. That's the sidebar. I don't like sidebars on websites. Unless you're gonna have one Where you gonna put, like advertising on the side? So that's the sidebar. And that's that's pretty much everything we can edit with Blawg. Now, one thing I really don't like about squarespace that you have to kind of custom CSS, which I will show you. But again, just let you know what I don't like about it. Let's say on my home page, right? So on my home page I have a couple of headings which I made red, if you remember. So this is a heading. So this is a heading number. Let's see style aided. Here we'll click on this. So this is a heading number one. OK, so this is a heading number. It's just a link. It's not a header. So this is heading header number one. OK, now if I go into portfolio, for example, did not anything there? Let's say I go to hosting. So under hosting, I'm another heading. So let's see what this is. I think this is hosting. Hosting is number one as well. So head there, number one so quick it head on number one. So let's say that on the hosting page I wanted this to be let's say green. Okay, So green. Right. And I would say you'll see that when I go back to my home page and I scroll down. This heading is now green to which is horrible because there are going to be times where you want different colored headings on different color pages. But squarespace doesn't allow that if you pick ahead and color, that's the only one you're gonna be able to use. So all my heading ones are now going to be this red color. So if you want to change that, we do have to use custom CSS. I'll show you guys that in a little bit, but for now, just know that whatever you set here is a global global style. So any reds use that will be global. Okay, so again, funds. Now, what you can do is definitely go through here and take a look at the different fonts. And don't use more than one or two on your website. Just because you don't want to have like, you know, lots of different types of funds that kind of confused people use use one or two that you think looks good. I mean, first scripts the lily script. One looks kind of good. The last grip looks good, and in the regular regular funds there is play fair display, which looks really good. Let me show you what it looks like. It's probably the one that I use the most often. So this is play fair play fair display. I really like how that looks. And then also Helvetica. Obviously a lot of people use and Ariel again. Something people use quite a bit joint looks really good, in my opinion, of course. Definitely have a look. Katherine looks really good. Catalin and I've used Oswald quite a bit, and I think that's about it. And proximate nova. Those are probably the funds that I use the most often. I really like the look up there very clean and professional looking. Okay, so also have a take a take a look through your style editor as well, because you will have differences here. Like I said, for your background, you might have a little mountain here, which means that you can actually set background images. So that's on specific templates only. And my template, which is better for it doesn't have support for that. Besides that. That's pretty much everything here. And if you if you made some changes and you don't like it, you can always reset to default. Um, and if you re such a default by accident, you can just hit cancel without saving. So I'm gonna save this. And I think, Yeah, that's that's pretty good for now. When I when I start making some of my pages, you'll see me bouncing back and forth between the style editor and my page just because I'll make some on the go tweaks as I go. So this is definitely this is definitely Page will be coming back to over and over again. Okay, So that kind of covers all the basic lectures because now we know how to add pages how to add products, all that good stuff. The only thing that's left to do is I'm gonna show you some custom CSS that I have used quite a bit, and you'll probably find them pretty useful as well. And then finally, you guys can watch me create this website the rest of the way. Take it, take it home, and then you'll kind of learn what might work flows like
30. Watch Me Work: The Home Page: Okay, So finally want the bonus lectures where I'm actually going to go ahead and create my website and you guys can follow along just to see how I kind of get things done. So the first thing I like to do is I like the kind of in my mind get an idea of how I want the page to look. So in this case, I'm going to make it very similar to my other website. So my actual website, so with multiple sections here. So obviously, in order to implement something like this, I have to make an index page right now on my home page. Just has, you know, a banner and then a section on I wanted to be an index, So let's go ahead and click on Index here and make it home. And then I'll take this home page and dragon inside just so I don't have to start from scratch. It's no, I have my regular page looks very similar to how it did before actually identical time. Look before, with one exception, I can add more sections. So after the regular home page, I had the about section, which is here. Let me delete these extras, so delete that I'm sure we'll come back and add most of these in a second. But just to keep things kind of similar to how they are my other page and the next up we have, let's see, after about us, we have portfolio, so go ahead. And so this is like a small section of portfolio, not the same as an actual perform your page because I do have both. So this is a port for your page. This is just a section. So let's go ahead and add another section and we'll call it portfolio, and I'll just leave it as a blank page for now. And I could probably reuse this reuse the same image here. So let me click this little gear, go to media at Image. Let's go ahead and bring in some of the images. So I believe it was this one. See how big this is? 300 kilobytes of perfect, because I resize my images just cause I don't like them too large. There we go. Go ahead and save that, and then I'm actually going to go back up and change the text here. If you some past works, you know, it save now this I want to be a little bit bigger. So let's go back into the settings and we'll make it bold. Who would save? See how that looks? Perfect. Now, here I want to show my actual portfolio. So let me had in a I think I want the wall actual put in a great cause. Grades very organized and use existing. I'll make it the photo gallery. Actually, you know what? Before I do that, I'm gonna just make one change. And when it changed the photo gallery to Portfolio gallery Okay, copy that. Paste it here, just of the URL changes as well. So we'll go back back to the home, and this automatically updated was going quickly. Make sure because I don't want any trouble later on. So hopefully again gallery. That's perfect. Now I'm gonna go into the portfolio gallery, and I'm going to delete all these images because this is not my portfolio, and I'm actually going to navigate on my computer and pull up all the files that I can that's related to my portfolio, So I mean, so I'm gonna add some images. It might take me a little while, so I'm actually going to just cut this part out of video. Okay? Okay. So I've gone ahead and added all of my portfolio. So this is everything up on tool, I believe April are, or March or April of 2016 having that time to update this. So let's go ahead and go back. So now that's my portfolio. You so go back to my home page. So now it looks like this. So view some of our past work and then shows all of that. So what I want actually, is me going to hear Let me hit at it. I don't want to show that many because it makes the page too long, so I'll only show. Let's say see, So right now I can't picking here, so I'd have to make So when you pick gallery, it automatically picks all the photos in that gallery. So there's no way to kind of limit how many there are, so I might have to I can upload them little by little. Like I can upload four images so I can again Aiken, make it a grid and then manually upload just four images here, but I want I don't want to redo everything. So instead, what I will do is I will make this a summary block because that I know I can limit. So let's make it a summary, and we'll make it a grid. So photo gallery, sir, Portfolio gallery and then display. I'll make it. Maybe six should be good and just the image. So I don't show anything else and no metadata and then go to lay out. So right now, you can see the sides of my image of being cut off. So along the left hand side here on the right hand side. So let's make it auto so it automatically resize it there. That's perfect. And I picked six bits only showing five. So we'll have to make it seven. Seems like the numbering is a little bit off and I don't want to show all of so I don't want to show just the most recent I want to pick specific images that I like, So I'm gonna go back into port for you and I will go, Let's say, for example, this one I want a Mickey category, make it home page. Well, it save. So I'll pick six that I would really like on the home page. So quick there category, home page, save and wait for that. And then also maybe this one category home page save. Oh, there we go. That's I believe 1234 Yeah, that's four. And I believe this one looks good because again, not all the websites you create are gonna be amazing. When you when you take a look at what clients want and you give them what they want, it's not always gonna be what you want to show off. And that's perfectly OK. You know, some people want really playing looking websites and that there's nothing you can do. You have to give them what they want, right? So if you were doing like a photography type of website, this would be full of pictures, and you could sort them two categories like weddings, birthdays, stuff like that, and then show a specific one on the home page. So I'll go back to the home page and hopefully I did six and not less than that. So I'm gonna go ahead and at it, wait for this to come up here and then click edit. I'm only going to display things that are in the home page. We'll see how many actually picked. Yes. So this is all the ones actually want to show with what I'm showing. And then finally, what I'm going to do is and add a little button here so we'll add a button. And that will be view full portfolio. And that will take them to my portfolio page. Well, have everything. So scroll down here. Support for you. That's slash portfolio, which is the first portfolio page. I made this one a slash port for you one, which is, I believe, this page that I'm on right now. So the portfolio in the section So that's my port for your page. That's perfect. Centred medium. And that looks good. So we'll hit, apply, and we'll move this down to the bottom. And I'm actually going to change the color of this to the red to match my website. Um, just in a second here, So it save. So that's a portfolio. And I think what I'm going to do now is I'm going to remove this font here because remember I told you it doesn't fit with my my website, and I don't like it. So let's go ahead and remove this. Okay? Perfect. I like the thought that was there originally. Go back, go back again. So about us, um, I feel like I should have more text there. Or I can do what I did here. I could put an image to the side tohave an about page. Yes, I do. So I can put Ah, button That leads straight to my belt page down here. And I'm thinking, if I should move everything to the left, I probably shouldn't. So let's just put in a button and we'll get rid of the space or here. There's no reason to have the spacer here, so go ahead and add another button and we'll make it the same size as the one we use below . Just keep things consistent, so this one can be as this that's read more. Be more and so it's gonna have a click through Yarrow and it will be medium. So that's perfect. We'll make it lead to the about page that we have so about us and then apply and go ahead and say that. Okay, that's two sections. So far we have the home page and we have the portfolio. Next I I'm going to add I'll actually leave this out on the section on this home page and block posts. I showed you guys how to add the summary. Since I'm not gonna be blogging on this website, I really should But, um, since I'm doing it just so you guys can t I won't put a block on there, so I'll put some testimonial. So some reviews from people. So let's go ahead, go back here at section page and will make it reviews. Now, one thing you'll notice, as I'm adding, this is that on my squarespace website, I have the image banner up top and then the like, the text for each one below. Where is all my actual website? I have the image in the background. So if you want something like this, you'd have to use a template that supports it Like Pacific or Marquis. Um, this Bedford template doesn't have support for that. So I'm kind of stuck using how it's meant to be used, so I'll have the image of top and then the text below. So let me copies. Copy this. Actually, Did you tear? Okay, so on the home page, I will scroll down to reviews. Maybe I should have the image in first full of thumbs up. So reviews meet. Cancel here, actually, and banner. And I'm going to add the same image that I used for my personal website. So it's the one with the guy with the finger pointing up. So the thumbs up sign, let's go. And I should be able to find it here. I don't think I moved it. Maybe not. Okay, so I don't have it here. Um, so I used a different one. Maybe used this image. That's odd at that, for sure I had it here. Okay, I'll use this image in that case. And the wording all uses reviews. And I won't have a view all reviews, because on this page, I'm only gonna show just three reviews. So go ahead and save this. Who? I should have edited the actual wording. So for to say, reviews, maybe I'll have it. Save, read, read some of our latest reviews. Okay, So now quickly put in that the wording that I wanted to put in so read our reviews and I remember to make it bold and then light save. So the first thing I'm gonna put in is this'll I shall take the name of the person as well and let me go ahead and edit, and I'm gonna put in out of text block. There is a test. Um Who quote? Sorry, quote, not testimonial. So quote Let's see how this looks first, because it doesn't always look the best. It's not too bad. So when we add in another coat, so I'm gonna have three here. So me put in three first quick, let's see how it looks side by side. Not bad. Okay, so let me take the 2nd 1 Let me take the best i e perfect. And finally we have the last one here. We'll take this out. Hope. Okay, so that's that. And this one's a little bit smaller, so maybe I'll put in the middle. Just balance things out. Perfect. So that's reviews reader reviews. That's not bad. So portfolio again here, people just click here and it will open up in full size so they can view in light box. Or I can actually set it so that when they click here, it'll take them straight to the website that is meant for And for that I would go into portfolio and click on the little gear for each image. But I think that looks pretty good for now. The footer is fine. That's just how I wanted it. And let's see. Home Page looks good. I might make that a slider later on, but I might not. Just cause too many moving parts just makes things that live it more confusing. Okay, so I might just leave it like this for now. I might put an image of myself year for about us just to kind of give give a more personal touch with the actual visitor. But besides, that looks good view full portfolio. Takes me to the portfolio page, actually, quickly modify this because I don't want to make a whole lecture just for this because it is pretty straightforward. So when the roof that and I'm gonna put in gallery actually summary, it's gonna be a summary with its summary. We'll make it a gallery this time cause I'm not gonna pick and choose images. I'll just put the whole gallery here. I'll make it Let's see. 43 still being kind of off widescreen. Yeah, that looks fine for parole. Make it three. So it's not so small and like box, so that they can, of course, click on it and see it in a bigger, bigger size and then content. So that's perfect. And then I'll get rid of that text block that was there by default. Okay, so there we go. That's our portfolio. And remember, I made this the actual Yeah, okay. And then So I got rid of that slider, the header slider. I got rid of it because I don't want to have a slider on this page, but I do want a banner. So let's see what images I can use for a portfolio. Maybe I use the same one that I used on the on the home page for portfolio. So just keep things consistent and we'll put the focus on the computer perfect. That's already done. And then also, actually, I might have to use a lighter colored image because right now, since the backgrounds dark, it's hard to see the menu. Now I can add like an overlay, but that might be a little bit too much work. So let's remove this, See if we could find a light image. I want to use that for the contact page. So maybe this would work best still is a little bit dark on the top. Hopefully, it's works. Yeah, actually, this was This looks pretty good. Let's move it down a little bit. Besides that, I think it looks good. I loved it too. Far down on the home page is a little bit off. Okay, so that's perfect. Of course, the image doesn't really match, but, you know, I'm just making do with what I have. For now, I can go to Paxil and find more images, but it's not too much of a concern right now. So we'll make this, um, our put full you and again pulled it because otherwise it's too small. Okay, so that support for your page. So when somebody clicks on view full portfolio on the home page, it takes them here so they can see each one fully, so that's perfect. And then I can add more images to the portfolio by going down here, and that's great. So that's home and pour for your done and then in the next one. I'll take care of the about page, but that's another page that I use for everybody. The hosting it's pretty much done, to be honest. I mean, we can style it up a little bit, you know, put put it like an image, A talk on the top here. But this isn't really a page I have on every website, so I won't really clarify too much. Instead, I'll go to the about US page. Since this I use almost every website have made, has has an about page, so I'll show you guys that in the next lecture.
31. Watch Me Work: The About Page: this lecture is all about the about us peach. So for this page, I'm going to start off with the banner. So I'm gonna put in my own batter here. We just take a quick look at what I'm using on my other website. Okay? It was the same image here, and I don't think I can, actually, because I remember dark images didn't work. Well, let me quickly see what this is gonna look like. It's not terrible. He actually keep it because it's actually not bad. Okay, so about us in the u are less perfect. So believe that. And then we're gonna copy this, and I'm gonna pace the right here. So let me delete this text box. So this is all the demo content that came with it. This is why I don't like using demo pages because you have to go through the hassle of deleting deleting everything before you actually get started. So let me go out and paste this as plain text. Of course. And then we'll write a line this No, keep it left the line. And though at another text block So another textbook here about our work This time I won't . Um I should let me see what it looks like if I just paste this plain text. Yeah, I'll keep it bold pull That will make it a heading. Number two. Yeah, that looks better. I can pull us. Yeah, that looks good. Okay, so keep it like that, and then I'm gonna have mobile friendly with an image of the tablet on the side and then the actual Mac books. So we do mobile friendly. First, I won't make this an index page because I don't have too much to add here that I don't want another image separating the two. So let me actually put in a divider, I'll make it a line, and then I'm gonna put in an image that is on my desktop. So first, is the iPad again no caption safe and that I'm going to put in a text block so it's gonna go in here and will make this a header number two. Because, remember, you only have one header number one per page, and this is ahead of number one. That's why I picked out a number two here and I'll pick two again here. And this is all gonna be centered. Oh, no, I was wrong. Left the line. I mean, I'll try centuries while to see what looks best. There we go. Suit center. No, definitely left the line. We're gonna have another image this time. The Mac book and no caption once again because I don't like the caption down here. Okay? And then another text box on this side. That's it. Expand your business and this can be left aligned. And this is gonna be heading number two. Okay, I'm just checking. There's there's an empty line above. So, Heather, number two. Case of That's perfect. And we also want to put icons here, so it's being a little bit weird. Let me go out and put code. Delete that. Move this to the top. There we go. Put another coat in here before continue. Okay, So in this code, what we're going to put is and I kind of phone. So when we got icons and do a search for phone, take this one. Go ahead and copy it. Paste it. And I wanted to be a little bit bigger, maybe three times Hope a three times four, actually. Okay. And yes, that's Yeah, that's good. And I love this to the left a little bit and they'll move office. There we go. So this is gonna go on this side as well. Okay, so the code we're going to put in now is a wrench when we go back and we'll grab the wrench . There we go. Perfect. Copy this. Put in here. And I believe it was three times if a four times just to keep it the same this year. So this was hit four times, and then move this over. Started the image over. Okay, Maybe this will better on this site. Mm. No, I think it looked better on the site. Okay. Yeah, There's quite a bit of trial in hair here, so that looks good. Okay, so go ahead and hit. Save. Now. I want to make these icons red. So let me get the cold for my red first. So style editor, take that ongoing custom. CSS, remember, for the icon, it was a class I So if I just go to I should work color. There we go. So changed to read. Okay? And I think that's about everything I want for my about page. But he would also have here. I don't want that. Mm. It might be too much and nothing about the hosting. I can put that in the hosting page if I need to. And these logos, I'll leave out as well cause kind of like a portfolio. And then so that's the about page contact us page. It was already done. Um, this was everything I wanted. I could add a little bit, a few more fields and the questions I'm going to change, obviously. But besides that, the contact page is pretty much done as well except for the batter, because you can't really see that background. And I had a special picture for this. That's not it. So it waas this one right here. So let me see how big that is. Five million bytes. Definitely not the one I want to use. There we go wait for that, the upload and then change it to contact us. I'll get rid of the button. Here we go. So let's see what this looks like. Perfect. Wait. I used this on the home page. That's why it looks a little bit familiar. See what else I can use for contact? I could use this. Actually, I'm pretty sure used that already. Two mega Bates. Yeah, that's right. I'll use that one. Actually, I haven't used that for the portfolio. I chose to use the other one. There we go, and we'll hit safe. So let's see. What? That you that kind of work list, maybe See if I can. Moving just a little bit. Maybe that will help. That's a little bit better. Not really. Um, maybe moving down a little bit to get offer dark jacket, Hopefully, iPad. Still, I use that, but no, I like to better before actually I like, so we'll just leave it as it was right in the center there. Me, I like that the best is still pretty illegible. So yeah. So that's how I would do the contact page as well. Okay, so if you guys have any questions at all, feel free to reach out to me. Um, on you, Demi, you can actually go ahead and ask me questions. And if enough people ask the same question, I'll make new videos. So if somebody wants to know a specific topic that I might have missed, I'll go ahead and I'll make a video about and then uploaded to the course. And yeah, and in some of the videos. I'm sorry if I made any mistakes. I did try to be as accurate as I could, but again, I am human. So if you see any mistakes, let me know, and I'll fix it right away. Okay? Thank you. Guys were taking this course, and I really do hope that your website comes out as beautiful as you were hoping it would.
32. Add Features: Custom CSS: Now I know I promised that there would be no coding in this website, but I'm gonna show you a little bit of custom CSS because there are times where you'll want to use it, and it's absolutely not necessary at all. But let's say, for example, like I was showing you in one of the earlier lectures. Right now, this heading number one is red rate. So if I go into hosting the heading number one that's in hosting so right here is also read . Now, let's say, for example, I wanted this to be black, but on the home page, I wanted to be Brett. There's really no way to do that right now on Squarespace, so you can't have specific Kalish for specific pages unless you use custom CSS. Another reason you might want to use like custom CSS is let's say you want to change the font of the text on one specific page, but not all the pages. Then again, you'll have to use custom CSS to change the foreign, tour the font style or exercising anything like that. Okay, now, in order to do that, you'll need to know some basic custom. CSS I'll attach a link to W three schools. So it has some very basic stuff that you can try and there's some. Some cost is that you can take. It is free to use. So there's again examples. There's practice questions that you can go through and exercises, So definitely take a look. I link that in actual course. Okay, in this lecture. So some of the basic ones air right here so this would target like everything in the body. This would be Heather number one again paragraph, which is, like pretty much text. So this would be just p for paragraph. H one is heading one. So here, So it's very, very straightforward, and it's very basic, but again, it does help you quite a bit if you're actually wanna have that little fine tune on your website. So let's go ahead and I'll show you how we do that. Okay, So first thing I'm gonna show you is kind of like the wrong way to do things just cause I want you to understand why we don't do it this way. So on chrome or Firefox or Internet Explorer if you right click on the spot you want to check the code for you can click on inspect. Okay, So that would automatically bring up to code with the highlight on whatever you right click . So I right clicked on the heading one. So if I have over here, it's the heading one. Okay? So each thing will have So each lines are You will have an i d Unless it's again the rapper , which again I do understand this a little bit more advanced, so I definitely recommend that you take a look at that w three school. So here, for example, this is a heading number one, and it's strong. Meaning is bold ID. Right. So the header one that I put in has an i d. So if I take that I d so right there ideas equal to each idee is unique. Okay, there's no other i d on this website that's gonna have this coat. Okay, so I'll show you why this is the wrong way to do things. Okay, so let's say I take this I d. So to target an I d. We use this symbol right here. Let's say I want to make the collar black. Right? So all is well and good. It is black, right? Which is what we wanted. But now let me show you what happens. This doesn't happen every time, but it happens most times that you go away and come back and it's back to read even though it still save black rate. So now it's a little confusing. What happened? Why did you go back to Black? Let's take a look. So now the H one tag. Same when I used I d and then 22 or four before it was 2196 So it's changed. So every time we refresh the page, the i d changes. This is a terrible, terrible feature that's implemented by squarespace, and I personally hate it. Okay, this is the only thing I really hated about squarespace is the fact that the ideas change because that's something that's a convention that really shouldn't be changing. Okay, so here's what you can do. Okay. What you can do is, instead of targeting it by its I d. You can target it as each one. Okay? The other thing you can do is there are some ideas that don't change so any i d. That has the word block at the beginning will not change. So, for example, if I copied this so under the diff this under this Dave, I go another Dave and then each one and then I have my heading, right? So if I go and put in, for example, that's the Dev and I put in 81 because there's the heading underneath this. So it's a child of this block. Now if I go to another page and come back and come back, it's It's so black. Okay, so you see what happened. As long as you used block, I'll still stay. Or if you just use H one by itself. The reason I wouldn't use 81 by itself is that it would target every single, each one on the website. So if I go to like hosting, this would also be black. If I didn't use block, See, that would also be black. Okay, so it's like a live. You can see a live version of the website when you make changes on the left. You also open it in a new window so you can kind of see it larger here. Case includes that. So that's how you would target for CSS its again. It is kind of like a weird situation, but it's what Squarespace has for now. So I guess that's what we'll have to follow. Okay, that's the convention we have to follow. Um, the other thing we can do from here is again. There's color. We can change fonts. I'm gonna show you in the next lecture how to actually add in your own fronts. But for now, we can change like fun, too. So font family to Helvetica. Okay? Or we can change it to Ariel. Ariel. Not a big change. We can change it to open sons who open space cap. Got the convention for open sons. That's fine. Um, so yeah, you can you can go ahead and play around with this. Okay, so that's how you do that. And also, you can change the font size to, of course, so far in size 16 pixels. Okay, now, the other thing that you want to keep in mind let's say you go here and you put color black and it doesn't take it stays. Read what you can do his put a space and then put an exclamation mark and put it important . Okay, That pretty much tells the CSS to override all other rules and take effect. Okay, so that's how you kind of circumvent if you actually put in color black and it doesn't change. Try this. First, try making it important first. And if it still doesn't work, then you probably targeting it wrong. So just take a look over here, okay? So I'll go ahead and I'll close that. So that's kind of how you would cut do custom CSS. I've had to use that for changing font color is changing font sizes. Um, making the text wider. So, for example, um, some pages, like the width of the text only gets that white right. So in some templates, you can actually make it wider by going to the container that holds it. So, for example, I go up until so that's everything on the page that suggest the text. So that's the 1st 1 that contains the text. And then you can make like, the width. So most pages would have like a with of 50. But this has 100. So it's not letting me put this in because I didn't put percent so you can put something like that, right? Um, now, to be completely honest, I would prefer to actually put in a spacer just because you don't want to put in too much festive CSS because it might break the website. It's very unlikely. And I mean, you could just go back to custom CSS and remove the line that kind of ruined it. So it's not like a big rescue taking. There's really no risk. Actually, everything is undoable. So that's how you put custom CSS. Now, besides this, anything you put in here is global for the entire website, unless you target it using, like, blocks like this, right? So if I did block each one and then color so it automatically closes your tags as well, So color black would be just this page because this is the only page with this with a block with this I d. Whereas if I did each one call it black, I'll show you what that looks like. So if I go in the hosting, this is also going to be black. Okay, Now, let's say you don't want to target blocks or you don't have another block to target. What you could do if you only wanted this to be black is you can go into pages. Then you can click on just hosting the little gear icon here. Goto advanced, and then we'll go ahead and put in style. You have to include that because this is going straight into the header where it's custom. CSS automatically get style added to the top in the bottom. Then we'll put in each one color black. Let's save. So now you see it's black here. Where's It's not black here, but one thing you will notice is that while I was making that change Sorry, Wrong page hosting. And so while that. For example, if I undo this, you'll see it's still black in the background. You won't actually see any changes until you hit save. So that's the one downside to going through this way. So what I would even recommend is you go into designed custom CSS. Try any CSS you want, make sure it works and then copy and paste it into the specific paint. Okay, so that's how you guys would kind of use custom CSS on your website, and there's a little bit more advanced. That's why I'm gonna include that tutorial on W three schools for you. And in the next lecture, I'll actually show you how we can go ahead and use this to our advantage. Okay. All right. I'll see you guys in the next lecture.
33. Add Features: Adding Custom Fonts: Okay, so I showed you before how you can change the font of a specific text on your page. So you go to design style editor, and then we can go ahead and click on this and then go to Font and we can choose a frontier . Now, let's say you went through this last year and you don't like any of the fonts here. It does happen, even though there's quite a few here. And let's say you like fought. That's on a different website. There is a way for you to download a font and uploaded to square space, and I'll show you how in this lecture. So there are three main websites that I use for funds. I'll go ahead and include the link for those as additional resources for this lecture so you can go and click on those one of the ones I have listed D A fund. So let's go ahead and I'll show you how we can use for example, this this one right here behind script. First thing I would do is make sure Squarespace doesn't already have it, So I was typing behind script and there's nothing here, so we'll go ahead and download this. So just downloaded to the desktop. Okay? And I'm gonna extract it Perfect extracted to the desktop as well. Now, what you do is you go to custom CSS. So you go to design custom CSS and we scroll down towards his manage custom files. Let's go ahead and click on that ad image or funds, and then I will actually go to my desktop. I'll go behind script and upload the file so this could be in a variety of different four masters O T F T T f and WTF. I believe. So. We'll go ahead and click on that click on open. So now we have the frontier. Go ahead and go back here. So the first thing we have to do is set up the font so we can actually use it. So what we do is type in font face, okay? And now we're going to actually link the font file to it. So first we'll give it a name, so font family will call it. I believe it was called behind script, so make it behind, okay, and we'll go at SERC. So that's the source. And it's the U R L opening close actually put the semi colon as well than inside the bracket. You just put your cursor there, go to manage custom file and click on this and will automatically fill in the coat. Okay, so now that we have that, if we go to H one and change the font family two behind, we should see that it kicks in and it looks like this now, Right now, it's It looks kind of weird like that because there isn't enough space. So I can go to a letter spacing one e m. So that's a little bit too much. We could make it a 0.5 yem. Yeah, that one's a little bit better. So that's what it would look like now. I don't really like how that looks Not exactly what I had in mind, but again just join you how it is done. OK, now, the reason I think it looks like this is because it's all capital. So let's try making it not all caps about us. Yeah, that looks better. Okay, so obviously I wouldn't use this form for my website because this is just a demonstration since my website, I wanted to be a living more modern, I would use more like fonts. That is sort of like what it was before and more like these type of bonds without Sarah. So that's what I would use, Um, just showing you how it's added, though one more thing I want to mention is sometimes you'll have it changed like this other times. Even after you put in everything exactly like this, the front that's being used won't actually change now. There's a really easy fix for that. You just go to the U. R L and everything after Sorry, everything before static. So https, semi colon slash slash We would delete that. Okay, so when you delete that, um, just one second here there were so sorry everything before the slash. So you would delete https and then the semi colon and lead the slashes. So any time you use custom files on your website and you find that it doesn't work, just try turning off the slash slash Okay. The reason that it usually doesn't work is because it is being served over https and squares based by default. Didn't have that. So now that squarespace supports https, it's actually going to be working for us here, so even without deleting it, it'll work. Okay, so if you're not using SSL, make sure you delete that https semi colon before they starts working. Okay, so that's how you would add custom funds. So again, you can just go here. You can go through some of the fonts here. So for foreign look holiday ones So, for example, Christmas. So for Christmas, you just click here. And there's a very, very cool fonts here that you can use just to give your website a quick holiday look without too much work. So they can quickly change the headings to one of thes just for the holidays and then turn it off when you're done. Okay, so that is Custom Foot's.
34. Add Features: Creating an Accordion FAQ: Okay, so in this lecture, I'm going to show you how to create an accordion style F A. Q. So what that will look like when it's done is similar to this. So there's a question and you click it for the answer. Okay, so this code is coming from Silva Baucus, um dot com. So he's the one who came up with the coding, and he created it to make make it work with Mark down. So it's definitely something I recommend, especially if you're gonna be answering some questions that people have, which I will be. So let's go to the contact page, because this is where I'm going to add it. Okay, so I'll put the link to this in the actual extra resource is. But But I also have the actual coding. I put it together into a text document, and it had some instructions that you can follow and I'll show you what's done here. First thing we have to dio is we have to enable the J Query Library, so we'll go into settings and then advanced and then code injection. And then in the header, we're just gonna pay stay, So I already had it there. So then we'll go back, back, back, and we'll go back into designed next. Okay, so next up, we're going to be pasting this in the actual page that you want to have the f A Q. So I'm gonna have it on the contact page. So I'm going to go to contact page, click on the little gear that I'm gonna go to advanced and paste this in. Okay. And we'll hit. Save. And then finally, we have one more block of code, which is right down here. We're gonna copy this, and we're going to go into design custom CSS and put it in here. So it just leave some space, put it in there, okay? And then I'll go ahead and hit. Save. Go back, go back. So now we're ready to actually put this in. So what we do is we click on edit wherever we want to put it. I'm gonna click right here. What? I wanted at the top for now, and I'm gonna search for marked down. Okay, So this is it right here. Can enter that. So for mark down. What we do is you put too, um hashtag signs and then the question. So how much are your services? And then you press enter and then put the answer So each project is different, Okay? And then we put space base. And then the next question, um, I can't do you used the page, Used the form on this page. Okay, so we'll hit. Apply. So for now, it's still not showing up a drop down when you click so that for that to work, we have to refresh the page. So first I'll move this to the side. I believe like that all it save. So I go toe, for example, Blawg and then come back to the Contact us page. And now you can see put down neatly when, When you press on the question, the answer pops up and the sign changes from plus to minus. Okay, so that's using javascript. And then now let's say, for example, you have this code entered in properly and you like how it looks. But you don't want to use header to. So having to symbols is header to right. Let's anyone use header three, right? You'd put in three symbols here and you'd hit apply, and it's safe, so ahead of three looks a little bit different. It's ah smaller font size. So I'll show you both of them, actually one of each. So you can see So you see how this is a larger size and this is a smaller size. So if you want use header three, you put three. But before he starts working, you actually have to go into the into the code here into advanced. And everywhere you see that eight h two, you have to change to 83 h three. So each three there also here. There's one over here. I believe that's the last others one more and finally that one on the white save. So now it works for H three. You can also change this to work with H one. If you want the font to be really large, or you can go into the style editor So style ended here and it could scroll down to H one and you can change the font size here. But again, keep note that this does change the font size for your entire website. So if you want this to be hte to but a smaller font, your best bet would be to make it a H three. Okay, so that's how you would have an accordion style F a Q.
36. Add Features: Multiple Menus (Advanced): Okay, so I've had quite a few people ask me how to create different menus on Squarespace. So this is, for example, if you want to show like English, French and Spanish or different languages on your website and have different pages for each menu. This is how you do it. So, for example, I set it up for three different locations. This is a different clients website. I didn't need this functionality for my own. So I'm showing you on his. So if I go to Bellevue in shoreline so Bellevue would look like this shoreline would look like this. So you see how the navigation of missing some and also each page is actually different. Right now, I'm on the home page, and this is different than the home page for this location, right? So on the actual back. And what you would see if Bellevue Navigation Shoreline Seattle and not linked and main, which is automatically built in. So I'll show you how to do this. It is. I live with more complicated, but let's get going. Okay. So first thing, we go to settings and we go to advance developer mode and turned this on so soon as you turn this on, you'll see all of your connectivity details appear here. The good thing about developer mode is that it stops your template from being updated. So a mould breaker code in the future. So it'll always stay up. Okay, So in order to actually sign into your website so ftp in, I use when SCP you can use which everyone you want. Um, so let's go ahead. And so when I speak, SCP is actually free to use, so you feel afraid Google for it and download it. I'll also include a link. So this is the actual information. So you just entered in here? Make sure this is set to sftp because it is sftp. So I had entered already. So it's right here. Let's go ahead and sign it. You'll notice that sometimes it will sign you out and it'll say, Do you want to reconnect? Just make sure you hit reconnect so that your saves actually take place because there are some bugs where it just kicks you out randomly sometimes. So let me actually go back to this before I continue. Okay, Perfect. So when you're actually here, there's 22 things we have to change to files the template file and the hatter file. Okay, so the template file is what shows on the back end. So for you, not for the people who visit your website, but for you so that you can actually create the menu. So when you first sign in, you'll see what you will see is actually this, um actually just going, you'll see this. Okay, so you want to look for that main navigation Mean that and just right here, after the curly bracket and before the square bracket, you want to copy everything up until here. So everything within the little curls curb bracket anyone a copy and paste it as many times as you need. Okay, so I needed three locations, so I made three. I gave them titles, and also I gave them a name. Make sure the name doesn't have spaces because it is gonna be used at the I d. Okay, so once you have that done, I'll keep it open so you guys can see what I'm doing, and then we'll go to the header region. So there's three places we get to make changes here. Okay, so leave that open. So here I have three menus. The main navigation. I only have my cover page where people actually pick what language or what location. So I don't want to show that menu anywhere. Okay? I only want to show these three menus. That's why. Here, I'm only using those three. So when you first sign in, what you'll see here is squarespace. An allegation may now have. So what you want to do is copy that pasted three times and change the navigation I d. That's the only thing you have to change into whatever name you gave it. So Bellevue shoreline in Seattle. Okay, then you scroll down and then you have another Another one here. So again, the 1st 1 here, it will say, may navigation. You want copied this? You make sure you copy this. And don't just paste what you copied up here. Because now the template is main navigation, not mobile navigation. So you can you copy paste and give it the, um the navigation I d to match the name over here and you scroll down and there's one more just right here. So we're going again copy paste and changed the navigation I d two, whatever you want actually display. So the thing about this is, when you do this, it will actually show all three menus on every page, so I'll show you how weaken limit that's only shows the menu that you wanted to show on each page. So once you've done that, you just hit, Save on. You'll have a box coming down here telling you that it's saving. And once it's done, you can close this, terminate the session and then refresh this page and then you'll see all three menus to put pages in there. All you do is click it and drag it inside. Okay, One thing you should know is that again no two pages can have the same. You are also This is Home three. This is home to, and this is home one home one. So there's no way to have it. Is home home? Home? But I mean, that's a small, small thing to give up. You can even make the navigation. Maybe Bellevue home, Right? So it looks a little a little a little bit better on search engines, but that is up to you. So after that, what we do. Let me show you how it will look for you. Okay, so right away you'll see that all three men use air showing up. And if you actually go to the mobile view, you'll see that all three men use air showing up. This is pretty cool as well. You can kind of switch between the views up here, so to hide it, what we have to do, let me actually put it into a live website isn't affected. So if you go to advanced, what I'm doing is I'm going to may naff and the fourth child. So let me show you why I'm doing that. So you'll see that there's main on May. Navin. Me enough. There's three of them. So that's Bellevue, Shoreline and Seattle. Okay, the main nap isn't showing up because I didn't include that in my actual template file. Sorry. The header file are my only had those three. Because, remember, I don't want to show this on any page. So next what we have to do if we have on this page. Since this is the first actual you know, menu, I'm gonna hide the second in the 3rd 1 rate but the second. So, for example, the shoreline is my second riel menu. But in my list of menus, there's one to three. So this is actually my third menu. This my fourth menu. Okay, so what I have to do? So this is my second menu. So since I'm not showing the 1st 1 I don't need to hide the 1st 1 So what you do is you covered it in style tags. So it's only specific to this page. Anything you put in here is only specific to this page. So, for example, may not four child will hide the Seattle on the very 4th 1 Okay, so next we have to hide the 3rd 1 So shoreline, and then we do the same thing for mobile. Okay, So mobile navigations called mobile navigation to find that all I had to do was go here, right click here, inspect. And it is mobile navigation. OK, mobile navigation. So she's showing twice here, So let's see what I did. Actually, it might just need to be refreshed. We take a quick look. So third and fourth displaying one That is good. Still showing me just quickly checked something here that showing me? Which one is this? So you see how this one has home highlighted. So I'm on the home page. So this is a Bellevue menu. So let's click home here and see where it takes me. So it takes me to shore line. Okay, so the shoreline is not being hidden for some reason. So let's see if it's the same for this page. So it's happening for all pages. I'll have to take a quick look at why that is. Let's take a quick look, mobile navigation and child. So let me right click here. Inspect. So it shouldn't be showing that 2nd 1 pretty. This one is set to not displaying on. This is explained on this. The 3rd 1 the 2nd 1 So the 1st 1 was the right one. Yeah. So the 1st 1 is right. The 2nd 1 should be hidden, but it's not. So this is third. So I should have the 2nd 1 hidden. All right. Okay. So on mobile is a little bit different. The main navigation automatically doesn't show because we didn't put that in our template file. So what we have to do is actually where here is four and three. This would actually be three. And, uh, two for two on three. It's one behind. So go ahead and say that. Just make sure that's right. That's right. So now you want to copy that and paste it in all the pages? Okay, there we go. So pasted here. And then you'll see that that menu disappears. So now there's only two there. Sorry. One there. Now there's two here, so I'm gonna paste it here again. I won't go through all the pages, but paste it in and there we go. Sit back, Teoh. One menu and one menu here, and it's highlighted. So that means it is the right menu. So if one month f a ke want Bellevue on the Bellevue page, it should be highlighted the f A Q. Okay, so that's what you do. And then I actually set up a main navigate the main page, the cover page. This you absolutely need, um, so quick here. Or you can have something in your menu that says English, and it leads to the home page of the English website. So here's what it would look like. Okay, so that's how you get that done.
37. Add Features: Add Live Chat: Hey, guys. So I had quite a few of you asked how you would implement, like a live chat to your websites or something like this, eh? So I went ahead and I looked around and seems like this one might be one of the best ones to use its called talk dot t o. I'll include the link in the description. It's really cool, cause it's absolutely free. There's no ads. There's no like paint section to it. The way that they work is if you want to pay, you can, and they'll give you, like their own agents who'll handle your chats for you. And that's how they make their money. So there's no like pre members or anything like that. So all features you would expect from a pink premium chap, So I mean, it's really cool, I guess, up to use. So I'm just gonna quickly set it up so you can see how I'm going to do it, and you can kind of follow along. So first we have to sign up, so they're gonna take your email. I guess that's another way they can market to you. But I mean, I see the value in this. So I'm gonna go ahead and do this. Just make short password. I'm not sure how long it can take for that email to get there. Okay. I was going to say password, see if it's coming yet. Okay, here we go. So let's go ahead and confirm it will take us to the dashboard. Perfect. So we're gonna enter the site name anywhere else. So I'm gonna go to my squarespace website. I'll take this is the girl I just set this up was a quick demo to show you guys so I don't have a domain name. This is kind of the temporary one that squarespace gives for now. So I think that was Did you check? You can't skip the Wizard, but I'm not going to, cause there's only three steps. Anyways, I'm not going to invite anybody else, so Okay, we'll just leave that go next. So, to install the chap where, um, widget all you have to just put this coat on every page before the body. Okay, Easy enough. So copy that. Gone over to settings, advanced code, inject injection, and they will put it in Well, we could be I will have to put in the header because they said before the body and the footer comes usually after the body. Not always. So Let's go ahead and hit, save and fingers crossed. There we go. So let's chat her. Let's talk and then online. So let's see what it looks like. We're live and ready to start. We're live ready to chat with, you know, say something started live check and powered by talk T o. So that does show up. But that's that's okay. I mean, I don't mind that little branding right there. So there's likes with this. Break the conversation, get blood files, email yourself the transcript and in turn, the sound on or off. And I believe this is Papa chat. Yeah. So I should go back here. Perfect. So it does all the cool stuff that you need. You can close that part. Okay, so let's go ahead and see how we would actually chat with people. Um, I guess it would show you notifications on your desktop. Uh, I don't really want that. Let's go ahead and it done. So here's where your chats would come up. So let's see if it's actually working um, hello. So long as you're in here, you get get that little bringing sound. I guess that's why you might want the notifications on. So if you don't have this website open all the time, I came here, So Okay, so So that's a little Emily. So bear with me for a second band tag. I guess you have to somehow accept this, But see here, join so you can join us or anybody. So what's going and join? Can't believe that, Miss that all this time. So I guess that's why you want the desktop notification. So if, like, let's say somebody messages you and you don't have this website open, you can actually just get a little pop up down here in the bottom, right? No matter where you are. So you get a little pop up seeing somebody's trying to chat with you so you can have multiple people online at the same time. So, um, so here's what the guests that to get said hello. So I say, Hey, how and I helped. Let's see. Yeah, we get a little icon here, meaning those notification I have to help the gas in its joined the conversation. Perfect. So I'm trying myself right now, so it does seem to be working. So if you have, like, five people that their job is just ahead of the live chat, you can have them in here. And what? One chat is done, they can pick up the next chapter will see a list of everybody that's waiting to be spoken to here. So what, They're actually exit the child and then try? If I go back here, this chat is now ended. Well, what happened to my joy? Did it come back up? It does. Okay, that's odd. But I mean, that's fine. If you've got just how, tell them something, go back in in creating, take a copy. The transcript print at a note on, get people feel in their email address here and give them a different name here. So that's all perfect. Um, no. Let me just try to figure out how we would leave. If I want to leave the chat, there should be a way to cope. Said it. And yeah, OK, there we go. So once you're done, you just end. And then that clears them from here so you can wait for the next person and pop up. Yeah, really cool feature. Definitely suggest you use this if it's useful for your website. Yeah, thanks. So, you guys next time
38. Add Features: Adding Facebook Messenger: Hey, guys, Welcome to another squarespace tutorial. Today we're gonna be adding Facebook messenger to your Squarespace website. So if you've been contemplating adding a live chat to your website and you don't want to, you know, sign into another third party software just so you could talk to people or any website. Facebook Messenger's a lot easier because I'm sure most of us have Facebook installed on our phones anyways, so you can respond to people pretty much from anywhere. So when people come to your website, they'll see this Facebook icon. It'll be open by default. So Well, I'm signing is myself. But, um, it'll, you know, appears your page. So whatever your pages called on Facebook, and people can just talk, so continues the gas in and right here. So I just did a test, but, um, people could type, you know, all that kind of stuff is just like Facebook messenger. Um, so to get that started, the first thing we're gonna do is go to Facebook, and then you're gonna go to your page. So I'm on my own business page. But you a lot obviously see yours at the top, right? We're gonna click on settings. So once that's done loading on the left hand side Now we're gonna go down to advanced messaging. And if we scroll down where it says white listed domains, So right here, we're actually gonna put in our actual website. You are. L so for me, I would put, you know, athletic marketing dot com. But what I did was, um when you're on the back end like editing squarespace, you're going to see a u R L That's not your actually. Actually you Earl. So we have to add that in this Well, I mean, you don't have to. It's just if you don't, you won't see this icon while you're logged into the back end. So only people that are visiting your website will, um so it's a little bit harder to debug. So I actually like to add this one in there as well. So just copy this and take out the CONFIG part, so I'd be all of this. Um, it's OK if you have that slash it's not really important. So we copy that we pasted in here, so I already have it pasted right here. So without the config at the end, and then also my main you Errol's here and then you hit Save. And then once it's a safe successful, then on the left hand side, we're gonna go over to messaging. So once rear and messaging, we're going to scroll down and right here where it says add messenger to your website. We're going to click on get started. Now, here's the first thing that pops up. You could read through it. I'm just gonna hit next. Um, then you pick your default language. So you know, if your websites not in English, you can pick one of the ones that are available. If your language isn't available, then I would say pick whatever is the second most common that people speak when they come to upset. Because, um, until Facebook supports that, there's no way we can add more languages. Um, then your greeting. So right now, for example, on my website, if you pull it up, it says hi, how can we help you? Um, so it's the default, but you can click change and you can change this to whatever you want and then hit save, and we're gonna go to the next. So now this is custom color. So you see how on my website it's, um, the orange color to match my brand instead of this blue Facebook color. So that's where this has changed. So you would just click, you know, writing here, enter your hex values. So let's say you want it. Ah, black. So sorry that 000 So that's black. So if that's your brand color, you can put that in, and then we hit next. And then what we're gonna do is just make sure that your domain is listed here. It this should automatically pull everything from, ah, the other screen. We just did it on, um, the reason why we didn't add the you Earl here is it's kind of bugged right now. I don't know if it's going to be fixed, but whatever you add in here and hit safe, it doesn't get actually saved that. See, that's the reason we have to go to the theater. Vance messaging. Ah, step that we did before this. So just make sure your websites in here, um and this should automatically be checked so you don't have to do anything. They're all you have to do is where it says copy code to clipboard, just click on it and then assumes you click on it. It'll copy, and then you can actually hit, finish, um, and then done. So now we're gonna go to our squarespace website, so I'm just using, like, a default demo site. That's why it's showing like this. So we're gonna go on the left hand side, So you're gonna be at this menu going to click on settings, advanced code injection. And what we're gonna do is we're gonna you'll see something like this if you have code for from other projects, that's fine. Like if you have other widgets and stuff, that's fine. But we're actually gonna put the code and footer. Um, the reason for that is if we put it in Header, Um, this is gonna load before your website starts loading. And we don't want anything to slow down the website loading. Um, we'd rather the website load. And when the websites almost unloading and it gets to the footer, then the messenger can load. So we'll go ahead and put in the footer you hit. So again, this is where our color was. This is our page i d So you don't really have to look at this. It's just, um you know, it's just interesting to see if you want to change things. You can also change it here as well. So if your theme colors no longer that could be black, you could make it. You know, um, like, some sort of grey like like this. And then so logged in greeting is what people see if they're already logged into Facebook. And this is what people see if they're not already logged into Facebook when they click your messenger icon. Um, so you can change those as well. I'm just gonna leave it as it is. Um, well hit save. And we should see the color change tube. Yeah, the great color that I chose so high, How can we help you? And they continue to be gassing with logged in as, um and that's it. So you should see it just right there. Even if I go, you know, go to the website while not being logged in. So if I you know, I go to the website. All right. Let me just set up password. I'm just going to show you what the front end looks like just so you can see it. So if I make it password protected and then I go incognito Mozart. Squarespace doesn't know that I'm logged in and then I sign in. There you go. You should see pops of right here. So right now I'm not logged in. So ask people to log in with your Facebook account. But most people gather already locked in. It's just goods. This is private browsing. And there you have it. That's how you, um, ad ah, like Facebook Messenger to website.
39. Add Features: File Upload on Forms: So you have a squarespace website and you want to let people upload files to your contact form. But when you come to the form you click edit, you go to add foreign field. You looked through all of these options and you realize there isn't an option of let people upload files while I'm here to help. There is a way to get it done. It's, ah, system that was made by square websites, and I'm just gonna kind of reiterate so you can better understand how to get it attitude website. So the first thing we're gonna do is go to this website. Um, I'll leave the link for this down in the description, but the first thing you're gonna do is you're going to sign up. I already have any count, so I'm just gonna log in now. This is a free, free to use tool, but you can click, donate and give them, you know, some donations for the work they put into this. So the first thing we're gonna do on this website is we're gonna actually add our website so that we have permission to use this tool. So the site name you could put in anything you want. It doesn't matter. The site you where l is your domain name. So, for example, it has to have the https, Um, or just Http, if you don't have an SSL, okay, and then the squarespace site you, Earl, is what I like to call the ugly domain. So when you when you're logged into the back end of squarespace, that's whatever you see up here. Um, just copy everything before the config. So we're gonna come over here and we're gonna add this. So now you'll see that the website appears on the right. If you have another website or, you know, your designer and you want to add multiple websites, you can do that here as well, but I just have the one for now. So now, as soon as this isn't, it means we have permission to use it. So let's go back to our website here, and we do have to add a little bit of code. So it's just one lining. You can just copy and paste it. That will also be in the description below. So we go to settings. So that's right here. Settings then advanced. Then we're gonna go to code injection and then in the header, we're going to just paste this code. Um, and then we'll hit save again. This code will be in the description and it will go back, So that's actually all there is to it. So now if I click on edit on the same same page I was on before, same form. Now, if I click on add form field in the very top left, you'll see that there's an option for upload file. So if I click it, it does this upload files and it feels in a bunch of stuff that you don't have to worry about it just yet. Um, just know that it is working now so you can use it as it is. Um, but I'm gonna make it required. So let me just explain what this is. So the second field is what I'll talk about first, cause it's easier. So dodge a pack just means that people can upload dot jpeg files and dot J. Peg is sometimes spelled out with an E as well, so I'm gonna account for that as well. Dom, P and G. In case it's a PNG image if if it's a GIF image goes here and the dot txt file can also be uploaded. Um, so I'm gonna erase all of that just cause I only want people to be able to upload J pegs, for example. So let me cover both on what I'm doing here is dot jp e g comma space dot jp g comma space . I'll also include pdf's. Actually, it's a pdf. There we go. So it's just dot and then X file type comma. Next come next ball type. You don't need to calm. A few only gonna have one. And then now we'll talk about this. So file field, just tell us to feel that it's somewhere where people can upload files. So don't mess with that. Just leave that part alone. Max. Size is how big the file can be. So 5120 is five megabytes. So this isn't kill inmates of 5120 kilobytes, and the max file you can actually go up to is 10,000. Um, well, 10 megabytes a little bit more than this. Um, but 10,000 kilobytes is the max file sides you can ever achieve. That's just I believe that's so that their website doesn't get, you know, overrun while it's trying to be while trying to upload that many files. So, for example, if a lot of people are using it and somebody trying to upload like a one gigabyte file and also because sometimes the browser does time out, so just keep that in mind if you need anything more than 10,000 this solution won't work for you. Um, the word multiple here just lets people upload multiple files. So, you know, if they have three or four different files, they can upload it again. All of those have to come match up to 10,000. Um, still, that limit still applies. So then add text. Add your files is basically what the button is gonna be called. So at your files with underscore a space so we could change this to, for example, upload underscore your files here. So this can pretty much be whatever you want it to be. Make sure you use an underscore where they're supposed to be a space. I'm gonna make it required under storage. I'm just gonna make sure it's going to my email address, which is right, I'll hit, apply, and I'll hit. Save. So now I'm gonna put in, you know, test test, and then upload your files. I'm gonna click it. It will open up this. I'm gonna goto abstract. It's just around them image I downloaded. I'll even uploaded twice. There we go. So just so that you could see that, you know, supports multiple files, then you hit submit, and the former has been submitted. So if I go over to my email inbox, you'll see that I just got the foreman. Now, if I click it, it says somebody uploaded, You know, two files. I could see both of them here, um, named test test. So if I click the 1st 1 it will give me a download link, and I could download the file that somebody uploaded. So if it's a pdf, I can download it to my desktop and look at it. Um, I can also come back to this website where we first made her account. Also, just just to know, once you've made the account, you never have to come back here again. Unless you want to look at something in particular. For example, if I goto up loads. This is the website. Um, so Octagon mushroom is what I have here. So under that web site, people uploaded to files. Both came in on january 7th. Um, and this is name of the file. So the only thing it doesn't tell you here is who sent it in? Um, that's why I prefer to look at the email that I got instead. So yeah, this is just files. The other thing you can do is if you don't want the files here, you can also connect your Google drive, which is what I would do. So once you connect your Google drive, it'll actually upload all the files directly to your Google drive. So you don't have to worry about downloading every single file. It's already saved into, like a folder that you have. Um, And for that, you just click this button and signing with Google. And I have done that as well, and it does work very well. So that's basically it's any time people upload files here, you'll get it right here. And you'll also get an email about it, too. I prefer to look through the email again just so you can track all the fields. Also just Ah, one more thing. This isn't limited to just contact forms. You can use it on forms to root your website. So, for example, let's say you have a shop where somebody you know has to upload a product because you're gonna personalize the bottle with personalized ah, Christmas card, for example. You can actually click on the product, go to form and then create new form. And then you could, um, do you upload file here as well, so that how that works is when somebody's on the product and they click, Add to cart. This will pop ups upload your files and they have to upload file before they can add to cart so you can use it in that way, too. So just keep in mind. It's not limited to just contact forms itself. Also, let's say you're not signed into this account and you click on this. You are all right here. You will see this error message saying you can't access to follow because you're not locked in, so make sure if you get this email on your on your phone, for example, and you never logged into this website. Just go to this link again on your phone and then go ahead and sign in. And once you've signed in, if you go to that link again, it'll let you download the file this time. So if you get your on the computer that you don't use often, just make sure you are logging into this website and you should be able to access those files.
40. Add Features: Add a Reading Progress Bar: Hey, guys, Welcome back in today's tutorial, we're gonna be adding a reading Progress bar to the top of a block post. So as people scroll down, it fills up just so people can visually see how far along they are in the block post. I'm It's actually very easy, and the code will be linked in the description below. So the first thing we're gonna do is we're gonna come to the backend of the website. We're gonna go to pages and then find your block archives. So that's the one that has a lower case. A beside it. So we're gonna click on the gear icon here, and they were good advance and then page header code injection. So this is we're gonna paste the code. It's the first bit of the code anyways, again, the code is in the link in the description below, we're gonna paste it in here. Then we're gonna hit, save, and we're gonna go back to design. So instead of pages, we're going to design this time and then go to custom CSS and again, This code is also in the ah, in the block post. So we're gonna paste the code in here and actually, that's all there is to it. Um, so now if somebody goes to, for example, blawg, there's no there's no bar at the top. If they go to home page, there's no bar at the top. But if they go into Blawg and then click on a post, then the bar appears. Um, now here's how you can go about customizing it. So if if you remember the code that we added to custom CSS so again designed custom CSS, here's where you're gonna style it. So we don't have to edit any of the other code just to code that's in here. So the first thing you can change is right now the bar appears at the top. If you wanted at the bottom. Instead, we're just gonna change where it says top zero into bottom zero and then you'll see it's along the bottom here. Charges dismissed This it's easier to see. There you go so you could see it sits at the bottom. Now, um, the other thing you can do is go back top. The other thing you can do is you see have right now it's grain. The background. Let's say that's not your Brad Color or you just don't like Gray. Um, you can go in here and change it to, like, black, which is 000 So it's like this. You can change it toe white, but since I have white background, you will be able to see it Anyways, um, so, like this, you can put in, you know, hex values or RGB values, or just type in, you know, yellow. So that's how you changed that color. Now, to change the fill color orange, you're gonna come down here to where the Progress bar is, and you can change this to, let's say, for example, black. So then it fills up with black. Um, the other thing you might want to change is how big that bar is, so you might want it to be a little bit thicker. So we just come up here and for example, right now it's five picks that we could change it to maybe 10. If you do make a change there, just make sure you also changed this to 10. So it's in two places, so height. So that way, both the bar and the background match and the nurses girl little show like this. I've personally like five. Um, it might be a little bit hard to see for some people, so you might want to go, you know, 10 or 15 or something like that. Um, the other final thing that you might want to change is you might want this Bart appear, you know, all over the web site, not just on block posts. So for that, what you would do is you go back to pages, go into the gear icon here. Good advanced. Then Paige had her code injection. We're gonna take out this code, and then we're gonna go back. And then instead of putting it there, we're gonna go to settings, advanced code injection and the posted in the footer here, so posted in the footer. And then the other final thing we have to do is we have to go into design custom CSS and then take out this last bit. Because what that last bit does is that hides it on the block archive pages on this page. So if I take this out just that last little bit, it'll appear on this page as well. So that's if you want it, you know, on every single page. So as you can see, it's loading up on every single page, just about the top there, and that's it. So, again, um, all the code is gonna be in the link in the description below. Just so you guys and copy and paste it and have a great day. Guys, take care.
41. Add Features: Creating a Mega Menu: Hey, guys, welcome back to another squarespace tutorial. In today's tutorial, we're gonna be talking about creating a mega menu on squarespace. So right now I'm running the brine template. But this will work on any of the Brian family templates. Although you can modify the code slightly to work with any template. And I've tested with two or three so it does work. Um, so here's what it would look like. So when you hover, it'll look like this. And you can have multiple columns. You have two or one or four. Ah, however much you want. And you could reduce the spacing and customized pretty much exactly how you want. Um, so let's get started. Okay, So how this works is we're basically gonna build out regular menu first. So, for example, I have called a mega menu, but you can call it whatever you like. And then you're just gonna build it out how you wanted to appear on mobile because obviously the mega menu isn't gonna work on mobile just cause there isn't enough with on a mobile screen. So this is what is going to look like. So, at all your links that you want in here. You know, you can just gonna be like a regular menu, one mobile. So if somebody's for example here and they click whatever the menus called, all of it will be listed here. So that's just like, you know, normal squarespace or build it out how you want. And then the second thing we're going to do is we're gonna come down to the footer and where it says footed top locks. That's what I'm using. Um, and the code is gonna reflect that, too. But you can use footer, middle or footer bottom. And if you're, um, Template doesn't have different footer levels, then you will need to customize the code that I provide. I'm not a lot just enough that you can target it kind of better. And explain that maybe later on or in the comments if you guys have any questions, Um, And again, the code for this tutorial is also gonna be listed in the description as well. So what I did is I went to footer top blocks. So again, if you hover lower to middle and bottom edge, that's bottom right here. So we're gonna go to top and then click edit, and you gonna build us out exactly how you want. So, you know, I added heading three. Another heading three. I added, I just typed out, for example, home. So you could do, like, you know, if you have a block to, um maybe want ad block at the end. So instead of hitting like if you hit enter, it will give you two lines. So if I do, for example, blawg, if you don't want it to be two lines just hold down, shift and hit. Enter. And we're gonna link this to, you know, just a regular block. I guess so. Let's just do that. Will hit, Apply. Um, So let's say this is how I wanted to look. You know, I had it. A button. You could have four columns in here. You just, you know, click here, you get out of text block, drag it over to the left, and this will be called him one, for example. Um, I wouldn't really go over for just cause everything's gonna get, you know, a little bit cramped, so keep it at four. If possible. I'm gonna keep it at three. Um, and the other thing is when you upload an image here, just don't upload a large image. What I did is I actually resize this image to be, I believe, 100 pixels in height so you could go a little bit bigger if you want. But Squarespace won't like, make it the image bigger than what you have it. So I kept it out of hundreds, so it's always gonna appear 100 at the biggest. Um, so since I haven't already built out, I don't have too much to do now. Now I just have to add in the code. So what I'm gonna do is I'm gonna Adam the code, and then I'll explain it so you can change. It is needed. So for the JavaScript, we're gonna go over to settings, advanced code injection, and then I'm just gonna copy the code. I have it under different screen here, but again, this will be linked in the description. I mean it, paste it. What? Ah, this coat does is it moves this up to the top, But again, it's gonna look pretty ugly until we actually style it. So, yeah, As you can see, it looks very ugly. So let's go back and then back again. We're gonna go to design custom CSS. And I'm gonna copy this code, which again, you'll it'll be in the description hit save. So once you do that, it looks like this. Okay, Now, if yours isn't working, don't worry. You have to modify the code. So what we'll do is first things first, we're gonna go to the first code that we added. So settings, advanced code injection. I'm gonna take a look at this. So the first line all we're doing is, um, adding the J query files so we can actually use J query on the website and they were going to actually use a query right here. So that's why that is Link is there. Um, next, What it's gonna do is when the websites loaded, it's going to look for Header. We'll all of this basically and it's gonna look for the fourth item, which is a folder. So we're gonna look for the fourth and then we're gonna penned footer blocks top. So what that does is it takes footer blocks top and adds it into the folder that we already had here. So the only thing you might have to change. Is this number four? Unless you're in a different template than you might have to change. Ah, few of these classes, depending on what class you're template uses. Um, for everybody else on the Brian family, you just have to change this number. For me, the mega menu is the fourth item. So 1234 So I have four in here. And just to show you what would happen if you had as 1/3 item, for example, So let's say I had mega menu and then the blawg, So mega menu goes here. If I try it now, it just shows me my default menu. The one that I made over here. So, of course, isn't our pages. So what we have to do is we have to go back in the settings advanced code injection, and then here it's no longer the fourth item. It's not the third item. So we're gonna just change this to three. And I'm just gonna leave it at three. Because that way I can show you the rest of the code. So now you'll see it looks ugly, but it is working. So that means we have to modify the CSS because that has to do with styling. So now we're gonna go to design custom CSS and then right here if you notice it says four again. But we did move it to the third spot. So on the type in three instead. And then also over here, where it says ah and child for changing three and then here and child for changed three. And that should be it. And there we go. So it's in the third spot now. So now to style this let me explain how this code works now. So I'm going to right click on menu menu and I'm just gonna make it so that always stays there Just so you can see the changes without me having a hover Some is gonna go too right here. Where says header now Vitamin a suspend I'm gonna click on hover Oh, and to get here you actually just right click on mega menu and click on Inspect And then when it comes up, you just go up to this band right here and you'll see what I click on span. It highlights up at the top here in green, blue and orange someone it However here then go to hover and I'm gonna turn on hover So that basically makes it think that I'm hovering over it even when I'm not. And when I refreshed the page, this this would happen anymore. So it's just it's just a testing mechanism. So now what I'm gonna do is so for with so you see how the mind right now goes almost full with, but there's some space on the sides, so that's because I have it set to 90% of the wits. So 90% of the screen size so I could set it 200 if I want, um, I could even set it to, you know, smaller. Let's say I only want 60%. I could do that. So 60% now, the other thing you have to do is if you want to move it, you know, left or right. That's right here. So right now, I had it at left of five because I had 90. So I wanted five on the left, five on the rate. So if I do 60 I'd probably want 20 on the left and 20 on the right, so it adds up to 100 so 20 on the left and that would center it. Now you'll see it's kind of off because mega menus over here, this would work if you're mega menu navigations at the center. But since his since ours is on the right hand side here, we're actually going to click on left, and we're gonna move it a little bit more to the right. So maybe you will do 40. So it goes to the right of the screen. So you do that, um, you could even go a little bit less just so there is some space on the side, so 35. So that's 35% of space over here. Then we have 60% of this than another five over here and then top 60 pixels. So that's let's say you have a really big font size and this is kind of running over top, So let me show you what it looks like. So top 60. Let's say I had at zero. So this is what it would by default look like, So we want to move it down just so it's sitting just below our our menu option. So Let's go top 30. Okay, We have to go. A little bit more would have before 60. I guess the sixties a good, good size. We could go Maybe 50 to too low a must try. 65? Yes. 65 also works. Um, so let's do 65. I'm just so there's some space over here. So that's what this first bit of code does. It's basically just positioning this entire block. So we have, You know, we're fixing it to the top of the screen the width of the blocks. Um, how much space there is above it? So 65 pixels Don't worry about that index. That's just used to hide, um, the menu. So that only appears when you hover. I'm so native to basically puts it behind. You know, this green and this white so that nobody can see it. And then what we're gonna do is come down here. So what this does is if somebody clicks are sorry, not even click. So if somebody hovers so hover on the word mega menu, which is the third item, then we're going to take the set index and make it for so before it was negative two. So was behind everything. Now we're making it four. So it's in front of everything. So when somebody hovers here, it brings this to the front. And then what disco does is you know how by default we had, um, our regular menu, which was I think we had, like, our courses and home or something in there that we made for mobile. So this right here, Megan menu. So courses in our pages? Yes. So that menu, we're basically just hiding that, because, I mean, we don't want to show. We just want your mega menu. Um, then the final pit is, um, getting rid of the border at the bottom. So you see how if I owned Sorry, this is only sticking because I have it. I have this set to hover so on a footer. If I actually go to, for example, middle and I put in text and I make it a link. What will happen by default is it'll get underlined, right, and I don't want it to be underlined, especially when we have up in the mega menu. And the other thing I'm doing is you see how it's like, very cramped up. I want to space it out more. That's why I'm changing the line night. So line height of two instead of, um it was probably one or something before. So if you want even more space, let me just stick this again. So if you want even more space, you do like 2.5 and you'll see the spacing between these grow. You go, you know, three. So you can play around with that. Find the number that works for you. Um, and this just removed that bottom border that it had before, which is the other line. Um, then the final thing you probably want to change is the color. So right now I have it set is gray. Um, that you actually just go to site styles. So design and then site styles running a type in folder, so folder color. We're gonna have it black. If you want to change the color of the text, you have to go to footer content. And that links and you can change it to like white. And then on mobile. Sorry. On tablet again. It looks like this. So this is because we have the 60% with but you might want to increase it. You'll have to use a media query if you wanted to be skinny on desktop and then big on mobile. So let's go over on Tablet Terry. So let's go. Let's cover this. And so where I had 60% with, I might want to make it, for example 70. And then I also have to move it left because now that 70 it's probably about 15 to the left . Um, yep. We can even go to E. T. There we go. Just so that's at the top. So 80 plus five on the side and 15 on the left, maybe a pull It left a little bit more so 10 on the left. And then now it's kind of like centered. So 80 plus 10 on the left hand on the rights 100. So it's exactly centred, Um, and on desktop it looks like this. And then if I unhurried, it'll go away, and I will just take a quick look at what it looks like on mobile. So on mobile, it should go back to yeah, Megan menu, and then it's just your regular menu. That's just again, because there's no room for any mega men used on mobile. So make sure you build out that initial navigation properly. So again, that's in pages. So here, just make sure this is built up properly. So on mobile, they you know they don't have a broken experience. They can still access all the pages. And the final thing is, if you ever want to make changes to that menu, um, what you have to do is you have to go to settings, advanced code injection and take this out. You can leave the other parts in. The other thing you can do is just commented out, which is like this. So it's, um, less than than exclamation mark, hyphen, hyphen and then hyphen, hyphen greater than at the bottom. And that comments that also doesn't do anything. And then that way you have the foot at the bottom again. Then you just click edit, make the changes you want. So let's say, for example, I don't want this image anymore. Will it save that? I'll just uncommon this out again. So now it's gonna execute again, so the code will work. So now if I go to the very top there you go, the image is gone and yeah, that's how you make making menu on squarespace Guys, have a great day.
Vigasan Gunasegaran, Squarespace Website Design Made Easy
