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

Criar efeitos de pairar para imagens

Os efeitos ao passar o cursor mostram informações ou criam movimentos ao se passar o cursor sobre uma imagem. Isso dá um toque de interação e animação ao site e é indicado para revelar títulos e legendas sem tampar uma imagem ou ocupar mais espaço na página.

Você pode usar efeitos de focalização em qualquer site com Blocos de Imagem e Blocos de Galeria de Slideshow. Dependendo da versão e do template do seu site, o site também pode aceitar efeitos de focagem em outras áreas do seu site. Este guia explica cada área em detalhes.

Dica: a maioria dos dispositivos móveis não aceita efeitos de focagem, portanto, a experiência dos visitantes pode variar dependendo do dispositivo que eles usam para visitar seu site.

Blocos de Imagem

Nos Blocos de Imagem Inline, é possível exibir uma legenda para a imagem quando o usuário passa o mouse sobre ela.

  1. Adicione um novo Bloco de Imagem ou abra um existente.
  2. Clique na guia Design e selecione Inline .
  3. Clique na guia Conteúdo e selecione Sobreposição de legenda ao mover o cursor menu suspenso Legenda .
  4. Mova o cursor sobre o Bloco de Imagem. Na sobreposição de legenda preta, clique em Escreva uma legenda aqui... e insira sua legenda.
  5. Após salvar a página, a legenda aparece ao passar o cursor do mouse. Use ajustes de estilo para estilizar a legenda da imagem.

Bloco de Galeria em Slideshow

É possível exibir títulos de imagens e descrições quando o usuário passa o mouse em um Bloco de Galeria em Slideshow.

  • Os efeitos do cursor só estão disponíveis no design do Bloco de Galeria em Slideshow.
  • Na versão móvel, o título e a descrição das imagens não aparecem em telas com menos de 480 pixels.
  • As legendas que aparecem quando o usuário passa o cursor podem aparecer em aparelhos maiores, como tablets; ou em aparelhos menores no modo paisagem. As legendas sempre aparecem ao tocar ou pressionar a tela, dependendo do aparelho móvel.

Para adicionar texto e ativar efeitos de focagem:

  1. Adicione um novo Bloco de Galeria em Slideshow ou abra um existente.
  2. Na guia Conteúdo, passe o cursor sobre uma imagem e clique em o-icone-de-engrenagem.
  3. Insira um título e uma descrição. Você também pode adicionar um URL de clickthrough opcional. 
  4. Clique em Salvar.
  5. Clique na guia Design.
  6. Selecione Mostrar Título e Descrição.
  7. Selecione uma posição no menu suspenso Posição da descrição e do título.
  8. Clique em Mostrar ao passar o cursor do mouse.
  9. Clique em Aplicar.

Páginas de Portfólio

Alguns layouts de Página de Portfólio aceitam efeitos de focagem. No editor de página de portfólio, escolha um dos seguintes layouts:

  • Passar o cursor: fundo - mostra os títulos da subpágina em um layout empilhado ou inline. Ao passar o cursor sobre um título, a miniatura da subpágina substitui o plano de fundo da seção.
  • Passar o cursor: fixo - mostra os títulos da subpágina em um layout empilhado ou inline. Ao passar o cursor sobre um título, a miniatura da subpágina aparece menor em posição fixa na seção.
  • Passar o cursor: seguir cursor - mostra os títulos da subpágina em um layout empilhado ou inline. Ao passar o cursor sobre um título, a miniatura da subpágina aparece menor e segue o cursor à medida que ele se move. 

Saiba mais em Página de Portfólio

Páginas de Armazenamento

Os efeitos de focagem funcionam de forma diferente dependendo da versão do seu site. 

Quando um produto tem mais de uma imagem, a Página da Loja exibe uma imagem de produto alternativa ao mover o cursor. Saiba mais em Estilizar Páginas da Loja.

Como a exibição dos efeitos de foco depende do tipo de Página de Lojada sua família de templates:

Página de Galeria (versão 7.0)

A Página de Galeria de alguns templates oferece efeitos ao passar o cursor. Você pode ativar e ajustar esses efeitos pelo painel Estilos do Site.

Nos designs em slideshow e em grade das seguintes famílias de templates, o título e a descrição da imagem aparecem ao se passar o cursor:

  • Adirondack
  • Aviator
  • Bedford
  • Brine
  • Farro
  • Five
  • Galapagos
  • Native
  • Pacific
  • Skye
  • York

Ativar e personalizar o efeito de pairar

Na Página de Galeria, abra o painel Estilos do Site e role até a seção Estilos de galeria. Clique em Design de galeria: e selecione Slideshow ou Grade. 

  • Slideshow - selecione Mostrar ao passar o cursor no menu suspenso Sobreposição de informações da galeria. O título e a descrição aparecerão quando o usuário passar o cursor. As legendas que aparecem quando o usuário passa o cursor podem aparecer em aparelhos móveis maiores, como tablets; ou em aparelhos menores no modo paisagem. As legendas sempre aparecem ao tocar ou pressionar a tela, dependendo do aparelho móvel.
  • Grade – Títulos e descrições aparecerão ao passar o cursor do mouse quando a imagem for aberta em uma lightbox, a menos que a imagem tenha um URL de clickthrough. Para saber mais, visite Configuração de imagens para abrir em um lightbox.

Outros efeitos de Páginas de Galeria por template

Nos templates das seguintes famílias, as Páginas de Galeria têm efeitos especiais no cursor:

  • Forte - ao passar o cursor sobre o carrossel da Página de Galeria, as setas de navegação aparecem. Passe o cursor sobre uma legenda e deslize-a para cima para ler descrições mais longas.
  • Momentum - em tela cheia, navegação de seta ao passar o cursor.
  • Tremont - mostra as legendas ao passar o cursor.
  • Wexley - ao passar o cursor sobre uma imagem da Página de Galeria, aparecem o título da imagem e uma sobreposição de cores.

Páginas Índice (versão 7.0)

Nos templates das seguintes famílias, as Páginas Índice têm efeitos especiais no cursor:

  • Avenue - passar o cursor sobre a miniatura muda a opacidade dela. Você também pode passar o cursor para mostrar o Título de navegação da página.
  • Flatiron - passar o cursor sobre uma miniatura amplia e mostra detalhes dela.
  • Montauk - passar o cursor sobre uma miniatura altera a opacidade dela.
  • Tremont - passar o cursor sobre o título de uma página na navegação do Índice mostra a miniatura da página como imagem de fundo.
  • York - ao passar o cursor sobre uma miniatura, ela pode se esmaecer e o título dela pode aparecer.

Leia os guias dos templates para mais ajuda.

Este artigo foi útil?
Utilizadores que acharam útil: 45 de 247