Welcome to the Instapage Support Center

|

Alignment, Grouping and Improved Mobile Responsive Feature

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:

ezgif-4-1cf51f9eb1aa.gif

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.

1. The desktop version

aspect0.png

2. The mobile page without the aspect ratio locked

aspect2.png

3. The mobile page with the aspect ratio locked

aspect1.png

You can notice that in the last image, the size of the grouped elements is not fitting for the mobile screen in order to still be readable and user-friedly. However, in one before, the elements are grouped but individually arranged to fit the screen size.

Have more questions? Submit a request
Was this article helpful?
8 out of 13 found this helpful

Need Further Help?

Tell us what you need and we will be happy to assist you.

Our team of expert support staff and our community can answer your questions. Submit a ticket, or reach out on live chat!