Estilo de legendas de imagens

Personalize como o título e a descrição das imagens devem aparecer.

Ultima atualização 18 de Janeiro de 2024

Legendas são títulos de texto e descrições que adicionam informações e contexto às suas imagens. As legendas não têm seus próprios ajustes de estilo. Em vez disso, eles seguem os ajustes de outros textos em seu site.

A forma como você estiliza a legenda de uma imagem depende de onde ela está e de como ela está definida para ser exibida. As legendas geralmente são exibidas de uma entre três maneiras:

  • Legenda abaixo - o texto aparece na página, abaixo da imagem.
  • Sobreposição de legenda - O texto é exibido sobre a imagem, seja o tempo todo ou somente ao passar o mouse.
  • Sobreposição de legenda da Lightbox – Com a lightbox ativada, a imagem aparece em um pop-up quando clicada. Uma legenda é exibida sobre a imagem ao passar o cursor do mouse.

Este guia aborda as regras de estilo de todas as imagens que mostram legendas no site.

Assista a este vídeo

Antes de começar

  • Fontes e cores têm ajustes separados.
  • Recomendamos manter as legendas curtas, especialmente quando a legenda sobrepuser uma imagem. Legendas mais longas podem ser cortadas em determinados dispositivos e navegadores.

Na versão 7.0:

  • Não é possível adicionar quebras de linha a títulos da legenda da imagem. Você pode adicionar quebras de linha ao texto da descrição da imagem.
  • Usamos o termo “corpo do texto” para nos referirmos a qualquer texto que não seja um título ou metatexto, mas cada template tem seus próprios nomes de ajustes. Por exemplo, em Adirondack, o ajuste que controla a fonte do corpo do texto é chamado Texto. Em Skye, é chamado Corpo. Para saber mais, acesse Estilizar texto.
  • Alguns modelos têm apenas um ajuste, que controla todas as cores de cabeçalho ou todas as fontes de cabeçalho. Nesses casos, as legendas que seguem estilos de cabeçalho específicos (como Título 3) seguirão o ajuste geral do cabeçalho.

Se você estiver enfrentando dificuldades para criar legendas em um site 7.0, recomendamos experimentar em uma página de teste:

  1. Crie uma página de layout na seção Não vinculada da navegação.
  2. Adicione um Bloco de Texto que contenha Título 1, Título 2, Título 3 e corpo do texto (você precisará de pelo menos quatro linhas de texto).
  3. Use Estilos do Site para dar, a cada um deles, tipos distintos de letras e cores.
  4. Veja sua legenda para ver como ela mudou.

Seção Galeria

Acessando o recurso

A Versão 7.0 não aceita seções de galeria. Em vez disso, use uma Página de Galeria.

As imagens nas seções da galeria podem ter descrições, que são exibidas quando o controle de Legendas está ativo no editor de seções.

Em todos os layouts:

  • Fonte — segue os Parágrafos
  • Cor – Igual ao Parágrafo: Médio
  • Tamanho – Não ajustável
  • Alinhamento de legendas – Não ajustável

Lembre-se:

  • As descrições de imagens não aceitam quebras de linha.
  • As legendas aparecem sob cada imagem em todos os layouts em Grade e em Slideshow: layout simples e completo. No layout Slideshow: rolo de filme, as legendas só aparecem sob a imagem central.
  • As legendas não aparecem na exibição com lightbox.

Bloco de Imagem

Nas seções do Editor Intuitivo, você deve usar um bloco de texto para adicionar texto ao lado ou em sobreposição ao bloco de imagem, em vez de adicionar uma legenda.

No editor clássico, a maioria dos layouts de bloco de imagens aceita título e subtítulo com configurações próprias de estilo. O estilo das legendas depende da versão do site Squarespace.

Dica

no Editor Intuitivo, os blocos de imagem adicionados às seções não vêm com opções de layout. Em vez de adicionar uma legenda a um bloco de imagens, use um bloco de texto para adicionar texto ao lado ou sobreposto a um bloco de imagens.

No layout Inline adicionado a uma seção do editor clássico, as legendas podem aparecem abaixo da imagem, como em sobreposição ou como sobreposição do lightbox. É possível formatar o texto da legenda na barra de ferramentas do texto. Veja abaixo as regras para de estilo cada um. 

Legenda abaixo

Para legendas exibidas abaixo do Bloco de Imagem Inline:

  • Fonte – Segue Parágrafos
  • Cor – Igual aos ajustes de Texto para o tipo de texto definido em Cores
  • Tamanho - Definido na barra de ferramentas de texto

Sobreposição das legendas

Para legendas exibidas sobre o Bloco de Imagem Inline o tempo todo ou ao passar o mouse:

  • Fonte — segue os Parágrafos
  • Cor – Sempre branco
  • Tamanho - Definido na barra de ferramentas de texto

Sobreposição de Lightbox

Para legendas exibidas sobre o Bloco de Imagem Inline enquanto estiver em um pop-up do lightbox:

  • Fonte – Igual a Fontes
  • Cor – Sempre branco
  • Tamanho — segue o Parágrafo 3

No layout Inline, as legendas podem aparecer abaixo da imagem, como sobreposição ou como sobreposição em lightbox. Veja abaixo as regras de estilo para cada um.

Legenda abaixo

Na maioria dos modelos, para legendas exibidas abaixo do Bloco de Imagem Inline:

  • Fonte – Igual ao corpo de texto
  • Cor – Igual ao corpo de texto
  • Tamanho — não ajustável

Há exceções nestas famílias de modelos:

Bedford

Tamanho – Igual ao corpo de texto

Five

Fonte – Sempre preto e maiúsculas

Pacific

Tamanho – Igual ao corpo de texto

Skye

Fonte, cor e tamanho — segue o ajuste de Legendas de Blocos Galeria e Imagens

York

Tamanho – Igual ao corpo de texto

Sobreposição das legendas

Na maioria dos modelos, para as legendas exibidas sobre o Bloco de Imagem Inline quando ele é exibido na página:

  • Fonte – Igual ao corpo de texto
  • Cor – Sempre cinza
  • Tamanho – Não ajustável

Há exceções nestas famílias de modelos:

Five

Fonte – Sempre maiúsculas

Skye

Fonte — segue o ajuste de Legendas de Blocos de Galeria e Imagens

Sobreposição de Lightbox

Na maioria dos modelos, para as legendas exibidas sobre o Bloco de Imagem Inline enquanto estiver em um pop-up do lightbox:

  • Fonte – Igual ao corpo de texto
  • Cor – Sempre branco
  • Tamanho – Não ajustável

Há exceções nestas famílias de modelos:

Adirondack

Fonte – Não ajustável

Bedford

Fonte – Não ajustável

Five Tamanho – Igual ao corpo de texto

Flatiron

Cor – Igual ao corpo de texto

Pacific

Fonte – Não ajustável

Skye

Fonte – Igual ao ajuste de Tamanho do
trecho – Igual ao ajuste do Trecho

Tremont

Fonte
Cor
não ajustável – Igual ao corpo de texto

Wexley

Tamanho – Igual ao corpo de texto

Bloco de Sumário

O bloco de sumário aceita legendas em todos os designs (mural, lista, carrossel, grade).

A forma de ajustar o estilo da legenda do bloco de sumário depende da versão do Squarespace do site.

Em todos os designs do bloco de sumário:

  • Tamanho do título – Igual ao Parágrafo 2
  • Tamanho da descrição e Tamanho do meta — não ajustável
  • Fonte – Segue Parágrafos
  • Cor – Igual aos ajustes de Bloco de Sumário em Cores

Em todos os templates:

  • Tamanho do título, Tamanho da descrição e Tamanho do meta – Não ajustável
  • Fonte da descrição – Igual ao corpo de texto
  • Cor da descrição – Igual ao corpo de texto
  • Cor do título — varia de acordo com o template; veja a lista abaixo

Na maioria dos templates:

  • Fonte meta 1 e 2 - segue o corpo de texto
  • Metacor 1 e 2 – Igual ao corpo de texto
  • Fonte do título– Igual ao corpo de texto

Há exceções nestas famílias de modelos:

Adirondack

Fonte do título — segue o ajuste da Fonte do título do bloco de sumário
Cor do título — segue o ajuste da Cor do título do bloco de sumário

Avenue

Fonte do título — segue o ajuste da Fonte do título do bloco de sumário
Cor do título — segue o ajuste da Cor do título do bloco de sumário

Aviator

Fonte do título — segue o ajuste da Fonte do título do bloco de sumário
Cor do título — segue o ajuste da Cor do título do bloco de sumário

Bedford

Fonte do título — segue o ajuste da Fonte do título do bloco de sumário
Cor do título — segue o ajuste da Cor do título do bloco de sumário
Metacor 1 e 2 — segue o ajuste daMetacor da página

Brine

Cor do título - Segue o corpo de texto

Farro

Cor do título - Segue o corpo de texto

Five

Cor do título — segue o ajuste Link no corpo

Galeria e Blog:

  • Cor meta 1 — segue o corpo de texto
  • Metacor 2 — segue o ajuste do Link no corpo

Eventos:

  • Metacor 1 e 2 – Igual ao corpo de texto

Produtos:

  • cor meta 1 e 2 - segue o ajuste Link no corpo

Flatiron

Cor do título — segue o ajuste da Cor do link

Forte

Cor do título — segue o ajuste da Cor do link do corpo
O ajuste dos Links sublinhados do corpo afeta o Meta 2

Galapagos

Cor do título — segue o ajuste da Cor do link

Ishimoto

Cor do título — segue o ajuste da Cor do link do corpo

Marquee (descontinuado)

Fonte do título — segue o ajuste da Fonte do título do bloco de sumário
Cor do título — segue o ajuste da Cor do título do bloco de sumário

Momentum

Fonte do título — segue o ajuste da Fonte do título do bloco de sumário
Cor do título — segue o ajuste da Cor do título do bloco de sumário

Montauk

Fonte do título — segue o ajuste da Fonte do título do bloco de sumário
Cor do título — segue o ajuste da Cor do título do bloco de sumário

Native

Fonte do título – Igual ao Título 1
Cor do título – Igual ao Cabeçalho 1

Pacific

Fonte do título — segue o ajuste da Fonte do título do bloco de sumário
Cor do título — segue a Cor do título do bloco de sumário
Metafonte 1 e 2 — segue o ajuste da Metafonte
Metacor 1 e 2 — segue o ajuste da Metacor

Skye

Fonte do título - segue o ajuste Título da lista
Cor do título - segue o ajuste Cor do título
Fonte meta 1 e 2 - segue o ajuste Meta
Cor meta 1 e 2 - segue o ajuste Cor meta

Supply

Cor do título — segue o ajuste da Cor do link

Tremont

Cor do título — segue o ajuste da Cor do link do corpo

Galeria e Blog:

  • Metafonte 1 e 2 — igual ao ajuste da Metafonte
  • Cor meta 1 – segue o ajusteCor meta
  • Cor meta 2 - segue o ajuste da Cor do link do corpo

Eventos:

  • Metafonte 1 e 2 — igual ao ajuste da Metafonte
  • Metacores 1 e 2 — segue o ajuste da Metacor

Produtos

  • Metafonte 1 e 2 — igual ao ajuste da Metafonte
  • Cor meta 1 e 2 - segue o ajuste da Cor do link do corpo

Wells

Cor do título — segue o ajuste da Cor do link do corpo

Wexley

Cor do título — segue o ajuste da Cor do link do corpo

York

Cor do título — segue o ajuste da Cor do link do corpo

Galeria e Blog:

  • Metacor 1 — segue o corpo de texto
  • Metacor 2 — segue o ajuste da Cor do link do corpo

Evento:

  • Meta 1 e 2 cores — segue o corpo de texto

Produtos:

  • Metacores 1 e 2 — segue o ajuste da Cor do link do corpo

Bloco do Instagram

O bloco do Instagram aceita legendas nos designs em slideshow e empilhados; e no design em grade quando aparece em uma lightbox.

A forma como você ajusta o texto da legenda depende da versão do Squarespace em que seu site se encontra.

Empilhado

Legendas empilhadas abaixo de cada imagem:

  • Fonte — segue os Parágrafos
  • Cor – segue Parágrafo: médio
  • Tamanho — segue o Parágrafo 2

Slideshow

No slideshow, as legendas aparecem como sobreposição, seja a todo momento ou ao se passar o cursor:

  • Fonte — segue os Parágrafos
  • Cor – Sempre branco
  • Tamanho – Não ajustável

Grid (Grade)

As legendas de grade são exibidas na sobreposição do lightbox:

  • Fonte — segue as Fontes
  • Cor – Sempre branco
  • Tamanho – Não ajustável

Empilhado

Legendas empilhadas abaixo de cada imagem. Em todos os templates:

  • Fonte – Igual ao corpo de texto
  • Cor – Igual ao corpo de texto
  • Tamanho – Igual ao corpo de texto

Slideshow

No slideshow, as legendas aparecem como sobreposição, seja a todo momento ou ao se passar o cursor. Em todos os templates:

  • Fonte — segue o corpo de texto
  • Cor – Sempre branco
  • Tamanho – Não ajustável

Grid (Grade)

As legendas em grade aparecem na sobreposição em lightbox. Na maioria dos templates:

  • Fonte – Igual ao corpo de texto
  • Cor – Sempre branco
  • Tamanho — segue o corpo de texto

Exceções

A fonte da legenda e o tamanho da legenda não são ajustáveis nas famílias de templates:

  • Adirondack
  • Bedford
  • Pacific

Bloco de Galeria em Grade

A forma como você ajusta o texto da legenda do Bloco de Galeria de Grade depende da versão do Squarespace em que seu site se encontra.

Acessando o recurso

Na versão 7.1, só é possível adicionar um Bloco de Galeria a publicações do blog, itens de produto e eventos específicos.

Os títulos do Bloco de Galeria em grade podem aparecer abaixo da imagem. Títulos e descrições aparecem na sobreposição em lightbox.

Título abaixo

Para títulos exibidos abaixo de imagens do Bloco de Galeria de Grade:

  • Fonte — segue os Parágrafos
  • Cor Segue Parágrafo: médio em Cores
  • Tamanho — não ajustável

Sobreposição de Lightbox

Para legendas que são exibidas sobre imagens do Bloco de Galeria de Grade enquanto estiver em um pop-up do lightbox:

  • Fonte do título - igual a Títulos
  • Cor do título – Sempre branco
  • Tamanho do título – Não ajustável
  • Fonte da descrição - segue Fontes
  • Cor da descrição – Sempre branco
  • Tamanho da descrição – Não ajustável

Os títulos do Bloco de Galeria em grade podem aparecer abaixo da imagem. Títulos e descrições aparecem na sobreposição em lightbox.

Título abaixo

Em todos os modelos, para títulos exibidos abaixo das imagens do Bloco de Galeria de Grade:

  • Fonte – Igual ao corpo de texto
  • Cor – Igual ao corpo de texto
  • Tamanho — não ajustável

Sobreposição de Lightbox

Na maioria dos templates, para legendas que exibem imagens do Bloco de Galeria de Grade enquanto estiver em um pop-up do lightbox:

  • Fonte do título – Igual ao Título 1
  • Cor do título - sempre branco
  • Tamanho do título – Igual ao corpo de texto
  • Fonte da descrição – Igual ao corpo de texto
  • Cor da descrição – Sempre branco
  • Tamanho da descrição – Igual ao corpo de texto

Há exceções nestas famílias de modelos:

Adirondack

Tamanho do título — fixo
Fonte da descrição — fixa
Tamanho da descrição — fixo

Bedford

Tamanho do título – fixo
Fonte da descrição – fixa
Tamanho da descrição - fixa

Five

Tamanho do título – Igual ao Título 1

Flatiron

Cor da descrição – Igual ao corpo de texto

Galapagos

Cor do título – Igual ao Tamanho do título do
Título 1
– Igual ao Título 1

Atenção: ative Cabeçalhos personalizados em Estilos do Site

Pacific

Cor do título: segue Título 1
Tamanho do título: segue Título1
Descrição fonte: Não ajustável

Skye

Fonte do título — segue o ajuste do Título da lista
Cor do título — segue o ajuste da Cor do título em Cores do texto de todo o site
Tamanho do título — fixo
Fonte da descrição — segue o ajuste do Trecho
Tamanho da descrição — segue o ajuste do Trecho

Observação: os ajustes de Título da Lista e Cor do Título só estão disponíveis na consulta de uma Página do Blog

Tremont

Fonte da descrição – Não ajustável
Cor da descrição – Igual ao corpo de texto
Tamanho da descrição
– Não ajustável

York

Cor do título — segue o Título 1
Tamanho do título
— segue Título 1

Dica

em alguns modelos, o ajusteCor do título também afeta os títulos das publicações do blog. Para garantir a visibilidade, a cor do título deve ser diferente da cor de fundo do site.

Bloco de Galeria em Slideshow

A forma como você ajusta o texto da legenda do Bloco de Galeria de Slideshow depende da versão do Squarespace em que seu site se encontra.

Acessando o recurso

Na versão 7.1, só é possível adicionar um Bloco de Galeria a publicações do blog, itens de produto e eventos específicos.

As legendas do Bloco de Galeria em slides só aparecem em sobreposição. No caso das legendas que aparecem por cima do Bloco de Galeria em slides:

  • Fonte do título - segue Parágrafos
  • Cor do título – Sempre branco
  • Tamanho do título - fixo
  • Fonte da descrição — segue os Parágrafos
  • Cor da descrição — sempre branco
  • Tamanho da descrição — não ajustável

As legendas dobloco de galeria de slides só podem ser exibidas como uma sobreposição. Na maioria dos modelos, para legendas exibidas no Bloco de Galeria de Slideshow:

  • Fonte do título– Igual ao corpo de texto
  • Cor do título – Sempre branco
  • Tamanho do título - fixo
  • Fonte da descrição – Igual ao corpo de texto
  • Cor da descrição — sempre branco
  • Tamanho da descrição — não ajustável

Na família Skye:

  • Fonte do título — segue o corpo de texto
  • Fonte da descrição — segue o ajuste da Legendas de Blocos Galeria e Imagens

Bloco de Galeria empilhada

No Bloco de Galeria empilhada, o modo de ajustar o texto da legenda depende da versão do Squarespace do site.

Acessando o recurso

Na versão 7.1, só é possível adicionar um Bloco de Galeria a publicações do blog, itens de produto e eventos específicos.

As legendas do bloco de galeria em pilha somente podem ser exibidas abaixo da imagem:

  • Fonte do título – Igual a Títulos
  • Cor do título – Igual a Título (Médio)
  • Tamanho do título — segue o Titulo 3
  • Fonte da descrição — segue os Parágrafos
  • Cor da descrição – Igual ao Parágrafo (Médio)
  • Tamanho da descrição – Igual ao Parágrafo 2

As legendas do Bloco de Galeria empilhada só aparecem abaixo da imagem. Na maioria dos templates:

  • Fonte do título — segue o Título 3
  • Cor do título – Igual ao Título 3
  • Tamanho do título — segue o Titulo 3
  • Fonte da descrição — segue o corpo do texto
  • Cor da descrição – Igual ao corpo de texto
  • Tamanho da descrição — segue o corpo de texto

Dica

para ajustar o estilo dos cabeçalhos do Galapagos, ative Cabeçalhos personalizados em Estilos do Site.

Na família Skye:

  • Cor do título — segue o ajuste do Título do bloco de Galeria do corpo
  • Fonte da descrição — segue o ajuste da Legendas de Blocos Galeria e Imagens
  • Cor da descrição — segue o ajuste Legendas no Bloco de Galeria e de Imagens
  • Tamanho da descrição — segue o ajuste Legendas no Bloco de Galeria e de Imagens

Bloco de Galeria em Carrossel

Acessando o recurso

Na versão 7.1, só é possível adicionar um Bloco de Galeria a publicações do blog, itens de produto e eventos específicos.

Os Blocos de Galeria de Carrossel não exibem legendas.

Página de Galeria

Acessando o recurso

A Versão 7.1 não aceita Páginas de Galeria. Em vez disso, use uma seção de galeria.

Cada template na versão 7.0 tem uma Página de Galeria integrada. Muitos templates têm uma Página de Galeria exclusiva, enquanto outros usam a padrão, que pode ser exibida como slideshow ou em grade.

Páginas de Galeria exclusivas

As seguintes famílias de templates têm Páginas de Galeria exclusivas (específicas do template). Clique nos links abaixo para saber mais sobre a Página de Galeria de cada template. Templates que não estão na lista têm Página de Galeria padrão.

Na maioria dos modelos com Páginas de Galeria padrão:

Formato da grade:

  • Fonte do título — segue o Título 1
  • Cor do título - sempre branco
  • Tamanho do título – Igual ao corpo de texto
  • Fonte da descrição – Igual ao corpo de texto
  • Cor da descrição – Sempre branco
  • Tamanho da descrição — segue o corpo de texto

Formato de apresentação de slides:

  • Fonte do título– Igual ao corpo de texto
  • Cor do título - sempre branco
  • Tamanho do título – Não ajustável
  • Fonte da descrição – Igual ao corpo de texto
  • Cor da descrição – Sempre cinza
  • Tamanho da descrição — não ajustável

Atenção: o ajuste do corpo de texto ajusta o espaço entre o título e a descrição

Há exceções nestas famílias de modelos:

Família de template

Formato da grade

Formato de apresentação de slides

Adirondack

Fonte do título – fixo
Tamanho do título – fixo
Fonte da descrição – fixa
Tamanho da descrição – fixa

Fonte do título – Igual ao Título 1

Observação: sempre é exibido na parte superior e centralizado

Bedford

Tamanho do título- fixo
Fonte da descrição - fixa
Tamanho da descrição - fixa

 

Five

Tamanho do título — segue o Título 1

 

Galapagos

Cor do título — segue o Título 1
Tamanho do título
— segue Título 1

Atenção: ative Cabeçalhos personalizados no painel Estilos do Site.

 

Marquee (descontinuado)

Fonte do título – Igual ao corpo de texto
Tamanho do título – Igual ao corpo de texto
Tamanho da descrição – Igual ao corpo de texto

 

Native

 

Observação: Sempre aparece na parte superior

Pacific

Cor do título – segue o Título 1
Tamanho do título
– segue o Título 1
Fonte da descrição
– fixa
Tamanho da descrição – fixa

 

Skye

Fonte do título – segue o ajuste Título da lista
Cor do título – segue o ajuste Cor do título
Tamanho do título – segue o ajuste Título da lista
Descrição da fonte – segue o ajuste Trecho
Tamanho da descrição – segue o ajuste Trecho

Observação: os ajustes de Título da Lista e Cor do Título só estão disponíveis na consulta de uma Página do Blog

Fonte do título – segue o ajuste Título da lista
Cor do título – segue o ajuste Cor do título
Tamanho do título – segue o ajuste Título da lista
Fonte da descrição – segue o ajuste Título da Lista
Cor da descrição – segue o ajuste Cor do título
Tamanho da descrição – segue o ajuste Título da lista

Observação: os ajustes de Título da Lista e Cor do Título só estão disponíveis na consulta de uma Página do Blog

York

Fonte do título – segue o Título 1
Cor do título – segue o Título 1
Tamanho do título – segue o Título 1

 

Páginas de Projeto

Acessando o recurso

A Versão 7.1 não aceita Páginas de Projetos. Em vez disso, use uma seção de galeria.

A página de projetos é um layout de template para portfólio disponível na família York (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York). Nas páginas de projetos, o título da imagem e o texto da descrição aparecem na página ao lado ou abaixo da imagem.

Use os ajustes na seção Projeto: Fontes dos Estilos do Site para estilizar o texto do título da imagem e das descrições. Você pode também dimensionar as fontes para controlar como elas são exibidas.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.