Create a Next Level SquareSpace Site: Full Customization & Design Tips | Kara Ferreira | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create a Next Level SquareSpace Site: Full Customization & Design Tips

teacher avatar Kara Ferreira, Websites for Creatives & Coaches

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

15 Lessons (55m)
    • 1. Introduction

    • 2. Important CSS Code

    • 3. How to Install Rally

    • 4. Site Title, Tagline, Logo, Fonts

    • 5. Styling Header and Creating Pages

    • 6. Standard Hero Image

    • 7. Custom Hero Image

    • 8. Adding sections

    • 9. Adding Layers of Design

    • 10. Different backgrounds

    • 11. Other Section Styling Ideas

    • 12. Creating Stylish Buttons

    • 13. Styling Footer & Newsletter Block

    • 14. Instagram Footer

    • 15. Conclusion

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This class will teach you how to create a next-level SquareSpace website with graphic design tools and CSS code (provided). If you have a pre-existing SquareSpace website on a Brine family template, this tutorial will help you take your SquareSpace website to the next level. If you are just starting out, I'll show you how to get to the best SquareSpace template (not easy to find!) and how to make changes that will give you the biggest custom impact.

Please note this tutorial is for 7.0, not SquareSpace 7.1. SquareSpace will continue to maintain 7.0, which is more flexible than 7.1 - so it's totally OK to start a new site in version 7.0! If you would like to build a 7.1 website and take advantage of pre-built layouts, I have a course for that here.

Included in this course:

  • creating special backgrounds
  • adding custom fonts
  • graphic design tips and ideas to make your website pop
  • customizing your newsletter form (and the exact code needed)
  • creating a full width Instagram feed in the footer of your site (and the exact code needed)
  • & more!

Meet Your Teacher

Teacher Profile Image

Kara Ferreira

Websites for Creatives & Coaches


I’m Kara - owner of Kara +Co Creative (, a website design shop for solopreneurs and creatives. I’m passionate about enabling entrepreneurs to take control of their own websites. I’ve been designing websites since I needed to make one for my health coaching business five years ago - and since then I’ve built over 100 websites on both WordPress and SquareSpace. As a self-taught designer & developer, I know what it’s like to feel stuck and unable to create the website you envision for your business. In my classes, I’ll give you all the tools you need to change that!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hi, My name is Karen and I'm the owner of Willing Wonderful. It was just an online design shop primarily for women. Well, let's entrepreneurs, although I do work with creatives and consultants of all kinds and today want to focus on how you can make your own squarespace website pop because, well, I do make websites. Not everyone wants to work with me one on one everyone can afford to. And some people already have a decent website up, and they just want to sort of improve on their owns. That's what I'm gonna help you do here. This will be working with the Brian Family Template rally. That's one that I use for the base of most of my websites, and I'll show you a few of those examples in a minute. But this course will really help you. Bring some more pop to your website will get into doing different backgrounds. Different graphic element layers will do great backgrounds. I'll show you how to add backgrounds to the footer. Even we'll talk about styling your newsletter, opt in, adding sort of graphic opponents, images, all sorts of things that I do to give my squarespace websites that little bit of extra possess and you had to do it yourself. And I'll even provide a code so that you can do it. Um, and I'm just gonna sort of take you over my shoulder right now and show you some websites. So two examples These are both made with the same template. Believe it or not, you'll see that look very different. That's what I customize them a lot. Um, so when you go through these examples or any other squarespace rally template example, you'll see there's a lot of flexibility. These air both different. But you can see they have backgrounds. Two sections that the newsletter opt ins are a little bit styled. That's with code we all share with you. This is a greedy int background here. There's lots of options, and I do go into the full with instagram footer. So these are all things that will get into use that you can really take your scores based website to the next level. So if you're ready to go on that journey with me, let's go right ahead 2. Important CSS Code: But before we jump in, I just wanted to show you a key resource for this course. If you go too well, wonderful dot com slash rally hyphen CSS hyphen code. We'll get to this page. The password is tutorial. Rally a lower case and this will bring you right here. Where all of these Yes s code you'll need to create some of the changes um, suggested in the course are so if you scroll down what you'll do as you go is just copy and directly paste whatever is beneath the header where you see Culler coats like this just not going to change those to your colors. If you want to, you can play around. See this to the borders in a form field in this one. I don't want any of them you can play around with, actually, Adam and back in, that's up to you. But this is the basic code that you will use to make some of the changes that are outlined in the course want to make sure that you saw that. Um, if you have a current squarespace site, you can play with this code on your current elements. If you're starting from scratch. It will be easier to sue poppies in and go from there. All right, so we'll jump into the lessons right now. 3. How to Install Rally: All right. So I'm gonna show you how to create a new site and use a Brian family template in this case will be focusing on rally, since that's one of my favorites. So I need to do is when you log into your account or when you start, your account will be creating a site. And these are 7.1 designs, so we need to get down to 7.0 designs. See, these templates are on the latest version of Squarespace looking for templates from an earlier version. So here we go, here and here. We can type in rally, start with rally. Okay, so here we are now, I typically don't use to much of the actual devil content, but it's Facebook medication for my brother. Um, so don't use demo contact too much, but I do like about rally and the Brian family is this ability to do the index pages and to create backgrounds. So now that we got rally set up, I'll be back and show you how to, um, silent so that it looks great and like your own custom. What site 4. Site Title, Tagline, Logo, Fonts: do some basic housekeeping. What I'll be doing here is going Teoh, see settings speaking. Sure this is all Everything's in here. All right, so pages, so a peaches design logo entitle. So here, this website I'm doing for a thermal water. My line is think drink become. And here, even at your logo, right in my loco, Even if you have a logo. You do still wanna put your site title here because that's gonna show up on Google. All right. Someone had to save. Well, see, it's very small. That often happened so we could go design site styles. And here we're gonna click on this and logo wits say 1 50 This is a civil trial and errors . I try it with yours. Still a little too small to 200. All right, I like how that works. Alright. So back to show. All. So now, other things that you might want to do at the onset is play with your funds. Um, thes air. The funds that are set up already. We have their post title funds. We have heading funds. It is a much body fund on this page. So here a good thing to do if you do a set of funds first is to click out of the site styles. Come here. Make a text box. Se heading one, heading two heading three. This'll is a pair graph of body text. All right, so this is obviously the body text. But here, heading three, this is just against the Marlins. It's interesting. Oh, no, that has changed it. All right, so now we can see them all, so go back to design safe styles. And here Yeah, I see is click on each of, um so heading text heading one. I actually don't mind that. Heading three. I'm going to make a bit bigger body text. I want to fit a serif fund. So we're gonna go ahead and find a stand, Sarah fund taking one of the grotesques. So I like that, um, and three. And actually going to try to find a Sarah Funt Bookman. I'm gonna change the letter spacing a little bit too. Okay. Heading one. I'm gonna make it that same news. It grotesque actually should show, but no, it's not okay, you grotesque. I mean, the weight a little bit less perfect and heading to I'm gonna upload a custom fund. So show you how to do that. We're gonna go to our custom, CSS. And I'm gonna find the font from my client. It's going to be this foamy hand script, something to download it. My refresh, my downloads and that Here extract. I'm gonna change it to my desktop. Okay, back to the website. So here, missiles out of the way, we're going to upload, cause I'm files. I've been just or funds good desktop. All right, Now we have the URL for the front. So I'm gonna go to my friend here, and she had press provided all the code. I mean, I even include this link to her site, but here, we're gonna grab this and put that into our find a row and run a call. It suo me. And then she also has the code for putting. You know where it's going to show up on your site. That's down here. So you have It's too fun. Family And then yeah, so that we get rid of this. I didn't see that. We go and you have other sites. So styles quick got heading to and I can still adjust the font size here, and I'm gonna say none. And I'm gonna say 24 36 trailing there. Uh, 30. All right, so now we've done our site title Tagline The logo in our funds. 5. Styling Header and Creating Pages: So at this point, I like to set up my menu and my cages. If you did my d i y once a week and guide, then you know that I always recommend having your copy, and then you're there for your pages outlined before you get started. So you should know what pages you need. Um, in this case, um, I'm actually just doing a landing page, so I'm gonna need one page, but we're gonna do is for the pages. And these are set up as links, but we don't need them, so we'll go ahead and elite delete Italy delete. Let's look at Subscribe. If you'd like to keep that you are welcome, Teoh. If not which I don't need it. I'm going to delete it. If you want to keep it, maybe for later, you can just drag it down and put it under. Not late. All right, so then look, exclusives do I need that? It was a folder. So the meet ups actually do kind of like that page set up. So, in case I want that for later, I'm again going to move it down to not linked and a magazine. I don't need that Someone believe that. Delete this. Okay, so then here's a look at these pages. Do you want to use use as templates? It's pretty simple. So I'm gonna say no, I don't need it. Contact. I don't dislike that. So I'm actually gonna keep that and to make it live with settings. So you saw that demo went away. So that's going to be live. I thank you. That's always a decent format to keep, So I'm actually going to go ahead and drag that down here. All right, So now we have nothing on the menu, So you go ahead and decide if your pages are going to be relatively simple. Then you can just create pages. For instance, he'll start up here and you'll create your page, and this page will be about. However, if your page will have more than one section on it, your about page or services page. If they'll have more than one section that instead of creating a page up here, what you're going to do is create index like this. And the difference between that is so here's an index. And aside from this thing that I did to do the funds has many different sections and war differentiation between each section. We have all these different layers of backgrounds. If you want that on your page, you needed index. If you want have a simple page like this, then you just do a page. So you see, the difference here is I have different things, but I have no different backgrounds. So if you want your second just to be divided by backgrounds, you want to do the index. If not, you can do a page. So here we go. I'm gonna go ahead and delete this because I don't need it. If you need it, you can keep it. Instead, we have our index. So if you have multiple pages, what you'll do instead is you'll do an index come down here, index about index services myself out of the way again. So that's how you'll get your index pages started. Move myself all the way to the corner. Over here. There you go. Okay, so I don't need those again, so I'm gonna delete them, but you keep them if you're going to be building them out instead. Free to them. This is my home index and I'm gonna name afirma water for S e o purposes, but will know that this is our home page. And then So if you have all your different indexes for each one to put him in a menu up here, you're going to do a link. This is home, and here we're gonna go to page and here you'll find it in the thing. So for you, if you have your about your services, you'll do this for each index. So then you'll end up having your navigation menu up here. You'll edit it down here, so I'll show you how to do it for one page, and then you'll go ahead and repeat this process for as many pages as you need to have. Like I said, for this one, I really only have a landing page. So we have our index and all of our sections. No, for this one, I want to create a stylized header up for the top. And you could do this however you want, you can just create an image, a simple image or if you want to create a custom image, stay tuned for the next section. 6. Standard Hero Image: Okay, So most websites these days tend tohave a hero image at the top. So if you want a simple hero image, all I need to do is click at your top and we should rename this. You want to make sure all of these make sense because I'm Google. They're going to show up as the page title. So here, we're going to do just welcome. It's up to you. Anyone shoes and then here. If you just want a plane image at the top, you can go download an image like everyone he used a zone example. I'll pick this one and you'll upload it in the section settings under media. So now you'll see. But there is this. So we click on the section, hover here at it, we can go ahead. You're not gonna want this up there. Most likely so going to do here is a lot of times a good place to put this with the tagline . So for this, it's, I think, drink. You come. And I want that to be center. All right. If I want more space to be involved, I'm gonna put a space or here and a space underneath save. All right, so that could be my header, if again you want it. So say you want this text to be to the right or did it the left or to the right. You can do that if you don't want it to be. Although a flush this side, you can create another spacer and drag it here. Then you control exactly where on the page. It ends up to see what? Here. And now that you see it, this Texas turning weight because it's over image if you want to be a different color on the image. Good design. Six sales again. Click on it. Here is the overlay color and even change it. Just remember that this overly color is gonna be the same over all images. All right, so this is for a standard hero image. Next, I'll show you what to do if you want to create something a little bit special. Like a custom hero image 7. Custom Hero Image: Okay. So I should do how to do a standard hair and much like this, because my client requested something a little bit fun like this. I'm gonna create a custom hero image for the top, and I do doesn't can va. So what can Va? I'm gonna create a custom design. And I want this to be a full with present, like a full with over the website. So I'm gonna do 10. 80 and height square, do 8 50 Create his eyes. All right, so here, I'm going to myself a little bit. First thing to do a quick scan, see if there's anything I no. Why is this But upload some of upload images. So these are custom graphics the clients provided you might have some of these made for yourself. So I want that I want this. And then she had a tagline I want to find also. Okay, so I need to find the tagline that I need. So this is the one I need to download. I did have a I'm gonna upload an image of what? I'm gonna go see if they have an image over the bottles. Whatever it does. It's so I'm gonna see about. Here we go. Says this is a little bit of the design process, but you'll see the idea, and you can create a collage of your own if you want. Okay. Said I'm gonna go back to brand ass. It's secondary graphics. I want just a one of little circles on its own. This is actually I don't know that. All right, so I need to upload those blast to I'm going to steal this just cause I want this guy, I'm gonna delete that. Turn this guy black, not lead this, but don't believe all of that. Okay, Now back makeup loads. I need, like, much of the water backward, I think. Drink. Come, Rick Company, This guy. So those Texas in the way. Okay, but, I mean, the thermal water. PNG transparent background. All right, so we go ahead and the same way we did before going to go to my pages, go to the section here for to be a balloon. So now, because there's text on it. I don't need this so you can see that this image is a little bit too big. I'm gonna do first is just I wish there is the transparent background on the water. But for now, I'm just gonna go here resize, and it really depends on your design. You might not. Each other's resize it. I need to spend a bit more complex. So what all going to do here is a baby 5 50 Okay, but this becomes a little bit of trial and error, so just keep on playing with it. I'm gonna do the transparent background this time because of the way that that made the water look because that wasn't a P and G graphic. So you come back here. Oh, that's a little bit better. Don't keep playing with it now because that's not the best use of your time. Why is that still second? There we go. That's better. You can see there's an overlay on this. It's differentiating it from the top. So what I'm gonna do here is go back to design ST Stiles, and I'm gonna do no overlay. So did you that something well clear or making completely transparent? All right. What? It sells, try and also enable Parallax. It's very that owner. So that does make it a little bit better. I also make this a little bit less tall. So the horse, the vertical spacing, the pattern here, reduce that and the background. I'm going to make completely wait excl overweight is by deaths. All right, so save that. So I solved to play with this header image. But we'll save that, um, idea. So you know how to create it in canvas and how you can sort of resize it and tinker with it , okay? 8. Adding sections: Okay, So since I last left you, I cleaned up my hero in it, and hopefully you're happy now, whatever you have at the top of your home page, I also went ahead and deleted the other sections of my home index page. If you like the, um, sort of the formatting of those sections, you don't have to go ahead and delete them. I just want to start from a blank canvas. Typically, after you have your home page hero with your tagline, you'll have another section that will have some text to help back up, sort of your mission or describe your service. I wanted another background in the sections you'll see create a split, um, background here. And I did that again in Can va just by creating a white background and then adding this image over the bottom. You can also add a block, um, like a block like this, and stretch it out and make a color. So it's not a colored on an image if you want to have ah background, but you don't need one. But here, Yes, I'm gonna go ahead and put into about coffee. I'm gonna grab some here and hover and edit. Add text. There should already be text in there. You don't have text. You have a text block energy. This, um this would call three, but I So we're seeing the issue here is that there's a background starting to make some of those over leg text colors darker. Um, I'm gonna make that two again. I don't want it italicized, and I want all of it centered. All right, so you'll see the headings aren't showing because of the issue with overlay color. So we're gonna go ahead and go again to cite styles. Look at this, and I'm gonna give you a bit of a different color. You know what? Her color guide? You might have color guidelines and codes. You might not, but I'm not just adding some color here by doing Cuffy met Come into here. Overly color is going to be okay. And then this. L've ahead and keep black. Same. Now there is a section perfect if you want. If you did go with a divided background and you want more of the divider to show, all you need to do is go to pages again, go down to that section the media and drag this guy all the way down. All right? And we'll see that dragged it down too much, because now it's only the background media save process. Sorry of the recording. Software slows things down sometimes. There you go. You'll see this color is actually not showing up really well over that. So I'm gonna go grab another color and you'll see a lot of Web site design is just trial and there and go back to design site styles, click on this guy and then try shouldn't below it better. All right, so that's that section as you go. It depends on how many sections you need. Perhaps next you need a about two sections to go ahead and that this could be about the founder. Oh, right. Um, a fun thing to do if you are doing sections is to go ahead and flip that. So now move this guy to the top up here, And then they let it that way. I missed a D here, writes a media so as the next one. This is especially fun to do. If you are using a solid color black, it might look a little bit weird with the water here, we'll have to see actually flows previously, so we're gonna keep it. Okay, So if you're gonna do about the founder section one of the things I like to do best is to use an image block. So you're gonna have an image of yourself. And we actually don't need this for the website that I'm doing. This is just an example for you. I'm gonna grab a picture of a random person. There's a simple slash image. Okay, sweet freaked out load. Oh, and then to go into a card or a collage for an overlap. So we're gonna do an overlap for this media card. Well, okay, so see, it's really big to make it smaller. What you need to do is Abbas Facer teach side of it. No, they don't do that. So click on this and move this line this way, and then another spacer. Move it to the other side. You will see this black bar indicated on the side of that content and make it like that. Um, a little bit smaller. Even that And like and like, let's try to make sure they're even as best as you can. Looks good. All right, so here, what I like to do a lot is do high. I'm Stacy, and then you put in your bio bio bio bio text so we'll see. That looks very small text there. Okay, But I think you can dio then is go to your site styles again and you click on this entire thing to make sure that the entire thing is outlined. And here now you can change that text. So I like to disable it. Dynamic fun sizing. He tends to change things a bit too much for May. Now, you'll see that this Texas better. This is a big big. So then you have the title fly. You can change what it is. Make it lower. You can shoot a title flat color and Michael heading to get one of those like that. Well, there you have it. Um, if you don't like this much overlap, you can make it a little less. I could hear about section. So typically, especially for service based professionals. I work with a lot of health coaches and sort of wellness consultants. That's a typical flow. Sort of the about what you're offering who you are, and then you'll get into your services more specifically below on the home page. But this gives you a good idea of the flow of how you're adding sections, added backgrounds, not added backgrounds and adding more elements. 9. Adding Layers of Design: So as you quit your sections, I just want to share how you can add more sort of design and depth twitch section. So, for instance, you can see, um, this sort of about the founder section, who I sort of adapted that for the purpose of this website for who is the water for? But you can see I have some extra elements here. This is all a matter of it was a part of your design and your brand. But she has this cool little sort of meditation stone. So you can create that background very simply, just by plopping it in, we'll see. That's right here when you upload that to that section background. So that's in the background here. And then for this it is her. Any picture, even a picture of yourself. You can add extra detail just by styling photos. So if you look out there, if you look here, I just sort of added this spring here, and then I added that into the photo section. When you come into this page, you will see if you're here. It's right here. So those are just always you can add more layers of design into your website beyond what Squarespace is offering you by creating graphic assets in a simple program like Can Va. 10. Different backgrounds: Okay, So you saw on the say I was just designing how to use different graphic backgrounds and assets. I want to give you some more ideas. So on this website, you can see I did the same thing, adding a background to a section. But I split the background, um, left to right instead of the top and bottom. I added this bar and canvassed the sight of this image. I'm same thing. So down here, the graphic background split left to right. And I have a bar so you can do those sorts of things. And can I just give you more ideas? Other things you can do symbols. This is actually a Microsoft word symbol I just copied and pasted it in and then put it into the header fund so you can use symbols from word when you need to. So those are just some more ideas to get you thinking about what you can do to design your own website and make it look like you. But you see, here there's different backgrounds. This year is actually I am great hit background. I did with code. So I'll provide that code to you if you want to ingredient background. But these are other things you can do with the rally theme. 11. Other Section Styling Ideas: All right. So you mentioned the Grady in background is an option here. So what you can do for this? It's all with code. I will provide the code for you. Wanna download those? Had to customize it. This is the code here. So you need is the section slug. That's this part with the hash tag and this code. And these are the color code. So that's the things you'll need Are the plug er sorry. The section code and then the color codes. So to get the section code, what you need to do is go to, um, pages, find the section. I think it's this one. Make sure the right section, and then you're gonna get this little slug here and put a hash tag in front of it. So you'll need that the New York custom. CSS. So you would put that in there. Here's another area you put in the slug and then you would put in your two color codes. So that's how you create a radiant background. You can also add extra elements you'll see here. This is created with code to create the highlighter background. Second, provide this code as well as options you'll see on the other website that I did, um that there is also a coded section on that. So this here signifies you want the header one that the text color will be black and then the background color will be white. And this is the text in here, so I can provide that code as well on a separate sheet. 12. Creating Stylish Buttons: other thing that you'll probably want to do is make stylish service offerings about something that you want to do on your site. One easy way to do that is through this image component is to use an image behind sort of your button, and this is created with an image section so you can see she's already has it divided. If you don't have it, divide already. The easiest thing to do is to use pacers. You'll bring them one across from the other. If you have three sections, will do this, and you can play with them to make them. Even now, they're all even so trying to do is you're going to hit image, a blood, an image find a good one is what's fine and design collage. All right, so test test. No, she has buttons. These don't again go to image design image link. You get a button text test. Fine. And then, if you're going to content on your website, the best introduced, but a page and search for it apply. All right, you'll see in a smaller screen. It's gonna look like this. So that's why, in her case, it's better to just do to across. And if you had four, for instance, you could do a robot underneath. Um, but on a bigger screen. So it is gonna be on the same like that. Now, if you go ahead and do this, it probably don't look like this from the get go on. Mexico's going to change something. The site styles, design sites, styles click on one of these guys. All right, so what's sort of making all of this formatting is here. If we increase the card background, that's what make it look much different, right? So you come in here and play with all of these things until it looks right to you. Total separation. That's just the separation of the title here and that we don't worry about that. The content offset content Whip in the image with, um, it made this smaller, for instance, you know, this is different, so you just keep on playing with it until you get the right ratio on the look that you want and then you'll have interesting sort of eye catching buttons for your services. 13. Styling Footer & Newsletter Block: So one of the last things that most people want to have on their website is to have these email opt ins. You can see this is created in a index page section, and then there's also one of the footer and sign with flutter becomes another important thing And see this one has a background image. So you know how to add background images to sections so you'll see on her website. If your pages actually we'll pause for a second. You'll see this is a great example of she has her hero image shows our tagline over her hero image, has some explaining text here. She put in her opt in right in the middle s Oh, that is right here and you'll see if you look into it. She has the background image there. And while she did here waas to add in the newsletter in bed and that's here. So she has that in there. And then for the footer you'll see this is style with an image so basically so I'm not gonna do it in front of you. What I can show you is that the image is added in design, custom, CSS and the code, which I will share with you again on the sheet metal company. This course is here. So this is the ad in background image. So the way this works is you would copy this entire code, and all you need to change out is the image code to get the image code. What you need to dio start a new line, manage custom files and you will upload your image. So say this is it. So you upload it and you click on it so we don't need that one. But to show you this one, you click on it, and that will put the code in the bottom. However, your cursor was as a big time in the bottom. So that way the image code or you are l doesn't get put in the middle of other code so you can get rid of it. So that's X. I just cut it. You copied as well, if you're not sure, and they need to come up to the image code for the background and you just paste it right here, make sure it's between the two little semi quotation marks. That's how you add the image onto your, um, footer background, as opposed to being a section background. You'll also see that her style is very light of the form, and most so, some of this I will provide a bunch of different code so you could make a difference looking, um, so you can change the way this looks you noticed even on explore. So this is all a different code. Changing the style of the boxes and such so provide different code options for you so you can play with that. But the way that this image is very light, this background is light, so it shows the background image that's actually in your sights. Styles for that use for the site styles click on your newsletter and here. This is where we have all of these options, so the button color you'll see it's not showing. That's because that's dictated by the code, which I will give you so you can play with that. But what is being dictated by this is this background color of the newsletter block. This is the ultimate background color here, so you'll see. This is the transparency. I could make it less transparent so you can't see the image behind that almost at all. I could make it more transparent. And you can change. The color is completely so. Those are how you will style. You are newsletter block. And you can also change the text here. If you are using the code that I provide that will have some effect on all of that. But that is how you style your foot are and your newsletter block. 14. Instagram Footer: okay. And finally, the last thing will go over And how to really style your rally template in Scorsese's gonna get popped into your own Is these instagram flutter That's a faggot ass a lot is how do you make your instagram footer sort of full wits like this? I will see on this site there's a gutter on the entire site, so it's not entirely full with um But how you do this is you basically come down into your footer and you'll see this follow with the handle is at it was text in a heading three. You can add it in whatever style of text or header that you want And all we do here is we add instagram So we go with our little adding teardrop were to come down to Yeah, so I got myself out of the way. No, come down here and we'll add Instagram. Since you had Instagram, it's gonna show up in a big block feed. So how do you make it style like this? One of things you need to dio is when you edit the settings. So here you're editing, making sure the picket account and you could do six or, for instance, eight looks good as well. That just sort of changes the image size we're going to do. Six here, make sure it's 1 to 1 square, and we make sure that if, for instance, it's six, there are sixth in a row. If we do a thin there eight in a row here, you can also change the padding. It's put padding between them, or you can make it so that there is no padding between them, so it apply. If you're doing this on your own, it's still not gonna look like this. And as because you need to add some code. So if you refer to your code sheet, what you're gonna dio is you're gonna find the instagram code. You're gonna copy it and your pace that just as it is and that makes it full with enough this code here, which you'll copy from your code sheet and paste into your custom CSS. And then you'll have your instagram fucker 15. Conclusion: Okay, so now I've taken you through how to get started and rally. How to set up your index pages in your sections. How to add different backgrounds. Given you some ideas for background, some things you can do with pictures make them stylized more. We went over How toe really format your newsletter, Upton A little bit how to add backgrounds do your footer and to do your instagram footer. So all of those things, if you take your time and you put some thought into how you want to design those elements out and you go ahead and follow the directions within these videos, you're gonna end up with a squarespace website that sort of next level. It's not your typical just worked off of a template through it up there website. It's gonna have a little bit of extra splash. Well, over of extra character, that's all gonna be coming from you. So if you enjoy the skull share course and check back, cause I'm allows me posting more. All right, Thanks.