The group section is designed to enable you to apply a common background image, color or gradient across a number of different sections to tie them together visually.
Here is an example where a title section and an image section have been grouped together where a green gradient has been added as the common group background.
Adding Sections to The Group
You can add a section to a group in 2 ways:-
1. Move the section just below the group and right click on it and choose the add to group option from the menu.
2. If there are already sections in a group you drag and drop it between other sections already in the group to automatically add it to the group. You can rearrange sections in the group in the usual way using drag and drop.
To remove a section from a group, right click on the section you want to remove and select the ungroup option.
Adding a Group Background
Click on the settings cog to choose the background type you want from:-
1. Solid - choose the background color you want from the color picker or add the hexadecimal color number to match your brand.
2. Gradient - Choose a start and end color and optionally a Middle color. if you have also chossen a middle color you can use the mid point slider to adjust how the gradient looks.
3. Image - Upload the image you wish to use as a background for the grouped sections. I have used a textured marble background in the example below. because the image is a portrait image and didn't fill the width of the App I also changed the background size to cover.
Here is an example of how each of the different the group background options look in the App, I have added 3 sections to the group, a basic contact form, contact buttons and share buttons.
Groups can also be used as an organizational structure by logically grouping sections in your App within the Builder. Once sections are in a group you can move, copy, paste or delete the group in one go. So if you decide you should have created your App with pages and you need to move a number of sections into a new page section simply add them to a group section and right click on the group section and choose move to the new page where you can ungroup them if you want.
Another useful feature of groups is that can Toggle the Visibility of the sections that are in a group to hide them from view in the layout sections area of the builder and so declutter it making it easier to work with Apps with numerous sections in them. To toggle the visibility of the sections within a group click on the toggle button to the right of the group settings cog.
The group section is also a great way to add a different background to a page section. simply group all the different sections on the page together and then add the background you want to use for that page.
NOTE: Grouping will not affect how the individual sections behave in the Published App. For example, grouping a number of different column sections together and adding a common background will not link the different tables together so they will not line up as one big table, each column section will still behave as an independent section in the published App.
Add a background to a Page - move multiple section together - hide multiple sections in the builder -