Group module introduction

To find the Group module, Please go to “Pages > Add New”(or Portfolio > Add New), click “BM Content Builder”

The Group module is a special module which is similar to a container, other modules could be put into the Group module. You will find the tools icon color is blue.


You could save the group (including the modules in it) as your own template if you click this button.


The “Align on Vertical: Equal Spacing” would work when there are multiple rows of modules.

The “Align on Horizontal: Equal Spacing” would work when there are multiple modules in one row.

Force Content to fit Fullwidth

When a group is fullwidth, and this option is “On”, it would work like the following image:

Disable Gap

It will remove the spacing between the modules in one row.

Screen height

You could set the percentage of screen height for the group. It would be if set it “50% of the Screen height”: 

If the height of the module is more than 50% of the screen height, the group would be with modules height. The height option for mobile would only work on portrait mode.


There are background settings(color, image, and video) for The Group. You could create a fullscreen wrap by the options and 100% of the screen height, increase the width as fullwidth. It will be:

Check more about creating the Fullscreen section

Background: Color

Please click “Select Color” to pickup a color for the Group.

Background: Image

Please click “Add new image” to select an image. The image will be fixed on page background if you activated “Background Image Fixed”. It doesn’t support the iOS.

Background: Hosted Video

Please enter the different format video file URL for the 3 inputs, the URL should be like:


You could use some online tools to convert the video file like Cloudconvert, It does not support the 3rd embed code like Youtube.

If you enable the “Enable Mix Blend Mode” option, it uses the CSS – mix-blend-mode: screen. If you want to create a text mask effect, please insert a Text module into this Group module. Please set white color for the “Choose Color for Video” option. It is a new CSS feature; it doesn’t work well on part of browsers.

Shadow and Radius

There are shadow and radius(round corner) options. You could add one Image and Text module into a Group to create an icon box with these options. The shadow options are the same as Single Image shadow. It is recommended with backgorund color/image/video.

Scrolling effect – changing color

If you active “Change Universe Color when Scroll In”, the background color will be changed when the group scrolled into browser viewport:

Auto Goto Top When Scroll In

The group module will auto goto the top of the browser viewport when it scrolls in.

Make Groups Contour on The Current Row

For some layouts, the 2 or more Group modules need to stay in one line. If you want they are at the same height. Yes, you could set them as the same height value. But sometimes, maybe the Group modules should be with the auto height. You could enable this option for the 1st Group at the same line. The Group of this line will maintain the same height as the highest Group.

Hide for Desktop / Mobile

This Group will be only be shown on the mobile(desktop) when the Hide for Desktop(Mobile) is activated.

It doesn’t support to resize the browser window to test(it will not hide the desktop group, show the mobile group. it will only show the desktop group). You need to test it on the real mobile device or chrome dev tools.

Keep Original Layout on Mobile

The default layout rule of the mobile is shown by one column. If you want to keep the original layout with desktop, please enable this option.

Was this article helpful?

Related Articles