How to design a homepage in Squarespace 7.1 fluid engine (2025 full video tutorial)
So, you’ve mapped out your homepage (hopefully using my homepage planner!)
You’ve thought about strategy, client experience and content. Now it’s time to build something beautiful and functional inside Squarespace 7.1 Fluid Engine.
If you’ve never used Squarespace before, then this tutorial is for you! We’ll walk through everything step-by-step.
And If you’d prefer to watch the video tutorial then check it out right here.
Step 01: Wireframing
Okay, okay, I lied a little bit. Before we jump straight into the nuts and bolts of the Squarespace editor, we’re going to talk a bit about wireframing.
What is wireframing, I hear you ask?
Great question. Think of wireframing as a rough sketch - a plan - for how you’re going to lay out your website pages. Visually, you’re not going to need to know your fonts, colours, images just yet. Wireframing is just a way for you to plot out roughly, what content will be in which section of your homepage, and the overall order and layout of things.
This is great because it allows you to do a couple of things:
Highlights and focuses on user experience (without getting distracted by visuals)
Ensures each section has a call to action
Allows each section to have an appropriate amount of copy (not too much or too little)
Allows careful consideration of imagery
So you’re going to want to start with each section of your homepage and sketch it out roughly (refer to the example we go through in the video below)
Tool tip: Yes I use figma for my wireframes, but I’m a designer. If you’re DIYing don’t worry about this! Go straight for a notebook and pencil! If you’ve planned everything with my homepage planner, then sketching out wireframes will be a breeze for you.
A little more on Squarespace’s AI feature…
But Jennifer, what’s the point of doing all this work? And why can’t I just use one of Squarespace’s AI layouts or templates I hear you ask.
That’s a great question, and technically you can use these, however, they’re not based around your brand strategy or user experience at all.
I’ve noticed the templates tend to be focused around looking pretty or highlighting Squarespace features (which you may not even want to use). However with the right tweaking you can make them work (video coming on this soon!)
And while the Squarespace AI feature has made it easier than ever to get a website or homepage off the ground, it doesn’t inherently understand what makes a great website for your specific business, based on your specific strategy. And when you leave these out, and go with what’s been generated for you, well then you’re going to end up with a website that looks like everyone else's at best or a website that actively turns away visitors at worst!
Wireframing is a simple step you can take to have a holistic view of your homepage, and see exactly how the user journey flows. You’ll be able to put yourself in your visitors shoes and clearly see what’s working and what’s not!
And just to be clear, I’m not against AI, heck a lot of my resources include AI tools to get you up and running! I just think some things need to be more considered and aligned to your business, especially when this is a primary point of contact for your ideal client.
Step 2: Creative direction and brand strategy
Before you get designing you’re going to want to have an idea of your creative direction. This includes your colour palette, typography choices, imagery and overall brand values. If you don’t know what yours are, then feel free to download my Website Starter Workbook which will help you sort out all the strategy you need before you design a website!
If you’ve already got this mapped out, then you’re ready to jump into Squarespace’s site styles!
Step 3: Setting up Site Styles
Your site styles set the visual tone for your entire website. They are typically global settings that affect your overall website.
To start editing them, head over to the paintbrush icon on the top right side.
Here you’ll be able to set:
Fonts (Headings, paragraph styles, button fonts and miscellaneous text)
Buttons (3 button styles)
Colour palette (5 brand colours ranging from light to dark)
Forms (edit form designs)
Miscellaneous (This is where more advanced abilities are, like changing site animation or spacing)
Step 4: Building each section
Now that you’ve got your site styles set, you can start designing each section based on your wireframe and homepage strategy! Now, we won’t go through the details on this blog post otherwise it would be an extremely long post that not even my mum would want to read!
So instead of listing it all out here, watch the full tutorial video and follow along or skip through at your own pace!
