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

Captions add information and context to your images. Image Blocks, Gallery Blocks, and many templates’ Gallery Pages have built-in caption options.

Captions don’t have their own style tweaks. Instead, they follow the font and color tweaks for the body text and headers on your site. For example, if you set your body text to green, captions below Grid Gallery Blocks will be green.

How you can style an image’s caption depends on where it is and how it’s set to display:

  • Caption below - The text displays on the page, below the image.
  • Caption overlay - The text displays over the image. It either always displays or only displays on hover.
  • Lightbox caption overlay - When you click an image that is lightbox-enabled, it appears in a popup. The caption appears over the image. It either always displays or only displays on hover.

In most templates, blocks and Gallery Pages follow the same general style rules for image captions. This guide covers these rules and exceptions.

Before you begin

  • With the exception of some Image Block layouts, captions typically follow the font and color tweaks for the body text and headers on your site.
  • 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.
  • 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 Header 3) will follow the general header tweak.
  • Fonts and colors have separate tweaks.

If you’re having difficulty, we recommend experimenting on a test page:

  1. Create a Regular Page in the Not Linked section of your navigation.
  2. Add a Text Block that contains Header 1, Header 2, Header 3, and body text (You’ll need at least four lines of text).
  3. Use the Style Editor to give each of these a distinct font and color.
  4. Then look at your caption to see how it’s changed.

Image Block

On Regular Pages, most Image Block layouts support a title and subtitle with their own style settings. These are the same across all templates. Learn more about the Poster, Card, Overlap, Collage, and Stack layouts.

For the Inline layout, and for Image Blocks on other areas of your site such as blog posts and sidebars, captions can display below the image, as an overlay, or as a lightbox overlay. See the sections below for style rules for each.

Caption below

In most templates, for captions that display below the Image Block:

  • Font: Follows body text
  • Color: Follows body text
  • Size: Not adjustable

Exceptions

Bedford, Anya, Bryant, Hayden Size: Follows body text

Five

Font is always black and uppercase

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi Size: Follows body text

Skye, Foundry, Tudor

Font, color, and size: Follows the Image & Gallery Block Captions tweak

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor Size: Follows body text

Caption overlay

In most templates, for captions that display over the Image Block when it's displaying on the page:

  • Font: Follows body text
  • Color: Always gray
  • Size: Not adjustable

Exceptions

Five

Font is always uppercase

Pacific

Color: Follows the Meta Color tweak

Skye, Foundry, Tudor

Font: Follows the Image & Gallery Block Captions tweak

Lightbox overlay

In most templates, for captions that display over the Image Block while in a lightbox pop-up:

  • Font: Follows body text
  • Color: Always white
  • Size: Not adjustable

Exceptions

Adirondack

Font: Not adjustable

Bedford, Anya, Bryant, Hayden

Font: Not adjustable

Five Size: Follows body text

Flatiron

Color: Follows body text

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

Font: Not adjustable

Skye, Foundry, Tudor

Font: Follows the Excerpt tweak
Size: Follows the Excerpt tweak

Tremont, Carson, Henson

Font: Not adjustable
Color:
Follows body text

Wexley

Size: Follows body text

Grid Gallery Block

Grid Gallery Block captions can display below the image, or as a lightbox overlay.

Caption below

In all templates, for captions that display below Grid Gallery Block images:

  • Font: Follows body text
  • Color: Follows body text
  • Size: Not adjustable

Lightbox overlay

In most templates, for captions that display over Grid Gallery Block images while in a lightbox popup:

  • Title font: Follows Header 1
  • Title color: Always white
  • Title size: Follows body text
  • Description font: Follows body text
  • Description color: Always white
  • Description size: Follows body text

Exceptions

Adirondack

Title size: Not adjustable
Description font: Not adjustable
Description size: Not adjustable

Bedford, Anya, Bryant, Hayden

Title size: Not adjustable
Description font: Not adjustable
Description size: Not adjustable

Five

Title size: Follows Header 1

Flatiron

Description color: Follows body text

Galapagos

Title color: Follows Header 1
Title size:
Follows Header 1

Note: Enable Custom Headings in the Style Editor

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

Title color: Follows Header 1
Title size: Follows Header 1
Description font: Not adjustable

Skye, Foundry, Tudor



Title font: Follows the List Title tweak
Title color: Follows the Title Color tweak
Title size: Not adjustable
Description font: Follows the Excerpt tweak
Description size: Follows the Excerpt tweak

Note: List Title and Title Color tweaks are only available when viewing a Blog Page.

Tremont, Carson, Henson

Description font: Not adjustable
Description color: Follows body text
Description size: 
Not adjustable

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor

Title color: Follows Header 1
Title size:
Follows Header 1

Slideshow Gallery Block

Slideshow Gallery Block captions can only display as an overlay.

Caption overlay

In most templates, for captions that display over the Slideshow Gallery Block:

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

Exceptions

Skye, Foundry, Tudor

Title font: Follows body text
Description font: Follows the Image & Gallery Block Captions tweak

Stack Gallery Block

Stack Gallery Block captions can only display below the image. In most templates:

  • Title font: Follows Header 3
  • Title color: Follows Header 3
  • Title size: Follows Header 3
  • Description font: Follows body text
  • Description color: Follows body text
  • Description size: Follows body text

Exceptions

Skye, Foundry, Tudor

Title color: Follows the Body Gallery Block Title tweak
Description font: Follows the Image & Gallery Block Captions tweak
Description color: Follows the Image & Gallery Block Captions tweak
Description size: Follows the Image & Gallery Block Captions tweak

Tip: Enable Custom Headings in the Style Editor to style Galapagos headers.

Carousel Gallery Block

Carousel Gallery Blocks don’t display captions.

Gallery Page

Every template has a built-in Gallery Page. Many templates use a standard Gallery Page, which can display either as a slideshow or grid. Others have unique Gallery Pages.

Unique Gallery Pages

These templates have unique (template-specific) Gallery Pages. Use the links below to review each template’s Gallery Page guide. If your template isn’t listed here, it has a standard Gallery Page.

Standard Gallery Pages

In most templates with standard Gallery Pages:

Grid format:

  • Title font: Follows Header 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.

Exceptions

Template

Grid format

Slideshow format

Adirondack

Title font: Not adjustable
Title size: Not adjustable
Description font: Not adjustable
Description size: Not adjustable

Title font: Follows Header 1

Note: Always displays at the top and centered

Bedford, Anya, Bryant, Hayden

Title size: Not adjustable
Description font: Not adjustable
Description size: Not adjustable

 

Five

Title size: Follows Header 1

 

Galapagos

Title color: Follows Header 1
Title size:
Follows Header 1

Note: Enable Custom Headings in the Style Editor

 

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

Title font: Follows body text
Title size: Follows body text
Description size: Follows body text

 

Native

 

Note: Always displays at the top

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

Title color: Follows Header 1
Title size:
Follows Header 1
Description font:
Not adjustable
Description size: Not adjustable

 

Skye, Foundry, Tudor

Title font: Follows the List Title tweak
Title color: Follows the Title Color tweak
Title size: Follows the List Title tweak
Description font: Follows the Excerpt tweak
Description 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 tweak
Title color: Follows the Title Color tweak
Title size: Follows the List Title tweak
Description font: Follows the List Title tweak
Description color: Follows the Title Color tweak
Description size: Follows the List Title tweak

Note: List Title and Title Color tweaks are only available when viewing a Blog Page.

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor

Title font: Follows Header 1
Title color: Follows Header 1
Title size: Follows Header 1

 

Project Pages

The Project Page is a template-specific portfolio layout, available in the York, Artesia, Harris, Lange, Jasper, Shibori, and Taylor templates. 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 the Style Editor to style the text of your image title and descriptions. You can also scale the fonts to control how they display.

Instagram Block

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

Stacked

Stacked captions below each image. In all templates:

  • Caption font: Follows body text
  • Caption color: Follows body text
  • Caption size: Follows body text

Slideshow 

Slideshow captions display as an overlay, either always or on hover. In all templates:

  • Caption font: Follows body text
  • Caption color: Always white
  • Caption size: Not adjustable

Grid

Grid captions display in the lightbox overlay. In most templates:

  • Caption font: Follows body text
  • Caption color: Always white
  • Caption size: Follows body text

Exceptions

The caption font and caption size aren't adjustable in these templates:

  • Adirondack
  • Bedford, Anya, Bryant, Hayden
  • Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

Summary Block

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

In all templates:

  • Title size, Description size, and Meta size is not adjustable
  • Description font: Follows body text
  • Description color: Follows body text
  • Title color: Varies by template, see the list below

In most templates:

  • Meta 1 and 2 font: Follows body text
  • Meta 1 and 2 color: Follows body text
  • Title font: Follows body text

Exceptions

Adirondack

Title font: Follows the Summary Block Title Font tweak
Title color: Follows the Summary Block Title Color tweak

Avenue

Title font: Follows the Summary Block Title Font tweak
Title color: Follows the Summary Block Title Color tweak

Aviator, Aubrey, Encore

Title font: Follows the Summary Block Title Font tweak
Title color: Follows the Summary Block Title Color tweak

Bedford, Anya, Bryant, Hayden

Title font: Follows the Summary Block Title Font tweak
Title color: Follows the Summary Block Title Color tweak
Meta 1 and 2 color: Follows the Page Meta Color tweak

Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne

Title color: Follows body text

Farro, Haute

Title color: Follows body text

Five

Title color: Follows the Body Link tweak

Gallery and Blog:

  • Meta 1 color: Follows body text
  • Meta 2 color: Follows the Body Link tweak

Events:

  • Meta 1 and 2 color: Follows body text

Products:

  • Meta 1 and 2 color: Follows the Body Link tweak

Flatiron

Title color: Follows the Link Color tweak

Forte

Title color: Follows the Body Link Color tweak
The Underline Body Links tweak affects Meta 2

Galapagos

Title color: Follows the Link Color tweak

Ishimoto

Title color: Follows the Body Link Color tweak

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

Title font: Follows the Summary Block Title Font tweak
Title color: Follows the Summary Block Title Color tweak

Momentum

Title font: Follows the Summary Block Title Font tweak
Title color: Follows the Summary Block Title Color tweak

Montauk, Julia, Kent, Om

Title font: Follows the Summary Block Title Font tweak
Title color: Follows the Summary Block Title Color tweak

Native

Title font: Follows Header 1
Title color: Follows Header 1

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

Title font: Follows the Summary Block Title Font tweak
Title color: Follows the Summary Block Title Color tweak
Meta 1 and 2 font: Follows the Meta Font tweak
Meta 1 and 2 color: Follows the Meta Color tweak

Skye, Foundry, Tudor

Title font: Follows the List Title tweak
Title color: Follows the Title Color tweak
Meta 1 and 2 font: Follows the Meta tweak
Meta 1 and 2 color: Follows the Meta Color tweak

Supply

Title color: Follows the Link Color tweak

Tremont, Carson, Henson

Title color: Follows the Body Link Color tweak

Gallery and Blog:

  • Meta 1 and 2 font: Follows the Meta Font tweak
  • Meta 1 color: Follows the Meta Color tweak
  • Meta 2 color: Follows the Body Link Color tweak

Events:

  • Meta 1 and 2 font: Follows the Meta Font tweak
  • Meta 1 and 2 color: Follows the Meta Color tweak

Products

  • Meta 1 and 2 font: Follows the Meta Font tweak
  • Meta 1 and 2 color: Follows the Body Link Color tweak

Wells

Title color: Follows the Body Link Color tweak

Wexley

Title color: Follows the Body Link Color tweak

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor

Title color: Follows the Body Link Color tweak

Gallery and Blog:

  • Meta 1 color: Follows body text
  • Meta 2 color: Follows the Body Link Color tweak

Event:

  • Meta 1 and 2 color: Follows body text

Products:

  • Meta 1 and 2 color: Follows the Body Link Color tweak
Was this article helpful?
1 out of 14 found this helpful