Portfolio pages

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:

1. In the Home menu, click Pages, then click + next to the navigation section where you want to add the page.
2. In the menu, click Portfolio and choose a layout. You can change this later.
3. Enter a page title and press Enter.
4. Click Edit, then click the pencil icon to style the section.
5. Click + to add a sub-page or click an existing sub-page, then click Edit to add your own content.
6. 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:

1. Click Edit on the portfolio page.
2. Hover over the portfolio section and click the pencil icon.
3. Under the Format tab, click Layout and click the layout you want.
4. 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:

1. Click Edit on the portfolio page.
2. Hover over the portfolio section and click the pencil icon.
3. Under the Format tab, change the layout or make style changes to the current layout, like spacing, image aspect ratio, and hover effects.
4. Click the Background tab to add a background image, video, or art.
5. Click the Colors tab to choose a color theme. Changes in this section override global styles in the site styles panel of your site.
6. 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:

1. Click Edit on the portfolio page.
2. Hover over the portfolio section and click the pencil icon.
3. Under the Format tab, set Link Format to Inline. Scroll down to Delimiter.
4. Click Delimiter, then select one of the options, or choose None to hide them.
5. 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:

1. In the pages panel, click your portfolio page, then click +.
2. Click Blank or choose a layout.
3. In the General tab of project settings, add a featured image and title. You can also edit the URL slug.
4. Click SEO to add an SEO title and SEO description.
5. Click Social image to add an alternate social sharing image.
6. Click Save to create the sub-page.
7. Click Edit on the sub-page to add sections and blocks.
8. 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:

1. In the pages panel, click your portfolio page.
2. Hover over the sub-page and click ..., then click Settings.
3. If you're removing a demo image or a previously added image, click Remove Image first.
4. To add an image from your computer, click Image.
5. To edit the image, click Image Editor.
6. 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:

1. While editing a page, open site styles, then click Fonts.
2. Click Headings.
3. 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:

1. Click Edit on the portfolio page, then hover over the portfolio section and click the pencil icon.
2. In the Format tab, take note of the Layout type.
3. Click Colors, then click the pencil icon on your chosen theme.
4. Scroll down and find the Portfolio heading that matches your layout.
5. Change color using the Project Title tweak. Each portfolio layout has its own Project Title tweak.
6. 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:

1. Click Edit on the portfolio page, then hover over the portfolio section and click the pencil icon.
2. In the Format tab, select Before Hover from the Show Text drop-down menu.
3. 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:

1. In the Pages panel, click your Portfolio Page.
2. Hover over a sub-page in the side panel.
3. Click ..., then click Settings.
4. Click Save to publish your changes.

Delete sub-pages

To delete a sub-page:

1. In the Pages panel, click your portfolio page.
2. Hover over a sub-page in the side panel
3. 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.