All the Squarespace 7.1 Sections (and how to use them)
Does your Squarespace website use the classic editor, the fluid engine or list sections? How about a gallery section? Not sure?
The fact is, your website could have all of these sections, so it’s important to be able to recognize each one. And, whether you’re creating a new site, blogging, or just doing a few updates, you’ll need to know how to use some or all of these Squarespace sections.
Classic Editor Sections
The Classic Editor was the default editor for Squarespace until mid-2022, when the Fluid Engine Editor was introduced. It’s still the editor for 7.0 websites and blogs. So, if you plan on blogging you will need to know how to use the Classic Editor, even if the rest of your website uses Fluid Engine sections.
Classic editor has 12 column grid where blocks are pushed into place with the help of spacers. It’s kind of like playing Tetris with your blocks.
Am I using Classic Editor?
To figure out if your section uses the Classic Editor:
1. Click on the Edit button at the top of the page
2. Hover over the section
3. A Classic Editor section will have a button at the top left of the section with the word “UPGRADE”
*The UPGRADE button will change the section over to a Fluid Engine section and this can affect your layout. You can undo the change by hitting the undo arrow, but once you hit save it is permanent. You cannot upgrade blog pages to Fluid Engine.
How do I add blocks to Classic Editor Section?
1. Click on the Edit button at the top of the page
2. Hover over the section
3. Click on an insertion point (+) to add your block
4. To move your block up, down or to the side, add another block or a spacer block
5. Drag blocks into place as needed
Fluid Engine Sections
I love how much you can do with the Fluid Engine editor, latest drag and drop editor from Squarespace. You can layer blocks on top of one another, create split layouts where your blocks go all the way to the edges and adjust your mobile layout. You place each block exactly where you want it, independent of the other blocks.
The only thing that’s missing right now for me is the ability to adjust at different screen sizes. I want to adjust the tablet size as easily as the phone size.
Fluid Engine works on a 24 column grid instead of the previous 12 in the Classic Editor. You can adjust the spacing between the rows and columns.
Am I using the Fluid Engine editor?
To figure out if your section uses the Fluid Engine Editor:
1. Click on the Edit button at the top of the page
2. Hover over the section
3. A Fluid Engine section will have a button at the top left of the section “+ ADD BLOCK”
How do I add blocks to Fluid Editor Section?
1. Click on the Edit button at the top of the page
2. Hover over the section
3. Click the + ADD BLOCK button and choose your block
4. Drag your block into the exact place you would like it to be
Mobile View
Once you are done adding blocks to the desktop view of your section, make sure you check out the mobile view by clicking the phone icon at the top right of the page. You can adjust the placement of all your blocks in mobile, as well as the number of rows in the section.
Auto Layout (List) Sections
Auto Layout Sections are used when you have a layout that needs to be repeated in a section. You simply add your information and the layout is created automatically (so there is the name).
It’s used for things like showing team members with their pictures and info, brief service descriptions and testimonials. You can show a simple list (rows and columns), a carousel or a slideshow.
You cannot add other blocks to an Auto Layout section. There is a title and button available for the section. Each of the items (ex: team members) can also have a title, description, image & button.
To add an Auto Layout section, choose a People, Services or Testimonial section and look for the ⓘ icon in the premade section layouts. These are list sections.
Am I using an Auto Layout Section?
To figure out if your section is a list or auto layout:
1. Click on the Edit button at the top of the page
2. Hover over the section
3. A popup will appear on the right with EDIT CONTENT & EDIT SECTION
How do I add or edit content in an Auto Layout Section?
1. Click on EDIT CONTENT in the popup
2. Click on the Content tab
3. Use the > to edit any of the items or add a new item by clicking ADD
You can use the Elements tab to choose the elements (button, title, etc.) you want shown for the section and items. Use the Design tab to change how the items are displayed.
Gallery Sections
Gallery sections work a lot like Auto Layout sections. In both of them you pick a layout and then add your content. The difference in these sections are really in the features they have.
Gallery sections have several more layout options. There are 3 grid layouts: simple, strips and masonry. There are also 3 slideshow layouts: simple, full and reel.
You can add descriptions and links to all the images, but there are no buttons available. Gallery sections do not have a title.
To add a Gallery section, choose an Image section from the premade layouts and look for the ⓘ icon.
Am I using a Gallery Section?
To figure out if your section is a gallery section:
1. Click on the Edit button at the top of the page
2. Hover over the section
3. A popup will appear on the right with EDIT GALLERY & EDIT SECTION
How do I add or edit images in a Gallery Section?
1. Click on EDIT GALLERY in the pop-up
2. Click + to add an image
3. Optional: Add a Description and/or Link
You can drag the images in the Gallery editing popup to change the order of the images.
To change the design of the gallery you will need to choose EDIT SECTION in the section popup.
These are the main sections that make up a Squarespace website, but there are a few others that you could run into. Squarespace has a few specialty pages/sections such as Events, Products and Portfolios.
Still, Classic Editor, Fluid Engine, Auto Layout and Gallery Sections are the most common sections and knowing these will help with your everyday website activities, like adding and editing images & text.
Don’t want to do it yourself? Let’s work together to make it easy!
I’ll take care of the design, coding and details, while you get back to business.
