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!
