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:
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.mp4https://xxx.com/xxx.wembhttps://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.
Floating Text
Please check the tutorial about the Floating Text.
Shaped Edge
Please check how to config the Shaped edge