Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Gallery sections

Add gallery sections to your pages to display sets of images in striking layouts instead of adding multiple image blocks to a block section.

Gallery sections are ideal for showcasing images with brief descriptions. If you need a similar way to display other types of content, such as larger amounts of text with buttons, use an auto layout section. To learn about the differences between these sections, visit Auto layouts vs. gallery sections.

This guide is for version 7.1. For a similar effect in version 7.0, use gallery pages or gallery blocks.

Watch a video

Add a gallery section

To create a new page with a gallery section:

  1. In the Home menu, click Pages, then click +.
  2. In the menu, click Page Layouts, then click Gallery and choose a layout. You can change this later.
  3. Add a page title and press Enter.
  4. Click Edit on the page.
  5. Click the image icon to add and edit images.
  6. Click the pencil icon to style the gallery section.
  7. Hover over Done and click Save to publish your changes.

You can also add a gallery section to an existing page on your site:

  1. Click Edit on the page.
  2. Click Add Section above or below an existing section.
  3. Click Gallery and choose a layout.

If a gallery section is the first one on a page, it can affect the way your site header appears. To learn more, visit Building a site header.

Gallery section layouts

In the Gallery Type drop-down menu, you can select from the following layout types:

  • Grid: Simple - A grid of images in even rows and columns
  • Grid: Strips - A grid where strips of images display at different sizes in each row
  • Grid: Masonry - A grid where images appear in a staggered layout
  • Slideshow: Simple - A simple slideshow that displays one image at a time
  • Slideshow: Full - A full-bleed slideshow that displays one image at a time
  • Slideshow: Reel - A slideshow where multiple images display at once, like a film reel
Tip: To set images to transition automatically, choose the Slideshow: Simple or Slideshow: Full layout and switch the Autoplay toggle on. To set the timing between each image transition, change the Slide Duration.

To learn how each layout appears on mobile, visit How will my site appear on mobile devices?

Add images to the gallery

Note: Changes to images in a gallery section save automatically. When you add, remove, edit, or reorder gallery images, it's not possible to undo that change by clicking the undo arrow or Discard changes. Remove, re-add, edit, or reorder images manually.

After adding a gallery section, you can add images to it:

  1. Hover over the gallery, click the image icon, then click +.
  2. To add new images from your device, click Upload Images.
  3. To reuse images you already added or add stock images, click Search Images.

After uploading an image, you can:

  • Click Image Editor to edit the image.
  • Adjust the focal point. This may not affect how the image looks, depending on its aspect ratio and your style settings.
  • Click and drag the images to reorder them. It's not possible to manually order your images in the Grid: Masonry layout, since the order is automatically determined by the aspect ratio of your images.
  • Enter a Description to add a caption and alt text for the image.
  • Add a clickthrough URL in the Link field.
  • Delete the image by hovering over it and clicking the trash can icon.

Keep in mind:

  • Gallery sections don't currently support videos or image deeplink URLs.
  • It's not possible to add blocks to gallery sections, but you can add block sections above or below a gallery section.

Style the gallery

To customize your gallery, you can change the layout, colors, and aspect ratio, enable captions, and more. To style a gallery section:

  1. On the page with the gallery section, click Edit.
  2. Hover over the gallery section, and click the pencil icon.
  3. In the Gallery tab, change the layout with the Gallery Type drop-down menu.
  4. Below Gallery Type, make style changes to the current layout, like spacing and image height, enable captions, or enable lightbox. These options vary between layouts.
  5. Click the Colors tab to choose a color theme.
  6. Click Save.

In the grid: strips layout, the Row Height tweak controls the height of the first few rows. The height shifts based on factors, such as the number of images in the gallery. Because this layout displays images at different heights, it's usually not possible to make the height of every row equal.

Was this article helpful?
91 out of 553 found this helpful