Unveiling the Power of Squarespace 7.1: New Features and Flexibility
Pin this post to Pinterest! ☝🏻
IN THIS POST:
NEW FEATURES IN SQUARESPACE 7.1
Welcome to the future of website design with Squarespace 7.1! In this post, we'll dive into the exciting new features and enhancements that Squarespace 7.1 brings to the table.
Whether you're a seasoned Squarespace user or new to the platform, you'll quickly see how Squarespace 7.1 empowers you to create stunning websites with unparalleled flexibility and ease.
Back in early 2020, Squarespace released 7.1, which was leaps and bounds ahead of 7.0. While Squarespace has said they will still support 7.0, they are no longer updating it. Meaning... now is the time to jump on the 7.1 train. With all of the new design features, enhanced ecommerce settings, and increased user experience, it's no wonder that gobs of people are migrating their websites to 7.1.
So let's breakdown the new features of Squarespace 7.1, chock-full of images so you can get a sneak peak at the new look.
👉 Need to migrate your website to Squarespace 7.1? I can help.
1. NO MORE TEMPLATES
Squarespace 7.0 had multiple templates to choose from, with each template having different features. Once you picked your template, you were locked into that template unless you wanted to redesign your website in a different template.
The GREAT thing about Squarespace 7.1 is that they have one master template that gives you access to every design feature without having to start over on a new template.
If you're starting a brand new site, Squarespace still has templates to choose from as a starting point, but every template has the same features. Meaning, it doesn't really matter which template you choose because you can create any design layout from any template.
2. CURATED FONT PACKS
Every website should use two contrasting fonts that compliment each other. Don't worry if font-picking isn't your expertise... Squarespace 7.1 has tons and tons of font packs where you can select pairs of fonts that work well together.
Choose from sans-serif fonts, serif fonts, or a mixture of both.
Let's say you like two different fonts that are from two different font packs... No problem! You can specify which font you want to use for your headings, paragraphs, and buttons. Squarespace has over 1600 fonts, so you are sure to find some that you love. And if you don’t? You can upload a custom font.
Another bonus to 7.1 is that you get additional heading and paragraph tags.
In 7.0, there is one paragraph font/size and 3 headings. With 7.1 you have h1, h2, h3, h4, and p1, p2, p3. Be sure to follow the best practices for SEO when you're laying out the text on your page (the order matters!).
3. COLOR OPTIONS AND DESIGN PANEL
Choosing colors for a website is one of my favorite parts of designing a website. So much of successful web design lies in how our eyes receive information, and colors play a big part in this.
Squarespace 7.1 lets you choose 5 colors that your site color themes are based off of. You can specify which hex color you want, choose from a preset, upload an image to choose colors from, or choose a color palette from a specific color.
Once you select your 5 colors, Squarespace comes up with 10 section color themes (this will make more sense when we talk about sections later).
Each color theme is comprised of a myriad of attributes and their colors for that particular color theme. For example, here are the colors of the attributes for "BRIGHT 2".
You have the option to change the colors within the section color theme.
Let's say I want "Heading (Large)" to be a different color than the default black. I just click the color that's currently there, and then choose another color from my palette or a custom color. You can also adjust the opacity.
Perhaps the most exciting thing is that the Site Styles (or "Design Panel") can be edited directly from a page that you're editing. You no longer have to exit the editor and navigate to "Design" on the left hand side.
On 7.1, there's a handy little paintbrush icon that takes you directly to your site styles where you can edit your fonts, colors, buttons, and forms.
4. NEW DESIGN OPTIONS
Another new feature in 7.1 is the Auto Layout section. This section lets you easily display a list of items either as an actual list, a slideshow, or a carousel.
Some examples of when you might use this would be if you're featuring certain products, displaying a portfolio of your work, or showing off your staff. The possibilities with the auto layout section are endless.
I use this section to display my portfolio, and then link each site to the case study on my blog.
You'll find the auto layout section in the People, Services, and Testimonials section. Look for the "i" icon to choose an auto layout section.
Couple of things to know about this section:
You can't add any other blocks (like a text block) to the section. To work around this, add a new section above or below the auto layout section and make it the same color background, then add the text blocks (or any other block) that you want to add. Since it's the same background color, it will look like it's in the same section.
This section is only available in Fluid Engine, not the Classic Editor.
5. SECTION LAYOUTS
Squarespace also added section layouts to 7.1, which gives you a lot more options to create pages that are visually appealing for users. On 7.0, the page consisted of one big blob of content on a solid background (most likely white). With 7.1, you can split the page up into sections.
For example, here is an image of my homepage showing 3 different sections.
Here are a few more reasons why sections are so beneficial:
Adjust the height and width of a section
Adjust the height and width of a section, align the content to the top or bottom of the section, or add a divider to the section.
add a background image
You can easily add a background image or video to the background of a section that spans the entire length and width of the section. Move the circle on the photo to adjust the focal point, or add a color overlay and adjust the overlay opacity.
assign a color theme
Changing the color theme will alter the colors of the background, text, buttons, etc. based on the colors that are in your Site Styles.
**Remember, if you want to change a color in any color theme, just click the paintbrush, click Colors, and select the color theme of the section you're working on.
Easily move content to another part of your page
Let's say you decide to move content around on the page. In 7.0, you had to either completely rebuild it, or move every single block to another part of the page.
Sections make it SO easy in 7.1. Just use the up or down arrow to move that section of content to another part of the page.
Duplicate a section on the same page
If you want to create another section that is the same (or similar) to one you already have, just duplicate the section. Super easy.
REUSE A SECTION ON MULTIPLE PAGES
My FAVORITE thing about sections is that you can now save it as a favorite and reuse it on another page. This is a HUGE time saver so that you don't have to recreate a section on multiple pages. I use this feature ALL the time.
Another reason to use it is if you're deleting a section, but you might want to use it later. Just save it as a favorite before you delete it, then you'll always have it saved if you want to add it back later.
To find a section you saved, click Add Section, then Saved Sections.
6. RESPONSIVE FOR MOBILE
Once your website is migrated to 7.1, it will be on the Classic Editor. There are two types of editors on 7.1: Classic and Fluid Engine.
Fluid Engine is newer, but let's just say newer doesn't always mean better... Personally, I'm partial to the Classic Editor for this very big reason: Everything automatically looks great on a mobile device.
Fluid Engine, on the other hand, requires you to reformat every single block of every section on every page to align it for mobile.
So! This is a great thing that your site migrates to the Classic Editor. You always have the option to convert a section to Fluid Engine by clicking the Upgrade button. Just know that:
It will only upgrade that particular section, not your entire site (this is good if you want to try it out!)
You can't go backwards... once you convert a section to Fluid Engine, you're stuck with it. You can always "save" a section BEFORE you convert it, that way if you don't like it, you can add back the section that used Classic Editor.
You can still use Classic Editor when creating new sections. Just add a section and scroll to the very bottom of choices where it says "Add Blank - Classic Editor".
And one other little perk about 7.1... they now give you the option to preview what your site will look like on desktop AND mobile! Just click the little mobile phone icon to see how your site looks.
If you're using Fluid Engine, you'll be able to resize blocks in the preview without it effecting the desktop view. If you're using Classic Editor, you can rearrange some blocks (but not resize), but just know that it will effect what you see in the desktop view as well.
As you can see, there are many advantages of having a website on Squarespace 7.1. If you haven’t already migrated your site, I encourage you to do it today!
Entrusting the migration of your website to a Squarespace expert can make all the difference in ensuring a seamless transition. During the migration process, I meticulously review every page layout and ensure that your design retains its integrity throughout the migration process.
Partnering with a Squarespace expert not only safeguards you against data loss and formatting issues, but also gives you the peace of mind knowing that your website is in good hands. Elevate your online presence by migrating your website today and unlock the countless benefits of Squarespace 7.1!