Customize your site’s portfolio pages and subpages.

Portfolio pages are stylized landing pages that link visitors to sub-pages. 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 sub-pages. To create a portfolio page and add content, visit Portfolio pages.

Portfolio pages vs. portfolio sub-pages

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 sub-pages these links lead to where you add content for different projects, galleries, or other content. 

Open the style options

You'll style the portfolio page and the sub-pages in two places:

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

Portfolio page

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

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

• Format - Set the portfolio page’s layout. Each grid layout and hover layout has unique formatting options.
• Background - Add a background image, a background video, or background art behind the sub-page links.
• Colors - Set your site’s colors or change the portfolio’s section theme.

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 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.

Format grid layouts

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

Format hover layouts

Hover layouts display your sub-pages as a list of links, with their featured images appearing on hover. Visitors click the link to open the sub-page. 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 sub-page featured images. It's not possible to increase or remove this:

Sub-page title text

Each sub-page'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 sub-page's settings. Title text follows site-wide font and color styles.

Title font

To style the sub-page 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 sub-page 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 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.
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.

Sub-pages

Sub-pages 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.

Sub-page pagination

Links to the next and previous sub-pages in a portfolio appear at the bottom of each sub-page. 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 sub-page's bottom section. If sub-pages use different color themes on their bottom sections, pagination color may vary between sub-pages.

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 sub-pages follow your site-wide font and color tweaks. You can also change the color theme of the portfolio page section and the sections in sub-pages 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 sub-page's last section, use the Portfolio: Item tweaks to style the pagination at the bottom of each sub-page. This can vary between sub-pages 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.