How to arrange your mobile view and when to use the "Regenerate" button

With Instapage, the mobile version of a page consists of the same elements as the desktop version, but arranged differently and resized. When creating a page, you need to add all the desired elements to your desktop editor and then go to the mobile editor, click Regenerate if the mobile design is far from what you would like it to be, and start manually resizing and rearranging them as you wish.

After editing, moving or adding new elements to the desktop version our system will try to automatically adjust the mobile version but it's not perfect and you may need to manually rearrange or resize some elements. You can use our grouping and mobile aspect ratio features to help you faster edit the mobile version as described in this article. The layouts we provide are mobile-optimized, but that can change as you add new elements. 


1. How to use Instablocks properly

It is important that in the mobile version you keep the page elements on the same Instablocks that you added them to in desktop mode. This is because they are tied to the Instablock from a technical perspective.

If you have white space that you want to eliminate, resize the block rather than moving elements from lower blocks over it and hiding those blocks. If you do that, the moved elements will also be hidden as they are part of the Instablock that has been hidden. To better understand this, you can see a visual comparison in the video below.

NOTE: The behavior shown in the video does not apply to the desktop editor. It is a particularity of the mobile editor.

2. What does Regenerate do?

The purpose of the Regenerate button is to bring desktop elements to the mobile page in case they are missing (but not hidden), to make sure both the mobile and the desktop page are in conformity with each other. The button is not meant to create a final look for your mobile design, to rearrange the page for you.

There are multiple Regenerate buttons, one at the top of the page and one for each Instablock you have. The button for each block appears as you click on the Instablock in question.

image of the regenerate button in the mobile builder

GIF illustrating how to regenerate a block


3. How do I know which one to use?

Use the first button right at the top the first time you switch to the mobile editor when you are done with editing the desktop version if on most Instablocks there are elements missing (but not hidden) or settings are not passed over from the desktop version. In all other cases that are isolated to a single Instablock, you should use the Instablock regenerate button.

As a good practice, after you finish editing a block on the desktop version (ideally also using grouping and mobile aspect ratio if necessary) you can check the block on the mobile version and if it's far from what you would expect it to display you can Regenerate the mobile block. This will not break the design you have already done on the other blocks. We recommend only using Regenerate when you know you added all the elements you want to add to a page or a block, as to not redo the entire mobile design every time.