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:

Source

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.

Category

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, 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.

Spacing

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.

Filter

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.

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 theme also)

Was this article helpful?

Related Articles