The "Element Group" is an element that contains multiple elements.

You activate the Grouping Function by using SHIFT + CLICK, once you have selected two or more elements, the Group Button will appear.

Grouping elements 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 the page borders or other elements.

Grouping elements allows you to create a style for several elements and copy it. If you need to make a listing of products and services or list the characteristics of your product, you can use a grouping of 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. After that, edit the text and image.

Grouping can also be applied when adapting your page to the mobile version of the site. When creating a mobile version of the elements are shifted and transferred to the line below. To prevent elements from being randomly grouped, we group them. For example, a picture is grouped with text, then in the mobile version, these elements will go in order: first the picture, then the text.

How to create a group

To group items, select all items and click the "Group" in the upper left corner of the selected field. After that, you can work with a group of elements: move, copy, align along the edge, delete, etc.

If necessary, you can undo the grouping of items. To do this, select the group and click the "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 pressing 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.

When moving an element, the parent element is always highlighted in yellow. A group is a parent element that contains other elements. When moving elements within a group, the group is highlighted in yellow. If you move an item from a group, the site section will be highlighted in yellow. The section becomes the parent for excluding the from the group of the element.

Alignment of 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 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 push the boundaries - pull the corners of the group. The size of the group background will increase and the color background will be larger than the elements within the group.

The "On Screen" field (mobile phone, computer). By choosing devices, you can tailor the page for different devices from which the guest visits the page.

Advanced

Frame. You can customize the frame for a group of elements: the style of the frame (solid, dotted, dotted, double, inward, outward), the thickness of the frame, color. And you can also change the sides of the frame. For example, add only one side or two.

Corner rounding. You can customize the rounding of corners for a frame or a background field. Rounding can also be configured from different sides in different ways: only from one corner or from two.

Shadow. Create a shadow around a group of elements, adjust the offset and blur. And also the color of the shadow.

Text Shadow. In this section, you can create a shadow for the text within the group of elements. Adjust the offset and blur. And also the color of the shadow.

Conditional impression. This function will hide or show the selected item from the visitor. For example, if you want to show a special offer to a new user, then hide this offer and do not show it again. Turn on Conditional Impression. Select "Show" - if you want to show the item, or "Hide" - if you want to hide it from the visitor. Then select the condition: first visit, return visit, the product has a special offer and has already registered.