Squarespace 7.1 Design Backend Guide

One of the biggest changes that came to Squarespace with the launch of 7.1 was the revamp of the design backend. Squarespace did away with the “Click-and-style” option and instead broke down the design process into different categories. It can be confusing at first - particularly if you’re doing a lot more customizations with colors and fonts, but I promise you it’s actually quite wonderfully simple!

Here’s a breakdown of the design page backend:

Fonts: All selections and customizations of the fonts in your website will be housed here. One of the awesome perks about Squarespace is that if you select a specific font for say, your “Normal” text, it will automatically apply throughout the site. No need to go in and manually change everything. Squarespace does offer font combinations, but there’s also a way to customize everything as will. Just click on the gear button in the top right corner of the font combination box you’ve selected!

Colors: All colors that will be used throughout your site will be updated here. You have several options when selecting your color palette - you can opt to use a color palette made by a designer, use a color palette based on an image, create a color palette based around one color, or design your own palette!

Buttons: The design of your buttons will be done on this page. You can alter the style of button, shape and padding ( how much space is within the button).

Spacing: Alternating the spacing in your webpage width and margins will be done here.

Product Items: If you are adding products to your website, customizations to how the product is displayed on your website will be done here. Everything from photo size, shape, and presentation is updated here.

Image Blocks: There are multiple styles to implement photos on your website, and all customizations for each of those styles is housed under the image blocks page. Depending on the style you choose, you can change text fonts and sizes, how fonts are arranged, photo sizes, spacing, and buttons.

Browser Icon: Also known as a favicon, this is the icon that appears in the tab of your browser. The only action item you take here is to upload a file (ideally a PNG) of your favicon, with dimension no bigger than 300 x 300 px.

Lock Screen: If you have a page of your website that is locked, you can now design that page! This is a totally new feature and I’m super excited about it! You can add your logo, media (video or photo) and change the text that appears instead of having a blank gray lock screen just asking for a password!

Checkout Page: Alter the color scheme of your checkout page so it stays on brand - this is also a new feature that Squarespace has rolled out and I think it will definitely help maintain the authority that product-selling websites want to have.

404 Page: One of the things that helps with SEO is having a custom-made 404 page. Why? Because when you design your own 404 page, it helps keep your audience on your site longer because you can input links that will take them back to different parts on your site. The key is to have people on your website exploring for as long as possible, as it will improve your search ranking as well. For this, you’ll design your 404 page in the “Pages” section, and then you'll be able to select the 404 page from the dropdown list in the “Design” section.

Social Sharing: Place the image that you want to appear when you share your website here. I would recommend something slightly different than your logo. You can design cool graphics on Canva for free.

Custom CSS: Any customizations through CSS will be placed here.

And that’s it! Designing on Squarespace 7.1  isn’t as crazy or overwhelming as you might think. In fact, it’s pretty simple, and it’s awesome how everything is broken down into categories, rather than a free-for-all for you to navigate through!

The 4 Best Features of Squarespace 7.1

Squarespace’s launch of 7.1 was one of the most innovative versions of the platform to date. There were a ton of updates and changes made, particularly to the template families (or rather, consolidation of them), and the backend of the design page. This blog post is a bit more opinionated, in that I’m listing my thoughts on the four best features that have been a part of the 7.1 release.

The 4 Best Features of Squarespace 7.1

1. One-Template Family: In previous versions of Squarespace, if you chose one template, you were limited to the design features and functionalities that were associated with that template. Some of these templates are (still) awesome (Brine!) but some templates were a bit more limited in their design capabilities which could be frustrating, and require custom CSS...which could lead to potential hiccups down the line depending on the CSS. In 7.1, all “templates” that you see on the popular page as well as within the website categories listed on the template explore page, all originate from one template family, and they all have the same, extensive, design capabilities. This makes it AWESOME and EASY to navigate and design on because you never have to worry about “can I do ___ on this template?”

2. Categorized Design Sections in the Design Backend: I have to say, when I first saw the update on the back end for the design page, I immediately had this thought of “Oh this is..overwhelming” as Squarespace had removed the click-and-edit feature. But. This breakdown is actually extremely helpful because you can take a deeper dive into each category, and they have designer-curated options as well, particularly for font combinations and color palettes. Using the color palettes as an example, you have options to use a designer-curated palette, create one from an image you upload (SUPER COOL!), create one around one color, or customize your own. This is awesome and not only do you see it live on the site immediately, there are so many combinations that Squarespace automatically generates for your color palette for how it appears on the site. 

3. Page Categories Now Includes Portfolio Page: There’s a new page in town, and it’s the portfolio page. For any kind of service-based business that needs to have a portfolio page, this is a great new option. Particularly if you are a photographer, you can input a portfolio page, and each “image” (and by image, say you select 1 image of an album as your album cover) within the gallery can lead to another page comprised of photos for that particular album of photos. If you’re a designer, you don’t have to link the photo to another page, you just have a super easy photo-upload process to display your work.

4. Replacing Index Pages with Live Page Add-Ins: Even though Squarespace has removed the index page option, you now have the capability to make every page an index page by simply clicking on the blue and white “+” button. Not only that, you can add a page above or below the current page you’re working on (previously you would have to create the page then drag and drop it to rearrange). Then, when you click on the “+” to add a page, you get a ton of options, broken down by categories with a photo preview of what different options within those categories look like. 

If you haven’t had a chance to play around with the new 7.1 version, I highly recommend getting in there and exploring it. Whether you’re a tenured designer or building your website, the new update has features that will absolutely streamline the design process and offers way more customization options compared to previous versions. Also. No more stress about which template to choose, which is half the battle sometimes. Have you played with the new 7.1 version yet? If so, what are your favorite features?

What You Need to Know about Squarespace 7.1

In January of 2020 Squarespace officially launched their latest version of the platform, 7.1. This launch was a big deal because a lot of changes have been made - from design capability and functionality to the back-end design experience. I wanted to jump on it and give you some insight on what’s changed if you haven’t had a chance to check it out yet. Here are some of the most notable changes…

Templates

The biggest change we see outside of user interface is the template families - or lack thereof. In previous versions, selecting a template meant that it came from a family that had specific design functionalities, and may have been limited. For example, some templates didn’t have a sidebar option, which would be tough for bloggers and require them to turn to custom CSS or manually building one. In 7.1, although the template exploration page displays a variety of templates based on popular designs and web design categories, they all stem from the same family and all have the same capabilities. Which in my opinion, is AWESOME and a more streamlined experience. No more worries of “does this template have x feature?”

Back-End Interface

• The site styles navigation bar is different to reflect a breakdown of different design sections for fonts, colors, products, and images rather than all on one page (formerly “Site Styles”).

• There are now on-screen design changes as well, including insertion points for content blocks, and especially for adding index pages. Rather than clicking on adding a new page in the sidebar, you can now simply click on the “+” button at the bottom of the current page you’re working on, or in between two existing pages.

• The ability to alternate between mobile and desktop view is now different - Squarespace has removed the tablet view, only giving you the option to view mobile or desktop, and has moved to the top right corner of the screen. The ability to expand the webpage view is also now in the top right corner of the screen.

• There are a lot more (differently illustrated) page layout options by page type but still a blank page option.

No more

In 7.1, Squarespace has opted to get rid of the following features:

• Gallery content blocks (now replaced with actual gallery pages or portfolio pages that you can add to an existing page to create an index)

• Parallax scrolling

• Cover pages

• Developer mode

• Index pages as an option for a new page (you can now manually create them as stated earlier but just clicking on the “+” button)

New Design Capabilities

One of the awesome things that Squarespace has incorporated into 7.1 is a ton of new design capabilities that make the design process easier and more fun. This includes:

• Premade font combos - but still having the option to customize your fonts

• Color palette creation - the option to create your own OR use a premade one

• Removal of the “click & style” process from previous versions, design changes are now based on the item you’re styling...leading me to the next point:

• Back end styling is broken down into different categories, which is actually quite helpful and intuitive to use (such as fonts, colors, images, products, etc.)

• You can now edit your site header separately and more intuitively than before 

• Design lock pages 

• Design checkout pages

The only caveat is that some content blocks that you could update once before such as the gallery, cannot be adjusted because it is now its own page.

All in all, if you are new to web design - whether you’re designing sites for clients or yourself, 7.1 is a great place to start, and the process is extremely streamlined. Not only that but you have premade font combinations and color palettes, so if the branding design aspect is one that you are or were struggling with, you now have professional recommendations at your fingertips for your website.

If you’re used to the previous versions 7.0 or below, it may take some getting used to, but ultimately I think it’s an innovative change and will make the design process smoother overall.