Create a Masonry Grid Portfolio list 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 “Masonry Grid”
    Masonry Grid module
  5. Choose “Portfolio” from the “Source” selector
  6. Choose a category of your portfolio(project) items
  7. Click “Edit Your Portfolio Layout”
    BM Content builder
    You could move, enlarge, shrink the items. You could click the placeholder layout(Quick Creating) to create layout quickly
    BM Content builder
    Check the video guide from 00:57
  8. 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.
    Masonry Grid source media library
    The images will be shown in the editor:
    Masonry Grid source media library
    Check the video guide from 04:13
  9. Set spacing, filter, mouseover effect, and other options please check more about the Masonry grid, Filter options

Video Guide

Content:
00:06 – Add new page, enter title
00:17 – Click BM Content Builder, click Masonry Grid
00:22 – Choose Portfolio, Select a category
00:26 – Click Edit Your Portfolio Layout, drag to edit the layout
00:57 – Edit the layout by quickly creating
01:20 – Set the spacing
01:48 – Fit image into Grid
01:59 – Set the filter
02:23 – Set the mouseover effect(Text above the image)
03:14 – Show the text under the image by default
03:55 – Lightbox
04:13 – Creating from the Media Library


Was this article helpful?

Related Articles