HomeForumHelp

Settings

You can set several settings that change your gallery's structure.

Type

Allows you to choose between a Grid or Masonry layout.

  • The Grid property defines how images are laid out regularly in columns and rows.

  • The Masonry property defines a grid layout based on columns with no fixed height so that images in additional rows will rise up to fill the gaps.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the Type field

  6. Select Grid or Masonry

Columns

Allows you to specify the number of columns you want in your gallery.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the Columns Field

  6. Enter the desired value

Horizontal Gutter

Determines the spacing between the gallery columns.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the H. Gutter Field

  6. Enter the desired value

Vertical Gutter

The Vertical Gutter property determines the spacing of the Gallery rows.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the V. Gutter Field

  6. Enter the desired value

Image Height

The Image Height property can be adjusted when Grid is selected for Gallery Type.

Allows you to specify the height of an image for the gallery.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Open the Layout Tab

  6. Find the Height Field

  7. Enter the desired value

Thumbnail

Specifies your gallery's images thumbnail size.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the Thumbnail Size

  6. Select the desired size

Lazy Load

Allows you to reduce the gallery block's initial load time by loading the images once they are in the user's viewport and not on first loading.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the Lazy load Toggle

  6. Toggle Lazy Load on

Link

When activated, the image acts as a link and can either open a Lightbox or navigate to a specified URL.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the Link Toggle

  6. Toggle the Link on

Lightbox

Allows you to show images inside a fullscreen slideshow modal. It works on all screen sizes.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the Link Toggle

  6. Toggle the Link on

  7. Select the Lightbox value in the Link Type Menu

URL

Allows you to open a URL outside the gallery by clicking on a gallery image. For example if you want to avoid putting text on the image, the URL link can open a detailed product page with textual product information.

Set

  1. Select the gallery block

  2. Open the Block Inspector

  3. Navigate to the Primary Tab

  4. Open the Settings Tab

  5. Find the Link Toggle

  6. Toggle the Link on

  7. Select the URL value in the Link Type Menu

  8. Select the 🔗 on your desired image

  9. Enter URL

Last updated