Add Pages, Sections & Blocks
Fluid Engine is Squarespace’s latest drag-and-drop editing system on version 7.1 (released in July of 2022 to replace the Classic Editor). Fluid Engine's adaptable grid allows you to position and resize content blocks freely—even layering them over one another.
Insider Tip! When creating your design on Squarespace, you'll need to create two distinct layouts: one for desktop users and another for mobile users. Use the device icons in the top-right corner to switch between and customize these layouts. It is crucial to make corresponding design changes to the mobile view anytime you change content on the desktop view. This will not be done automatically.
How to Add a Page
You have two options for adding a page:
starting fresh with a blank or custom page layout
duplicating an existing page
How to Add a New Page
From the Home Menu, click Pages. Then, select the + icon next to Main Navigation (to add a page that will be included in your header navigation) or Not Linked (to add a page that will be live on your site but not linked in the header navigation).
Once you click the + icon, choose from a wide range of purpose-built pages, click dropdown to organize your navigation items, or click Link to add a link to an external site. Squarespace has designed different types of pages with unique functionality. A store page, for example, has specific e-commerce features. Click into each page type to see the available layouts and features.
After you have added a page, click the settings (gear) icon next to the name of the page to open the page settings.
General – Change your page title, navigation title, URL slug, enable or disable the page (you can use this feature when you are working on a page but don’t want it to be live to the public), or add a password (users will need to enter the password to see the page). This is also where you will go to duplicate a page.
Navigation – In this tab, you can show or hide the site header or footer on this page. (The default is to show both the header and footer on every page.)
SEO – SEO (Search Engine Optimization) helps boost your visibility in search results. The tools in the SEO tab make it simpler for users to locate your page when they search for it. You can find more details on SEO best practices in the SEO Checklist unit of this guide.
Social Image – The social image feature allows you to upload an image users will see when a link to that page is shared on social media. (This is also the image that appears when you text a link to a friend or family member.) If you don’t add a social image to each page, Squarespace will use your site logo as the default. Please know that it is not necessary to add a unique social image to each page. It is best practice to simply use one image as the default for the site. We have a Add Social Sharing Image page later in this guide.
Advanced – Use the Advanced tab to add custom code to the page header.
Click Save to save the changes you have made to the page settings.
How to Duplicate a Page
There are a few reasons you might want to duplicate a page. You may want to store a copy of all of the original pages from the template so that you can revert to them in the future (do this!). You may also want a new page with the same format as an existing page.
To duplicate a page, click the settings gear icon next to the name of the page you want to duplicate to open the page settings.
Under the General tab, scroll down and select Duplicate Page. Click Confirm.
Once the page is duplicated, you will want to go into the page settings and change the Page Title, Navigation Title, and URL Slug.
How to Add a New Section
To add a Fluid Engine section, click Edit on the page you would like to work on.
Hover over the space where two sections meet and click Add Section.
Click Add a blank section to start from scratch, click Saved sections to add a section you have previously saved, or choose from dozens of different pre-built sections. If you see an i icon in the top-right corner of the pre-built section, it means the section isn’t built using the Fluid Engine grid system and you will be limited in your ability to modify the layout.
Once you have selected a section type, you can edit the design settings for that section. Hover anywhere in the section to activate the section editing tools: + Add Block, Add Section, the section height blue arrow icon, and the section settings tool in the top-right corner.
+ Add Block – You will click this button to choose from dozens of block types. (More on adding blocks to sections in the “How to Add a New Block” section below.)
Add Section – We just covered this tool in the three steps above.
Blue Arrow Icon – Click and drag the blue arrow icon in the bottom-right corner to adjust the height of the section.
Section Settings
Edit Section – This feature allows you to edit the design, background, and colors of the content items in that section. The Design tab controls the Fluid Engine grid system allowing you to change the number of rows, the gap between rows and columns, how far the grid stretches across the screen, and what dividers are used (if any). The Background tab allows you to add an image or video to the background of the section. The Colors tab allows you to select the color theme of the section.
Duplicate Section – Click the Duplicate icon (two squares) to duplicate the section. The new section will appear below the original.
Save Section – Click the Save Section icon (heart) to save the section for use on another page. This allows you to add copy of that saved section by clicking Add Section as outlined above in step #3.
Move Section Up or Down – Click the Move Up or Move Down icons (arrow up and arrow down) to shift the section up or down on the page.
Remove Page – Click the red Remove button to delete the section.
Click Save to save the changes you have made to the section and page.
How to Add a New Block
Click Edit on the page you want to work on.
Hover in the section and click + Add Block.
Click the block type you want to add. (To learn more about each block type, visit Squarespace’s Adding content with blocks tutorial.)
Once you have added a block, you can use the following tools:
Edit Block – Click the pencil icon to open the block editing window.
Pin Block – Click the pin icon to pin the block so it stays in one place while the user scrolls through the rest of the content in the section.
Align Block – Depending on the type of block, you may be able to specify the vertical and horizontal alignment of the block.
Move Block Forward/Backward – Click the Move Forward or Move Backward icons (square with dotted square) to set the block in front of or behind another block on the z-axis. This is important when the design uses overlapping elements.
Duplicate Block – Click the Duplicate icon (two squares) to duplicate the block inside of that section.
Move and Resize Block – Click and drag the block to move it to another location within that section. Click and drag the nodes around the edges of the block to resize it.
Add Section – We just covered this tool in the three steps above.
Click Save to save the changes you have made to the blocks in the section.
