Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Estilo de legendas de imagens

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 é exibido 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 do Lightbox - Com a lightbox ativada, a imagem aparece em um pop-up quando clicada. A legenda é exibida sobre a imagem o tempo todo ou somente ao passar o mouse.

Este guia aborda as regras de estilo de todas as imagens do seu site que exibem legendas. 

Assista a este vídeo

Antes de começar

  • Legendas de imagem não são compatíveis com quebras de linha em títulos. 
  • 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

  • Cada modelo tem seus próprios nomes de ajuste, mas usamos o termo "corpo de texto"para fazer referência a qualquer texto que não seja um cabeçalho ou meta texto. Por exemplo, em Adirondack, o ajuste que controla a fonte do corpo do texto é chamado de Texto. No Skye, chama-se Corpo. Para saber mais, acesse Formatação e estilo de 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 sua 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

A Versão 7.0 não suporta 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 fontes
  • Cor: segue Parágrafo: Médio sob Cores
  • Tamanho: não ajustável

Lembre-se:

  • No layout Apresentação de slides: vídeo, as legendas aparecem somente sob a imagem central. 
  • As legendas não aparecem na exibição com lightbox. 

Bloco de Imagem

A maioria dos layouts de Bloco de Imagem são compatíveis com título e legenda com suas próprias configurações de estilo.

A forma como você cria o estilo de legendas depende da versão do Squarespace em que o site estiver.

Para o layout Inline, as legendas podem ser exibidas abaixo da imagem, como uma sobreposição ou como uma sobreposição de lightbox. Veja abaixo as regras de estilo de cada um.

Legenda abaixo

Para legendas exibidas abaixo do Bloco de Imagem Inline:

  • Fonte: igual a Fontes
  • Cor: segue cores
  • Tamanho: definido no editor de texto

Sobreposição das legendas

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

  • Fonte: igual a Fontes
  • Cor: sempre branco
  • Tamanho: definido no editor de texto

Sobreposição de Lightbox

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

  • Fonte: segue fontes
  • Cor: sempre branco
  • Tamanho: segue Parágrafos: Parágrafo 3 em Fontes

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: segue o corpo do texto
  • Cor: segue o corpo do texto
  • Tamanho: fixo

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

Bedford

Tamanho: segue o corpo do texto

Five

Fonte: sempre em preto e maiúsculo

Pacific

Tamanho: segue o corpo do texto

Skye

Fonte, cor e tamanho: segue o ajuste Legendas Blocos de Imagem e galeria

York

Tamanho: segue o corpo do 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: fixo

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

Five

Fonte: sempremaiú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: fixo

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

Adirondack

Fonte: não ajustável

Bedford

Fonte: não ajustável

Five Tamanho: segue o corpo do texto

Flatiron

Cor: segue o corpo do texto

Pacific

Fonte: não ajustável

Skye

Fonte: segue o ajuste do trecho
Tamanho: segue o ajuste do trecho

Tremont

Fonte: não ajustávelCor:
segue o corpo do texto

Wexley

Tamanho: segue o corpo do texto

Bloco de Sumário

O Bloco de sumário é compatível com legendas em todos os seus designs (parede, lista, carrossel, grade).

A forma como você cria o estilo da legenda do Bloco de Sumário depende da versão do Squarespace em que seu site se encontra.

Em todos os experimentos de Blocos de Resumo:

  • Tamanho do título: segue Parágrafos: Parágrafo 2 em Fontes
  • Tamanho da descrição e tamanho do Meta: não ajustável
  • Todas as fontes: segue fontes
  • Todas as cores: segue cores

Em todos os modelos:

  • Tamanho do título, tamanho da descrição e tamanho do meta: não ajustável
  • Fonte da descrição: segue o corpo do texto
  • Cor da descrição: segue o texto do corpo
  • Cor do título: varia de acordo com o modelo, veja a lista abaixo

Na maioria dos templates:

  • Fonte Meta 1 e 2: segue o corpo do texto
  • Meta 1 e 2 cores: segue o corpo do texto
  • Fonte do título: segue o corpo do texto

Há exceções nos templates das famílias:

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 de 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 de 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 de 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 texto do corpo

Farro

Cor do título: segue o texto do corpo

Five

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

Galeria e Blog:

  • Meta 1 cor: segue o corpo do texto
  • Meta 2 cor: segue o ajuste Link no corpo

Eventos:

  • Meta 1 e 2 cores: segue o corpo do texto

Produtos:

  • Meta 1 e 2 cores: segue o ajuste Link no corpo

Flatiron

Cor do título: segue o ajusteCor do link

Forte

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

Galapagos

Cor do título: segue o ajusteCor do link

Ishimoto

Cor do título: segue o ajuste 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 de 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 de 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 de Cor do título do bloco de sumário

Native

Fonte do título: segue Título 1
Cor do título: segue Título 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 doTítulo da lista
Cor do título: segue o ajuste da Cor do título
Metafonte 1 e 2: segue o ajuste Meta
Metacor 1 e 2: segue o ajuste da Metacor

Supply

Cor do título: segue o ajusteCor do link

Tremont

Cor do título: segue o ajuste Cor do link do corpo

Galeria e Blog:

  • Fonte Meta 1 e 2: segue o ajuste Meta Font
  • Meta 1 cor: segue o ajuste Meta Color
  • Meta 2 cor: segue o ajuste de cor do link do corpo

Eventos:

  • Fonte Meta 1 e 2: segue o ajuste Meta Font
  • Meta 1 e 2 cores: segue o ajuste Meta Color

Produtos

  • Fonte Meta 1 e 2: segue o ajuste Meta Font
  • Meta 1 e 2 cores: segue o ajuste Cor do link do corpo

Wells

Cor do título: segue o ajuste Cor do link do corpo

Wexley

Cor do título: segue o ajuste Cor do link do corpo

York

Cor do título: segue o ajuste Cor do link do corpo

Galeria e Blog:

  • Cor meta 1: igual ao corpo do texto
  • Cor meta 2: igual ao ajuste Cor do link do corpo

Evento:

  • Cores meta 1 e 2: igual ao corpo de texto

Produtos:

  • Cores meta 1 e 2: igual ao ajuste Cor do link do corpo

Bloco do Instagram

O Bloco do Instagram suporta legendas para os designs de apresentação de slides e empilhados, e no design de grade quando visualizado 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 da legenda: segue fontes
  • Cor da legenda: segue o parágrafo: Médio sob Cores
  • Tamanho da legenda: segue parágrafos: Parágrafo 2 em Fontes

Apresentação de slides 

As legendas da apresentação de slides são exibidas como uma sobreposição, o tempo todo ou ao passar o mouse:

  • Fonte da legenda: segue fontes
  • Cor da legenda: sempre branco
  • Tamanho da legenda: não ajustável

Grid (Grade)

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

  • Fonte da legenda: segue fontes
  • Cor da legenda: sempre branco
  • Tamanho da legenda: fixo

Empilhado

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

  • Fonte da legenda: segue o corpo do texto
  • Cor da legenda: segue o texto do corpo
  • Tamanho da legenda: segue o corpo do texto

Apresentação de slides 

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

  • Fonte da legenda: segue o corpo do texto
  • Cor da legenda: sempre branco
  • Tamanho da legenda: fixo

Grid (Grade)

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

  • Fonte da legenda: segue o corpo do texto
  • Cor da legenda: sempre branco
  • Tamanho da legenda: segue o corpo do texto

Exceções

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

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

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 doBloco de Galeria de Grade podem ser exibidos abaixo da imagem. Títulos e descrições são exibidos na sobreposição lightbox.

Título abaixo

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

  • Fonte: igual a Fontes
  • Cor: igual a Parágrafo: médio em cores
  • Tamanho: fixo

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: segue fontes
  • Cor do título: sempre branco
  • Tamanho do título: não ajustável
  • Fonte de descrição: segue fontes
  • Cor da descrição: sempre branco
  • Tamanho da descrição: não ajustável

Os títulos doBloco de Galeria de Grade podem ser exibidos abaixo da imagem. Títulos e descrições são exibidos na sobreposição 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: segue o corpo do texto
  • Tamanho: fixo

Sobreposição de Lightbox

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

  • Fonte do título: segue o título 1
  • Cor do título: semprebranco
  • Tamanho do título: segue o corpo do texto
  • Fonte da descrição: segue o corpo do texto
  • Cor da descrição: sempre branco
  • Tamanho da descrição: segue o corpo do texto

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

Adirondack

Tamanho do título: não ajustável
Fonte da descrição: Não ajustável
Tamanho da descrição: não ajustável

Bedford

Tamanho do título: não ajustável
Fonte da descrição: não ajustável
Tamanho da descrição: não ajustável

Five

Tamanho do título: segue o título 1

Flatiron

Cor da descrição: segue o texto do corpo

Galapagos

Cor do título: segue Título 1 Tamanho do título:
segue Título 1

Observação: Ativar cabeçalhos personalizados em estilos de 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 de descrição: Não ajustável
Descrição Cor: segue o texto do corpoDescrição Tamanho:
Não ajustável

York

Cor do título: segue 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.

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 dobloco de galeria de slides só podem ser exibidas como uma sobreposição. Para legendas exibidas no Bloco de Galeria de Slideshow:

  • Fonte do título: igual a Fontes
  • Cor do título: sempre branco
  • Tamanho do título: fixo
  • Fonte de descrição: segue fontes
  • Cor da descrição: sempre branco
  • Tamanho da descrição: fixo

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: segue o corpo do texto
  • Cor do título: sempre branco
  • Tamanho do título: fixo
  • Fonte da descrição: segue o corpo do texto
  • Cor da descrição: sempre branco
  • Tamanho da descrição: fixo

Na família Skye:

  • Cor da fonte: igual ao corpo de texto
  • Fonte de descrição: segue o ajuste Legendas de Blocos de Galeria e de 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.

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:

  • Fonde de título: segue fontes
  • Cordo título: segue Título: Médio em cores
  • Tamanho do título: segue o cabeçalho 3 em fontes
  • Fonte da descrição: igual a Fontes
  • Corda descrição: segue parágrafo (médio) em cores
  • Tamanho da descrição: segue o parágrafo 2 nas fontes

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

  • Fonte de título: segue a rubrica 3
  • Cordo título: segue Título 3
  • Tamanho do título: igual ao Cabeçalho 3
  • Fonte da descrição: igual ao corpo de texto
  • Cor da descrição: segue o texto do corpo
  • Tamanho da descrição: igual ao corpo de texto
Dica: Habilitecabeçalhos personalizados em estilos de site para estilizar os cabeçalhos de Galapagos.

Na família Skye:

  • Cor do título: segue o ajuste Body Gallery Block Title
  • Fonte da descrição: igual ao ajuste Legendas da imagem e do Bloco de Galeria
  • Cor da descrição: segue o ajuste de Legendas de Blocos da & Galeria de Imagens
  • Tamanho da descrição: segue o ajuste de Legendas de Blocos de Imagem e Galeria

Bloco de Galeria em Carrossel

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

Versão 7.1 não suporta Páginas de Galeria. Use uma seção de galeria em vez disso.

Cada modelo tem uma Página de Galeriaincorporada. Muitos modelos usam uma Página de Galeria padrão, que pode ser exibida como uma apresentação de slides ou grade. Outros têm Páginas de Galeria exclusivas.

Páginas exclusivas da Galeria

Essas famílias de modelos têm Páginas de Galeria exclusivas (específicas do modelo). Use os links abaixo para saber mais sobre a Página de Galeria de cada modelo. Se o seu modelo não estiver listado aqui, ele terá uma 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: semprebranco
  • Tamanho do título: igual ao corpo de texto
  • Fonte da descrição: segue o corpo do texto
  • Cor da descrição: sempre branca
  • Tamanho da descrição: igual ao corpo de texto

Formato de apresentação de slides:

  • Fonte do título: segue o corpo do texto
  • Cor do título: semprebranco
  • Tamanho do título: não ajustável
  • Fonte da descrição: segue o corpo do texto
  • Descrição Cor: Sempre cinza
  • Tamanho da descrição: não ajustável
  • Observação: O ajuste do corpo do 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: não ajustável
Tamanho do título: não ajustável
Fonte da descrição: não ajustável
Tamanho da descrição: não ajustável

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
Descrição do tamanho: fixa

 

Five

Tamanho do título: igual ao Título 1

 

Galapagos

Cor do título: segueTítulo 1 Tamanho do título:
segueTítulo 1

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

 

Marquee (descontinuado)

Fonte do título: Segue o texto do corpo
Tamanho dotítulo: Segue o texto do corpo
Tamanhoda descrição: Segue o texto do corpo

 

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:
não ajustável
Tamanho da descrição: 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
Tamanho do título: segue o ajuste do Título da lista
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

Fonte do título: segue o ajuste do Título da lista
Cor do título: segue o ajuste da Cor do título
Tamanho do título: segue o ajuste do Título da lista
Fonte da descrição: segue o ajuste do Título da lista
Cor da descrição: segue o ajuste da Cor do título
Tamanho da descrição: segue o ajuste do 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 Título 1
Cor do título: segueTítulo 1
Tamanho do título: segue Título 1

 

Páginas de Projeto

Versão 7.1 não suporta páginas de projeto. Use uma seção de galeria em vez disso.

A Página do Projeto é um layout de portfólio específico de modelos, disponível na família York (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York). Nas Páginas do Projeto, o título da imagem e o texto da descrição são exibidos 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.

Este artigo foi útil?
Utilizadores que acharam útil: 9 de 79