Image Style

Allows you to style your Gallery images using a variety of options such as Overlay, Animation, Opacity, Blending Options, Padding, Radius, Borders, Border style.

Colors

The Overlay property adds a layer to the images in your gallery.

Background Colour adds a colour or gradient to your Image or gallery block.

Add background colour

1. Select the gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open the Image Style tab

5. Select Background Color or Gradient

pageBackground

Padding

The Padding property allows you to specify the space that separates the Gallery Image block from its border on all sides.

Padding is not to be confused with Margin. The first adds space inside the element, the other adds space outside it.

Add padding

1. Select a gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open Image Style tab

5. Navigate to Padding

6. Link or Unlink Padding to add space to one or all sides

Remove padding

1. Select a gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open Image Style tab

5. Navigate to Padding

6. Click dot to reset all linked or selected unlinked padding

Border

Adds chosen border styling to the gallery block's images.

pageBorders

Animations

The Animations property adds a pre-set animation to your gallery on hover to make your gallery more interesting. Included are Mist, Spring, Sunrise, Blurry.

Add animation

1. Select a gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open the Image Style tab

5. Select desired animation in the Animation panel

Remove animation

1. Select a gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open the Image Style tab

5. Select None in the Animation panel

Visual

The Opacity property lets you specify the amount of opacity or transparency to apply to your Image blocks.

Adjust opacity

1. Select a gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open the Image Style tab

5. Adjust Opacity in the Visual tab

Reset opacity

1. Select a gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open the Image Style tab

5. Click blue indicator button to reset Opacity

The Blend Modes property defines how the gallery or image block should blend with the background.

Modify blend mode

1. Select a gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open the Image Style tab

5. Select Blend Mode

Filters

The Filter property adds an effect to your Gallery Images. These include: Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Saturate and Sepia.

Add filter

1. Select a gallery block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Open the Image Style tab

5. Navigate to the Filters tab

6. Modify selected Filter effect