Masonry Grid module

To find the Masonry Grid module, Please go to “Pages > Add New”, click “BM Content Builder”

Click Masonry Grid:

The Masonry Grid module is normally for creating a selected(featured) gallery works, like:


There are 4 options: Media Library, Portfolio, Post, and Woo-Commerce Product.

  • If you want to create a gallery, please choose the Media Library. You could select the images directly.
  • If you want to create a portfolio list, please choose the Portfolio. There are tutorials for creating a Portfolio, for the ART theme, for the SEA theme.
  • If you want to create a blog list, please choose the Post.
  • If you want to create a product page, please choose the Woo-Commerce Product.


If you select the source as Portfolio(or Post, WooCommerce Product), please pick up a Category. The “Edit Your Portfolio Layout” will be shown.

Before creating a masonry grid, you should create several portfolios(or post/product) by single portfolios, they should be set with a category. Each portfolio should be set a “Featured Image” as the thumbnail shown in the masonry grid.

Masonry Grid Layout Editor

Click the “Edit Your Portfolio Layout”, the layout editor will be shown. It is a 24 grids width system. You could drag and drop the each item to create the layout freely.

If you select the source as the “Media Library”, please click the “Select Images” to pickup the image from the WordPress Media Library.

Quick Creating: it is a metro style masonry grid quickly-creating tool. there are 5 pre-made-layout items, you could click one of the items to create layout quickly.

Grid Items Float: It is a switch that controls whether the grid is floating or not when you are editing(dragging&dropping) the grids. When this option is turned on, the grid can be dragged freely. When this option is turned off, the grid will be forced to float to the top edge of the editor. When you are creating a metro style layout, please disable this option.(added from version 4.9.5 of BM Content builder)

keep original layout on mobile

The default grid layout rule of the mobile is shown by one column. If the option is enabled, the layout of the module on the mobile side will remain the same as the layout on the desktop side.


Item Spacing: You can set the gird spacing for desktop and mobile separately.

Fit Image into Grid

Fit Image into Grid: The images are filled into the grid by default(the images will be cropped). If the “Fit Image into Grid” option is activated, the images will be fit within the grid, the size of the image will be limited in the grid.


Checkout how the filter works.

Image Lazy Load

It is for the page loading speed. Normally(disable this option), the webpage will be shown when all images are loaded. It will take a long time to wait. Image Lazy Load means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. 
Notice:  Please stop the lazyload option (like Smush, Jetpack) in the 3rd plugin. It will be in conflict with ours.

Item Style

Item Style: There are 2 options: Image and Image + Text

Mouseover Effect:

It supports showing the 2nd featured image and no-effect also.


“Image” item style:

  • For “Portfolio” and “Post” source, it can show the portfolio(post) Title, Category, Tag
  • For “WooCommerce” source, it can show the product Title and Price
  • For “Media Library” source, it can show the image Title and Description(They could be defined in Media Library when you pickup an image).
You could show or hide the information by the x icon

“Image+Text” item style:

  • For “Portfolio” and “Post” source, it can show the portfolio(post) Title, Category, Tag
  • For “WooCommerce” source, it can show the product Title and Price
  • For “Media Library” source, it can show the image Caption(If there is not the caption, it will show the Title).

What Thumbnail Does

The option is for what’s the target when the user clicks the thumbnail.

1. Open a single portfolio/post/product item or custom URL(if the source is set as “Media Library”, please enter the custom URL in the Media Library)

Open in New Window/Tab: open a single portfolio/post page in a new window/tab.
nofollow: It is for network security. If you open the external link(other websites URL), please enable it.
Tap Once to Open Item on Touch Screen: On the mobile, you will tap twice to open the single portfolio. The 1st tab is for showing the text, like the mouseover on the desktop. The 2nd tab is for the opening single portfolio. If you enable the option, it will open a portfolio by once tab on the mobile.
Notice: if enable the Lightbox, it will always be opened by the once tab.

2. Open Lightbox – open the thumbnail in the Lightbox. The user can slide the thumbnails in the Lightbox

You could set the Lightbox color skin in Theme options(Art Theme/SEA Theme > Theme Options > Colors > Lightbox Color Skin). You could disable the download, fullscreen, zoom buttons in the Theme options(Art Theme/SEA Theme > Theme Options > Content > Lightbox)

Open Second Featured Image in Lightbox – If select the Second Featured Image in the “Mouseover Effect”, it will open the second featured image instead of the default featured image

Video Tutorial

There is a video tutorial for how to create a portfolio by the Masonry Grid module more here. (the video tutorial is suitable SEA and Arnold 2.x WP theme also)

Was this article helpful?

Related Articles