Grid module

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

Click Grid:

The Grid module is normally for creating a standard grid list, 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. There is a tutorial for creating a gallery here.
  • 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 page, please choose the Post. There is a tutorial for creating a blog here.
  • If you want to create a product page, please choose the Woo-Commerce Product.

Category & Order

If you choose Portfolio, Post, or Woo-Commerce Product, you need to pick up a Category. The posts(portfolio/post/product) within this category will be shown.

Before creating a 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 Grid.

If you want to control the order of the thumbnails in the Grid, please pick up “Date” in the selector “Order”. Ascending order means the earliest item(Portfolio, Post, Product) in the order will appear at the top of the list. Descending order means the last item in the order will appear at the top of the list.
You could edit each item(Portfolio, Post, Product) date. Edit a Portfolio(in “Portfolio>All Portfolio”), click the date at the right column:

Column & Spacing

Column: It supports 1-12 columns for desktop/mobile.

Item Spacing: You can set the vertical and horizontal spacing separately. You can set the grid spacing for desktop and mobile separately also.

Item Ratio

Grid Ratio: The Grid item ratio supports 4:3, 3:2, 16:9, 2:1, 1:1, 2:3, 3:4, Auto. The Auto will be shown as the image origin ratio.

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.

Grid List Type: there are Regular and Waterfall options, the Regular is the default option. The extra top/bottom spacing between items will be removed. It will look like:


If you don’t want to show all portfolio posts(items) on the one page, please set the 2 options. If there are 20 posts in the category, you want to show 10 posts on the one page, you could enter 10 for the Post Number per Page. If you want users to click load more to check the other posts, please set “Load More Button” for the Pagination. The “Infinite Scroll” is for when the user scrolls the page to the bottom of the Grid, the other posts will be shown automatically.


Checkout how does the filter work.

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:


“Image” item style:

  • For “Portfolio” and “Post” source, it can show the portfolio(post) Title, Category, Tag, Excerpt, Date
  • For “WooCommerce” source, it can show the product Title and Price
  • For “Media Library” source, it can show the image Title (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” source, it can show the portfolio(post) Title, Category, Tag, Excerpt, Date.
  • 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).
  • For “Post” source, it can show the portfolio(post) Title, Category, Tag, Excerpt, Date. It will show special item layouts based the post format, it is possible to create a Blog style grid layout:
The demo page:

List BG option

You could set the text style, padding, BG color, and text position:

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 Grid module more here. (the video tutorial is suitable SEA theme also)

Was this article helpful?

Related Articles