Grid module layout options(redirected to new)

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

You could set grid layout by these options(Column, Spacing, Ratio, and so on).

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.

You could set the item spacing

Grid Ratio: The 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:

Pagination and Post Number per Page: 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.

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: There is the same option in some 3rd performance plugins. Please stop the option in the 3rd performance plugin. It will be in conflict with ours.

What Thumbnail Does: click the thumbnail to open a single portfolio/post item or open the image in a Lightbox

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

Open in New Window/Tab: open a single portfolio/post page in new window/tab

nofollow: It is for the network security. If you open the external link(source: media), 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.

Was this article helpful?