Create a Masonry 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 “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 module.

Video Guide

Content:
00:06 – Add new page, enter title
00:17 – Click BM Content Builder, click Masonry Grid
00:22 – Source 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:09 – Set the items spacing
01:26 – keep original layout on mobile
01:40 – Fit image into Grid
01:50 – Set the Filter(sub-categories)
02:00 – Set the Filter(sub-categories) on the header bar
02:12 – Set the text style(font, color…)
02:42 – Show the text under the image
03:00 – Pick up the images from the media library directly(Source: Media)
03:16 – Lightbox
03:29 – Set custom URL and categories for image in the media library

Get Arnold WP theme.

Was this article helpful?

Related Articles