How to turn any of our template designs into your own website?

Our website templates built for Squarespace 7.1.They are best thought of as a beautifully pre-designed starting point, not a rigid template that you’re expected to preserve. 

This guide is included with every template design we sell.

The trick is to customise it in the right order.

Think of your site as having four layers:

  1. Site-wide design — fonts, colours, buttons, spacing

  2. Page/section design — backgrounds, section heights, layouts

  3. Content/layout — what blocks exist and where they sit

  4. Behaviour — links, navigation, forms, galleries, mobile layouts, etc.

You can do a surprising amount through these alone.

1. Start by changing the template's design system

Go to Design → Site Styles and establish your own:

  • fonts

  • font sizes

  • heading hierarchy

  • colours

  • button appearance

  • corner radii

  • spacing

  • animations

Don't start by tweaking individual sections.

For example, if our template design uses:

huge serif headings + muted beige + thin borders + lots of whitespace

but you want:

smaller sans-serif headings + black/white + tighter spacing + bold buttons

change the global styles first.

Squarespace 7.1 is deliberately designed so that Site Styles provides the global visual system, while individual sections can override it where necessary. 

2. Then treat every section as a blank canvas

This is where Fluid Engine becomes your main weapon.

When you click Edit on a 7.1 page, most ordinary sections use Fluid Engine. You can drag blocks around a grid rather than being constrained to the arrangement we have originally created. 

So, for example, we might have given you:

Image | Text

You can turn that into:

small eyebrow
Large headline
paragraph
button

                         **IMAGE**

Or:

IMAGE

headline ———— text ———— button

Or delete the image altogether.

You aren't really "editing the template" at that point. You're rebuilding the section using its existing visual language.

A useful rule

If you look at a any section on the template and think:

"I like the style, but I don't like this layout."

Don't fight the layout. Rebuild the section.

Delete the blocks you don't want and add the blocks you do.

3. Use section-specific styling instead of CSS

This is probably the most important no-code technique.

Click:

Edit → Edit Section → Design / Background / Colors

You can change things such as:

  • section height

  • background

  • background image/video

  • colour theme

  • spacing

  • grid configuration

  • block spacing

without changing the rest of the site. Squarespace specifically supports section-level styling in 7.1. 

So you could have:

Homepage

  • white hero

  • pale-grey services section

  • black portfolio section

  • white testimonial section

while retaining the same overall typography and button system.

4. Don't assume the template homepage is the right structure

Here you can make a radical radical change if necessary.

A template might give you something like:

Hero → About → Services → Portfolio → Testimonials → CTA

But your actual business might need:

Hero → What I do → Who it's for → Examples → Process → About → FAQ → Contact

You don't have to preserve the template's sequence.

In Squarespace 7.1, pages are built from sections that you can add, delete and rearrange. 

I'd actually recommend sketching your desired page structure before doing detailed styling.

5. Make the header your own

The header is one of the places where a template can continue to feel like a template.

Look at:

Edit → Edit Header

You can generally control things such as:

  • logo

  • navigation

  • CTA button

  • header layout

  • header colours

  • fixed/sticky behaviour where available

  • mobile menu behaviour

  • spacing

The key is to decide what the header needs to do, rather than trying to keep the template’s structure.

For example:

LOGO
Work · About · Services · Journal
Let's talk →

might be much more useful than original navigation, even if the latter looks lovely.

6. Build your own reusable visual language

Here's a particularly effective trick.

Suppose your brand needs three types of sections:

Type A — Hero

Large heading
Supporting text
Primary CTA
Image

Type B — Content

Small label
Heading
Body
Image

Type C — Conversion

Heading
Short paragraph
Button

Create those using Squarespace's normal blocks and then reuse the design principles throughout the site.

You don't need CSS to create consistency.

The consistency comes from:

Site Styles → section themes → repeated layouts → consistent spacing.

7. Use different colour themes rather than manually recolouring everything

This is an especially useful 7.1 feature.

You can create a small palette such as:

Theme 1 — Light

  • background: #FFFFFF

  • text: dark

  • accent: brand colour

Theme 2 — Dark

  • background: dark

  • text: white

  • accent: brand colour

Theme 3 — Accent

  • background: brand colour

  • text: white

Then assign the appropriate theme to each section.

That gives you much more control than repeatedly changing individual text and button colours.

And importantly, if you later decide your brand colour should change, you can update the theme rather than hunting through dozens of sections.

8. Mobile is actually part of the design process

This is one area where Fluid Engine is particularly useful.

In 7.1 you can arrange the mobile layout independently from desktop in Fluid Engine. 

So don't accept:

"Desktop looks great, therefore mobile will sort itself out."

After creating each important section:

Desktop → Mobile → rearrange → resize → check spacing

For example, desktop:

HEADLINE          IMAGE
TEXT              IMAGE
BUTTON

might become mobile:

HEADLINE

TEXT

IMAGE

BUTTON

You can deliberately control that rather than hoping responsive behaviour produces a good result.

9. Use blocks to create functionality rather than trying to style your way out of it

If by "work the way I want" you mean functionality, this is where Squarespace's native blocks and features become important.

For example, you can use:

  • Form blocks

  • Newsletter blocks

  • Button blocks

  • Video

  • Galleries

  • Image blocks

  • Accordion/FAQ-style sections

  • Social links

  • Blog

  • Portfolio

  • Products

  • Scheduling/integrations

  • Anchor links

  • Navigation

  • Search

The visual design is only half of the job.

A beautiful template can therefore become something structurally quite different while retaining the Squareguru aesthetic.

The workflow I'd use for a Squareguru template

If I were customising one from scratch, I'd do it in this order:

① Content architecture

What pages do you actually need?

↓

② Navigation

What should visitors be able to find immediately?

↓

③ Site Styles

Fonts
Colours
Buttons
Global spacing

↓

④ Header/footer

Make these completely yours.

↓

⑤ Homepage structure

Delete Squareguru sections you don't need.
Add sections you do.

↓

⑥ Fluid Engine

Rearrange every important section around your actual content.

↓

⑦ Section themes

Create light/dark/accent variations.

↓

⑧ Mobile

Design the mobile layouts deliberately.

↓

⑨ Functionality

Forms, links, navigation, galleries, booking, shop, etc.

↓

⑩ Only then ask: "Do I actually need CSS?"

You'll often find that you don't.

One important Squarespace 7.1 distinction

Don't get hung up on the name of the Squareguru template.

In Squarespace 7.1, all sites belong to the same template family and have the same underlying features and style options. The Squareguru design is essentially a pre-built arrangement of pages, sections, blocks and styles. You don't switch to another 7.1 template later to unlock different capabilities. 

Remember Pretty much everything visible can be reconsidered and we can can help your with any changes you want to make. You can give us a call on 020 8333 0151 and we’ll help you with any questions.

Contact us