Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

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:

  • Didascalia sotto - Il testo viene visualizzato nella pagina, sotto l'immagine.
  • Caption overlay - The text displays over the image, either at all times or only on hover.
  • Sovrapposizione didascalia lightbox - Con l'opzione lightbox abilitata, l'immagine appare in un pop-up quando viene cliccata. Una didascalia appare sopra l'immagine al passaggio del mouse.

Questa guida illustra le regole di stile per tutte le immagini del tuo sito che mostrano delle didascalie.

Guarda un video

Prima di iniziare

  • Fonts and colors have separate tweaks.
  • Ti consigliamo di mantenere le didascalie brevi, soprattutto quando la didascalia si sovrappone a un'immagine. Didascalie più lunghe potrebbero apparire tagliate in determinati dispositivi e browser.

Nella versione 7.0:

  • Non è possibile aggiungere interruzioni di riga ai titoli delle didascalie delle immagini. Puoi aggiungere interruzioni di riga al testo della descrizione dell'immagine.
  • Ogni modello ha i propri nomi di tweak, ma usiamo il termine "corpo del testo" per riferirci a qualsiasi testo che non sia un'intestazione o metatesto. Ad esempio, in Adirondack, il tweak che controlla il tipo di carattere del corpo del testo è denominato Testo. In Skye, si chiama Corpo. Per maggiori informazioni, visita Definire lo stile del testo.
  • 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.

Sezione galleria

La versione 7.0 non supporta le sezioni galleria. In alternativa, utilizza una Pagina galleria.

Le immagini delle sezioni galleria supportano le descrizioni, che vengono visualizzate quando l'opzione Didascalia è attivata nell'editor di sezione.

In tutti i layout:

  • Tipo di carattere - Segue Paragrafi
  • Colore - Segue Paragrafo: medio
  • Dimensione - Non regolabile
  • Allineamento didascalia - Non regolabile

Ricorda:

  • Le descrizioni delle immagini non supportano interruzioni di riga.
  • Le didascalie vengono visualizzate sotto ogni immagine in tutti i layout Griglia e Slideshow: Semplice e Completa. Nel layout Slideshow: Pellicola , le didascalie vengono visualizzate solo sotto l'immagine centrale.
  • Le didascalie non vengono visualizzate nelle lightbox.

Blocco Immagine

La maggior parte dei layout Blocco immagine supporta un titolo e un sottotitolo con le proprie impostazioni di stile.

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.

Didascalia sottostante

For captions that display below the Inline Image Block:

  • Tipo di carattere - Segue Paragrafi
  • Colore: segue i tweak del testo per il tipo di testo impostato in Colori
  • Dimensione - Impostata nell'editor di testo

Didascalia sovrapposta

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

  • Tipo di carattere - Segue Paragrafi
  • Colore - Sempre bianco
  • Dimensione - Impostata nell'editor di testo

Lightbox overlay

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

  • Tipo di carattere - Segue Tipi di carattere
  • Colore - Sempre bianco
  • Dimensione - Segue Paragrafo 3

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.

Didascalia sottostante

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

  • Tipo di carattere - Segue il corpo del testo
  • Colore - Segue il corpo del testo
  • Dimensione - Non regolabile

There are exceptions in these template families:

Bedford

Dimensione - Segue il corpo del testo

Five

Tipo di carattere - Sempre nero e maiuscolo

Pacific

Dimensione - Segue il corpo del testo

Skye

Tipo di carattere, colore e dimensione - Segue il tweak Didascalie Blocchi immagine e galleria

York

Dimensione - Segue il corpo del testo

Didascalia sovrapposta

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

  • Tipo di carattere - Segue il corpo del testo
  • Colore - Sempre grigio
  • Dimensione - Non regolabile

There are exceptions in these template families:

Five

Tipo di carattere - Sempre maiuscolo

Skye

Tipo di carattere - Segue il tweak Didascalie Blocchi immagine e galleria

Lightbox overlay

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

  • Tipo di carattere - Segue il corpo del testo
  • Colore - Sempre bianco
  • Dimensione - Non regolabile

There are exceptions in these template families:

Adirondack

Tipo di carattere - Non regolabile

Bedford

Tipo di carattere - Non regolabile

Five Dimensione - Segue il corpo del testo

Flatiron

Colore - Segue il corpo del testo

Pacific

Tipo di carattere - Non regolabile

Skye

Tipo di carattere - Segue il tweak Estratto
Dimensione - Segue il tweak Estratto

Tremont

Tipo di carattere - Non regolabile
Colore
- Segue il corpo del testo

Wexley

Dimensione - Segue il corpo del testo

Blocco Riepilogo

Il Blocco riepilogo supporta le didascalie per tutti i design (Bacheca, Elenco, Carosello, Griglia).

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

In all Summary Block designs:

  • Dimensione titolo - Segue Paragrafo 2
  • Dimensione descrizione e Dimensione metadati - Non regolabile
  • Tipo di carattere - Segue Paragrafi
  • Colore - Segue i tweak Blocco riepilogo sotto Colori

In tutti i modelli:

  • Dimensione titolo, Dimensione descrizione e Dimensione metadati - Non regolabile
  • Tipo di carattere descrizione - Segue il corpo del testo
  • Colore descrizione - Segue il corpo del testo
  • Colore del titolo - Varia in base al modello, come da elenco sottostante

Nella maggior parte dei modelli:

  • Tipo di carattere metadati 1 e 2 - Segue il corpo del testo
  • Colore metadati 1 e 2 - Segue il corpo del testo
  • Tipo di carattere titolo - Segue il corpo del testo

There are exceptions in these template families:

Adirondack

Tipo di carattere del titolo: segue il tweak Tipo di carattere del titolo del blocco riepilogo
Colore del titolo: segue il tweak Colore del titolo del blocco di riepilogo

Avenue

Tipo di carattere del titolo: segue il tweak Tipo di carattere del titolo del blocco riepilogo
Colore del titolo: segue il tweak Colore del titolo del blocco di riepilogo

Aviator

Tipo di carattere del titolo: segue il tweak Tipo di carattere del titolo del blocco riepilogo
Colore del titolo: segue il tweak Colore del titolo del blocco di riepilogo

Bedford

Tipo di carattere del titolo: segue il tweak Tipo di carattere del titolo del blocco riepilogo
Colore del titolo: segue il tweak Colore del titolo del blocco riepilogo
Colore meta 1 e 2: segue il tweak del colore meta della pagina

Brine

Colore titolo - Segue il corpo del testo

Farro

Colore titolo - Segue il corpo del testo

Five

Colore titolo - Segue il tweak Link nel corpo del testo

Gallery and Blog:

  • Colore metadati 1 - Segue il corpo del testo
  • Colore metadati 2 - Segue il tweak Link nel corpo del testo

Events:

  • Colore metadati 1 e 2 - Segue il corpo del testo

Products:

  • Colore metadati 1 e 2 - Segue il tweak Link nel corpo del testo

Flatiron

Colore titolo - Segue il tweak Colore link

Forte

Colore titolo: segue il tweak Colore del link del corpo
Il tweak Sottolinea link del corpo incide su Meta 2

Galapagos

Colore titolo - Segue il tweak Colore link

Ishimoto

Colore titolo - Segue il tweak Colore link nel corpo del testo

Marquee (sospeso)

Tipo di carattere del titolo: segue il tweak Tipo di carattere del titolo del blocco riepilogo
Colore del titolo: segue il tweak Colore del titolo del blocco di riepilogo

Momentum

Tipo di carattere del titolo: segue il tweak Tipo di carattere del titolo del blocco riepilogo
Colore del titolo: segue il tweak Colore del titolo del blocco di riepilogo

Montauk

Tipo di carattere del titolo: segue il tweak Tipo di carattere del titolo del blocco riepilogo
Colore del titolo: segue il tweak Colore del titolo del blocco di riepilogo

Native

Tipo di carattere titolo - Segue Intestazione 1
Colore titolo - Segue Intestazione 1

Pacific

Tipo di carattere del titolo: segue il tweak Tipo di carattere del titolo del blocco riepilogo
Colore del titolo: segue il tweak Colore del titolo del blocco riepilogo
Tipo di carattere meta 1 e 2: segue il tweakTipo di carattere meta
Colore meta 1 e 2: segue il tweak Meta colore

Skye

Tipo di carattere titolo - Segue il tweak Titolo elenco
Colore titolo - Segue il tweak Colore titolo
Tipo di carattere metadati 1 e 2 - Segue il tweak Metadati
Colore metadati 1 e 2 - Segue il tweak Colore metadati

Supply

Colore titolo - Segue il tweak Colore link

Tremont

Colore titolo - Segue il tweak Colore link nel corpo del testo

Gallery and Blog:

  • Tipo di carattere metadati 1 e 2 - Segue il tweak Tipo di carattere metadati
  • Colore metadati 1 - Segue il tweak Colore metadati
  • Colore metadati 2 - Segue il tweak Colore link nel corpo del testo

Events:

  • Tipo di carattere metadati 1 e 2 - Segue il tweak Tipo di carattere metadati
  • Colore metadati 1 e 2 - Segue il tweak Colore metadati

Prodotti

  • Tipo di carattere metadati 1 e 2 - Segue il tweak Tipo di carattere metadati
  • Colore metadati 1 e 2 - Segue il tweak Colore link nel corpo del testo

Wells

Colore titolo - Segue il tweak Colore link nel corpo del testo

Wexley

Colore titolo - Segue il tweak Colore link nel corpo del testo

York

Colore titolo - Segue il tweak Colore link nel corpo del testo

Gallery and Blog:

  • Colore metadati 1 - Segue il corpo del testo
  • Colore metadati 2 - Segue il tweak Colore link nel corpo del testo

Event:

  • Colore metadati 1 e 2 - Segue il corpo del testo

Products:

  • Colore metadati 1 e 2 - Segue il tweak Colore link nel corpo del testo

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

A colonna

Didascalie impilate sotto ogni immagine:

  • Tipo di carattere - Segue Paragrafi
  • Colore - Segue Paragrafo: medio
  • Dimensione - Segue Paragrafo 2

Slideshow

Le didascalie degli slideshow vengono visualizzate in sovrapposizione, in qualsiasi momento o al passaggio del mouse.

  • Tipo di carattere - Segue Paragrafi
  • Colore - Sempre bianco
  • Dimensione - Non regolabile

Grid (Griglia)

Grid captions display in the lightbox overlay:

  • Tipo di carattere - Segue Tipi di carattere
  • Colore - Sempre bianco
  • Dimensione - Non regolabile

A colonna

Didascalie impilate sotto ogni immagine. In tutti i modelli:

  • Tipo di carattere - Segue il corpo del testo
  • Colore - Segue il corpo del testo
  • Dimensione - Segue il corpo del testo

Slideshow

Le didascalie degli slideshow vengono visualizzate in sovrapposizione, in qualsiasi momento o al passaggio del mouse. In tutti i modelli:

  • Tipo di carattere - Segue il corpo del testo
  • Colore - Sempre bianco
  • Dimensione - Non regolabile

Grid (Griglia)

Le didascalie della griglia vengono visualizzate nella sovrapposizione della lightbox. Nella maggior parte dei modelli:

  • Tipo di carattere - Segue il corpo del testo
  • Colore - Sempre bianco
  • Dimensione - Segue il corpo del testo

Eccezioni

Il tipo di carattere della didascalia e la dimensione della didascalia non sono regolabili in queste famiglie di modelli:

  • Adirondack
  • Bedford
  • Pacific

Blocco galleria a griglia

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

Nella versione 7.1, è possibile aggiungere  Blocchi galleria solo ai post del blog, agli articoli e ai singoli eventi.

I titoli del Blocco galleria a griglia possono essere visualizzati sotto l'immagine. I titoli e le descrizioni vengono visualizzati nella sovrapposizione lightbox.

Title below

For titles that display below Grid Gallery Block images:

  • Tipo di carattere - Segue Paragrafi
  • Colore - Segue Paragrafo: medio sotto Colori
  • Dimensione - Non regolabile

Lightbox overlay

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

  • Tipo di carattere titolo - Segue Paragrafi
  • Colore titolo - Sempre bianco
  • Dimensione titolo - Non regolabile
  • Tipo di carattere descrizione - Segue Tipi di carattere
  • Colore descrizione - Sempre bianco
  • Dimensione descrizione - Non regolabile

I titoli del Blocco galleria a griglia possono essere visualizzati sotto l'immagine. I titoli e le descrizioni vengono visualizzati nella sovrapposizione lightbox.

Title below

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

  • Tipo di carattere - Segue il corpo del testo
  • Colore - Segue il corpo del testo
  • Dimensione - Non regolabile

Lightbox overlay

Nella maggior parte dei modelli, per le didascalie che vengono visualizzate sulle immagini dei Blocchi galleria a griglia in un pop-up lightbox:

  • Tipo di carattere titolo - Segue Intestazione 1
  • Colore titolo - Sempre bianco
  • Dimensione titolo - Segue il corpo del testo
  • Tipo di carattere descrizione - Segue il corpo del testo
  • Colore descrizione - Sempre bianco
  • Dimensione descrizione - Segue il corpo del testo

There are exceptions in these template families:

Adirondack

Dimensione titolo - Non regolabile
Tipo di carattere descrizione - Non regolabile
Dimensione descrizione - Non regolabile

Bedford

Dimensione titolo - Non regolabile
Tipo di carattere descrizione - Non regolabile
Dimensione descrizione - Non regolabile

Five

Dimensione titolo - Segue Intestazione 1

Flatiron

Colore descrizione - Segue il corpo del testo

Galapagos

Colore titolo - Segue Intestazione 1
Dimensione titolo
- Segue Intestazione 1

Nota: abilita Intestazioni personalizzate in Stili sito

Pacific

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

Skye

Tipo di carattere titolo: segue il tweak Elenco titolo
Colore titolo: segue il tweakColore titolo in Colori di testo a livello del sito
Dimensione titolo: non regolabile
Tipo di carattere descrizione: segue il tweak Estratto
Descrizione dimensione: segue il tweak Estratto

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

Tremont

Tipo di carattere descrizione - Non regolabile
Descrizione colore - Segue il corpo del testo
Dimensione descrizione
- Non regolabile

York

Colore titolo - Segue Intestazione 1
Dimensione titolo
- Segue Intestazione 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.

Blocco Galleria a slideshow

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

Nella versione 7.1, è possibile aggiungere  Blocchi galleria solo ai post del blog, agli articoli e ai singoli eventi.

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

  • Tipo di carattere titolo - Segue Paragrafi
  • Colore titolo - Sempre bianco
  • Dimensione titolo - Non regolabile
  • Tipo di carattere descrizione - Segue Paragrafi
  • Colore descrizione - Sempre bianco
  • Dimensione descrizione - Non regolabile

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

  • Tipo di carattere titolo - Segue il corpo del testo
  • Colore titolo - Sempre bianco
  • Dimensione titolo - Non regolabile
  • Tipo di carattere descrizione - Segue il corpo del testo
  • Colore descrizione - Sempre bianco
  • Dimensione descrizione - Non regolabile

In the Skye family:

  • Tipo di carattere titolo - Segue il corpo del testo
  • Tipo di carattere descrizione - Segue il tweak Didascalie Blocchi immagine e galleria

Stack Gallery Block (Blocco Galleria Impilato)

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

Nella versione 7.1, è possibile aggiungere  Blocchi galleria solo ai post del blog, agli articoli e ai singoli eventi.

Stack Gallery Block captions can only display below the image:

  • Tipo di carattere titolo - Segue Intestazioni
  • Colore titolo - Segue Intestazione (Media)
  • Dimensioni titolo - Segue Intestazione 3
  • Tipo di carattere descrizione - Segue Paragrafi
  • Colore descrizione - Segue Paragrafo (Medio)
  • Dimensione descrizione - Segue Paragrafo 2

Le didascalie dei blocchi galleria impilati possono essere visualizzate solo sotto l'immagine. Nella maggior parte dei modelli:

  • Tipo di carattere titolo - Segue Intestazione 3
  • Colore titolo - Segue Intestazione 3
  • Dimensioni titolo - segue Intestazione 3
  • Descrizione tipo di carattere - Segue il corpo del testo
  • Colore descrizione - Segue il corpo del testo
  • Dimensione descrizione - Segue il corpo del testo
Suggerimento: abilita Intestazioni personalizzate in Stili sito per definire lo stile delle intestazioni Galapagos.

In the Skye family:

  • Colore titolo - Segue il tweak Titolo Blocco galleria nel corpo del testo
  • Tipo di carattere descrizione - Segue il tweak Didascalie Blocchi immagine e galleria
  • Colore descrizione - Segue il tweak Didascalie Blocchi immagine e galleria
  • Dimensione descrizione - Segue il tweak Didascalie Blocchi immagine e galleria

Blocco Galleria a Carosello

Nella versione 7.1, è possibile aggiungere  Blocchi galleria solo ai post del blog, agli articoli e ai singoli eventi.

Carousel Gallery Blocks don’t display captions.

Pagina Galleria

La versione 7.1 non supporta le Pagine galleria. In alternativa, utilizza una sezione galleria.

Ogni modello ha una Pagina galleria integrata. Molti modelli utilizzano una Pagina galleria standard, che può essere visualizzata come slideshow o griglia. Altri hanno Pagine galleria esclusive.

Pagine galleria esclusive

Queste famiglie di modelli hanno pagine galleria esclusive (specifiche per modello). Utilizza i link sottostanti per maggiori informazioni sulla Pagina galleria di ogni modello. Se il tuo modello non compare nell'elenco, ha una Pagina galleria standard.

In most templates with standard Gallery Pages:

Grid format:

  • Tipo di carattere titolo - Segue Intestazione 1
  • Colore titolo - Sempre bianco
  • Dimensione titolo - Segue il corpo del testo
  • Tipo di carattere descrizione - Segue il corpo del testo
  • Colore descrizione - Sempre bianco
  • Dimensione descrizione - Segue il corpo del testo

Slideshow format:

  • Tipo di carattere titolo - Segue il corpo del testo
  • Colore titolo - Sempre bianco
  • Dimensione titolo - Non regolabile
  • Tipo di carattere descrizione - Segue il corpo del testo
  • Colore descrizione - Sempre grigio
  • Dimensione descrizione - Non regolabile

Nota: il tweak corpo del testo regola lo spazio tra il titolo e la descrizione

There are exceptions in these template families:

Famiglia di modelli

Grid format

Slideshow format

Adirondack

Tipo di carattere titolo - Non regolabile
Dimensione titolo - Non regolabile
Tipo di carattere descrizione - Non regolabile
Dimensione descrizione - Non regolabile

Tipo di carattere titolo - Segue Intestazione 1

Note: Always displays at the top and centered

Bedford

Dimensione titolo - Non regolabile
Tipo di carattere descrizione - Non regolabile
Dimensione descrizione - Non regolabile

 

Five

Dimensione titolo - Segue Intestazione 1

 

Galapagos

Colore titolo - Segue Intestazione 1
Dimensione titolo
- Segue Intestazione 1

Nota: abilita Intestazioni personalizzate in Stili sito.

 

Marquee (sospeso)

Tipo di carattere titolo - Segue il corpo del testo
Dimensione titolo - Segue il corpo del testo
Dimensione descrizione - Segue il corpo del testo

 

Native

 

Note: Always displays at the top

Pacific

Colore titolo - Segue Intestazione 1
Dimensione titolo
- Segue Intestazione 1
Tipo di carattere descrizione
- Non regolabile
Dimensione descrizione - Non regolabile

 

Skye

Tipo di carattere titolo- Segue il tweak Elenco titolo
Colore titolo - Segue il tweak Colore titolo
Dimensione titolo - Segue il tweak Elenco titolo
Tipo di carattere descrizione - Segue il tweak Estratto
Dimensione descrizione - Segue il tweak Estratto

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

Tipo di carattere titolo - Segue il tweak Elenco titolo
Colore titolo - Segue il tweak Colore titolo
Dimensione titolo - Segue il tweak Elenco titolo
Tipo di carattere descrizione - Segue il tweak Elenco titolo
Colore descrizione - Segue il tweak Colore titolo
Dimensione descrizione - Segue il tweak Elenco titolo

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

York

Tipo di carattere titolo - Segue Intestazione 1
Colore titolo - Segue Intestazione 1
Dimensione titolo - Segue Intestazione 1

 

Pagine progetto

La versione 7.1 non supporta le Pagine del progetto. In alternativa, utilizza una sezione galleria.

La Pagina del progetto è un layout di portfolio specifico per modello, disponibile nella famiglia York (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York). Nelle Pagine del progetto, il titolo e il testo descrittivo dell'immagine vengono visualizzati nella pagina accanto o sotto l'immagine.

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.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 12 su 94