Melhore as imagens e prender a atenção de um visitante aplicando o mouse sobre os efeitos.

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

Os blocos de imagem adicionados às seções do Editor Intuitivo não aceitam efeitos ao passar o cursor nem legendas incorporadas. Para criar legendas, use um bloco de texto para adicionar texto ao lado ou em sobreposição ao bloco de imagem.

No bloco de imagens inline, é possível deixar a legenda da imagem quando o usuário passa o cursor 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 .
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: plano de fundo - mostra os títulos do projeto em um layout empilhado ou inline. Ao passar o cursor sobre um título, a imagem em destaque do projeto substitui o plano de fundo da seção.
• Passar o cursor: fixo - mostra os títulos do projeto em um layout empilhado ou inline. Ao passar o cursor sobre um título, a imagem em destaque do projeto aparece menor em uma posição fixa na seção.
• Passar o cursor: seguir cursor — mostra os títulos do projeto em um layout empilhado ou inline. Ao passar o cursor sobre um título, a imagem em destaque do projeto aparece menor e segue o cursor à medida que ele se move. 

Saiba mais em Página de Portfólio. 

Páginas da loja

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

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 imagem em destaque 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.