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.

 

No layout inline, para transformar a imagem em link, adicione o URL ao campo Link ou clique em o ícone de engrenagem para mais opções.

Lembre-se:

  • Ativar o lightbox desabilita URLs de clickthrough.
  • O layout inline não aceita 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.
  • Pôster - mostra um texto sobre imagens, criando um visual de banner ou de 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, você precisa 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 nos campos de texto para adicionar texto à imagem. Pode aparecer um texto de marcador, como Adicionar uma descrição da imagem ou Destaque-se.

Lembre-se de:

  • Limitar os títulos a algumas palavras. Para legendas e legendas, use uma ou duas frases. Dessa forma, você terá um bom equilíbrio entre as palavras e a imagem. Ele também mantém seu texto visível em dispositivos móveis.
  • Para adicionar quebras de linha no texto do título, pressione Shift + Enter. Se você adicionar quebras de linha pressionando apenas Enter, as quebras de linha desaparecerão após salvar a página.
Dica: realce o texto para fazer alterações na 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 abaixo - A legenda é exibida abaixo da imagem.
  • 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 vir Adicionar uma descrição de imagem, alterne temporariamente o estilo da legenda para Legenda 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 blocos de imagem, exceto inline, têm suas próprias configurações de estilo nos 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 ajustes de design nos estilos do site. Saiba mais sobre estilos, cores e tamanhos de fontes de legenda em Edição do estilo das legendas da imagem.

Adicione um raio de canto

Você pode arredondar os cantos de uma imagem usando a configuração de raio de canto. Na aba Design do editor de blocos de imagens:

  1. Vá até Raio do canto e clique para definir o raio para toda a imagem ou para cantos individuais.
  2. No campo raio do canto, insira números (medidos em pixels) para alterar a forma da borda. 
  3. Passe o cursor sobre Concluído e clique em Salvar.

Lembre-se:

  • As alterações feitas no raio de um bloco de imagem só se aplicam ao bloco de imagem individual. Ele não altera a imagem em todo o site.
  • Para remover o raio do canto, desfaça as alterações fazendo edições ou insira 0 nos campos de raio de canto.

Redimensionar a imagem

Você pode redimensionar ou cortar blocos de imagens de várias maneiras, dependendo do layout. Para saber mais, acesse Redimensionamento de 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 em celular

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 como o bloco de imagem ficará, use a visualização por dispositivo.
  • Com exceção dos layouts inline e empilhado, as legendas mantêm a largura em relação à imagem. Assim, na versão móvel, legendas mais longas podem ser mais difíceis de ler ou podem aparecer cortadas, principalmente no layout em pôster, que aceita uma quantidade limitada de texto.
  • No layout em cartão, as legendas passam do lado para baixo da imagem. Nos layouts em colagem e em sobreposição, as legendas passam do lado para perto da parte inferior da imagem.
  • Os layouts em cartão, colagem, sobreposição e pilha oferecem a opção Ajuste dinâmico no tamanho da fonte no painel "estilos do site". Com essa opção ativada, o texto deve ter no mínimo 14 pixels.
  • Vários blocos de imagem são empilhados 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 browsers. Confira mais dicas de formatação de imagens em Formatação de 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 trocar a imagem sem adicionar outro bloco de imagem, clique em Excluir imagem na aba "Conteúdo" do editor do bloco e, em seguida, carregue outra imagem.
  • Apague o bloco.
Este artigo foi útil?
Utilizadores que acharam útil: 103 de 422