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

Blocos de Imagem

Use os Blocos de Imagem para adicionar imagens a páginas ou publicações do blog em vários layouts. Cada Bloco de Imagem exibe uma imagem.

Assistir a um vídeo

Adicionar um Bloco de Imagem

Para adicionar um Bloco de Imagem:

  1. Edite uma página ou publicação, clique em um ponto de inserção e, em seguida, clique em Imagem. Para obter ajuda, visite Adicionar conteúdo com blocos .
  2. Use a guia Conteúdo para adicionar uma imagem e um link de imagem.
  3. Clique na aba Design para alterar o layout e animar o bloco.
  4. Clique fora do editor de blocos quando terminar. Suas alterações são salvas automaticamente.

Siga as seções abaixo para ver etapas mais detalhadas.

Adicionar uma imagem

Na guia Conteúdo do editor do Bloco de Imagens:

  • Para carregar sua própria imagem, clique em Adicionar imagem. Você também pode arrastar o arquivo de imagem para o carregador de imagens a partir do seu computador.
  • Para adicionar uma imagem de banco de imagens, clique em Procurar Imagens ou Procurar Imagens. Você pode escolher entre opções gratuitas ou premium. Para saber mais, visite Procurando e adicionando imagens stock .
  • Você pode também reutilizar imagens a partir da janela Pesquisa de imagens.

Lembre-se:

  • Para obter os melhores resultados, use uma imagem com menos de 500 KB. Para obter mais dicas de formatos de imagem, acesse Formatar suas imagens para exibição na Web.
  • Você pode editar a imagem após o upload usando o Editor de Imagens.
  • O Bloco de Imagem não será exibido no seu site sem uma imagem carregada.

Adicione um link ou botão de imagem

Na guia Conteúdo, você pode transformar a imagem em um link ou adicionar um botão ao layout.

Para transformar a imagem em um link no layout Inline, adicione a URL ao campo Link ou clique o ícone de engrenagem para obter opções adicionais.

Lembre-se:

  • Ativar o lightbox desabilita URLs de clickthrough.
  • O layout Alinhado não suporta botões.

Para todos os outros layouts de Bloco de Imagem, use o menu suspenso Link . Você pode escolher entre:

  • Nenhum - Sem link
  • Na imagem — a imagem inteira se torna um link. Adicione um URL no campo URL que aparece abaixo do menu suspenso ou clique em o ícone de engrenagem para obter opções adicionais.
  • Botão — um botão é exibido em linha com o texto, abaixo do título e legenda. Personalize o texto do botão e adicione o URL nos campos que aparecem abaixo do menu suspenso ou clique em o ícone de engrenagem para obter opções adicionais.

Escolha um layout

Ao adicionar um Bloco de Imagem, ele usa o layout Inline como padrão. Para alterar, clique na aba Design e escolha o layout desejado do seguinte:

  • Inline - O Bloco de Imagem básico, com legendas opcionais abaixo ou sobrepondo a imagem. Define como a legenda é exibida na guia Conteúdo.
  • Poster - Exibe texto sobre imagens, criando a aparência de um banner ou pôster.
  • Cartão - Exibe imagens com texto à esquerda ou à direita. O texto geralmente se move abaixo das imagens em navegadores e dispositivos móveis menores, ou quando os Blocos de Imagem são usados em colunas.
  • Sobreposição - mostra a imagem de um lado e o texto do outro, sobreposto parcialmente à imagem. Adicione uma cor de fundo ao título para destacar. O texto geralmente se move em direção à parte inferior das imagens em browsers menores e na versão móvel; ou quando os Blocos de Imagem são usados em colunas.
  • Colagem - Exibe imagens de um lado, e texto" sobre" cartões de fundo do outro, compensando e sobrepondo a imagem. O texto geralmente se move em direção ao canto inferior das imagens em navegadores e dispositivos móveis menores, ou quando os Blocos de Imagem são usados em colunas.
  • Stack - Exibe imagens com texto abaixo.

Ao selecionar um layout, você verá uma prévia dele na página.

Dica: ao trocar o layout inline por outro tipo, você precisará digitar de novo o texto da imagem.

Adicionar animações

Não é possível adicionar animações do aplicativo Squarespace.

Na guia Design do editor Bloco de Imagens, você pode adicionar animações que os visitantes veem quando carregam ou atualizam a página.

Para adicionar animações:

  1. No editor Bloco de Imagens, clique em Designe, em seguida, clique em Animações.
  2. Selecione um efeito na lista para aplicar à imagem e a qualquer texto. Ao selecionar uma opção, você verá uma pré-visualização dela na página.
  3. Para animar a imagem e o texto separadamente, selecione Personalizadoe, em seguida, selecione as opções para Imageme Texto.
Dica: na versão 7.1, você pode aplicar animações globalmente a todas as imagens do site.

Escolha entre estas opções de animação para a imagem, o texto ou ambos:

  • Fade In - o bloco, a imagem ou texto aparece gradualmente
  • Deslizar para cima - o bloco, a imagem ou texto desliza para cima
  • Deslizar para baixo - a imagem ou texto desliza para baixo
  • Clipe horizontal - o bloco ou a imagem carrega em camadas horizontais
  • Clipe vertical - o bloco ou a imagem carrega em camadas verticais
  • Inclinar para cima - o bloco ou a imagem aumenta com inclinação para cima
  • Inclinar para baixo - o bloco ou a imagem aumenta com inclinação para baixo
  • Foco - o bloco aparece borrado e depois entra em foco
  • Colidir - imagem e texto deslizam de fora para dentro pelos lados
  • Revelar - imagem e texto deslizam do centro para fora
  • Deslizar da esquerda - a imagem ou texto aparece deslizando pela esquerda
  • Deslizar da direita - a imagem ou texto aparece deslizando pela direita

Veja o exemplo de um Bloco de Imagem Colagem com estas configurações:

  • Animação - Personalizada
  • Animação de imagem - Slide from Right
  • Animação de texto - Deslize da esquerda

Exemplo de um Bloco de Imagem com animações.

Adicionar texto

No Bloco de Imagem, clique em Escrever uma legenda aqui, Escrever um título aquiou Escrever uma legenda aquipara adicionar texto à imagem.

Para obter melhores resultados, mantenha o texto curto. Tente limitar as legendas a uma ou duas frases. Isso mantém um bom equilíbrio entre as palavras e a imagem. Ele também mantém o texto visível em dispositivos móveis.

Dica: realce o texto para fazer alterações básicas de formatação com a barra de ferramentas de texto, como negrito, itálico ou adição de um link.

Legendas x títulos e subtítulos

Os campos de texto e as opções de estilo variam de acordo com o layout. O layout Inline aceita uma legenda básica, enquanto os outros layouts aceitam os campos título e subtítulo.

O layout Inline aceita uma legenda:

Na guia Conteúdo , selecione uma opção de exibição no menu suspenso legenda:

  • Desativado - Nenhuma legenda é exibida a menos que a imagem seja visualizada no lightbox.
  • Legenda Embaixo - A legenda aparece abaixo da imagem, alinhada à esquerda.
  • Sobreposição da Legenda - A legenda aparece sobre a imagem em uma barra cinza escuro.
  • Sobreposição das Legendas ao Passar o Mouse - A legenda é exibida sobre a imagem em uma barra cinza escuro quando o cursor passa sobre a imagem.
Dica: se você não virEscrever legenda aqui , alterne temporariamente o estilo de legenda paraLegenda Abaixo na guia Conteúdo.

As legendas sempre aparecem em lightbox. Elas não são exibidas em Blocos de Imagem vazios. Para adicionar texto sem imagem, use um Bloco de Texto.

Outros layouts aceitam título e subtítulo:

Estilizar o Bloco de Imagem

Alguns layouts têm suas próprias configurações de estilo para fontes, cores e botões. O local onde essas configurações aparecem depende da versão do site.

Para estilizar blocos de imagem globalmente:

Para estilizar elementos específicos do layout no Bloco de imagem, como alinhamento de texto ou largura do conteúdo:

  1. Ao editar uma página, abra Estilos do Site e clique em Blocos de Imagem.
  2. Role até a seção de cada layout para alterar os respectivos ajustes.

Na versão 7.0, todos os layouts de Bloco de Imagem, exceto Inline, têm suas próprias configurações de estilo em Estilos do Site. Para encontrar essas opções:

  1. No Menu Inicial, clique em Design e depois em Estilos do Site.
  2. Role até a seção de cada layout para alterar os respectivos ajustes.

O Bloco de Imagem Inline não tem seus próprios ajustes de design em Estilos do Site. Para saber mais sobre estilos, cores e tamanhos de fontes de legenda, acesse Estilizar legendas de imagem.

Redimensionar a imagem

Você pode redimensionar ou cortar Blocos de Imagem de várias maneiras, dependendo do layout. Para saber mais, acesse Redimensionamento de uma imagem.

Dica: você pode remover o espaçamento aplicado automaticamente aos Blocos de Imagem adicionando código personalizado. Para obter mais informações, visite esta publicação no Squarespace Forum.

Tenha em mente que nosso suporte não cobre modificações no código personalizado. Por isso, não podemos ajudar na configuração ou na resolução de problemas de soluções baseadas em código.

Blocos de Imagem (versão móvel)

Cada layout de Bloco de Imagem mantém seu formato no celular. O texto se moverá no celular para caber no dispositivo e manterá uma posição similar em relação à imagem.

  • Para ver qual será o aspecto dos Blocos de Imagem , utilize o Simulador de Dispositivos.
  • Com exceção dos layouts Inline e Stack, as legendas mantêm sua largura definida em relação à imagem. Isso significa que legendas mais longas podem ser mais difíceis de ler ou aparecerem cortadas em dispositivos móveis. Isso pode ser especialmente visível no layout Pôster, que foi projetado para uma quantidade limitada de texto.
  • No layout Cartão, as legendas passam do lado para baixo da imagem. Nos layouts Colagem e Sobreposição, as legendas passam do lado para perto da parte inferior da imagem.
  • Os layouts de Cartão, Colagem, Sobreposição e Pilha oferecem a opção de Redimensionamento dinâmico de fontes no painel Estilos do Site. Com essa opção ativada, o texto não pode ser redimensionado para um tamanho menor do que 14 pixels.
  • Múltiplos Blocos de Imagemse empilham verticalmente no celular.

Solução de problemas de cores da imagem

Se a imagem foi salva em CMYK em vez de RGB, as cores dela no seu site do Squarespace podem ficar diferentes do que você vê no arquivo de imagem original.

Sempre salve as imagens em RGB ou sRGB. A cor do modo RGB é um formato seguro para a web, enquanto o CMYK serve para impressão e não é renderizado na maioria dos navegadores. Para ver mais dicas de formatação de imagens, acesse Formatar imagens para exibição na web.

Próximos passos

Depois de configurar o Bloco de Imagem, você pode reorganizá-lo, editá-lo ou removê-lo:

  • Arraste e solte o bloco para movê-lo ou para criar colunas e linhas.
  • Use o Editor de imagens para cortar, girar ou adicionar filtros a uma imagem.
  • Para substituir a imagem sem adicionar um novo Bloco de Imagem, clique em Remover Imagem na guia Conteúdo do editor de blocos e, em seguida, carregue uma nova imagem.
  • Apague o bloco.
Este artigo foi útil?
Utilizadores que acharam útil: 96 de 398