Sisu Site Shop

View Original

Squarespace New Features Roundup: Fall & Winter 2021-22

Squarespace New Features Roundup for Fall & Winter 2021-22

Squarespace has been busy lately publishing updates to their website builder and other platforms. They’ve released an impressive 11 updates over the last 8 months. I’m excited to share an overview of all of the updates with examples of how I’ve implemented several of them on our Sisu Site Shop website. 

1 | Auto Layout Section for List, Gallery and People

This exciting update was released for Squarespace 7.1 at the end of June 2021. It allows you to add information, style the overall section so each item included is consistent (you do not need to style individual items) and easily rearrange them by dragging and dropping. 

These sections are perfect for lists of services, testimonials, reviews, and team members. Items that you want to be styled the same way but easily add/delete items and rearrange them at the click of a button.

When you add a new section you have the option to choose from many new predesigned auto-layout section templates. You’ll find these on the Add a Section menu on the left of your screen.
 

There are three section options where you’ll find the auto layouts available: List Section, Gallery Section, and People Section. You’ll need to scroll all the way to the bottom to find the People section. 

List Section

The list section offers 26 new pre-designed auto-layout section templates. You’ll find a great diversity of layouts combining photos with titles, subtitles, text areas, and buttons. Additional layouts include 3 that automatically mask photos to a circle, 5 sections with text only, and 11 slideshow layouts. 

An additional 20+ traditional block layout options follow the new auto-layout options. They do not have the AUTO Badge with an info (i with a circle) icon on the upper right corner and do not have the auto-layout features. They are still great options but all the elements will need to be arranged manually. 

To get started with a new auto layout just click on your desired layout. To add content click on the Edit content button in the upper right corner. Here a Design panel opens up with three tabs: Elements, Content, and Design. 

Add Section Menu - List Auto Layouts

See this gallery in the original post

Gallery Section

The gallery section has 7 auto layout options. To select one simply click on the desired layout. Add images by clicking on the + at the top center of the pop-up menu. To delete, hover over the image thumbnail on the left side and click the trash can icon.

Unlike the List Section, there is no way to change the display options for the layout. If you don’t like what you’ve done, you’ll have to add a new gallery section layout and start over adding your content. 

People Section

To add a people section, scroll nearly to the bottom of the Section Menu. You’ll find it second to last between Music and Pricing. 5 of the 7 layout options have the new auto-layout feature. Adding team photos and short bios will be a breeze with this new feature. 

Sisu Site Shop Website Examples

On the Sisu Site Shop Website, I’ve added auto-layout sections in a few places. First, I added a list carousel near the bottom of my home page. I included an iPhone mockup image of each client's website with the name of the client and their testimonial below.

Auto-layout List-Carousel Example: Sisu Site Shop Home Page-Testimonial Slide 1

Auto-layout List-Carousel Example: Sisu Site Shop Home Page-Testimonial Slide 2

On my About page, I added a gallery carousel that houses the full version of our story. I included 13 slides with images, titles and descriptions. I love that I can house a large amount of information without taking up alot of vertical real estate. This easily gives the user the option to read more or quickly scroll past. 

Gallery Carousel Example: Sisu Site Shop About Page - Full Story

Here’s Squarespace’s Auto Layout Help Center Guide

2 | Undo/Redo Editing Actions 

Released at the end of July 2021 Undo/Redo update for Squarespace 7.1 is a simple but mighty addition to the Squarespace editor. The undo/redo button can be found in the upper left-hand corner of the editor. You can undo up to 1000 actions.

You can also use keyboard shortcuts: ⌘Z (macOS) or Ctrl+Z (Windows) to undo, and Shift+⌘Z (macOS) or Shift+Ctrl+Z (Windows) to redo.

When you click done and save your changes become permanent. There are a few places where the undo/redo function is not applicable. For a full list refer to the Undo/Redo Squarespace Guide

See this gallery in the original post

3 | Hosted background videos

A huge update released mid-August, 2021 now allows embedding videos directly into your section backgrounds in Squarespace 7.1. Currently, each website has the option for 30 1-minute hosted background videos directly in Squarespace no YouTube or Vimeo required. 

To find the feature navigate to the section editor on the upper right side of the section > select the background tab > select Video tab > click + or drag & drop a video. 

At this time videos can be up to 60 seconds long and up to 500 MB. Videos can be MP4, M4V, or MOV. Styling options for the videos include background width, filter, playback speed (.5x, 1x, 1.5x, or 2x), and a mobile image. 

Full Squarespace Adding Videos Guide

After researching this option I came across another video option I was unaware of. It’s not related to this update and still requires you to have an externally hosted video with a URL. Did you know you can also add videos as the background of a password-protected site or page? Go to Home > Design > Lock Screen > Media > Video

Additional details Designing A Lock Screen

4 | Rich Text Editor Updates for Editing Button Text In-Line

Another simple but highly useful update was released in mid-September, 2021. You can now edit button text in-line for both button and image blocks. This update streamlines the editing process as it removes a few extra steps each time. 

I’ve found though that to copy the button text you still have to click on the edit function to capture it. 

Additional updates were made to the RTE bars to make them more consistent across the platform. 

5 | Background Art 

This Squarespace 7.1 update was released in late September. It allows for unique, styled and animated backgrounds to sections animation and image effects. The preset options are found on the Background menu on section styles. I think the word is still out on how well this works. I would advise you to use this sparingly. I did some testing with the feature but didn’t love it. I also had trouble not being able to remove it once applied. If you’d like to test this feature out I’d recommend duplicating the section first so you can simply delete it if you don’t care for it. Otherwise, you might have to rebuild the whole section. 

The best tutorial I could find was this one: Inside the Square Background Art Tutorial

See this gallery in the original post

6 | Header Styles

Another Squarespace 7.1 update was released in late October 2021.  The update added additional options to your Header. To find these features, hover over your website’s Header (the topmost section) until you see the Edit Site Header button and click. Next, click the arrow to the right side of Style. You’ll see a number of features. 

The first drop-down option allows you to choose between Solid, Gradient, Theme, and Dynamic.

With Solid or Gradient selected, you have options to adjust the opacity, change the background and navigation colors, blur the background, and add borders and drop shadows.

Selecting Theme allows you to choose one of your website's theme colors. While selecting Dynamic will use the theme of the first section on each page of your website. 

See Squarespace’s Guide for Building a site header

7 | Image Shapes 

The second of Squarespace's October 2021 updates was the introduction of image shapes. We first saw this application in the Auto Layout update that had a few layouts with circular shapes. This update allows you to quickly and easily change the way your image displays on a page. I love this addition and I’m looking forward to using this more this year. To start I used the circle 1:1 option for pictures above my process on my VIP days page.

Image Shapes Example: Sisu Site Shop VIP Days Process

Locate this feature on the Design tab of the image block. The second option is a toggle between original and shape. Here you have the ratio options to choose from. 1:1 offers 16 shape choices, 2:3 offers 12 shape choices, and 3:2 offers 7 shape choices.

Edit Image: Design Tab

Edit Image: Design Tab - Shape - 1:1 Options

Edit Image: Design Tab - Shape - 1:1 Options scrolled to bottom

Edit Image: Design Tab - Shape - 2:3 Options

Edit Image: Design Tab - Shape - 3:2 Options

Changes made are specific to each image block and will not affect the image itself. Think of it as if the shape is a mask on top of the image. This update is available on both Squarespace 7.0 and 7.1.

8 | Accordion Blocks

Rounding up the late October, 2021 updates is the accordion block. This feature allows you to easily nest text underneath other text with a toggle to expand and contract the nested text. This feature is most often used for FAQ sections. 

Design elements include selecting the text type for titles and description (H1-P3) and alignment (left, center, right) choosing to have the accordion open or closed to start, when clicking an additional toggle it can remain open or auto-close the previous one. You can also show or not show dividers and choose their thickness and opacity. You can choose between a + or V its size, thickness, its placement on the left or right and row padding.

Accordion Block: Edit - Content Tab

Accordion Block: Edit - Content Tab - Item 1 Menu

At this time there are no options for bullets or other types of blocks like images within the accordion. But use this trick to achieve a basic bullet: dash+space. 

Limitations of this feature include potential accessibility issues for screen readers in the expanded section.

Squarespace’s Accordion Block Guide 

9 | Text Block Color Overrides

Another exciting and welcome update released in late November 2021 was Text block color overrides for styling text within a text block. Now you can easily change individual characters, words, or a string of text.

You are able to quickly change to one of the colors within your color palette or to any color you desire by using the custom colors tab to select or use a hex code for any color you desire. This feature is currently available only within a text block but Squarespace might expand to other block types in the future. I’ve used this new feature several places on my new website. Here’s an example from my homepage:

Text Block Color Overrides Example: Sisu Site Shop Home Page

Squarespace’s Styling Text Guide

10 | USPS Shipping Labels

If you are shipping physical products in the US, Squarespace has a great update for you. Shipping Labels update was released mid-December, 2021. This new feature streamlines the shipping process as it allows you to create shipping labels for your products through your orders detail page for physical products through a partnership with USPS. 

The feature was added to allow you to streamline your shipping processes. The update is available to Squarespace subscribers on the Business plan and above. So if you are based in the US and have your account in $USD, on the business plan or higher, and looking at a physical products order you will have the option. To access your order's details view of a physical goods order. From the Home menu, click on Commerce > Orders > Pending Orders. Edit details as needed. Then click Purchase Label. 

Currently, the rates are discounted about 10% from retail and are working towards additional commercial discounted rates in the future. 

Limitations for this service include only US currency and shipping addresses. Currently does not support media mail but hope to in the future. 

Squarespace’s Buy and Print a Shipping Label Guide

11 | Video Pages

The first update for 2022 and the second video update in less than a year was released in early February. Video Page update for Squarespace 7.1 allows for native video hosting on Squarespace for the first time. Designed to allow for showcasing, merchandising and easily organizing video content libraries.

The Video pages are available to all Squarespace customers with a limit of 30 minutes total of natively hosted high-resolution content. Users can still host an unlimited amount of video when their content is on YouTube or Vimeo. 

Higher native hosting options are also available with a paid Member Area plan. The hosting limits are specific to your plan level. The Starter plan, priced at $10/mo. allows for 5 additional hours, Core plan, priced at $20/mo. allows for 20 additional hours and Pro plan, priced at $40/mo. allows for 50 additional hours.

With a Member Area plan you can choose to sell membership access to your video library with a one-time or recurring fee subscription.

You can customize the title, description, URL, add a feature image and excerpt details. Additionally, you are able to add your videos to one or more categories. Similar to the blog functionality, you can have draft, published and scheduled statuses.

I for one am excited about the updates and look forward to familiarizing myself even more with all the newly available features.

Online Business Series Posts:

Building a website? 5 things to do before you start

How to use Square as your payment processor in Squarespace 7.1

Must use free tools for your 1st year in business: my top 3

Dubsado Series Posts:

Dubsado CRM—the right choice for my creative small business—maybe yours too!

Getting Started with Dubsado CRM | Part 1 ~ Essential Brand Settings

Getting Started with Dubsado CRM | Part 2 ~ How to Embed Your Lead Capture Forms in Squarespace 7.1




Know someone who could benefit from this article? Please share it with them:

See this social icon list in the original post

Hej! Thanks for stopping in! Sisu Site Shop is an online business strategy + custom brand and web design studio. We sell Squarespace 7.1 templates, offer VIP Days for brand + web design + Dubsado setups for small businesses including Artists, Educators, and Hospitality Professionals. We serve clients worldwide from our current home base in Montana. We help you start, organize, and modernize your business, brand, and website so that you can sell, serve, and stand out online. If you have a project in mind we’d love to learn more about it!

When you’re ready here are three ways we can help you:

  1. Template Shop & Semi-Custom Website Design: Our custom Squarespace 7.1 templates provide a professionally designed foundation for you to build upon and customize! You can even upgrade to a semi-custom service and we’ll customize the template with your brand and photos.

  2. Online Business VIP Day: Our Online Business Intensive can help you create a strategy, build a simple website, or knock out admin to-dos!

  3. Custom Brand Identity, Website, & Automation Design: Truly elevate your online presence & processes
    for Squarespace 7.1 & Dubsado. We will partner with you to craft a brand & website you can’t wait to share!

We also have many tips and resources about strategy, design, and starting an online business. If we were chatting face to face, we’d offer you some tea and invite you to hang out for a while. Please consider this invitation to explore our site and learn more about our journey with the same intention!

When you’re ready to start your journey, build your business, and find your freedom, fill out our application to get started!

Related Posts…

See this gallery in the original post

You’ll Also Love…

See this gallery in the original post