Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

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

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 thumbnail images in a grid layout. Title text for each sub-page appears below the images.
  • Grid: Overlay - Arranges the thumbnail 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 thumbnail 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 thumbnail 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 thumbnail 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 select the layout you want.
  4. Click Save.

Most mobile devices don't support hover effects, so your visitors' experience may vary depending on what device they use to visit your site.

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 or video.
  5. Click the Colors tab to choose a color theme. Changes in this section override global styles in the Design panel of your site.
  6. Click Save.

These changes affect all Portfolio Pages using the same layout.

Add a sub-page

Sub-pages are where you'll add the content for your portfolio. Sub-pages display as thumbnail 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 select a layout.
  3. In the General tab of project settings, add a thumbnail image and title. You can also edit the URL slug.
  4. Click SEO to add an SEO title and SEO description.
  5. Click Social 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 40 sub-pages to a Portfolio Page.
  • It’s not currently possible to move sub-pages between Portfolio Pages.
  • Individual portfolio sub-pages can't be hidden from search engine results.
  • Hover layouts use a slight overlay on sub-page thumbnail images. It's not possible to increase or remove this.

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 thumbnail 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. In the Home Menu, click Design.
  2. Click Headings.
  3. Under Size, use the corresponding heading slider to adjust the title size.
  4. Click Save.

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.

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 selected 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.
Was this article helpful?
31 out of 170 found this helpful