Grouping Elements Tutorial

Your website is mobile ready, responsive, which means is based on the structure of Columns and Rows. Although they are very versatile, they can sometimes lead to design limitations. For example, if we have three Element Regions side by side (in a row), where one is taller (?) than the other two, we will have problems if we try to fill in the space below

We can overcome this problem by using the feature Grouping. Grouping makes two (or more) separate columns appear to act as one column. This then frees us to add full-width columns underneath split columns.

To group two elements in a row we, select our first element and then press Shift on our keyboard, and select the second element (and so on). This gives us the option to Group the two or more elements. We can also select-drag our mouse across the two regions, and we will be given the option to group them.

In the video below you can see how each element creates a single row, if they are not grouped vs how we group elements in order to have them aligned under just one row:

Once two elements are grouped, they can be moved like one element. Using this method, we can create complex, visually pleasing layouts. You can ungroup previously grouped regions by clicking the ‘Icon and selecting the Ungroup Icon.

You can Group any type of Element with any other type of Element, for example, Text with a Menu, a Gallery with a Map, as long as they are beside each other in a row.