Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Styling image captions

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 either at all times or only on hover.

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

Mira el video

Antes de comenzar

  • Image captions don't support line breaks in titles. 
  • Fonts and colors have separate tweaks.
  • Recomendamos mantener las leyendas breves, especialmente cuando el título se superpone a una imagen. Las leyendas más largas pueden cortarse en ciertos dispositivos y navegadores.

In version 7.0

  • Cada plantilla tiene sus propios nombres de retoque, pero usamos el término "cuerpo del texto" para hacer referencia a cualquier texto que no sea un encabezado o metatexto. Por ejemplo, en Adirondack, el retoque que controla la fuente del cuerpo del texto se llama Texto y, en Skye, Cuerpo. Para obtener más información, visita Cómo dar formato y estilo a un texto.
  • 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.

Sección de galería

Version 7.0 doesn't support gallery sections. Use a Gallery Page instead.

Las imágenes de las secciones de la galería admiten descripciones, que se muestran cuando la opción Leyendas está activada en el editor de secciones.

In all layouts: 

  • Font: Follows Fonts
  • Color: Follows Paragraph: Medium under Colors
  • Size: Not adjustable

Ten en cuenta lo siguiente:

  • In the Slideshow: Reel layout, captions only appear under the center image. 
  • Captions don't appear in lightbox view. 

Bloque de Imagen

Most Image Block layouts support a title and subtitle with their own style settings.

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

For the Inline layout, captions can display below the image, as an overlay, or as a lightbox overlay. See the below for style rules for each.

Leyenda por debajo

For captions that display below the Inline Image Block:

  • Font: Follows Fonts
  • Color: Follows Colors
  • Size: Set in the text editor

Superposición de leyenda

For captions that display over the Inline Image Block at all times or on hover:

  • Font: Follows Fonts
  • Color: Always white
  • Size: Set in the text editor

Lightbox overlay

For captions that display over the Inline Image Block while in a lightbox pop-up:

  • Font: Follows Fonts
  • Color: Always white
  • Size: Follows Paragraphs: Paragraph 3 under Fonts

For the Inline layout, captions can display below the image, as an overlay, or as a lightbox overlay. See below for style rules for each.

Leyenda por debajo

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

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

There are exceptions in these template families:

Bedford

Size: Follows body text

Five

Font: Always black and uppercase

Pacific

Size: Follows body text

Skye

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

York

Size: Follows body text

Superposición de leyenda

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

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

There are exceptions in these template families:

Five

Font: Always uppercase

Skye

Font: Follows the Image & Gallery Block Captions tweak

Lightbox overlay

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

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

There are exceptions in these template families:

Adirondack

Font: Not adjustable

Bedford

Font: Not adjustable

Five Size: Follows body text

Flatiron

Color: Follows body text

Pacific

Font: Not adjustable

Skye

Fuente: sigue el retoque Fragmento
Tamaño: sigue el retoque Fragmento

Tremont

Font: Not adjustable
Color:
Follows body text

Wexley

Size: Follows body text

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.

In all Summary Block designs:

  • Title size: Follows Paragraphs: Paragraph 2 under Fonts
  • Description size and Meta size: Not adjustable
  • All fonts: Follow Fonts
  • All colors: Follow Colors

In all templates:

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

En la mayoría de las plantillas:

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

There are exceptions in these template families:

Adirondack

Fuente del título: sigue el retoque Fuente del bloque de sumario.
Color del título: sigue el retoque Color del título del bloque de sumario.

Avenue

Fuente del título: sigue el retoque Fuente del bloque de sumario.
Color del título: sigue el retoque Color del título del bloque de sumario.

Aviator

Fuente del título: sigue el retoque Fuente del bloque de sumario.
Color del título: sigue el retoque Color del título del bloque de sumario.

Bedford

Fuente del título: sigue el retoque Fuente del título del bloque de sumario.
Color del título: sigue el retoque Color del título del bloque de sumario.
Color de los metadatos 1 y 2: sigue el retoque Color de los metadatos de la página.

Brine

Title color: Follows body text

Farro

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

Color del título: sigue el retoque Color del enlace del cuerpo.
El retoque Enlaces del cuerpo Subrayado afecta a Metadatos 2.

Galapagos

Title color: Follows the Link Color tweak

Ishimoto

Title color: Follows the Body Link Color tweak

Marquee (descontinuada)

Fuente del título: sigue el retoque Fuente del bloque de sumario.
Color del título: sigue el retoque Color del título del bloque de sumario.

Momentum

Fuente del título: sigue el retoque Fuente del bloque de sumario.
Color del título: sigue el retoque Color del título del bloque de sumario.

Montauk

Fuente del título: sigue el retoque Fuente del bloque de sumario.
Color del título: sigue el retoque Color del título del bloque de sumario.

Native

Title font: Follows Heading 1
Title color: Follows Heading 1

Pacific

Fuente del título: sigue el retoque Fuente del título del bloque de sumario.
Color del título: sigue el retoque Color del título del bloque de sumario.
Fuente de metadatos 1 y 2: sigue el retoque Fuente de metadatos.
Color de metadatos 1 y 2: sigue el retoque Color de metadatos.

Skye

Título de la fuente: sigue el retoque Título de la lista.
Color del título: sigue el retoque Color del título.
Fuente de metadatos 1 y 2: sigue el retoque Metadatos.
Color de metadatos 1 y 2: sigue el retoque Color de metadatos.

Supply

Title color: Follows the Link Color tweak

Tremont

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

Productos

  • 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

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

Bloque de Instagram

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.

Apilado

Stacked captions below each image:

  • Caption font: Follows Fonts
  • Caption color: Follows Paragraph: Medium under Colors
  • Caption size: Follows Paragraphs: Paragraph 2 under Fonts

Slideshow 

Slideshow captions display as an overlay, either at all times or on hover:

  • Caption font: Follows Fonts
  • Caption color: Always white
  • Caption size: Not adjustable

Cuadrícula

Grid captions display in the lightbox overlay:

  • Caption font: Follows Fonts
  • Caption color: Always white
  • Caption size: Not adjustable

Apilado

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 at all times or on hover. In all templates:

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

Cuadrícula

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

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

Excepciones

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

  • Adirondack
  • Bedford
  • Pacific

Bloque de Galería en Cuadrícula

How you adjust Grid Gallery Block caption text depends on which version of Squarespace your site is on.

En la versión 7.1, solo puedes añadir Bloques de galería a las publicaciones de blog, los elementos de productos y los eventos separados.

Grid Gallery Block titles can display below the image. Titles and descriptions display in the lightbox overlay.

Title below

For titles that display below Grid Gallery Block images:

  • Font: Follows Fonts
  • Color: Follows Paragraph: Medium under Colors
  • Size: Not adjustable

Lightbox overlay

For captions that display over Grid Gallery Block images while in a lightbox popup:

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

Grid Gallery Block titles can display below the image. Titles and descriptions display in the lightbox overlay.

Title below

In all templates, for titles 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 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

There are exceptions in these template families:

Adirondack

Tamaño del título: No ajustable
Fuente de la descripción: No ajustable
Tamaño de la descripción: No ajustable

Bedford

Tamaño del título: No ajustable
Fuente de la descripción: No ajustable
Tamaño de la descripción: No ajustable

Five

Title size: Follows Heading 1

Flatiron

Description color: Follows body text

Galapagos

Title color: Follows Heading 1
Title size:
Follows Heading 1

Note: Enable Custom Headings in Site Styles

Pacific

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

Skye

Fuente del título: sigue el retoque Título de la lista.
Color del título: sigue el retoque Color del título en Colores del texto de todo el sitio.
Tamaño del título: No ajustable
Fuente de la descripción: sigue el retoque Fragmento.
Tamaño de la descripción: sigue el retoque Fragmento.

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

Tremont

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

York

Title color: Follows Heading 1
Title size:
Follows Heading 1

Tip: In some templates, the Title Color tweak also affects blog post titles. To ensure visibility, your Title Color should be different than your site's background color.

Bloque de galería en diapositivas

How you adjust Slideshow Gallery Block caption text depends on which version of Squarespace your site is on.

En la versión 7.1, solo puedes añadir Bloques de galería a las publicaciones de blog, los elementos de productos y los eventos separados.

Slideshow Gallery Block captions can only display as an overlay. For captions that display over the Slideshow Gallery Block:

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

Slideshow Gallery Block captions can only display as an 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

In the Skye family:

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

Bloque de Galería Stack (Apilado)

How you adjust Stack Gallery Block caption text depends on which version of Squarespace your site is on.

En la versión 7.1, solo puedes añadir Bloques de galería a las publicaciones de blog, los elementos de productos y los eventos separados.

Stack Gallery Block captions can only display below the image:

  • Title font: Follows Fonts
  • Title color: Follows Heading: Medium in Colors
  • Title size: Follows Heading 3 in Fonts
  • Description font: Follows Fonts
  • Description color: Follows Paragraph (Medium) in Colors
  • Description size: Follows Paragraph 2 in Fonts

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

  • Title font: Follows Heading 3
  • Title color: Follows Heading 3
  • Title size: Follows Heading 3
  • Description font: Follows body text
  • Description color: Follows body text
  • Description size: Follows body text
Tip: Enable Custom Headings in Site Styles to style Galapagos headers.

In the Skye family:

  • 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

Bloque de Galería en Carrusel

En la versión 7.1, solo puedes añadir Bloques de galería a las publicaciones de blog, los elementos de productos y los eventos separados.

Carousel Gallery Blocks don’t display captions.

Página de Galería

Version 7.1 doesn't support Gallery Pages. Use a gallery section instead.

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

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:

Familia de plantillas

Grid format

Slideshow format

Adirondack

Fuente del título: No ajustable
Tamaño del título: No ajustable
Fuente de la descripción: No ajustable
Tamaño de la descripción: No ajustable

Title font: Follows Heading 1

Note: Always displays at the top and centered

Bedford

Tamaño del título: No ajustable
Fuente de la descripción: No ajustable
Tamaño de la descripción; No ajustable

 

Five

Title size: Follows Heading 1

 

Galapagos

Title color: Follows Heading 1
Title size:
Follows Heading 1

Note: Enable Custom Headings in Site Styles.

 

Marquee (descontinuada)

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

 

Native

 

Note: Always displays at the top

Pacific

Color del título: sigue Encabezado 1
Tamaño del título:
sigue Encabezado 1
Fuente de la descripción:
No ajustable
Tamaño de la descripción: No ajustable

 

Skye

Fuente del título: sigue el retoque Título de la lista.
Color del título: sigue el retoque Color del título.
Tamaño del título: sigue el retoque Título de la lista.
Fuente de la descripción: sigue el retoque Fragmento.
Tamaño de la descripción: sigue el retoque Fragmento.

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

Fuente del título: sigue el retoque Título de la lista.
Color del título: sigue el retoque Color del título.
Tamaño del título: sigue el retoque Título de la lista.
Fuente de la descripción: sigue el retoque Título de la lista.
Color de la descripción: sigue el retoque Color del título.
Tamaño de la descripción: sigue el retoque Título de la lista.

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

York

Fuente del título: sigue Encabezado 1
Color del título: sigue Encabezado 1
Tamaño del título: sigue Encabezado 1

 

Páginas de Proyecto

Version 7.1 doesn't support Project Pages. Use a gallery section instead.

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.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 9 de 79