How to Create Full Width Sections in Squarespace
BY BIG CAT CREATIVE
When I first started using Squarespace, I assumed that there would be a function to add full width blocks, and was surprised when I found out that this didn't actually exist. (Especially because full-width is all the rage right now and Squarespace is totally up with the trends). But then how come everyone else could do it!? I was looking at other Squarespace websites that had enough full width sections to populate 10 websites...
Don’t worry, I figured it out, and it’s super simple - no coding involved. Yes, there are ways to code full width sections (there’s a code for everything though, right?) but this is the easy breezy way around it.
First of all let’s just get back to basics. Squarespace has a lot of different templates to choose from and not all of these templates support full width sections. For this tutorial I’ll be working with the Brine family of templates (best family of templates ever, just FYI). A “family” of templates means that they all have the same underlying structure and functionality, but each individual template starts with a slightly different design style. Technically, you could use any of the templates listed below and make them look exactly the same. Even though the design is different to start with, they all have the same technical bits. (Here’s a simple way to put it, they’re all identical siblings, but they all have a very different fashion sense)
So, any of the following templates will work for this tutorial (woohoo!)
Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West.
Psst, hey you!
Want goodies like this straight to your inbox? Click the link below to sign up and receive updates, discounts and exclusive access to a library full of 100% free design resources!Let's do it!
I’ve broken it down into 3 easy steps:
First you will need to create an “Index”. From your main menu, click Pages, click the + icon just like you would to add a regular page, then click Index.
Once you’ve added an Index, you can add sections to the Index. The Index acts as the main singular page, each section within the Index will be each full width section on the finished page. So click + Add Section under Index and choose Content (or you can choose a Gallery, but we’ll start with content)
When you hover over your new Content section, a cog symbol will appear. Click the cog on the page you want to edit, click ‘media’ at the top right, then upload the image you want to be full width there! (It's called the banner/thumbnail) Once this has loaded, you’ll see that this has extended right to the edges of the screen.
Go ahead and edit these sections as you would any other page! Add headers and blocks and whatever you want, that’s the jist of it! Easy, right? From here you can experiment with all types of photos and sections. I use it in almost all of my designs and it can really help to achieve a range of styles.
Here’s some (important) EXTRA tips:
Under Design > Style Editor you can click Enable Parallax, this gives the images a moving while scrolling effect (like my homepage!).
For just plain color block sections, create a graphic that is just one color (easy right?). Just create a image in photoshop (or whatever program you use) that is any color you like, then upload it like you would any other image. You can get creative with this and have different colors or patterns. I suggest making your file between 1500-2000 pixels wide so that it is high enough resolution. You can also achieve this look with code, but this tip is if you want to keep it super simple.
Use high res images! I can’t stress this enough. Although it may look good on your small phone screen, when scaled up to a huge mac desktop, is it still going to look good? There’s nothing worse than seeing a whole bunch of low quality, pixelated images spread across a website (designer cringe!).
So you need your images to be high res, but you don’t want them to be large (yes, there’s a difference!). If you've downloaded a bunch of professional beautiful stock images (kudos to you), chances are they're way too big. If the file size is too big, it will take a looong time to load. If your website takes too long to load, people go somewhere else, it’s a fact. I know I don’t hang around longer than about 5 seconds (max!). If a website is still loading after that amount of time, I’m out. It’s also really detrimental to your SEO, you will rank a lot higher if your site loads faster! Best practice is to have all images on your site under 500KB. You can do this in photoshop with the Save for Web feature, or you can use this free site that compresses images for you: www.compressjpeg.com
(If you’re struggling to get your images under 500KB, I’ll write a blog on it soon, promise!)
Something to note about Index pages is that the Index page itself and all individual sections within an Index all count towards total pages on your website. So, if you plan to have a lot of full width sections throughout your website, you may need to upgrade to a Squarespace plan that gives you unlimited pages.
Another thing to note is that if you have any text over your full width sections, because they are overlaying over an image, they will change their color from your standard font colors to your “overlay” font colors. You can change this in the Style Editor, under where you set the colors for your standard font colors, e.g Heading 1 (Overlay). Adjust these after you’ve put some sections in and see how this affects the text colors over your background images.
I hope that helped, feel free to ask any questions, or, I’d love for you to share your awesome full width website designs with me in the comments below!