What are Instablocks and how to use them

Saving Blocks

Saving the blocks is done by clicking on any block on the page. This will open a menu in the top left corner of the block in question. From the menu, click on more, then choose Save to My Blocks.

image of the instablocks' dropdown option

In order to access the Instablocks gallery, click on the Instablocks icon from the top menu in edit mode:

image of the instablock icon in the page builder sidebar

This will open a menu where you can add block templates from Instapage or page blocks you previously saved:

image of the menu where you can add block templates

When you're on the Block templates tab, you can filter them by choosing from the categories on the left:

image showing to filter block templates from the categories on the left

The blocks you save are shown in the My Blocks tab, where you can organize them into folders. You can create folders from the left side menu, by clicking on +ADD NEW FOLDER.

Afterward, all you have to do is drag any blocks over the folder's name, in order to move them to that specific folder.

Inserting Blocks

In order to add a block to your page, hover your mouse over the one you need, and click on Insert Block.

image of instablocks insert block option

When clicking anywhere else on the block, a preview will be opened to see the block in detail, where you can see the mobile version as well. You can also add the block to your page by clicking on the Insert button. For blocks you have saved from your pages, you can also edit their name in the detailed view menu.

image of instablocks preview

After you've inserted an Instablock, you can move it by clicking on Move and dragging it:

image of moving and dragging instablocks

To edit the background image, click on the corresponding icon and you will be presented with the options.

image of instablocks background editing button

image of block style editing setting

You can adjust how your custom image background is positioned on your landing page by clicking on the image and dragging the cursor around. If you'd like an image to repeat you'll need to select one of the Tile options.

Stretch to edges will make the image responsive to the edges of the visitor's browser.

You can make the background image of the Instablock have a parallax effect against the page background by turning on the toggle on the right.

image of the parallax toggle

To add an overlay color over the background image of the Instablock, select the color and the opacity on the right, above the parallax toggle:

image of an instablock background overlay setting