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 will add all the desired elements to your desktop editor first and then head over to the mobile editor to finish up your mobile design. Please note that while it is not possible to edit your elements (images, forms, buttons, etc.) in the mobile builder, you can create two versions of any element (in the Desktop version) and then use the visibility feature to have one visible only on Desktop and the other one only on Mobile. This way, you can change both versions as much as you'd like. To learn more about this feature, please refer to the dedicated guide here: https://d.pr/OB6aFn
We recommend using the Regenerate option if the mobile design is far from what you would like it to be, and start manually resizing and rearranging the elements as you wish.
After editing, moving or adding new elements to the desktop version our system will try to automatically adjust the mobile version for you, however, it may not be perfect and you will have 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 explained in this article: https://d.pr/RlMk7B. The layouts we provide are already mobile-optimized, but that can change when 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 example shown in this video does not apply to the desktop 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), and to make sure both the mobile and the desktop page are in conformity with each other.
The Regenerate button also arranges the elements of the page vertically, so you can easily find and change them to finish your mobile look.
NOTE: The button is not meant to create a final look for your mobile design, or to rearrange the page for you.
3. Why are there multiple Regenerate options?
There is a Regenerate option at the top of the page and then one for each Instablock you have. The button for each block appears as you click on the Instablock in question.
4. How do I know which Regenerate option 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 (not hidden) or settings are not passed over from the desktop version to your mobile design.
In all other cases that are isolated to a single Instablock, you should use the respective 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 having to redo the entire mobile design every time.