Styling image captions

Sections

Customize how image titles and descriptions display.

Captions are text titles and descriptions that add information and context to your images. Captions don’t have their own style tweaks. Instead, they follow the tweaks for other text on your site.

How you style an image’s caption depends on where it is and how it’s set to display. Captions generally display in one of three ways:

• Caption below – The text displays on the page, below the image.
• Caption overlay – The text displays over the image, either at all times or only on hover.
• Lightbox caption overlay – With lightbox enabled, the image appears in a popup when clicked. A caption displays over the image on hover.

This guide covers the style rules for all images on your site that display captions.

Watch a video

Before you begin

• Fonts and colors have separate tweaks.
• We recommend keeping captions short, especially when the caption overlays an image. Longer captions may get cut off in certain devices and browsers.

In version 7.0:

• It’s not possible to add line breaks to image caption titles. You can add line breaks to image description text.
• We use the term “body text” to refer to any text that isn’t a heading or meta text, but each template has its own tweak names. For example, in Adirondack, the tweak that controls the body text font is called Text. In Skye, it’s called Body. To learn more, visit Styling text.
• Some templates only have one tweak that controls all header colors or all header fonts. In those cases, captions that follow specific header styles (like Heading 3) will follow the general header tweak.

If you’re having difficulty styling captions on a 7.0 site, we recommend experimenting on a test page:

1. Create a layout page in the Not linked section of your navigation.
2. Add a text block that contains heading 1, heading 2, heading 3, and body text (You’ll need at least four lines of text).
3. Use site styles to give each of these a distinct font and color.
4. Look at your caption to see how it’s changed.

Gallery section

Images in gallery sections support descriptions, which display when the Captions toggle is turned on in the section editor.

In all layouts:

• Font – Follows Paragraphs
• Color – Follows Paragraph: Medium
• Size – Not adjustable
• Caption alignment – Not adjustable

Keep in mind:

• Image descriptions don’t support line breaks.
• Captions appear under each image in all Grid layouts and Slideshow: Simple and Full layouts. In the Slideshow: Reel layout, captions only appear under the center image.
• Captions don’t appear in lightbox view.

Image block

Most image block layouts support a title and subtitle with their own style settings. In Fluid Engine sections, you’ll use a text block to add text adjacent to or overlaying an image block instead of adding a caption.

How you style captions depends on which version of Squarespace your site is on.

Summary Block

The Summary Block supports captions for all its designs (Wall, List, Carousel, Grid).

How you style the Summary Block caption depends on which version of Squarespace your site is on.

Instagram Block

The Instagram Block supports captions for the Slideshow and Stacked designs, and in the Grid design when viewed in a lightbox.

How you adjust the caption text depends on which version of Squarespace your site is on.

Grid gallery block

How you adjust grid gallery block caption text depends on which version of Squarespace your site is on.

Slideshow gallery block

How you adjust slideshow gallery block caption text depends on which version of Squarespace your site is on.

Stack gallery block

How you adjust stack gallery block caption text depends on which version of Squarespace your site is on.

Carousel gallery block

Carousel gallery blocks don’t display captions.

Gallery page

Every template on version 7.0 has a built-in gallery page. Many templates have a unique gallery page, while others use the standard gallery page, which can display either as a slideshow or grid.

Unique gallery pages

These template families have unique (template-specific) gallery pages. Use the links below to learn about each template’s gallery page. If your template isn’t listed here, it has a standard gallery page.

• Flatiron
• Forte
• Ishimoto
• Momentum
• Montauk
• Supply
• Tremont
• Wells
• Wexley

Standard gallery pages

In most templates with standard gallery pages:

Grid format:

• Title font – Follows Heading 1
• Title color – Always white
• Title size – Follows body text
• Description font – Follows body text
• Description color – Always white
• Description size – Follows body text

Slideshow format:

• Title font – Follows body text
• Title color – Always white
• Title size – Not adjustable
• Description font – Follows body text
• Description color – Always gray
• Description size – Not adjustable

Note: The body text tweak adjusts the space between the title and description

There are exceptions in these template families:

Template family

Grid format

Slideshow format

Adirondack

Title font – Not adjustableTitle size – Not adjustableDescription font – Not adjustableDescription size – Not adjustable

Title font – Follows Heading 1

Note: Always displays at the top and centered

Bedford

Title size – Not adjustableDescription font – Not adjustableDescription size – Not adjustable

Five

Title size – Follows Heading 1

Galapagos

Title color – Follows Heading 1Title size – Follows Heading 1

Note: Enable Custom headings in site styles.

Marquee (discontinued)

Title font – Follows body textTitle size – Follows body textDescription size – Follows body text

Native

Note: Always displays at the top

Pacific

Title color – Follows Heading 1Title size – Follows Heading 1Description font – Not adjustableDescription size – Not adjustable

Skye

Title font – Follows the List title tweakTitle color – Follows the Title color tweakTitle size – Follows the List title tweakDescription font – Follows the Excerpt tweakDescription size – Follows the Excerpt tweak

Note: List title and Title color tweaks are only available when viewing a blog page

Title font – Follows the List title tweakTitle color – Follows the Title color tweakTitle size – Follows the List title tweakDescription font – Follows the List title tweakDescription color – Follows the Title color tweakDescription size – Follows the List title tweak

Note: List title and Title color tweaks are only available when viewing a blog page

York

Title font – Follows Heading 1Title color – Follows Heading 1Title size – Follows Heading 1

Project pages

The project page is a template-specific portfolio layout, available in the York family (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York). On project pages, the image title and description text display on the page beside or below the image.

Use the tweaks in the Project: fonts section of site styles to style the text of your image title and descriptions. You can also scale the fonts to control how they display.