Image Gallery Block

Click to see a larger version

The Image Gallery Block is an image gallery with lightbox functionality.

Demo: Image Gallery Block

Create an Image Gallery Block

  1. Navigate to the page you'd like to update, and enter the Edit mode for the page.
  2. Click on the Layout tab.
  3. Choose the Section you would like to add the block.
  4. Click on Add Block in that section.
  5. Click on Create content block in the Configuration Sidebar.
  6. Select Image Gallery from the list of options.
  7. Choose Inline or Reusable block option.

Note: Select Inline block if this block will only appear on this page. Select Reusable block  if this block needs to appear on multiple pages. When in doubt create an Inline block. Inline blocks may be converted to reusable blocks at a later time if needed. Learn more about Inline and Reusable blocks.

Add Image Gallery Content

  1. Title: this displays above the Text Block when placed on a page.
  2. Display title: enabled by default, toggle the button to hide the block title.
  3. In the Content tab, click Add Media.
  4. You may select images from the Media Library or upload an image.
  5. Images must have ALT Text. You may add a caption. This will display under the image when a user clicks on the image thumbnail and should be unique to the image.
Click to see a larger version

Note: Image captions are plain text. If you have linked text in the caption, it will not be linked.

Design the Block

  1. Click the Styles tab.
  2. Icon Settings: option to add an icon to the block title and configure the position, color, and size.
  3. Block Heading: heading style and alignment. This setting should be used to put your content in the proper reading hierarchy, not to change the font size of the title. Always make sure the page content is structured properly for accessibility.
  4. Block Style:
    1. Background style: option to add a colored background, outline or underline style.
  5. Block Typography: option to scale the font size on the title and content in a block.

Save Block

  1. Click Add Block.
  2. Click Save layout.