Inster Block: Appearance Settings

The Inspector panel provides great opportunities for customizing the block. You can hide/show the Inspector panel by clicking on the button with the gear icon, top right. Or using hotkeys ?+?+, for Mac, and ?+?+, for Windows and Linux.

Double first post

This setting makes the first post of the grid double size, both in height and in width.

First Double Grid Example

It is important to note that for this setting the number of columns and rows must be at least two.

Gutter

Sets the gap in pixels between grid elements(posts). From 0 to 50px. You can also use larger gutter, but this is not recommended.

Grid With Gutter

Border radius

The radius of rounding posts. Base values are from 0 to 50px, but you can also specify a larger radius.

Border Radius Example

Border width

Border thickness of the post in pixels. Base values are from 0 to 50px, but you can also specify a larger value.

Inster Grid Block with Borders

Border style

You can choose one of the available border styles:

  • None
  • Dotted
  • Dashed
  • Solid
  • Double
  • Groove
  • Ridge
  • Inset
  • Outse

Border color

Choose one of the official Instagram default colors, or set your custom border color.

Shadow style

You can choose one of the available post shadow styles:

  • None
  • Simple
  • One side
  • Drop Shadow
  • Google Material
  • Depth Google Material
Grid with Google Material Shadow

You can customize the shadow style with the following settings:

Shadow horizontal offset

The offset of the shadow horizontally in pixels

Shadow vertical offset

The offset of the shadow vertically in pixels

Shadow blur

Blur shadow parameter in pixels. It works similar to the same CSS property.

Shadow spread

Shadow spread in pixels. Works similar to the same CSS property

Shadow color

Choose between Black, Gray, White or set any other custom shadow color

Initial animation

You can select one of the preset initial animation modes:

  • None
  • Opacity
  • Scale
  • Rotate clockwise
  • Rotate counter-clockwise
  • Width
  • Height
  • Translate left to right
  • Translate right to left
  • Translate top to bottom
  • Translate bottom to top
Initial animation examples. One by one from Opacity to Translate bottom to top

You can also customize the animation as you need it with the following settings:

Initial animation timing

Timing function for animation. Similar to CSS animation-timing-function

Animation timing function graph

Initial animation duration

Initial animation duration in seconds

Initial animation delay

Delay start playing animation

Step-by-step delay

The duration of the pause between playing the animation for each post


Other block settings panel:

Was this article helpful to you?