Squarespace Site Styles Update: The Editor Has a New Look!
I'm excited to share a recent update to the Squarespace Site Styles panel. This update is a small yet significant improvement that will likely enhance your Squarespace web design experience. If you haven't had the chance to check it out yet, I'll walk you through the new look of the panel and how to navigate the updated interface.
If you prefer to watch a video, I have you covered! You can follow along with the companion video on my YouTube channel.
Accessing the Site Styles Editing Panel
Before diving into the changes, let's quickly review the two ways to access the site styles panel in Squarespace 7.1:
1. From the Top-Level Menu: On the left-hand side of your window, in the main admin navigation menu, under 'Website,' you'll see 'Styles.' Click on this, and it will open the site styles panel.
2. From Within Pages: If you're already inside a page on your website and want to make style edits, click the paintbrush icon. This will also open the site styles panel.
What's New in the Site Styles Panel?
The major change to the site styles panel is its new, more visually appealing interface. While the functionality remains the same for now, the design overhaul makes the user experience more streamlined and enjoyable.
1. Improved Visual Presentation:
The panel is more compact and organized now. Previously, it was quite text-heavy and extended over a long scrollable area. This redesign uses visual elements that make it easier (or at least more pleasing) to navigate.
2. Font Settings:
You will notice a new feature for managing your heading and paragraph fonts. A large button showcases the current fonts, and clicking through allows you to see and modify your font selections as before.
3. Color Palette:
The color palette section shows the current palette in bar format, from lightest to darkest. Clicking here will take you to the familiar interface for editing your palettes and themes.
4. Button Styles:
The buttons section now gives a quick visual preview of the current button format. Once you click through, you can update your button formats as usual.
5. Forms:
The site styles panel now has a dedicated section for forms. This section allows you to access and modify the styles of your form pack quickly.
6. Accessories
There’s a new tab at the bottom of the panel labeled 'Accessories.' Interestingly enough, this does not have a visual representation like the others. It’s text only, like the ‘old’ panel.
I don’t know why Squarespace chose to call this ‘Accessories,’ but here we are. This section groups together animations, spacing, and image blocks. All of these items were available before; they are now just grouped together here.
Animations: Choose the site-wide animation style for your website.
Spacing: Adjust pixel values for your website’s width and margins. These settings affect the overall layout and spacing.
Image Blocks: Edit the alignment and separation for different types of image blocks such as collage, poster, and stack. These are generally best left alone with the default settings unless you are comfortable with customizing these elements or require their customization. Remember that these will affect these blocks across your website, not just to a specific block.
Looking to the Future of Squarespace Site Styles
This update to the Squarespace site styles panel is small, but it does make for a more streamlined and user-friendly experience. Given that Squarespace is known to continually tweak things like this (especially navigation-related items 🫠), I think it’s fair to say that there will be more updates to come. What we don’t know is when or how big they will be.
If they continue making updates that focus on improving the design experience for both novice and professional designers, that is all for the greater good and will make Squarespace an even better website builder than it already is.
If and when any updates are released, you can be sure I’ll create another video and post to share them with you!
You may also find these articles helpful:
