Styling portfolio pages

Customize your site’s portfolio pages and projects.

Last updated July 5, 2024

Portfolio pages are stylized landing pages that link visitors to projects. You can customize portfolio pages to match your brand and style. Use this guide to find the style options for portfolio pages and their individual projects. To create a portfolio page and add content, visit Portfolio pages.

Portfolio pages vs. portfolio projects

Portfolio pages are organized in two parts: the main portfolio page, which creates a grid of featured images or a list of links that visitors click to explore your portfolio, and the individual projects these links lead to where you add content.

Open the style options

You'll style the portfolio page and the projects in two places:

  • Portfolio page - Click Edit on the portfolio page, then click the pencil icon on the portfolio section.
  • Projects - Click the project on the portfolio page to open it, click Edit, then click the pencil icon on the section you want to style. Each project is made up of sections, and each section has its own style options.

Portfolio page

Your portfolio page displays all your projects as featured images or text links, which visitors click to open individual projects.

In the portfolio section styles, you can customize the following details:

Keep in mind:

  • These changes affect all portfolio pages using the same layout.
  • Any changes made to a specific layout will save even if you change to a new layout, so if you return to a previous layout, your settings will be restored.
  • Depending on the number of projects 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 projects, the height tweak may not have a visible effect because the section needs to be a certain height to display all the project links. Use the Vertical Link Spacing tweak instead.

Format grid layouts

Grid layouts display your projects in a grid of featured images. Visitors click the image or title text to open the project. Your options in the Format tab of section styles differ depending on the grid layout you choose.

The Grid: Simple layout displays the featured images in a grid with the project title text below the images. After selecting this layout, you can change these style tweaks:

  • Width - Select Full for the content to span the width of the section or Inset to increase the padding to the left and right of the content.
  • Height - Set the height of the section from SmallMediumLarge, or Custom. Keep in mind, section height is also affected by the amount of content present.
  • Columns - Set the grid to have 23, or 4 columns.
  • Horizontal Spacing
  • Vertical Spacing
  • Aspect Ratio - Set the aspect ratio of the images.
  • Text Alignment - Align the text Left or Center below the images.
  • Hover Effect - Add a Fade or Zoom effect when a cursor hovers over an image.
  • Hover Opacity - If you use the Fade hover effect, set the hover opacity lower for a more solid overlay or higher for a more transparent overlay.
  • Text Spacing

The Grid: Overlay layout displays the featured images in a grid with the project title text overlaying the images. After selecting this layout, you can change these style tweaks:

  • Width - Select Full for the content to span the width of the section or Inset to increase the padding to the left and right of the content.
  • Height - Set the height of the section from SmallMediumLarge, or Custom. Keep in mind, section height is also affected by the amount of content present.
  • Columns - Set the grid to have 23, or 4 columns.
  • Horizontal Spacing
  • Vertical Spacing
  • Aspect Ratio - Set the aspect ratio of the images.
  • Text Placement - Set where the text displays on the image.
  • Show Text - Choose to show text Before Hover or After Hover. Review our mobile tips how this affects mobile title display.
  • Overlay Opacity - Set the hover opacity lower for a more solid overlay or higher for a more transparent overlay.

Format hover layouts

Hover layouts display your projects as a list of links, with their featured images appearing on hover. Visitors click the link to open the project. Your options in the Format tab of section styles differ depending on the hover layout you choose. Hover layouts have a semi-transparent overlay on project featured images. It's not possible to increase or remove this:

The Hover: Fixed layout displays the project titles as links. When visitors hover over a link, the project's featured image appears in a fixed position on the page. After selecting this layout, you can change these style tweaks:

  • Link format - Choose between Inline, where links appear beside each other, or Stacked, where each link appears on its own line.
  • Selection in Front - When enabled, the link text the customer hovers over appears in front of the featured image.
  • Vertical Link Spacing
  • Delimiter - Select how to divide links in the Inline format. To learn more, review Delimiters.
  • Animation Type - Set an animation for the featured image.
  • Animation Duration - Set the speed for the featured image animation.
  • Image Size

The Hover: Follow Cursor layout displays the project titles as links. When visitors hover over a link, the project's featured image appears and follows the cursor until they hover over a different link. After selecting this layout, you can change these style tweaks:

  • Link format - Choose between Inline, where links appear beside each other, or Stacked, where each link appears on its own line.
  • Selection in Front - When enabled, the link text the customer hovers over appears in front of the featured image.
  • Vertical Link Spacing
  • Delimiter - Select how to divide links in the Inline format. To learn more, review Delimiters.
  • Animation Type - Set an animation for the featured image.
  • Animation Duration - Set the speed for the featured image animation.
  • Image Size
  • Follow Speed - Set how fast the image follows the cursor. At 0%, the image won't follow.

The Hover: Background layout displays the project titles as links. When visitors hover over a link, the project's featured image appears as the section background image and remains until they hover over a different link. After selecting this layout, you can change these style tweaks:

  • Width - Set the background image to Full Bleed or Full.
  • Height - Set the height of the section from SmallMediumLarge, or Custom. Keep in mind, section height is also affected by the amount of content present.
  • Vertical Alignment - Set the vertical link alignment.
  • Horizontal Alignment - Set the horizontal link alignment.
  • Link format - Choose between Inline, where links appear beside each other, or Stacked, where each link appears on its own line.
  • Vertical Link Spacing
  • Delimiter - Select how to divide links in the Inline format. To learn more, review Delimiters.
  • Animation Type - Set an animation for the featured image.
  • Animation Duration - Set the speed for the featured image animation.
  • Keep Last Selection - Enable this to display the featured image of the last link the visitor hovered over until they hover over another link. When disabled, the section background displays except when the visitor hovers over a link.
  • Delimiter - Select a type of delimiter to divide links in the Inline format. To learn more, review Delimiters.

Project title text

Each project's title appears on the main portfolio page, either below its featured image, overlaying its featured image, or in a list of links, depending on your layout. You can edit the title text in the project's settings. Title text follows site-wide font and color styles.

Title font

To style the project title font:

  1. While editing a page, open site styles, then click Fonts.
  2. Click Headings.
  3. Choose a font family and change other style settings.
  4. 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
  • Hover layouts - Heading 1

Keep in mind, changing the heading format affects all text on your site with that formatting. To style the font and size of title text individually, click Assign Styles, find the Title tweak for your layout, and change the style and size to Custom.

After making changes, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Title color

To style the project's title color:

  1. While editing a page, open site styles, then click Colors.
  2. Click the pencil icon on the portfolio section's color theme.
  3. Scroll down and find the Portfolio section that matches your layout.
  4. Change the color using the Project Title tweak. Each portfolio layout has its own Project Title tweak.
  5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Delimiters

On hover layouts using inline links, you can add "delimiters" or punctuation to visually separate your project 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.
  4. Scroll down and click Delimiter, then select one of the options, or choose None to hide them.
  5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
Forward_slash_delimiters_on_a_portfolio_page.png

Projects

Projects are built from page sections, so your styling options depend on what sections you add. You can add block sections, gallery sections, or auto layouts.

Style any section by clicking the pencil icon that appears when you hover over it. To learn more, visit Making style changes.

Project pagination

Links to the next and previous projects in a portfolio appear at the bottom of each project. All portfolio pages share the same pagination styles, even if they use different layouts.

Pagination font

To style the pagination font:

  1. While editing a page, open site styles, then click Fonts.
  2. Click Headings.
  3. Choose a font family and change other style settings.
  4. Under Size, use the Heading 3 slider to adjust the title size.

Keep in mind, changing the heading format affects all text on your site with that formatting. To style the font and size of title text individually, click Assign Styles, find the Pagination tweak under Portfolio: Item, and change the style and size to Custom.

After making changes, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Pagination color

The pagination color follows the color theme each project's bottom section. If projects use different color themes on their bottom sections, pagination color may vary between projects.

To style the pagination color:

  1. While editing a page, open site styles, then click Colors.
  2. Click the pencil icon on the portfolio section's color theme.
  3. Scroll down and find the Portfolio: Item tweaks.
  4. Change the title text with the Project Pagination Title tweak, and change the pagination icon with the Project Pagination Icon tweak.
  5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Changes affect all sections using the same color theme.

Fonts and colors

Colors and fonts on the portfolio page and projects follow your site-wide font and color tweaks. You can also change the color theme of the portfolio page section and the sections in projects in their section style editors.

In your portfolio's color theme, use the Portfolio color tweaks that match your layout. In the color theme of each project's last section, use the Portfolio: Item tweaks to style the pagination at the bottom of each project. This can vary between projects depending on what color theme the bottom section uses. 

Mobile

On mobile devices or tablets, portfolio layouts stack vertically in a single column regardless of the number of columns or the link format on larger browsers.

Hover effects aren't supported on most mobile browsers, so if you're using the Grid: Overlay layout with the titles set to appear After Hover, the titles may not appear for visitors on 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. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.