Use portfolio pages to create stylized landing pages that link visitors to sub-pages. This is a great way to organize and showcase galleries, projects, portfolio highlights, and other content in one place.
This guide is for version 7.1. For a similar effect in version 7.0, use a template with a grid index page or create featured image navigation. In the Squarespace app, you can't add new portfolio pages or edit sub-pages.
Add a portfolio page
To add a portfolio page:
- In the Home menu, click Pages, then click + next to the navigation section where you want to add the page.
- In the menu, click Portfolio and choose a layout. You can change this later.
- Enter a page title and press Enter.
- Click Edit, then click the pencil icon to style the section.
- Click + to add a sub-page or click an existing sub-page, then click Edit to add your own content.
- Add and edit more sub-pages until your portfolio page is complete.
Portfolio page layouts
Choose one of the following portfolio page layouts:
- Grid: Simple - Arranges the featured images in a grid layout. Title text for each sub-page appears below the images.
- Grid: Overlay - Arranges the featured images in a grid layout. Title text for each sub-page overlays the images.
- Hover: Background - Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page featured image replaces the section background.
- Hover: Fixed - Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page featured image displays smaller in a fixed position in the section.
- Hover: Follow Cursor - Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page featured image displays smaller and follows the cursor as it moves.
To change the layout:
- Click Edit on the portfolio page.
- Hover over the portfolio section and click the pencil icon.
- Under the Format tab, click Layout and click the layout you want.
- Hover over Done and click Save.
Keep in mind:
- Any changes made to a specific layout will save, so you can always switch back to a previous layout. For more details, see Style the portfolio section.
- Most mobile devices don't support hover effects, so your visitors' experience may vary depending on what device they use to visit your site.
- Hover layouts use a slight overlay on sub-page featured images. It's not possible to increase or remove this.
Style the portfolio section
To style the portfolio section of your portfolio page:
- Click Edit on the portfolio page.
- Hover over the portfolio section and click the pencil icon.
- Under the Format tab, change the layout or make style changes to the current layout, like spacing, image aspect ratio, and hover effects.
- Click the Background tab to add a background image, video, or art.
- Click the Colors tab to choose a color theme. Changes in this section override global styles in the site styles panel of your site.
- Hover over Done and click Save.
These changes affect all portfolio pages using the same layout.
Depending on the number of sub-pages in your portfolio page, some style tweaks may not affect your layout. For example, if you have a hover: background layout with a large number of sub-pages, the height tweak may not have a visible effect because the section needs to be a certain height to display all the sub-page links. Use the Vertical Link Spacing tweak instead.
Delimiters
On some hover layouts using inline links, you can add "delimiters" or punctuation to visually separate your sub-page links.
To select or hide the delimiters:
- Click Edit on the portfolio page.
- Hover over the portfolio section and click the pencil icon.
- Under the Format tab, set Link Format to Inline. Scroll down to Delimiter.
- Click Delimiter, then select one of the options, or choose None to hide them.
- Hover over Done and click Save.
Add a sub-page
Sub-pages are where you'll add the content for your portfolio. Sub-pages display as featured images or links on your portfolio page, which visitors click to open the sub-pages.
Use sub-pages to organize your work or projects. For example, if you're a photographer, you can use sub-pages to categorize your images. If you're a graphic designer, you can use sub-pages to showcase work you've done for different clients.
To add a sub-page:
- In the pages panel, click your portfolio page, then click +.
- Click Blank or choose a layout.
- In the General tab of project settings, add a featured image and title. You can also edit the URL slug.
- Click SEO to add an SEO title and SEO description.
- Click Social image to add an alternate social sharing image.
- Click Save to create the sub-page.
- Click Edit on the sub-page to add sections and blocks.
- Click Save to publish your changes.
Keep in mind:
- You can add up to 60 sub-pages to a portfolio page.
- It’s not currently possible to move sub-pages between portfolio pages.
- It's not possible to turn sub-pages into standalone pages outside the portfolio. Sub-pages are collection items, dependent on the main portfolio collection page, similar to blog posts in a blog page.
- Portfolio sub-pages can't be individually password protected, disabled, or hidden from search engine results. To hide portfolio sub-pages temporarily, password protect the entire portfolio page or disable it.
- Portfolio sub-pages display pagination links to the next and previous sub-pages in the portfolio at the bottom of the page. It's not possible to hide these.
Add, edit, or remove a featured image
You can change the featured image of a sub-page at any time. To replace a demo image or to add an image to a blank sub-page, follow these steps:
- In the pages panel, click your portfolio page.
- Hover over the sub-page and click ..., then click Settings.
- If you're removing a demo image or a previously added image, click Remove Image first.
- To add an image from your computer, click Image.
- To edit the image, click Image Editor.
- After making changes, click Save.
Sub-page title text
Title sub-pages to give visitors a sense of the project's content. The sub-page's title text displays below its landing page featured image or as an overlay, depending on your layout. Clicking the title opens that sub-page. You can edit the title text in the sub-page's settings.
Font
To style the sub-page title font:
- While editing a page, open site styles, then click Fonts.
- Click Headings.
- Under Size, use the corresponding heading slider to adjust the title size.
The slider you use depends on your portfolio page layout:
- Grid: Simple - Heading 4
- Grid: Overlay - Heading 3
- All hover layouts - Heading 1
Keep in mind, changing the size of a heading format affects all text on your site with that formatting.
After making changes, hover over Done and click Save.
Color
To style the sub-page title color:
- Click Edit on the portfolio page, then hover over the portfolio section and click the pencil icon.
- In the Format tab, take note of the Layout type.
- Click Colors, then click the pencil icon on your chosen theme.
- Scroll down and find the Portfolio heading that matches your layout.
- Change color using the Project Title tweak. Each portfolio layout has its own Project Title tweak.
- Click Save.
Hover effects on mobile
Hover effects aren't supported on most mobile devices. To ensure that the titles appear on all devices for the Grid: Overlay layout:
- Click Edit on the portfolio page, then hover over the portfolio section and click the pencil icon.
- In the Format tab, select Before Hover from the Show Text drop-down menu.
- Hover over Done and click Save.
Rearrange sub-pages
To rearrange the order of a portfolio page, click and drag the sub-pages in the side panel.
Edit sub-page settings
To edit general, SEO, and social settings of sub-pages:
- In the Pages panel, click your Portfolio Page.
- Hover over a sub-page in the side panel.
- Click ..., then click Settings.
- Click Save to publish your changes.
Delete sub-pages
To delete a sub-page:
- In the Pages panel, click your portfolio page.
- Hover over a sub-page in the side panel
- Click ..., click Delete, then click Confirm.
It's not possible to delete the portfolio section as a whole. To learn more, visit Collection page sections.