Showcase a gallery of images in a customizable layout.

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. Open the Pages panel and 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. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor and 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 Images and choose a layout with an i badge in its top-right corner.

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 with different aspect ratios appear in a staggered layout
• Slideshow: Simple - A slideshow that displays one image at a time, and the only layout with the option to enable thumbnails
• 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:

• You can add up to 250 images to a gallery section.
• 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 other style changes to the current layout, like changing spacing and image height, enabling captions, customizing animation, enabling lightbox, or enabling a divider at the bottom of the section. These options vary between layouts.
5. Click the Colors tab to choose a color theme.
6. Click Save.

Keep in mind:

• Because of Squarespace's responsive design, layouts may vary in appearance depending on browser or device size even when you have specific styles set. For example, you can set the number of columns your gallery has with the grid: simple and grid: masonry layouts, but in smaller browser windows, the gallery may display with fewer columns.
• In the grid: strips layout, the Row Height tweak controls the height of the first few rows. The height shifts based on various 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.

Gallery section width

Most gallery section layouts include aWidth setting in theGallery styles. Width options include the following, although not all options are available for every layout:

• Full Bleed - Images in the gallery touch the edges of the section on all sides
• Full - Images in the gallery section display the width of the browser window with margins of white space based on the Site Margin tweak in site styles
• Inset - Images in the gallery section display at a fixed maximum width based on the Page Width (Max) tweak in site styles

Depending on your settings and browser size, the Full and Inset sections may not appear different. For example, if your browser size is smaller than the Page Width (Max) setting, Full and Inset will display the same.

Gallery section animations

In the gallery section styles, you can add an animation effect to your images for a stylized look. The selected animation affects all images in the gallery. Choose from these options:

• Site Default - The animation matches your site-wide animation settings.
• No Animation - The section doesn't have an animation even if site-wide animations are enabled.
• Fading - Images fade in as visitors scroll down the page.
• Scaling - Images scale up from a smaller size, creating a zoom effect.