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
- 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.
- 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:
- Crie uma página de layout na seção Não vinculada da sua navegação.
- 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).
- Use Estilos do Site para dar, a cada um deles, tipos distintos de letras e cores.
- 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
- Alinhamento de legenda: 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 de Grade e Apresentação de slides: layouts simples e completos. No layout Apresentação de slides: Carretel, as legendas só aparecem 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 |
|
Tremont |
Fonte: não ajustávelCor: |
|
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 |
|
Avenue |
Fonte do título: segue o ajuste da Fonte 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 |
|
Bedford |
Fonte do título: segue o ajuste da Fonte do título do bloco de sumário |
|
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:
Eventos:
Produtos:
|
|
Flatiron |
Cor do título: segue o ajusteCor do link |
|
Forte |
Cor do título: segue o ajuste da Cor do link do corpo |
|
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 |
|
Momentum |
Fonte do título: segue o ajuste da Fonte 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 |
|
Native |
Fonte 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 |
|
Skye |
Fonte do título: segue o ajuste doTítulo da lista |
|
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:
Eventos:
Produtos
|
|
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:
Evento:
Produtos:
|
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 |
|
Bedford |
Tamanho do título: 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: Observação: Ativar cabeçalhos personalizados em estilos de site |
|
Pacific |
Cor do título: segue Título 1 |
|
Skye |
Fonte do título: 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 |
|
Tremont |
Fonte de descrição: Não ajustável |
|
York |
Cor do título: segue Título 1 Tamanho do título: |
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.
Páginas 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 |
Fonte do título: igual ao Título 1 Observação: sempre é exibido na parte superior e centralizado |
|
Bedford |
Tamanho do título: fixo |
|
|
Five |
Tamanho do título: igual ao Título 1 |
|
|
Galapagos |
Cor do título: segueTítulo 1 Tamanho do título: Atenção: ative Cabeçalhos personalizados no painel Estilos do Site. |
|
|
Marquee (descontinuado) |
Fonte do título: Segue o texto do corpo |
|
|
Native |
|
Observação: Sempre aparece na parte superior |
|
Pacific |
Cor do título: segue o Título 1 |
|
|
Skye |
Fonte do título: 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 |
Fonte do título: 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 |
|
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.