SQUARESPACE: Sections
Sections are the backbone of your website’s design—defining its structure, flow, and visual impact.
Every single page on the Squarespace 7.1 website is made up of different sections. These essential building blocks are typically stacked on top of one another to create a full cohesive page.
🎞️ WATCH A VIDEO
To add a new section to a page on your website first click EDIT on the top left-hand corner to enter editing mode. You will then look for the blue ADD SECTION button at the bottom of the existing sections.
When you click the add section this window will pop up and you can choose to add a blank section to start from scratch or you can choose one of the predesigned sections created by Squarespace. They really have so many different sections of design to choose from.
🎞️ WATCH A VIDEO
Change section styles
You can make sections follow your site-wide styles in the site styles panel, or you can edit an individual section's layout, background, and color to give your pages more variety or contrast. To style individual sections, click Edit on the page, hover over the section, and click Edit Section or the pencil icon. Block sections include three tabs: Design, Background, and Color.
Save sections
When you create a page section layout you want to reuse, hover over the section and click the heart icon to add it to your saved sections. Saving a section creates a "snapshot" of the layout that you can add whenever you want. This is great for websites where you need to reuse a particular layout on multiple pages.
To use a saved section:
Click Edit on a page, then click Add Section.
Click My Saved Sections.
Select the saved section you want to add.
Make any changes to the layout.
Keep in mind:
You can have up to 50 saved sections on your site.
Saved sections aren't linked to the original section. Updating the original section won't update the saved version or anywhere else you've added it.
Saved sections preserve content and design elements. Some settings, like storage connections in form and newsletter blocks, won't be carried over from the original section. Set up all form and newsletter storage on saved sections manually.
It's not possible to save collection page sections or footer sections, and it's not possible to add saved sections to your footer.
The duplicate icon allows you to duplicate a section which is super handy to use as a backup while you’re working on your site.
You can use these reorder arrows to move the sections up or down on the page, above or below your other existing sections.
Remove will permanently delete the section from the page.
It’s important to know that deleted sections can not be restored so make sure to save or duplicate a section before deleting it.
EDITING YOUR SITE WITH FLUID ENGINE
Fluid Engine is the primary content editor for sites on Squarespace version 7.1. In all page types, portfolio projects, and your site's footer, block sections use Fluid Engine.
🎞️ WATCH A VIDEO
To view the Grid on any section around your site while you’re in editing mode press G on your keyboard, you can then click and drag blocks around the section and they will automatically snap into position along the grid making for a super flexible editor easy for customization. The grid does automatically take on these default settings but you can customize those for each section uniquely on the page and you can do that by clicking into the edit section and then under this format you’ll find all of the grid styling options. Under row count you can increase or decrease the number of rows in a section. More rows make the section longer, less make the section shorter, and if you click out of this window and back into the section, you can also increase and decrease the number of rows in a section by clicking and dragging this little blue arrow down here at the bottom, that comes in handy if you’re actively editing the section and you don’t want to click back into this editing window just to change the row count.
A gap is going to refer the Gap between the each unit of the grid, you can choose to have no Gap by choosing this little icon , you can choose the default 11 by 11 gap, or click the three dots here to customize the Gap both vertically and horizontally.
Next is Fill screen and if this is toggled on you’ll notice a padding above and below your section. You can adjust the height of the padding by choosing small, medium or large, or clicking on the three dots to customize the padding yourself. And you can also adjust the alignment of your section within that padding. If you toggle the fill screen Off the grid will take up the entire section from top to bottom with nothing.
The fluid engine grid might seem a little bit daunting at first if you’ve never worked with it before, but if you just come in here and start playing around with settings, move blocks around the grid, you’ll see how easy it is to work with and allows for so much customization.
GALLERY SECTION
Gallery sections are a type of auto layout good for showcasing images without a lot of text.
🎞️ WATCH A VIDEO
COLLECTION PAGE SECTION
Use collection pages to display a collection of items, like blog posts or events. Blog, events, portfolio, and store pages are all collection pages.
🎞️ WATCH A VIDEO
💡 HELPFUL INFORMATION
SITE HEADER
Your site header is where your navigation and title or logo display. The header looks the same throughout your site and plays a big role in how visitors navigate and interact with your content. It’s positioned at the top of your site.
🎞️ WATCH A VIDEO
When you create your site, your header may already include your site title, navigation links, or other elements depending on the design you chose.
Navigation links
To change the navigation links, add, edit, or delete pages in the Pages panel. To rearrange the links:
1. Click Edit in the top-left corner of your site preview.
2. Hover over the header and click Edit site header.
3. Click the navigation links, then click the pencil icon.
4. Click and drag the navigation links to put them in your preferred order.
Please note that rearranging the links here also rearranges them in the Pages panel.
As you build your header, you can set site-wide styles and choose how the header looks on both computers and mobile devices.
FOOTER SECTION
Customize your footer using hover over the footer, and click Edit footer to add and edit its sections. You can add blank block sections or footer-style sections with pre-built block layouts. It's not possible to add other section types to your footer.
🎞️ WATCH A VIDEO
🌱 ACTION STEPS
1. Check all the available Auto Layouts sections, and add to your website any section you need
2. Select the Color Themes for your website pages, using your Mood Board
3. Customize your Header, and add a Logo of your Brand (if you have one)
4. Customize the Footer of your website
☝🏼 Remember to SAVE all the updates
The instructions and video tutorials in this guide are sourced from the Squarespace Help Center to provide accurate and up-to-date information
NEED SUPPORT?