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.
- Cada template tem seu próprio nome de ajuste, mas usamos o termo "corpo de texto" para nos referir a qualquer texto que não seja um título ou meta texto. Por exemplo, em Adirondack, o ajuste que controla a fonte de texto do corpo é chamado de Texto. Em Skye, chama-se Corpo. Para saber mais, visite 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:
- Crie uma página de layout na seção Não vinculada da 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 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: 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 aceita título e legenda com configurações de estilo específicas.
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. Você pode formatar o texto da legenda na barra de ferramentas de texto. Veja abaixo as regras de estilo para 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 |
|
Tremont |
Fonte – |
|
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 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 – 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 |
|
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 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:
Eventos:
Produtos:
|
|
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 |
|
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 |
|
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 – Igual ao 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 Título da lista |
|
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:
Eventos:
Produtos
|
|
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:
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 — 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.
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 |
|
Bedford |
Tamanho do título – fixo |
|
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 Atenção: ative Cabeçalhos personalizados em Estilos do 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 da descrição – Não ajustável |
|
York |
Cor do título — segue o 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 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.
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
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
A Versão 7.1 não aceita Páginas de Galeria. Em vez disso, use uma seção de galeria.
Todo template já vem com uma Página de Galeria. Muitos templates usam a Página de Galeria padrão, que pode aparecer em slideshow ou em grade. Outros têm uma Página de Galeria exclusiva.
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.
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 - 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 |
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 — segue o Título 1 |
|
|
Galapagos |
Cor do título — segue o 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 |
|
|
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 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 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 |
|
Páginas de Projeto
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.