What are Instablocks and how to use them

An Instablock is a portion of a template (a block) that can be easily added to any page and later customised if needed.

When building a landing page, you can choose a pre-made Instablock from our gallery, or create and save your own. 

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.

Basics_-_instablock.png

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

Basics_-_add_block.png

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

Basics_-_new_block.png

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

Basics_-_block_templates.png

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.

Afterwards, 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.

Basics_-_Add_new_block_gif.gif

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.

Basics_-_Details_block.png

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

Basics_-_move_block.png

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

Basics_-_block_style.png

Basics_-_block_style_options.png

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.

Basics_-_parallax.png

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:

Basics_-_overlay.png

NOTE: The Column color set under the Page Background settings will override the block’s background settings(image or color).