Usar .gifs animados

Chame a atenção dos visitantes com animações em loop reproduzidas automaticamente.

Ultima atualização 22 de Maio de 2024

Um .gif (Graphics Interchange Format) é um tipo de imagem que suporta animações curtas. Os gifs animados são reproduzidos automaticamente, não incluem som e geralmente estão em loop.

Você pode pesquisar imagens do Google e sites como giphy.com para encontrar imagens.gif ou criar o seu próprio com software de terceiros. Quando tem um arquivo.gif, você pode carregá-lo em qualquer lugar do seu site que suporte imagens.

Aqui está um exemplo de um .gif animado:

Arquivo gif-example.gif

Adicionar um .gif

Você pode fazer upload de um .gif em qualquer lugar do seu site onde você pode adicionar imagens, incluindo:

O .gif terá as mesmas opções que uma imagem estática. Por exemplo, se as imagens de banner do seu site suportarem um texto de sobreposição, o texto poderá ser exibido em um banner.gif.

Anotação

ao editar um arquivo .gif com o editor de imagens integrado ou adicionar efeitos de imagem, o .gif virará um arquivo .jpg estático.

Melhores práticas

Mantenha o tamanho pequeno

Arquivos .gifs grandes podem deixar o site lento. Recomendamos formatar os .gifs animados no tamanho que devem aparecer no site. Siga nossas recomendações para que os .gifs atendam às nossas diretrizes quanto ao tamanho dos arquivos.

Mesmo que o seu .gif esteja abaixo do limite de tamanho do arquivo, o número de quadros individuais pode impedir que ele seja carregado. Você pode tentar compactar seu arquivo usando ferramentas de imagem de terceiros. Isso está fora do escopo do suporte ao Squarespace. Se a qualidade for ruim depois de comprimir seu .gif, transforme seu .gif em um vídeo e adicione o vídeo ao seu site.

Evite distrair imagens

Enquanto .gifs podem ser uma ótima maneira de chamar a atenção ou adicionar movimento dinâmico, seu movimento também pode ser distrativo. Evite usá-los:

  • Em lugares onde você quer que os visitantes realmente se concentrem em seu texto ou outro conteúdo.
  • Várias vezes em uma única área, pois a quantidade de movimento pode ser chocante.

Dica

Para saber como deixar seus .gifsmais acessíveis, confira "Deixando áudio, imagens e vídeos mais acessíveis".

Verifique as configurações de compressão para evitar distorções ou cores estranhas

Se o arquivo .gif parecer distorcido, especialmente em áreas com gradiente de cor ou sombras, é provável que seja devido à compactação. Um arquivo .gif pode conter apenas 256 cores por quadro, por isso, as ferramentas de edição de imagem usam um processo chamado pontilhamento para reduzir o número de cores ao criar um arquivo .gif.

Fazer ajustes na qualidade de uma imagem está fora do escopo do suporte do Squarespace. Tente ajustar as configurações de compactação ou pontilhamento da ferramenta de edição de imagem, usando uma fonte de qualidade superior para o .gif ou revisando a documentação de ajuda da ferramenta que você está usando.

Criar botões animados

As URLs de clickthrough transformam imagens em links para outras páginas do seu site, páginas externas ou arquivos. Esses links estão disponíveis em Blocos de Imagens, Blocos de Galeria e algumas Páginas de Galeria.

Dica

os logotipos têm um clickthrough integrado que leva você à sua página inicial.

Aqui está uma forma de criar um botão animado:

  1. Adicione um Bloco de Imagem de Pôster a uma área que suporta blocos, como uma Página de Layout.
  2. Carregue o seu .gif na guia Conteúdo .
  3. Na guia Design, adicione seu link no campo URL de clickthrough . Se você estiver vinculando a uma página em seu site, crie um link de Conteúdo.
  4. Use o título ou legenda do Bloco de Imagem de Pôster para adicionar texto.
  5. Estilize o bloco de imagem e adicione outros blocos para redimensioná-lo.
Arquivo gif-example4.gif

Usar uma URL de vídeo em vez de um .gif

Você pode criar um efeito semelhante a um .gif animado adicionando um plano de fundo de vídeo a uma seção de página, banner ou página de entrada.

  • Assim como os .gifs, o fundo de vídeo é reproduzido automaticamente em loop e não inclui som
  • Em vez de usar um arquivo.gif, você vinculará a uma URL de vídeo, como um vídeo do YouTube
  • Os banners de vídeo são suportados apenas em alguns modelos da versão 7.0, mas os planos de fundo de vídeo para seções de página são suportados em todos os sites da versão 7.1, e os planos de fundo de vídeo para páginas de entrada são suportados em todos os modelos da versão 7.0

Para saber mais, visite Adicionar um vídeo de fundo.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.