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 Image” to pick up the images
    Grid source media library
  8. Set Column, Spacing, and other options please check more about the Grid layout, Grid style, Filter options

Video Guide

Content:
00:07 – Add new page, enter 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(Loadmore style or Infinite scroll)
03:52 – Creating the portfolio from the 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