Pular para o conteúdo
GloboGlobo Docs
Instalar aplicação
Português (Portugal)

Ligações com imagem ao passar o rato

Mostre uma lista de ligações ao lado de uma imagem grande que muda quando os clientes passam o rato sobre cada ligação.

Referência Todos os planos 2 min de leitura

Uma lista de ligações ao lado de uma imagem grande que muda para a imagem de cada ligação ao passar o rato. Use-a para pré-visualizar categorias de forma visual (“New arrivals”, “Best sellers”, “Sale”) sem ocupar o espaço de uma grelha de imagens completa.

Adicionar o bloco

  1. Escolha o esquema

    No painel do mega menu da pré-visualização, clique em Add block (adicionar bloco). Clique em Link list, passe o rato sobre Hover image links e clique em Select (selecionar). O bloco começa com o título “Collections” e 3 ligações de exemplo.

    (1) Clique em Link list, (2) escolha Hover image links.

  2. Defina o título e a imagem predefinida

    Em Edit Item (editar item), em General (geral), introduza o Heading (título), escolha uma Default image (imagem predefinida) e introduza o Button label on image (texto do botão na imagem).

    O bloco Hover image links na pré-visualização, com as definições em Edit Item.

  3. Configure cada ligação

    Introduza o Title (título), escolha o Link e selecione a Image on hover (imagem ao passar o rato). Clique em Add (adicionar) para adicionar uma ligação ou em Remove (remover) para eliminar uma.

  4. Guarde e publique

    Ajuste a imagem em Style (estilo) e, depois, clique em Save e Publish.

Definições

General

HeadingPredefinição: Collections
Texto por cima das ligações.
Default imagePredefinição: Nenhuma
Mostrada nas ligações sem Image on hover própria.
Button label on imagePredefinição: Shop now
Texto mostrado na imagem, por baixo do título da ligação. Deixe-o vazio para mostrar apenas o título.
WidthPredefinição: 66.66%
A parte da linha do mega menu que o bloco ocupa: Auto ou de 8.33% a 100%.

Style

Image positionPredefinição: Right
Right (à direita) ou Left (à esquerda) das ligações.
Image ratioPredefinição: 4:3
1:1, 4:3, 3:4, 16:9 ou 9:16.

Cada ligação

TitlePredefinição: New arrivals, Best sellers, Sale
O texto da ligação.
LinkPredefinição: Nenhuma
Para onde a ligação leva.
Image on hoverPredefinição: Nenhuma
A imagem mostrada enquanto um cliente passa o rato sobre esta ligação.

Até 10 ligações por bloco. Cada ligação também aparece por baixo do bloco na lista Elements (elementos), com um botão Add link (adicionar ligação): arraste as ligações para as reordenar ou clique numa (na lista ou na pré-visualização) para editar apenas essa ligação, incluindo a sua própria Visibility (visibilidade). A Visibility do bloco inteiro funciona como em todos os blocos; consulte Definições comuns a todos os blocos.

Sugestões

  • Use imagens com a mesma forma e defina Image ratio (proporção da imagem) de acordo, para que a área da imagem não salte entre ligações.
  • Mantenha os títulos das ligações curtos. O título também aparece na imagem.

Esta página foi útil?

Comunicar um problema