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.
The Grid: Simple layout displays the featured images in a grid with the sub-page 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 Small, Medium, Large, or Custom. Keep in mind, section height is also affected by the amount of content present.
- Columns - Set the grid to have 2, 3, 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 sub-page 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 Small, Medium, Large, or Custom. Keep in mind, section height is also affected by the amount of content present.
- Columns - Set the grid to have 2, 3, 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 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:
The Hover: Fixed layout displays the sub-page titles as links. When visitors hover over a link, the sub-page'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 sub-page titles as links. When visitors hover over a link, the sub-page'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 sub-page titles as links. When visitors hover over a link, the sub-page'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 Small, Medium, Large, 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.
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:
- While editing a page, open site styles, then click Fonts.
- Click Headings.
- Choose a font family and change other style settings.
- 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, hover over Done and click Save.
Title color
To style the sub-page title color:
- While editing a page, open site styles, then click Colors.
- Click the pencil icon on the portfolio section's color theme.
- Scroll down and find the Portfolio section that matches your layout.
- Change the color using the Project Title tweak. Each portfolio layout has its own Project Title tweak.
- Hover over Done and click Save.
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:
- 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 and click Delimiter, then select one of the options, or choose None to hide them.
- Hover over Done and click Save.
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:
- While editing a page, open site styles, then click Fonts.
- Click Headings.
- Choose a font family and change other style settings.
- 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, hover over Done and click Save.
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:
- While editing a page, open site styles, then click Colors.
- Click the pencil icon on the portfolio section's color theme.
- Scroll down and find the Portfolio: Item tweaks.
- Change the title text with the Project Pagination Title tweak, and change the pagination icon with the Project Pagination Icon tweak.
- Hover over Done and click Save.
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:
- 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.