Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

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. 

Regarder une vidéo

Avant de commencer

  • Image captions don't support line breaks in titles. 
  • Fonts and colors have separate tweaks.
  • Nous vous recommandons de préférer les légendes courtes, en particulier si la légende superpose une image. Une légende trop longue risque dʼêtre coupée sur certains appareils et navigateurs.

In version 7.0

  • Chaque template a ses propres noms d'ajustement, mais nous utilisons le terme « corps de texte  » pour faire référence à tout texte qui n'est pas un titre ou un méta texte. Par exemple, dans Adirondack, l'ajustement qui contrôle la police du corps de texte s'appelle Texte. Dans Skye, il s'appelle Corps. Pour en savoir plus, consultez Mise en forme et style du texte.
  • 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.

Section galerie

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

Les images des sections de galerie prennent en charge les descriptions, qui sont affichées lorsque le bouton Légendes est activé dans lʼéditeur de section.

In all layouts: 

  • Police : suit les polices
  • Couleur : suit Paragraphe : moyen sous Couleurs
  • Taille : non réglable

Important :

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

Bloc Image

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.

Légende en dessous

For captions that display below the Inline Image Block:

  • Police : suit les polices
  • Color: Follows Colors
  • Size: Set in the text editor

Légende superposée

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

  • Police : suit les polices
  • 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

Avec la disposition Inline, les légendes peuvent être affichées sous l’image ou de manière superposée, avec ou sans effet lightbox. Vous trouverez ci-dessous les règles de style pour chaque option.

Légende en dessous

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

  • Police : suit le corps de texte
  • Color: Follows body text
  • Taille : non réglable

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

Légende superposée

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

  • Police : suit le corps de texte
  • Color: Always gray
  • Taille : non réglable

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:

  • Police : suit le corps de texte
  • Color: Always white
  • Taille : non réglable

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

Police : suit les ajustements apportés à l'extrait
Taille : suit les ajustements apportés à l'extrait

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

Dans tous les templates :

  • Title size, Description size, and Meta size: Not adjustable
  • Police de la description : suit le corps de texte
  • Description color: Follows body text
  • Title color: Varies by template, see the list below

Dans la plupart des templates :

  • Meta 1 and 2 font: Follows body text
  • Couleur des métadonnées 1 et 2 : suit le corps de texte
  • Police du titre : suit le corps de texte

Il existe des exceptions dans ces familles de templates :

Adirondack

Police du titre : suit les ajustements apportés à la police du titre du bloc Sommaire
Couleur du titre : suit les ajustements apportés à la couleur du titre du bloc Sommaire

Avenue

Police du titre : suit les ajustements apportés à la police du titre du bloc Sommaire
Couleur du titre : suit les ajustements apportés à la couleur du titre du bloc Sommaire

Aviator

Police du titre : suit les ajustements apportés à la police du titre du bloc Sommaire
Couleur du titre : suit les ajustements apportés à la couleur du titre du bloc Sommaire

Bedford

Police du titre : suit les ajustements apportés à la police du titre du bloc Sommaire
Couleur du titre : suit les ajustements apportés à la couleur du titre du bloc Sommaire
Couleurs des métadonnées 1 et 2 : suit les ajustements apportés à la couleur des métadonnées des pages

Brine

Title color: Follows body text

Farro

Title color: Follows body text

Five

Title color: Follows the Body Link tweak

Gallery and Blog:

  • Couleur des métadonnées 1 : suit le corps de texte
  • Meta 2 color: Follows the Body Link tweak

Events:

  • Couleur des métadonnées 1 et 2 : suit le corps de texte

Products:

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

Flatiron

Title color: Follows the Link Color tweak

Forte

Couleur du titre : suit les ajustements apportés à la couleur du lien du corps
Les ajustements apportés aux liens soulignés dans le corps affectent les métadonnées 2

Galapagos

Title color: Follows the Link Color tweak

Ishimoto

Title color: Follows the Body Link Color tweak

Marquee (supprimé)

Police du titre : suit les ajustements apportés à la police du titre du bloc Sommaire
Couleur du titre : suit les ajustements apportés à la couleur du titre du bloc Sommaire

Momentum

Police du titre : suit les ajustements apportés à la police du titre du bloc Sommaire
Couleur du titre : suit les ajustements apportés à la couleur du titre du bloc Sommaire

Montauk

Police du titre : suit les ajustements apportés à la police du titre du bloc Sommaire
Couleur du titre : suit les ajustements apportés à la couleur du titre du bloc Sommaire

Native

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

Pacific

Police du titre : suit les ajustements apportés à la police du titre du bloc Sommaire
Couleur du titre : suit les ajustements apportés à la couleur du titre du bloc Sommaire
Police des métadonnées 1 et 2 : suit les ajustements apportés à la police des métadonnées
Couleur des métadonnées 1 et 2 : suit les ajustements apportés à la couleur des métadonnées

Skye

Police du titre : suit les ajustements apportés au titre de la liste
Couleur du titre : suit les ajustements apportés à la couleur du titre
Police des métadonnées 1 et 2 : suit les ajustements apportés aux métadonnées
Couleur des métadonnées 1 et 2 : suit les ajustements apportés à la couleur des métadonnées

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
  • Couleur des métadonnées 2 : suit l’ajustement Couleur du lien du corps

Events:

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

Produits

  • Meta 1 and 2 font: Follows the Meta Font tweak
  • Couleur des métadonnées 1 et 2 : suit l’ajustement Couleur du lien du corps

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:

  • Couleur des métadonnées 1 : suit le corps de texte
  • Couleur des métadonnées 2 : suit l’ajustement Couleur du lien du corps

Event:

  • Couleur des métadonnées 1 et 2 : suit le corps de texte

Products:

  • Couleur des métadonnées 1 et 2 : suit l’ajustement Couleur du lien du corps

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

Empilé

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

Grille

Grid captions display in the lightbox overlay:

  • Caption font: Follows Fonts
  • Caption color: Always white
  • Taille de la légende : non réglable

Empilé

Les légendes des designs Empilé s’affichent sous chaque image. Dans tous les templates :

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

Slideshow 

Les légendes des designs Diaporama s’affichent de manière superposée, tout le temps ou en cas de survol. Dans tous les templates :

  • Caption font: Follows body text
  • Caption color: Always white
  • Taille de la légende : non réglable

Grille

Les légendes des designs Grille s’affichent de manière superposée avec effet lightbox. Dans la plupart des 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 template families:

  • Adirondack
  • Bedford
  • Pacific

Bloc Galerie en Grille

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

Dans la version 7.1, vous pouvez ajouter des blocs Galerie uniquement aux billets de blog, aux produits et aux événements.

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:

  • Police : suit les polices
  • Couleur : suit Paragraphe : moyen sous Couleurs
  • Taille : non réglable

Lightbox overlay

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

  • Police du titre : suit Polices
  • Title color: Always white
  • Taille du titre : non réglable
  • Police de la description : suit Polices
  • Description color: Always white
  • Taille de la description : non réglable

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:

  • Police : suit le corps de texte
  • Color: Follows body text
  • Taille : non réglable

Lightbox overlay

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

  • Police du titre : suit Titre 1
  • Title color: Always white
  • Title size: Follows body text
  • Police de la description : suit le corps de texte
  • Couleur de la description : Toujours blanc
  • Description size: Follows body text

There are exceptions in these template families:

Adirondack

Taille du titre : non réglable
Police de la description : non réglable
Taille de la description : non réglable

Bedford

Taille du titre : non réglable
Police de la description : non réglable
Taille de la description : non réglable

Five

Taille du titre : suit Titre 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

Police du titre : suit les ajustements apportés au titre de la liste
Couleur du titre : suit les ajustements apportés à la couleur du titre sous Couleurs du texte pour tout le site
Taille du titre : non réglable
Police de la description : suit les ajustements apportés à l'extrait
Taille de la description : suit les ajustements apportés à l'extrait

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.

Bloc Galerie en Diaporama

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

Dans la version 7.1, vous pouvez ajouter des blocs Galerie uniquement aux billets de blog, aux produits et aux événements.

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

  • Police du titre : suit Polices
  • Title color: Always white
  • Taille du titre : non réglable
  • Police de la description : suit Polices
  • Description color: Always white
  • Taille de la description : non réglable

Slideshow Gallery Block captions can only display as an overlay. In most templates, for captions that display over the Slideshow Gallery Block:

  • Police du titre : suit le corps de texte
  • Title color: Always white
  • Taille du titre : non réglable
  • Police de la description : suit le corps de texte
  • Description color: Always white
  • Taille de la description : non réglable

In the Skye family:

  • Police du titre : suit le corps de texte
  • Police de la description : suit l’ajustement Légendes des blocs Image et Galerie

Bloc Galerie en pile

La méthode pour modifier le texte des légendes d’un bloc Galerie en pile dépend de la version de Squarespace qu’utilise votre site.

Dans la version 7.1, vous pouvez ajouter des blocs Galerie uniquement aux billets de blog, aux produits et aux événements.

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
  • Police de la description : suit Polices
  • Description color: Follows Paragraph (Medium) in Colors
  • Description size: Follows Paragraph 2 in Fonts

Les légendes d’un bloc Galerie en pile ne peuvent être affichées que sous l’image. Dans la plupart des templates :

  • Title font: Follows Heading 3
  • Title color: Follows Heading 3
  • Taille du titre : suit Titre 3
  • Police de la description : suit le corps de texte
  • Description color: Follows body text
  • Taille de la description : suit le corps de texte
Tip: Enable Custom Headings in Site Styles to style Galapagos headers.

In the Skye family:

  • Title color: Follows the Body Gallery Block Title tweak
  • Police de la description : suit l’ajustement Légendes des blocs Image et Galerie
  • Description color: Follows the Image & Gallery Block Captions tweak
  • Description size: Follows the Image & Gallery Block Captions tweak

Bloc Galerie en Carrousel

Dans la version 7.1, vous pouvez ajouter des blocs Galerie uniquement aux billets de blog, aux produits et aux événements.

Carousel Gallery Blocks don’t display captions.

Page Galerie

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:

  • Police du titre : suit Titre 1
  • Title color: Always white
  • Taille du titre : suit le corps de texte
  • Police de la description : suit le corps de texte
  • Couleur de la description : Toujours blanc
  • Taille de la description : suit le corps de texte

Slideshow format:

  • Police du titre : suit le corps de texte
  • Title color: Always white
  • Taille du titre : non réglable
  • Police de la description : suit le corps de texte
  • 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:

Famille de templates

Grid format

Slideshow format

Adirondack

Police du titre : non réglable
Taille du titre : non réglable
Police de la description : non réglable
Taille de la description : non réglable

Police du titre : suit Titre 1

Note: Always displays at the top and centered

Bedford

Taille du titre : non réglable
Police de la description : non réglable
Taille de la description : non réglable

 

Five

Taille du titre : suit Titre 1

 

Galapagos

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

Remarque : activez Titres personnalisés dans le panneau Styles du site.

 

Marquee (supprimé)

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

 

Native

 

Note: Always displays at the top

Pacific

Couleur du titre : suit le Titre 1
Taille du titre :
suit le Titre 1
Police de la description :
non réglable
Taille de la description : non réglable

 

Skye

Police du titre : suit les ajustements apportés au titre de la liste
Couleur du titre : suit les ajustements apportés à lacouleur du titre
Taille du titre : suit les ajustements apportés au titre de la liste
Police de la description : suit les ajustements apportés à l'extrait
Taille de la description : suit les ajustements apportés à l'extrait

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

Police du titre : suit les ajustements apportés au titre de la liste
Couleur du titre : suit les ajustements apportés à la couleur du titre
Taille du titre : suit les ajustements apportés au titre de la liste
Police de la description : suit les ajustements apportés au titre de la liste
Couleur de la description : suit les ajustements apportés à la couleur du titre
Taille de la description : suit les ajustements apportés au titre de la liste

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

York

Police du titre : suit le Titre 1
Couleur du titre : suit le Titre 1
Taille du titre : suit le Titre 1

 

Pages Projet

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.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 9 sur 79