Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Crear efectos de posicionamiento del cursor para tus imágenes

Los efectos de posicionamiento del cursor muestran información o crean movimientos cuando posicionas el cursor sobre una imagen. Esto aporta un nivel sutil de interacción y animación en tu sitio y puede ser una gran manera de revelar los títulos y las leyendas sin oscurecer una imagen ni tomar demasiado espacio en una página.

Puedes utilizar efectos de desplazamiento en cualquier sitio con bloques de imagen y bloques de galería de diapositivas. Dependiendo de la versión y la plantilla del sitio, es posible que el sitio también admita efectos de desplazamiento en otras áreas. Esta guía explica cada área en detalle.

Consejo: La mayoría de los dispositivos móviles no admiten efectos de desplazamiento, por lo que la experiencia de los visitantes puede variar en función del dispositivo que utilicen para visitar el sitio.

Bloques de imágenes

Puedes mostrar la leyenda de una imagen cuando se posiciona el cursor sobre ella en Bloques de imágenes incorporadas.

  1. Añade un nuevo Bloque de imagen o abre uno existente.
  2. En la pestaña Diseño, selecciona Incorporado.
  3. Selecciona Superposición de la leyenda cuando se posiciona el cursor en el menú desplegable.
  4. Haz clic en Aplicar para cerrar la ventana.
  5. Posiciona el cursor sobre el Bloque de imagen. En la superposición negra con la leyenda que aparece, presiona Escribe aquí... e ingresa la leyenda.
  6. Después de guardar la página, la leyenda aparece al posicionar el cursor. Utiliza retoques de estilo para dar estilo a la leyenda de la imagen.

Bloque de galería en diapositivas

Puedes mostrar los títulos de las imágenes y las descripciones cuando se posiciona el cursor sobre ellos en un Bloque de galería en modo presentación.

  • Los efectos de posicionamiento del cursor solo están disponibles en el diseño del bloque de galería en diapositivas.
  • Los títulos y las descripciones no aparecen en dispositivos móviles más angostos que 480 píxeles.
  • Las leyendas configuradas para que aparezcan cuando se posiciona el cursor pueden mostrarse en los dispositivos más grandes, como las tabletas, o en los dispositivos más pequeños en posición horizontal. Las leyendas serán visibles siempre, cuando se toca la pantalla o cuando se presiona y se sostiene la presión. Esto depende del dispositivo móvil.

Para agregar texto y habilitar efectos de desplazamiento:

  1. Añade un nuevo Bloque de galería en modo presentación o abre un bloque existente.
  2. En la pestaña Contenido, posiciona el cursor sobre una imagen y haz clic en the-gear-icon.
  3. Introduce un título y una descripción. También puedes agregar una URL clickthrough opcional. 
  4. Haz clic en Guardar.
  5. Haz clic en la pestaña Diseño.
  6. Marca Mostrar título y descripción.
  7. Selecciona una posición en el menú desplegable Posición del título y de la descripción.
  8. Haz clic Mostrar al posicionar el cursor.
  9. Haz clic en Aplicar.

Páginas de portafolio

Algunos diseños de página de portafolio admiten efectos de desplazamiento. En el editor Página de portafolio, elige uno de los siguientes diseños:

  • Posicionamiento del cursor: Fondo: Muestra los títulos de las subpáginas en un diseño apilado o incorporado. Cuando se posiciona el cursor sobre un título, la miniatura de la subpágina reemplaza el fondo de la sección.
  • Posicionamiento del cursor: Fijo: Muestra los títulos de las subpáginas con un diseño apilado o incorporado. Cuando se posiciona el cursor sobre un título, aparece la miniatura de la subpágina más pequeña en una posición fija dentro de la sección.
  • Posicionamiento del cursor: Seguir al cursor: Muestra los títulos de las subpáginas con un diseño apilado o incorporado. Cuando se posiciona el cursor sobre un título, aparece la miniatura de la subpágina más pequeña y sigue al cursor a medida que este se mueve.

Para informarte mejor, consulta Páginas de portafolio

Páginas de la tienda

Los efectos de desplazamiento funcionan de forma diferente dependiendo de la versión de tu sitio web. 

Cuando un producto tiene más de una imagen, la página de la tienda muestra una imagen de producto alternativa al posicionar el cursor. Obtén más información en Cómo dar estilo a las páginas de productos

Cómo posicionar el cursor afecta lo que se ve en pantalla, según el tipo de Página de Productos de la familia de tu plantilla:

Páginas de Galería (versión 7.0)

Algunas plantillas admiten efectos cuando se pasa el cursor por encima de ellas para las Páginas de Galería. Puedes activar y ajustar estos efectos desde Estilos del sitio.

Los títulos y las descripciones de las imágenes aparecen cuando se desplaza el cursor en los diseños Diapositivas y Cuadrícula en estas familias de plantillas:

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

Habilitar y personalizar el efecto de posicionamiento del cursor

Mientras estés en la Página de Galería, abre Estilos del sitio y desplázate hacia abajo hasta Estilos de la galería. Haz clic en Diseño de la galería: y selecciona Diapositivas o Cuadrícula.

  • Diapositivas: Selecciona Mostrar cuando se posiciona el cursor en el menú desplegable Superposición de información de galería. Los títulos y la descripción aparecerán cuando se posicione el cursor. Las leyendas configuradas para que aparezcan cuando se posiciona el cursor pueden mostrarse en los dispositivos más grandes, como las tabletas, o en los dispositivos más pequeños en posición horizontal. Las leyendas serán visibles siempre, cuando se toca la pantalla o cuando se presiona y se sostiene la presión, según el dispositivo móvil.
  • Cuadrícula. Los títulos y las descripciones aparecerán al posicionar el cursor cuando la imagen se abra en un lightbox, a menos que tenga una URL clickthrough. Para obtener más información, visita Cómo configurar imágenes para abrirlas en lightbox.

Otros efectos de Página de Galería por plantilla

Las Páginas de Galería tienen efectos especiales de posicionamiento del cursor en las siguientes familias de plantillas:

  • Forte: Posicionar el cursor sobre el carrusel de la Página de Galería muestra las flechas de navegación. Posicionar el cursor sobre una leyenda mueve la leyenda hacia arriba para que se puedan leer descripciones más largas.
  • Momentum: Navegación con flechas cuando se posiciona el cursor en pantalla completa.
  • Tremont: Muestra las leyendas cuando se posiciona el cursor.
  • Wexley: Posicionar el cursor sobre las imágenes en una Página de Galería muestra el título de la imagen y una superposición de color.

Páginas de índice (versión 7.0)

Las Páginas de Índice tienen efectos especiales de posicionamiento del cursor en las siguientes familias de plantillas:

  • Avenue: Posicionar el cursor sobre una imagen en miniatura cambia su opacidad. También puedes hacer que aparezca el Título de navegación de la página cuando se posiciona el cursor.
  • Flatiron: Posicionar el cursor sobre una imagen en miniatura amplía la imagen y te permite obtener una vista panorámica de esta.
  • Montauk: Posicionar el cursor sobre una imagen en miniatura cambia su opacidad.
  • Tremont: Posicionar el cursor sobre el título de una página en la navegación de Índice hace que aparezca la miniatura de la página como imagen de fondo.
  • York: Las imágenes en miniatura pueden difuminarse cuando se posiciona el cursor, y pueden aparecer títulos en miniatura cuando se posiciona el cursor.

Visita su guía de plantillas para recibir más ayuda.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 43 de 225
Crear efectos de posicionamiento del cursor para tus imágenes