The alignment and grouping features enable you to select and move multiple page elements and resize them — while keeping their aspect ratio. This feature will help you group multiple objects for easy manipulation of design assets with pixel-perfect alignment and distribution control.
Here's a gif demonstrating the grouping and alignment feature:
To open the alignment control panel you have to select multiple elements on your page. Once opened you can distribute elements horizontally and vertically or you can align them in any way you see fit.
The ability to group elements creates a natively mobile responsive set of objects. Alternatively, groups can be set to lock the aspect ratio of complex arrangements in order to maintain their exact proportions when they’re converted to the mobile version of your landing page.
Mobile Aspect Ratio Lock keeps your layered groupings together and locks the aspect ratio, whether they’re in a desktop or mobile layout.
You don't have to ungroup a set of elements if you want to edit them; just double-click to edit them while they are part of a group.
You can use the keyboard shortcut cmd + click (or ctrl + click on a PC) to select an element through all group layers. Another shortcut is cmd + G (or ctrl + G on a PC) - it is used to group or ungroup elements.
The Mobile Responsive Feature
Once you have everything aligned and grouped, you can start building your mobile page.
With our mobile alignment feature, the elements on your mobile version of the page experience is already aligned. Meaning you can now create mobile-responsive versions of your landing page quicker and more accurately than ever before.
It's not mandatory to use the Mobile Aspect Ratio Lock feature in order for your experience to be well put together on the mobile version. In fact, if you have many elements, it can be helpful to have them one under another for better visibility, rather than having them side by side as in desktop mode. You can see an example below.
In the desktop version, those two blocks look identical. Both are grouped, but only the bottom one had its aspect ratio locked. You can notice that the size of the locked elements does not fit the mobile screen in order to still be readable and provide an easy-to-navigate, user-friendly experience to the page visitor. However, in the image before it, the elements are grouped but then individually arranged to fit the screen size in a way that you would expect from a mobile-optimized page.