Ir al contenido
GloboGlobo Docs
Instalar la app
Español

Hover image links

Muestra una lista de enlaces junto a una imagen grande que cambia al pasar el cursor sobre cada enlace.

Referencia Todos los planes 2 min de lectura

Una lista de enlaces junto a una imagen grande que cambia a la imagen de cada enlace al pasar el cursor. Úsalo para previsualizar categorías de forma visual (“Novedades”, “Más vendidos”, “Rebajas”) sin el espacio de una cuadrícula completa de imágenes.

Agregar el bloque

  1. Elige el diseño

    En el panel de mega menú de la vista previa, haz clic en Agregar bloque. Haz clic en Lista de enlaces, pasa el cursor sobre Hover image links y haz clic en Seleccionar. Empieza con el encabezado “Colecciones” y 3 enlaces de ejemplo.

    (1) Haz clic en Lista de enlaces, (2) elige Hover image links.

  2. Define el encabezado y la imagen predeterminada

    En Editar elemento, en General, escribe el Encabezado, elige una Default image y escribe el Button label on image.

    El bloque Hover image links en la vista previa y sus ajustes en Editar elemento.

  3. Configura cada enlace

    Escribe el Título, elige el Enlace y elige la Image on hover. Haz clic en Agregar para agregar un enlace o en Eliminar para eliminarlo.

  4. Guarda y publica

    Ajusta la imagen en Style y haz clic en Guardar y Publicar.

Ajustes

General

EncabezadoPredeterminado: Colecciones
Texto sobre los enlaces.
Default imagePredeterminado: Ninguna
Se muestra para los enlaces que no tienen su propia Image on hover.
Button label on imagePredeterminado: Comprar ahora
Texto que se muestra sobre la imagen, bajo el título del enlace. Déjalo vacío para mostrar solo el título.
AnchoPredeterminado: 66.66%
Cuánto de la fila del mega menú ocupa el bloque: Automático o de 8.33% a 100%.

Style

Image positionPredeterminado: Derecha
Derecha o Izquierda de los enlaces.
Proporción de imagenPredeterminado: 4:3
1:1, 4:3, 3:4, 16:9 o 9:16.

Cada enlace

TítuloPredeterminado: Novedades, Más vendidos, Rebajas
El texto del enlace.
EnlacePredeterminado: Ninguno
Adónde lleva el enlace.
Image on hoverPredeterminado: Ninguna
La imagen que se muestra mientras un comprador pasa el cursor sobre este enlace.

Hasta 10 enlaces por bloque. Cada enlace aparece también bajo el bloque en la lista Elementos, con un botón Add link: arrastra los enlaces para reordenarlos o haz clic en uno (en la lista o en la vista previa) para editar solo ese enlace, incluida su propia Visibilidad. La Visibilidad de todo el bloque funciona como en cualquier bloque; consulta Ajustes que tienen todos los bloques.

Consejos

  • Usa imágenes con la misma forma y ajusta Proporción de imagen para que coincida, así el área de la imagen no salta entre enlaces.
  • Mantén cortos los títulos de los enlaces. El título aparece también sobre la imagen.

¿Te ha sido útil?

Informar de un problema