Earlier this year Squarespace released their new version of the platform…

Version 7.1!

When they switched from beta testing (when things were still changing on the daily) to full public access, I had to scramble to learn the new version andddd re-record my entire Square Secrets course basically overnight!

Don’t worry, you get access to both Square Secrets 7.0 & Square Secrets 7.1 when you enroll in the course. So you’re covered no matter which version of Squarespace you or your clients are using!

This meant I really didn’t get a chance to stop and appreciate all the fun little updates they’d worked so hard on!

Sure, there are a few things that long-time Squarespace 7.0 users might miss (you can view a list of those things in Should I build my site on Squarespace version 7.0 or 7.1?).

But there have also been some super underrated changes that I’ve since fallen in love with.

Will I be moving my site from Squarespace 7.0 to 7.1 anytime soon?

Everyone keeps asking me this, so I thought I’d take a moment to set the record straight.

No, I have no immediate plans to move my site from 7.0 to 7.1.

Why? Ain’t nobody got time to move 300+ blog posts.

(Or is it 400+?? I’ve lost count at this point.)

But, the more I play around in 7.1 the more I’m looking forward to Squarespace creating the option to transfer a site from 7.0 to 7.1!

So here’s a list of things I’m loving from 7.1.

Some are massive, some are minor…but they really do make all the difference in how quickly you can design your site which is helpful whether you are DIY’ing your own online home, or designing for clients on the daily!

New Squarespace 7.1 features that help streamline web design

1. Squarespace 7.1 color themes

Location: Site styles settings

Design > Colors > Section Themes

Here’s how it works…

First, you take the time right up front to build out your main color concepts for your site.

You’ll want at least two different background colors to break up the sections of your pages to make your content easier to skim/digest.

A light section vs. a dark section (or a white section vs. a colored background).

Whatever you pick, you want it to contrast a bit!

Now, the same button and font colors wouldn’t really work on your two very different colored backgrounds, so the color themes in 7.1 allow you to go in and create a custom look for each type of background you plan to use!

Then, once you have your color themes set (you can set up to 10! You only got 2 in Squarespace 7.0!) then all you have to do when you’re building is click one little button to apply that theme to the section you’re working in.

Don’t like how the section is looking?

Swap it out for a different color theme!

So it’s like a preset that you build and can easily apply to any section you want with one click.

This helps you quickly build the bulk of your site without having to go in and hand-select every color detail from scratch.

But if you later decide you want 1-2 buttons or bits of text to stand out and be a different color, you just create yourself another custom theme (one you haven’t already used) and apply it to the section where you want to make the exception to your general color palette!

For more on using site styles and color themes to style your site, check out Squarespace basics: using site styles.

COLOR Themes


APPLYING COLOR THEMES TO A SECTION



2. Squarespace 7.1’s custom color palette generator

Location: Site styles settings

Design > Colors > Color Palette

Ok, so this is pretty cool.

7.1 includes a color generator that once you input your overall color palette (say 5 main colors) it automatically takes those colors and applies them to all the little elements of your site using design best practices.

So say you have a color palette that looks like this…


Squarespace knows that that light pinky-beige color won’t show up very well as a link or button on a light background, so it will automatically reach for your darker colors for those elements.

And it does that for all 10 color themes of your site!

So rather than going into each color theme and setting them individually starting from whatever color palette your template used, you now have a super on-brand palette applied all throughout your site!

And you only have to make a few tweaks here and there to color themes that you’d like to see something different for.

So basically it makes your themes for you. ‍♀️

And all you have to do is decide which theme you’ll assign to each section as you’re building them on the page.

To help you pick your colors, the custom palette generator can use…

An uploaded image


COLOR SLIDERs/CODES


pre-built PALETTES



Don’t have 5 separate colors to fill the spots in Squarespace’s palette picker?

Just use the same color for more than one little circle or color choice for your palette.

It’s possible to spend all day pixel-pushing colors on your site, so these first two features def make the top of my 7.1 fav features list!




3. Squarespace 7.1’s on-page content margin & alignment settings

Location: section settings

Pages > select page > edit > select section > pencil icon

In 7.0, when you make a change to the amount of white space or margins on either side of your content, you have to click several times to get back to your site styles panel, and any changes you make there affect your site globally (or site-wide.)

If you wanted your content margins skinnier or wider, you’d have to fake margins by adding spacer blocks.

(And you can only shrink those spacer blocks so small!)

Not in 7.1!

The settings live right there within each section, just inches away from where you’re already working.

So if you’ve already finished designing most of your site, but then you decide you’d like one page or section’s content to reach side to side, you can make that happen right there in that sections settings either by clicking “S, M, L” under “content width” or by using the slider.

Oh, and you can also choose vertical alignment (top, middle, bottom) and horizontal alignment (left, middle, right) by clicking on the buttons under the “content alignment” area.

So no more having to drag and drop spacers to get your content to sit where you want it within Squarespace’s “grid.”

Content width & alignment



4. Squarespace 7.1’s on-page background image and section height settings

Location: section settings

Pages > select page > edit > select section > pencil icon

In 7.0, if you wanted your section to be taller (and therefore show off more of your fancy background image) you had to add more content or spacer blocks.

Each section was only as tall as your blocks were stacked high.

And if you wanted to change the padding to an index page section (7.0’s version of a page section) you had to apply it in site styles.

(And it was site-wide.)

Now, in 7.1, if you want a simple bit of text in the middle of your section, surrounded by miles of glorious background imagery, just click that “L” button under “section height” for a quick change.

Or click the three dots and use the slider for a little more control.

No more having to open the page settings to adjust your background image focal points either! It happens right there in the section settings window!

You can also choose whether your background image will be full bleed or inset (A.K.A full width or with white space or margins!)

image focal point & inset


P.S. Want your background image to have some sort of color overlay?

(ie. white to make it appear lighter and softer, dark to make it more moody, or colored to give the photo a sort of “filter” and make it more on brand?)

Once that color is set within each color theme in site styles, you control the opacity or intensity of that overlay right there within the section you are building.

In 7.0, you would have had to apply that filter using CSS, or just upload an image with the overlay already on it using a program like Canva.

Image overlay opacity



5. On-page blog post customization settings

Location: individual post settings

Pages > select blog > select blog post > edit > pencil icon

Ok, so this one comes with a tinyyy caveat.

And that is that I believe Squarespace had their reasons for making all blog style changes happen at a global (or blog-wide) level in version 7.0

Squarespace knows it’s best to keep things looking consistent across your site and blog to build better brand recognition.

Because if every time someone showed up to read your blog post it was a completely different layout, color, alignment, etc. they might have a hard time following along.

Yes, design matters. But they came for the juicy content!

Your faithful readers will want something familiar that they can easily read or skim, without doing eyeball gymnastics. ‍♀️

Here’s where individual blog-post customization could be handy…

Say you use your blog to write about 3 main categories.

Orrrrr you use the blog to strategically share your portfolio and highlight past projects (check out: Blogging tips for web designers: how to strategically share your portfolio).

It could be fun to have a slightly different (but v on-brand) theme for each type of post, right?

The on-page blog post style settings let you do just that!

Example #1


Example #2


You can also control the formatting of each post (content width and spacing, meta data settings, text alignment etc.) right there in the on-page blog post settings under “format.”

P.S. Noticing a real trend with these last few features being “on page XYZ settings?”

If you’re wondering what the biggest difference between 7.0 and 7.1 is, I’d say it’s that! A whole lot more settings are accessible without ever having to leave the page.

A lot of the things that you initially would have set in stone in site styles in 7.0, you now set first globally then play with how you apply them locally right there on the page.




6. Portfolio collection pages

Location: Pages panel

Pages > add new page > collections > portfolio

Speaking of portfolios, sometimes you don’t have time to blog about them.

Orrrr you don’t even have a blog on your site.

So all you want is a quick and simple way to upload your images, stick in a description & testimonial or two and call it a day.

I’ve seen it happen all the time where business owners from all sorts of industries have multiple giant folders of portfolio snapshots collecting dust on their desktops, because they are too busy serving their clients to make room for keeping their portfolio current on their site.

So when they originally built their site, they threw up their first 3-4 projects and haven’t updated it in months or even years.

Here’s the thing – you’re potential clients or customers (the ones who have been thinking about working with you for yearssss but for some reason are still on the fence) could use a fresh bout of inspiration.

Your latest project (the one that’s currently hiding in a folder on your desktop) could be the final nudge they needed to buy or book your thing!

You could be the best dang *insert profession here* around and nobody would ever know if it you don’t put your portfolio pieces out there for people to see.

Telling them how you plan to change their life only goes so far!

People love a good before and after.

They need to see how you’ve already consistently been rocking the worlds of other clients or customers who were in their very shoes before they hit that book or buy button.

So Portfolio pages make it crazy easy to get your work up on your site and selling for you!

Gallery pages definitely do the trick in the meantime in 7.0.

But I love how the portfolio pages act like a collection (similar to blog posts in a blog) making it easy to manage, duplicate, build, and style individual projects all in one place.

And it cuts out the step of having to manually link your project’s thumbnails to another page or blog post where you’ve put that portfolio piece on display.



7. Duplicating page sections in Squarespace 7.1

Location: Pages panel

Pages > add new page > collections > portfolio

When designing long-scrolling pages, people use alternating sections of similar design and layout to break content up to:

A) Make it easier to digest/skim

B) Draw the eye to the next section and keep visitors on the page and scrolling longer

To make this happen in 7.0, you first have to add an index page, then create a bunch of separate “pages” below it that act like its sections.

So if you have 30 sections to your long-scrolling page, you have to manually had (and manage) 30 new pages on your site.

They did make some recent updates that made organizing and deleting sections easier, but duplicating is still a bit of a chore.

Squarespace 7.1 has been on the move adding on-page section duplication!

Meaning you can click the little “make a copy” button, and then easily drag and drop that section anywhere on that same page. ‍♀️


So this is probably the most exciting new feature when it comes to actually physically building out your pages!

Then all you have to do to make that section stand out from the next is obviously swap out the content, but also play with those color themes and background and margin settings we talked we talked about earlier!

As of writing this, section duplication for use on another page is not yet possible.

But Squarespace is always listening and I wouldn’t be surprised if this is something they roll out in the near future!


8. On-page header & footer style settings

Location: header & footer sections

Pages > select page > edit > edit header (or footer)

In 7.1 your header and footer settings are easily accessed right there on the page. Most of the settings are still global, meaning the changes you make happen site-wide.

This includes changes made to your site title or logo, your main CTA button in the header, your social links & cart icon, and whether or not the header will move with you as you scroll down the page.

But the two things I’m most excited about are:

A) The option to make your header transparent.

Rather than being one set color, it will match whatever you have going on in your very first section on that page whether it’s a colored background or a background image.

This was only available for a handful of templates families in 7.0 (and Brine is not one of them!)

Of course, if you’re digging the look of one consistent color for your header across your whole design, then you can just toggle off transparent mode and select your color theme of choice.

B) Separate style settings for mobile and desktop!

Usually when you make a tweak while in mobile view, you open desktop view back up to realize you totally just wrecked your design.

But not those headers in 7.1! Mobile settings are it’s own deal! So tweak away!

Global HEADER settings


desktop Header Settings


Mobile header settings



9. Drag-and-drop content between sections on a page

Location: Page Builder

This is possibly the simplest but most effective change that Squarespace made with their new platform, and that is that you can now move blocks between sections!

No more having to delete out that block, hit save on that section, click edit on the next section, and then manually rebuild that block and it’s content just so that one image can live further down the page…

Just drag and drop that sucker into whichever section on the page you please!

Well done Squarespace!


So where does the time-saving factor come in when designing your site in Squarespace 7.1?

With a lot of these new on-page customization possibilities in 7.1, you’re really just cutting down on the number of times you have to go allll the way back in to your site settings to make changes like you would have to in 7.0.

That, and checking that the changes you just made don’t look terrible on some other page you’ve already created!

So you’re totally safe to go crazy on those on-page settings without fear of upsetting the delicate design balance you achieved somewhere else.

Plus, a lot less CSS!

For my CSS lovers, a lot of the things you would have needed to scour the internet for a CSS snippet for are now available with the click of a button right there on the page!

So while there may be a few long-lost favorites not quite available on the newest version, I’m pretty stoked about these time saving features that have already been introduced.

And it’s only going to get better.


/

/

You’ll also love . . .

My fav Squarespace 7.1 features that help you build your website faster