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.

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)

Check how does “Grid Items Float” option work

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.

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.

Pagination

If you don’t want to show all Portfolios/Posts/Products(items) by default, please activate Pagination. Grid module supplies Ajax pagination function, the pagination types includes Load more button and Infinite Scroll. Please enter a number for “Post Number per Page“. Eg entering 20. So if you have 25 items, you would have 3 total pages.

If you want your users to load the next page of posts by clicking on the more button, please pick up option Load More Button for the Pagination. If you want your users to automatically load the next page of articles when they scroll to the bottom of the page, please pick up option Infinite Scroll for the Pagination.

Filter

Checkout how the filter works.
ps: Filter cannot work with Pagination in Masonry Grid module for now.

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

Please check the tutorials about mouseover effect options.

Text Type

“Image” item style:

For “Portfolio” and “Post” source, it can show the portfolio(post) Title, Category, Tag, Excerpt
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.

To define the font style, please click the pencil icon, the font panel will be displayed:

You can define a font, font size, line-height, letter-spacing, font-size-mobile, top spacing , and color.

“Image+Text” item style:

For “Portfolio” and “Post” source, it can show the portfolio(post) Title, Category, Tag, Excerpt
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 of an image, it will show the image 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, it will open the single portfolio, post, or a single WooCommerce product page.

If the source is set as “Media Library”, it will open the image itself. You can also set a custom URL in the WordPress “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 big version picture of thumbnail in a Lightbox. The user can also slide the gallery 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