Realza las imágenes y mantén la atención de los visitantes aplicando efectos de desplazamiento del cursor.

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

Los bloques de imágenes agregados a secciones del Editor dinámico no admiten efectos de desplazamiento o leyendas incorporadas. Crea leyendas usando un bloque de texto para agregar texto adyacente o superponiendo un bloque de imagen.

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

1. Añade un nuevo Bloque de imagen o abre uno existente.
2. Haz clic en la pestaña Diseño y, a continuación, selecciona Incorporado.
3. Haz clic en la pestaña Contenido y, a continuación, selecciona Superposición de leyenda al desplazarse en el menú desplegable Leyenda.
4. Pasa el cursor sobre el bloque de imagen. En la superposición de leyenda negra que aparece, haz clic en Escribir una leyenda aquí... e introduce tu leyenda.
5. 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 desplazamiento 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 estrechos 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 .
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:

• Desplazamiento: Fondo: muestra los títulos de los proyectos en un diseño apilado o en línea. Al desplazar el cursor sobre un título, la imagen destacada del proyecto reemplaza el fondo de la sección.
• Desplazamiento: Fijo: muestra los títulos de los proyectos en un diseño apilado o en línea. Al desplazar el cursor sobre un título, la imagen destacada del proyecto se muestra más pequeña en una posición fija en la sección.
• Desplazamiento: Seguir cursor: muestra los títulos de los proyectos en un diseño apilado o en línea. Al desplazar el cursor sobre un título, la imagen destacada del proyecto se muestra más pequeña y sigue el 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. 

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. Al desplazar el cursor sobre un título de página en la navegación Índice, la imagen destacada de la página aparece 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.