Gallery sections

false

Gallery sections

Last updated May 05, 2026 20:36

Add gallery sections to your pages to display sets of images in customizable layouts.

Gallery sections are ideal for showcasing images with brief descriptions. To add larger amounts of text with your images, use an auto layout section.

Gallery sections are available on version 7.1. For a similar effect in version 7.0, use gallery pages or gallery blocks.

This video walks through creating a gallery section, adding images, and styling its layout.

You can add a new page that includes a gallery section or add a new gallery section to an existing page. If a gallery is the first section on a page, it can affect the way your site header appears.

Add a new page with a gallery section

To create a new page with a gallery section:

  1. Open the Pages panel and click +.
  2. In the menu, 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, then hover over the gallery section.
  5. Click Edit Gallery to add and edit images.
  6. Click Edit Section to edit the gallery section styles.

Add a gallery section to an existing page

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

  1. Open the Pages panel and click Edit on the page.
  2. Click Add Section above or below an existing section.
  3. Click Images or Portfolio and choose a layout with an i badge in its top-right corner.
  4. Hover over the gallery, then click Edit Gallery to add and edit images or click Edit Section to style the section.

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 undo or Discard changes.

You can add up to 250 images to gallery section. It’s not possible to upload videos or add blocks to the section, but you can add block sections above and below a gallery.

To add images to a gallery section:

  1. Click Edit on the page and hover over the gallery.
  2. Click Edit Gallery, then click +.
  3. To add new images from your device, click Upload Images.
  4. To reuse images you already added or add stock images, click Search Images.

To use our built-in image editor, click an image in the gallery editor, then click Edit Image.

To reorder a gallery, click and drag the images to different places in the gallery editor. In the Grid: Masonry layout, the order is automatically determined by the aspect ratio of your images.

To change how the image is centered, click an image in the gallery editor, then hover over it in the sidebar and adjust the focal point. This may not affect how the image looks, depending on its aspect ratio and your style settings.

To add a caption and alt text to gallery images, click an image in the gallery editor, then add text under Description in the sidebar. Enter a Description to add a caption and alt text for the image.

To add a clickthrough URL, click an image in the gallery editor, then click Attach Link in the sidebar.

To delete an image, hover over it in the gallery editor and click the trash can icon.

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

To style a gallery section:

  1. Open the Pages panel and click Edit on the page with the gallery section.
  2. Hover over the gallery section, then click Edit Section.
  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 lightboxes, or enabling a divider at the bottom of the section. These options vary between layouts.
  5. Click the Colors tab to choose and customize a color theme.

Most layouts include a Width setting in the style options. Depending on your settings and browser size, some width settings may not appear different. For example, if your browser size is smaller than the Page Width (Max) setting, sections set to Full and Inset display the same.

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

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.

To change your gallery’s layout:

  1. On the page with the gallery, click Edit.
  2. Hover over the gallery section, then click Edit Section.
  3. Click the Gallery Type dropdown menu and select a layout.

Choose from among these layouts for your gallery:

  • 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.

In the gallery section styles, you can add animations  to your images for a stylized look. The animation you choose affects all images in the gallery. Gallery sections follow your site-wide animations by default.

To customize gallery section animations:

  1. On the page with the gallery, click Edit.
  2. Hover over the gallery section, then click Edit Section.
  3. Click the Animation dropdown menu and select an option.

Choose from these settings for your gallery’s animations:

  • Site Default - The animation matches your site-wide animation settings
  • No Animation - The section doesn't have animations 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

Was this article helpful?

Yes No

428 out of 1493 found this helpful

Yes No

Gallery sections