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.

Add Module(s) into Group

Click + on the tools bar of Group, you could choose a module to add into this Group. To align the module(s) in the Group, please refer to the next section.

PS: Of course, you don’t have to add any modules. If you want to create a hero section by the Group, please add an image or video by Background options.

Align

The module(s) could be set to align horizontally and vertically. There are 2 selectors: “Align on Vertical” and “Align on Horizontal” .

For example, if there is Single Image and Text module in a Group module, the Align options will work like the screenshots:

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.

Template

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

Height

There are 3 options for the Height: Auto, Fluid Height, and Fixed Height.

Auto

It will automatically adapt to the height of the internal modules.

Fluid height

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

There are 2 selectors for the fluid height. The 1st selector is for the landscape mode, the 2nd selector is for the vertical mode(not only for the mobile layout).

If the height of the module is more than 50% of the screen height, the group would be with modules height.

Fixed height

You could enter the number for the Desktop(1st input box) and Mobile(2nd input box) layout. The unit is PX.

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.

Background

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:

  • https://xxx.com/xxx.mp4
  • https://xxx.com/xxx.wemb
  • https://xxx.com/xxx.ogg

You could use some online tools to convert the video file like Cloudconvert, Zamzar.com. 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.

Show Scroll-down Button

If this option is enabled, there is a scroll-down button will be shown. When the button is clicked, The page will scroll through this group.

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 the option is enabled, the layout of the module in this Group on the mobile side will remain the same as the layout on the desktop side. But it will not work for the Grid and Masonry Grid modules. There is the same option in the Masonry Grid module. The Grid module has column/spacing options specific to the mobile side.

Stikcy

If this option is enabled, the group will be sticky when the page is scrolled. Please note that the Group itself should not stay in the whole row(12 cols or fullwidth).To put it simply, the layout must be 2(or more) columns, and this Group is one of the column. And the height of this group should be lower than that of other columns. For example, the layout can be set with 2 Group modules, Group A and Group B, the Group A is set Sticky:

It will work like the video:

PS: The sticky will work for the desktop side only.

Was this article helpful?

Related Articles