Pular para o conteúdo
GloboGlobo Docs
Instalar app
Português (Brasil)

Links com imagem ao passar o mouse

Mostre uma lista de links ao lado de uma imagem grande que muda conforme os compradores passam o mouse sobre cada link.

Referência Todos os planos 2 min de leitura

Uma lista de links ao lado de uma imagem grande que muda para a foto de cada link ao passar o mouse. Use para pré-visualizar categorias (“Novidades”, “Mais vendidos”, “Promoção”) sem ocupar o espaço de uma grade completa de imagens.

Adicione o bloco

  1. Escolha o layout

    No painel do mega menu da pré-visualização, clique em Adicionar bloco. Clique em Lista de links, passe o mouse sobre Hover image links (links com imagem ao passar o mouse) e clique em Selecionar. Ele começa com o título “Coleções” e 3 links de exemplo.

    (1) Clique em Lista de links, (2) escolha Hover image links.

  2. Defina o título e a imagem padrão

    Em Editar item, em Geral, digite o Título, escolha uma Default image e digite o Button label on image.

    O bloco Links com imagem ao passar o mouse na prévia, com as configurações em Editar item.

  3. Digite o Título, escolha o Link e escolha a Image on hover. Clique em Adicionar para adicionar um link ou em Remover para excluir um.

  4. Salve e publique

    Ajuste a imagem em Style e clique em Salvar e Publicar.

Configurações

Geral

TítuloPadrão: Coleções
Texto acima dos links.
Default imagePadrão: Nenhuma
Exibida para links sem Image on hover própria.
Button label on imagePadrão: Compre agora
Texto exibido na imagem, abaixo do título do link. Deixe vazio para mostrar só o título.
LarguraPadrão: 66,66%
Quanto da linha do mega menu o bloco ocupa: Automático ou de 8,33% a 100%.

Estilo

Image positionPadrão: Direita
Direita ou Esquerda dos links.
Proporção da imagemPadrão: 4:3
1:1, 4:3, 3:4, 16:9 ou 9:16.
TítuloPadrão: Novidades, Mais vendidos, Promoção
O texto do link.
LinkPadrão: Nenhum
Para onde o link leva.
Image on hoverPadrão: Nenhuma
A imagem exibida enquanto o comprador passa o mouse sobre este link.

Até 10 links por bloco. Cada link também aparece sob o bloco na lista Elementos, com um botão Add link: arraste os links para reordená-los ou clique em um (na lista ou na pré-visualização) para editar somente esse link, incluindo a Visibilidade própria dele. A Visibilidade do bloco inteiro funciona como em todo bloco; veja Configurações que todo bloco tem.

Dicas

  • Use imagens do mesmo formato e defina Proporção da imagem de acordo, para a área da imagem não pular entre os links.
  • Mantenha os títulos dos links curtos. O título também aparece na imagem.

Esta página foi útil?

Relatar um problema