The Element Group is a selection of more than one element that is grouped together with their own settings as a group. This is done on the Page Editor, accessed through Web Sites > Funnels > {the page you want} > Design.
To activate the Grouping function hold down the SHIFT button while selecting elements on your web page. Once you have selected two or more elements, the selection will be highlighted with a yellow boarder and the Group settings will appear on the right-hand menu.
Grouping can be used to move several elements at once on a page, copy or delete several elements, and also to align a group of elements relative to page borders or other elements.
Grouping elements allows you to create a style and apply it to several elements at once. If you need to make a listing of products and services or list the characteristics of your product, you can group elements. Create a design style for one group of elements (for example, a picture and text) and then copy it as many times as necessary to replicate the exact same set of elements all matching in format. Then, you can go back and edit the text and images in each group as needed.
Grouping can also be applied when adapting your page to a mobile version. When creating a mobile version of a page, elements are shifted and transferred into a vertical line instead of horiontally aligned. To prevent elements from being randomly placed into an order that may not make sense, you can group them so they stay together in the right alignment. For example: a picture is grouped with text – in the mobile version, these elements will go in order: first the picture, then the text.
How to create a group
Select all items you want grouped on your page and click the Group tab in the upper left corner of the selected field. This groups them together and opens the Group settings on the right-hand side of the screen. In a group you can move, copy, align, delete, etc. the elements in the group.
If necessary, you can undo the grouping of items. To do this, select the group and click Ungroup in the lower-left corner of the selected field.
Move a group of elements
To move a group of elements entirely, do not select it, but move it by clicking the left mouse button. If you select a group of elements, the elements within the group will be moved. You can move or remove them from the group. To do this, simply move the element out of the group.
Aligning a group of elements
To align a group of elements within a section of a page, select the entire group and use the Alignment settings in the left-hand menu. You can also move a group of items by dragging and dropping the group around the section. Guides will automatically appear to help you align the group along the edge, center or relative to other elements on the page.
To align the elements within the group, you only need to select one element within the group. Move the item inside the group. You will see guidelines that will help you align the element relative to the other elements in the group.
General
General Settings:
Background Color – You can set the background for a group of elements. To do this, select the group of elements and select the background color in the menu on the right. To increase the background area of the group expand the boundaries by pulling on the corners of the group. The size of the group's background will expand and the background color will be larger than the elements within the group.
The Show On-Screen field allows you to select the device type you wish the page you are designing to display on. This allows you to tailor the page for each different device from which a guest can visit the page.
Advanced
Border – You can customize the border for a group of elements: style (solid, dotted, dotted, double, inward, outward), thickness and color of the frame. You can also change which sides of the frame are shown. For example, add only one side or two.
Round Corners – You can customize the rounding of the corners of a border or a background field. You can also configure each side to be different or set only one or more corners to round.
Shadow – Create a shadow effect around a group of elements, and change the shadow color, thickness and blur.
Text Shadow – You can create a shadow on the text within the group of elements. You can adjust the text shadow color, thickness, and blur.
Conditional Show – This will hide or display the selected item to the visitor. For example: if you want to show a special offer to a new user, and once shown, hide this offer and do not show it again. Turn on Conditional Show, select Show - if you want to show the item, or Hide - if you want to hide it from the visitor and then select the condition for showing or hiding: first visit, return visit, the product has a special offer and has already registered.