Skip to content
  • There are no suggestions because the search field is empty.

Portfolio

How to create a professionally designed portfolio for your HubSpot website

Showcase your projects, photography, products, and more with professionally designed layouts, cool features, and interactive elements to really wow your potential customers.


What is a Portfolio in POWER Pro?

A portfolio is a curated collection of work, projects, or products displayed in an organized, visually appealing format.

Portfolio uses:

  • Project showcases
  • Photography galleries
  • Product collections
  • Case studies
  • Design work
  • Creative portfolios
  • Service examples

Portfolio features:

  • Multiple layout options
  • Image-focused design
  • Interactive elements
  • Lightbox galleries
  • Filtering capabilities
  • Navigation between items
  • Professional presentation
portfolio
 

Can I add a portfolio to other templates?

Portfolio Module Availability

The portfolio template uses the Sec Image Boxes module that can be added to any page with the drag-and-drop editor or saved sections.

Module flexibility:

  • Not limited to portfolio template
  • Add to any page
  • Use in custom sections
  • Combine with other modules
  • Saved sections feature

Setup Instructions

Create a stunning, organized, interactive portfolio by leveraging one of our most powerful modules, POWER Sec Image Boxes, and then tie the pages together seamlessly with the POWER Previous Next Navigation module.

How do I create a portfolio?

Creating a Portfolio

Create a stunning, organized, interactive portfolio by leveraging one of our most powerful modules, POWER Sec Image Boxes, and then tie the pages together seamlessly with the POWER Previous Next Navigation module.

Portfolio components:

  1. Portfolio Overview page (index/grid)
  2. Individual portfolio item pages (optional)
  3. Navigation between items (optional)

Key modules:

  • POWER Sec Image Boxes: Portfolio grid/overview
  • POWER Previous Next Navigation: Item-to-item navigation
 

How do I create a Portfolio Overview page?

Create a Portfolio for your Website

Content → Website Pages

To get started, first Create a Website Page using the Portfolio Overview template from your child theme.

Hint: search portfolio in the box ;)

Template location:

  1. Navigate to Content → Website Pages
  2. Create new Website Page
  3. Select template from child theme
  4. Search for "portfolio"
  5. Choose "Portfolio Overview"

Portfolio Overview template benefits: The best part about this template - it already includes all 3 pre-configured layouts that you can use as a starting point. So whether you want a 3-column grid, 4-column layout, or even a masonry design, all you have to do is start swapping out the content and adjusting the settings.

Pre-configured layouts:

  1. 3-column grid: Balanced layout, most common
  2. 4-column layout: Compact grid, many items
  3. Masonry design: Dynamic, varied heights

Template workflow: Unless you're keeping the settings exactly as they are configured for your chosen layout, we recommend keeping the other two modules on the page so you can refer to the module settings if you have questions while making changes.

Best practice: Keep unused layout modules on page as reference until you finalize your configuration.


Portfolio-Overview-Template

How do I customize portfolio layouts?

Easily Update Portfolio Layouts

In just a few clicks, you can customize the default layouts included to the configuration you like best.

Customization example:

3 Column with text below the box: For example, you can modify the 3 Column layout to include the text description below the box with this setting:

Layout modification: Change Box Style from "Content Overlay" to "Content Below"

Compare the Content Overlay and Content Below settings:

Content Overlay:

  • Text overlays image
  • Compact presentation
  • Modern design
  • Requires overlay for readability

Content Below:

  • Text appears below image
  • Image fully visible
  • Traditional card layout
  • Clear content separation

Customization tips:

  • Start with pre-configured layout
  • Adjust one setting at a time
  • Preview changes
  • Test on mobile
  • Keep reference layouts until finalized

image-boxes-content-below

 

How do I create portfolio content pages?

Create Content Pages for your Portfolio

Content → Website Pages

If you aren't linking your portfolio to external pages/links, there are two options to explore.

Portfolio content options:

  1. Gallery / Lightbox
  2. Individual Content Pages

What is the Gallery/Lightbox option?

Gallery / Lightbox

The first option is to convert your portfolio into a Gallery. With this setting, your images will open in a lightbox after the user clicks on the image box.

Gallery/Lightbox behavior:

  • Click image to open lightbox
  • View full-size images
  • Navigate between images
  • No separate pages needed
  • Simple implementation

image-box-gallery

What are Content Pages?

Content Pages

The second option is to create individual pages for your portfolio to showcase your work. The Case Study template is a great option to use as a starting point for your portfolio pages.

Content pages benefits:

  • Detailed project information
  • Multiple images per project
  • Rich content (text, video, etc.)
  • Better SEO
  • Professional presentation
  • Full storytelling capability

When to use Content Pages:

  • Detailed project showcases
  • Case studies
  • Complex portfolios

One of the nice features of this template is that it already includes the POWER Previous Next Navigation module, which allows you to configure links between the pages of your portfolio.

Content page structure:

  • Project title and description
  • Multiple images
  • Project details
  • Client information
  • Results/outcomes
  • Navigation to other items

Review documentation for Previous Next Navigation.

previous next navigation shown on portfolio template