Create a standard Grid Portfolio page

To showcase your portfolio(project) items. Please add a new Page, active the BM Content builder to create tons of grid or masonry grid layouts.

Before the Portfolio list page creating, you should create several portfolio(project) items by single portfolios, they should be set with a category.

Step by step

  1. Page > Add New
  2. Enter a title
  3. Click BM Content Builder
    BM Content builder
  4. Click “Grid”
    Grid module
  5. Choose “Portfolio” from the “Source” selector
  6. Choose a category of your portfolio(project) items.
    BM Content builder
  7. You could create the Portfolio list page from the images also. Choose the “Media Library” from the “Source” selector.
    Grid source media library
    Click “Select Images”.
    Grid source media library
    the Media Library panel will popup. Please pick up the images.
    Grid source media library
  8. Set Column, Spacing, and other options please check more about the Grid module.

Video Guide

Content:
00:07 – Add a new page, enter a title
00:17 – Activate BM Content builder, insert the Grid module
00:25 – Select a category
00:38 – Set the column, spacing, ratio
01:20 – Remove the default page title
01:30 – Set the column and spacing for the mobile layout
02:11 – Set the Waterfall grid layout
02:27 – Fit image into Grid
02:44 – Set the categories as the Filter
03:09 – Set the pagination(Load more button or Infinite scroll)
03:52 – Creating the portfolio from the Media Library
04: 40 – Set the image Title (Source: Media library)
05:00 – Set the custom URL for the image(Source: Media library)
06:35 – Set the font style for the text of the gird
07:32 – Set the “Image” for the” Item Style”, The text will be shown above the image on Mouseover
Show the 2nd image on mouseover
10:20 – set opening image in the Lightbox, open portfolio page in new tab/window
11:13 – Tap Once to Open Item on Touch Screen
11:49 – Set the scrolled animation

Was this article helpful?

Related Articles