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

¿Cómo se verá mi sitio en los dispositivos móviles?

Los sitios de Squarespace están diseñados para garantizar que los visitantes puedan navegar fácilmente por tu sitio en cualquier dispositivo que elijan, desde equipos de escritorio hasta tabletas o smartphones.

Todos los sitios de Squarespace se ajustan en navegadores más pequeños y se adaptan al formato de un dispositivo. Hacemos esto con un diseño adaptativo, donde el contenido cambia automáticamente de tamaño en función del tamaño de la ventana del navegador que ve el sitio. En general, el contenido se apila verticalmente en un dispositivo móvil. Esto significa que los visitantes pueden desplazarse para ver todo el contenido, en lugar de tener que pellizcar, ampliar y desplazarse en muchas direcciones.

Si tu sitio web está en la versión 7.0 de Squarespace, es posible que tu plantilla tenga estilos para dispositivos móviles adicionales incorporados que se activan cuando tu sitio detecta que se está viendo en un dispositivo móvil. Para obtener más información, consulta la sección Estilos para dispositivos móviles de la versión 7.0 a continuación

En la versión 7.1, los sitios se adaptan automáticamente a la vista en dispositivo móvil, pero algunas áreas, como los encabezados, tienen opciones de estilo específicas para dispositivos móviles.

En esta guía se explica cómo aparecen ciertos elementos del sitio en dispositivos móviles y se ofrecen consejos para cambiar los estilos para dispositivos móviles.

Conocer el sitio en un dispositivo móvil

La mejor manera de aprender cómo funciona tu sitio en dispositivos móviles es probarlo tú mismo. Recomendamos usar la vista en dispositivo integrada y realizar pruebas en un dispositivo móvil.

Vista de Dispositivo

La herramienta Vista en dispositivo muestra las diferentes vistas en dispositivo móvil de tu sitio. Esta es una buena manera de probar el diseño adaptativo de tu sitio desde un equipo de escritorio mientras estás editando. Para obtener instrucciones detalladas, consulta Vista en dispositivo.

Usa tus dispositivos

Los tamaños de las ventanas varían según el dispositivo y algunas funciones móviles tendrán un aspecto diferente en un dispositivo móvil real que en la vista en dispositivo, por lo que es útil visitar tu sitio web en cualquier dispositivo que puedas.

Para visitar el sitio desde un dispositivo móvil, escribe la URL en la barra de direcciones del navegador móvil.

Consejo: Durante tu período de prueba, para obtener una vista previa de tu sitio como visitante desde un dispositivo móvil, agrega una contraseña global del sitio (en lugar de usar el inicio de sesión del propietario).

SEO y mantener el sitio optimizado para dispositivos móviles

Google da más prioridad a los sitios optimizados para dispositivos móviles. Los estilos para dispositivos móviles exclusivos de los sitios de Squarespace significan que son compatibles con los motores de búsqueda y están listos para encontrarse en las búsquedas móviles. Para obtener más información, visita Qué hace Squarespace para el SEO.  

Además de los diseños optimizados para dispositivos móviles, hay ciertas cosas que puedes hacer para garantizar que el sitio sea compatible, como limitar el contenido de un portafolio o una página de índice, usar fragmentos de blog, reducir el tamaño de las imágenes y minimizar el número de imágenes en una página. Para obtener más información, visita Consejos para mantener tu sitio web compatible con dispositivos móviles.

Barra de Anuncios

La barra de anuncios aparece en la parte superior de la página en dispositivos móviles.

En estas familias de plantillas de la versión 7.0, la barra de anuncios aparece debajo de la superposición del encabezado y encima del contenido de la página:

  • Brine
  • York

Archivos de audio y vídeo

Los archivos de audio y de vídeo se abren y se reproducen de acuerdo a cada dispositivo o la funcionalidad del navegador. En algunos dispositivos, incluidos los que tienen iOS, los archivos de audio se abren en el reproductor multimedia del dispositivo.

Los archivos de vídeo se reproducen en la página en todos los navegadores compatibles para dispositivos móviles. Si añadiste una miniatura personalizada como imagen superpuesta, toca dos veces para reproducir el vídeo.

Imágenes de fondo de banners y secciones

Los banners y las imágenes de fondo de la sección siempre tendrán algunos recortes en dispositivos móviles. Para reducir los efectos de recortes:

  • Cambia los estilos del sitio para editar la posición o el tamaño de la sección.
  • Los patrones abstractos e imágenes sin texto o bordes funcionan mejor.
  • En la mayoría de las imágenes de fondo de sección, puedes ajustar el punto focal para controlar dónde está centrada la imagen.

Bloques

Los bloques agregan contenido a secciones, páginas y otras áreas editables, como publicaciones de blog. El diseño adaptativo de Squarespace apila automáticamente bloques en dirección vertical en dispositivos móviles.

Para obtener más información y ver un vídeo sobre cómo funciona esto, consulta Cambios en el diseño de las páginas y los bloques en dispositivos móviles.

  • Columna única - Bloques de ancho completo apilados verticalmente en los dispositivos móviles y que conservan el diseño de la página como en el equipo de escritorio.
  • Columnas múltiples - La segunda, tercera y demás columnas se mueven por debajo de la primera en los dispositivos móviles y se apilan verticalmente en lugar de horizontalmente.
  • Los bloques de elementos flotantes se muestran por encima del Bloque de Texto en dispositivos móviles.

Los bloques espaciadores se ocultan automáticamente en un dispositivo móvil, excepto en algunas plantillas de la versión 7.0.

Dominios

Los dominios integrados y personalizados del sitio funcionan tanto en un equipo de escritorio como en un dispositivo móvil. No necesitas una URL móvil independiente.

Si tienes problemas con un dominio de terceros que se conecta en dispositivos móviles, asegúrate de haberlo vinculado correctamente al sitio

Favicon o ícono del navegador

El favicon, o ícono del navegador, que se muestre dependerá de tu navegador móvil. En algunos casos, no podrás ver el favicon. 

Galerías

La forma en que se muestre la galería en un dispositivo móvil depende de la versión del sitio y del formato de la galería.

Consejo: Los archivos de imágenes grandes o demasiadas imágenes pueden hacer que el sitio se cargue lento en un dispositivo móvil. Para obtener más información, visita Consejos para mantener tu sitio web compatible con dispositivos móviles.

Secciones de Galería

La visualización de las secciones de la galería en dispositivos móviles depende del diseño: 

  • Cuadrícula: Simple: se muestra como una cuadrícula. Las secciones establecidas en una columna se muestran en una columna. Las secciones establecidas en dos o más columnas se muestran en dos columnas. 
  • Cuadrícula: Tiras; se muestran apiladas en una columna.
  • Cuadrícula: Mampostería: las secciones configuradas en una columna se muestran en una columna. Las secciones configuradas en dos o más columnas se muestran en dos columnas. 
  • Todos los diseños de diapositivas: permanecen como una presentación de diapositivas.

Los subtítulos no se muestran en la vista de lightbox. 

Páginas de Galería

Muchas plantillas usan una página de galería estándar. En estas plantillas, en un dispositivo móvil:

  • Cuadrícula: Las Páginas de Galería se apilan verticalmente. Pulsa una imagen para la vista lightbox. En lightbox, presiona el punto en la esquina inferior derecha para mostrar los títulos y las descripciones de las imágenes.
  • Diapositivas: Las Páginas de Galería se muestran como una presentación de diapositivas. Pulsa para navegar. Los títulos y las descripciones de las imágenes no se mostrarán en los navegadores con un ancho inferior a 480 píxeles.

Si la plantilla es compatible con los enlaces URL o las URL de enlace profundo, estas también van a funcionar en dispositivos móviles.

Las Páginas de Galería tienen propiedades inclusivas en los dispositivos móviles de estas familias de plantillas:

  • Avenue: las imágenes se apilan verticalmente.
  • Flatiron: Las imágenes se apilan debajo del texto del título y la descripción de la página.
  • Forte: Las imágenes se apilan verticalmente. Los títulos de las imágenes y las descripciones se muestran debajo de la imagen. La presentación de diapositivas en lightbox está deshabilitada.
  • Ishimoto: Las imágenes se apilan verticalmente.
  • Momentum: Las flechas de navegación desaparecen después de que te deslizas por primera vez.
  • Montauk: Las imágenes se apilan debajo de la descripción de la página. Los títulos de las imágenes y las descripciones se muestran debajo de cada imagen.
  • Supply: Las Páginas de Galería se apilan debajo del texto del título y la descripción de la página. Los títulos de las imágenes y las descripciones se muestran debajo de la imagen.
  • Tremont: Las imágenes de la galería se apilan verticalmente en la mayoría de los teléfonos inteligentes. Los teléfonos inteligentes más grandes y las tabletas mostrarán el diseño habitual.

Bloque de Galería

La visualización de los Bloques de Galería en dispositivos móviles depende de su diseño: 

  • Cuadrícula: Se muestran como una cuadrícula de dos columnas.
  • Diapositivas: permanecen como una presentación de diapositivas.
  • Carrusel: Se muestran como un carrusel, pero solo muestra una imagen a la vez.
  • Apilado: Permanecen apilados.

En la mayoría de los casos, las leyendas de imagen se muestran de la misma manera en un dispositivo móvil que en una computadora de escritorio. Para los Bloques de Galería de diapositivas, las leyendas no se muestran en los navegadores más angostos que 480 píxeles.

Efectos al posicionar el cursor sobre el elemento

Los dispositivos de pantalla táctil, como los teléfonos inteligentes, las tabletas y las computadoras portátiles con pantalla táctil, no permiten posicionar el cursor sobre un elemento. Para los elementos en tu sitio que tienen efectos al posicionar el cursor sobre el elemento, los efectos pueden mostrarse cuando pulsas los elementos. Por ejemplo: 

  • Los menús de carpetas desplegables aparecen cuando las tocas.
  • Los nombres de elementos de productos y los precios se muestran debajo de la imagen.
  • Al posicionar el cursor sobre las imágenes, las leyendas podrían mostrarse siempre, mostrarse cuando se las pulse o nunca mostrarse, según el tipo de dispositivo móvil y el ancho del navegador.

Leyendas de imagen

Los tipos de leyenda que utiliza el sitio dependen de la versión del sitio. 

  • Secciones de galería: las leyendas suelen mostrarse de la misma manera en dispositivos móviles que en un equipo de escritorio, excepto que las leyendas no se muestran en Presentación de diapositivas: Diseño simple.
  • Bloques de Imagen y Bloques de Galería: Las leyendas en general se muestran de la misma manera en dispositivos móviles y en dispositivos de escritorio. Al posicionar el cursor sobre las imágenes, las leyendas podrían mostrarse siempre, mostrarse cuando se las pulse, o nunca mostrarse, según el tipo de dispositivo móvil y el ancho del navegador.
  • Bloques de Imagen y Bloques de Galería: Las leyendas en general se muestran de la misma manera en dispositivos móviles y en dispositivos de escritorio. Al posicionar el cursor sobre las imágenes, las leyendas podrían mostrarse siempre, mostrarse cuando se las pulse, o nunca mostrarse, según el tipo de dispositivo móvil y el ancho del navegador.
  • Páginas de galería: la visualización en dispositivos móviles depende de tu plantilla.

Bloques de Instagram, Flickr, y 500px

Los bloques que muestran imágenes desde cuentas de redes sociales como Instagram, Flickr, y 500px, muestran imágenes en un formato de cuadrícula, con dos columnas.

Lightbox

En general, los dispositivos móviles soportan efectos de lightbox, pero existen algunas limitaciones:

  • No está disponible la opción de ampliar con un pellizco.
  • Si la imagen tiene una leyenda que aparece al desplazar el cursor, aparece un punto blanco en la parte inferior derecha del lightbox. Toca el punto para mostrar la leyenda.
  • En la versión 7.0, los lightbox están desactivados en las páginas de galería de Wexley.

Menú de navegación

El modo en que aparezca el menú de navegación depende de la versión del sitio

La apariencia de la navegación en un dispositivo móvil depende del diseño del encabezado del sitio. La navegación principal siempre se contrae detrás de un ícono de menú, pero puedes establecer el diseño de navegación, el tipo de ícono y el color de superposición en la configuración del encabezado.

El aspecto de la navegación en un dispositivo móvil depende de la plantilla, pero la navegación principal normalmente se minimiza en un ícono del menú (conocido como un ícono de "hamburguesa") o un enlace. 

Si la plantilla es compatible con la navegación del pie de página, se muestra en la parte inferior de la página, apilada verticalmente. 

Para obtener más información, visita Cómo dar estilo a la navegación.

Padding (Relleno)

Los sitios de Squarespace suelen tener un relleno móvil incorporado, lo que ayuda a optimizar tu sitio para navegadores más pequeños y un diseño adaptativo. Esto significa que los retoques de espaciado y relleno que afectan tu sitio en un equipo de escritorio pueden no afectar siempre la apariencia en un dispositivo móvil.

Mensajes emergentes con promociones

Si tu sitio usa Ventanas emergentes promocionales, puedes mantenerlas habilitadas en dispositivos móviles. Todas las ventanas emergentes en teléfonos móviles están configuradas por defecto con un estilo estándar de media página a fin de ayudar a cumplir las reglas de Google para clasificar los sitios en los resultados de búsqueda.

Usa el panel de Estilo para personalizar el diseño móvil, o desactiva las ventanas emergentes en el panel Display & Timing (Visualización y Tiempo).

Título del sitio web y logos

La forma en que aparece el título o el logotipo del sitio depende de la versión del sitio. 

El estilo del título o logotipo del sitio depende del diseño del encabezado del sitio. En el editor de encabezados, haz clic en el ícono Móvil para cambiar el diseño. 

En general, el título del sitio web o el logo se quedarán en una posición similar en el dispositivo móvil. Por ejemplo, si el título del sitio web se muestra en la esquina superior derecha en el escritorio, por lo general se mostrará en la esquina superior derecha en el móvil.

Para ver un desglose de cómo se muestra el título del sitio de cada plantilla en un dispositivo móvil, visita el título del sitio y la visualización del logotipo.

Páginas de tienda y Commerce

Los clientes pueden comprar en el sitio usando dispositivos móviles de la misma manera que lo harían en un equipo de escritorio. Al igual que el resto del sitio, la tienda Squarespace se adapta para ser compatible con pantallas pequeñas y para que se pueda navegar en dispositivos móviles. Los productos se apilan verticalmente en una o dos columnas. En las páginas de los artículos individuales, la imagen del producto se apila encima de la descripción, el precio y el botón Añadir al carrito.

Otros estilos dependen de la versión del sitio. 

  • Se muestran varias imágenes de productos en una presentación de diapositivas por las cuales los compradores se pueden deslizar.
  • Los productos se muestran en una sola columna.
  • La navegación por categorías se muestra horizontalmente para que los compradores se deslicen por ellas.
  • Cuando el carrito de compras está habilitado en la configuración del encabezado, siempre aparece en la parte superior de la página. Si deshabilitas el ícono del carrito de compras, solo aparece en la parte inferior de la página cuando alguien agrega un producto a su carrito.
  • Actualmente, Vista rápida y Ampliar la imagen del producto no están disponibles para dispositivos móviles.
  • Se muestran varias imágenes de productos en miniaturas pequeñas o apiladas en las páginas de detalles del producto. 
  • Los productos se muestran en dos o más columnas.
  • La navegación por categorías se muestra normalmente como un menú desplegable Filtro. En Suministro, aparece en el menú de navegación. 
  • El carrito de compras aparece después de que el cliente haya añadido al menos un artículo. En la mayoría de las plantillas, aparece en una barra móvil negra en la parte inferior del sitio.
  • Actualmente, Vista rápida y Ampliar la imagen del producto no están disponibles en dispositivos móviles. 
  • Laspáginas de tienda avanzadas y únicas tienen funciones especiales de productos. En algunas plantillas, puedes cambiar el estilo móvil de tu carrito de compras.

Texto y fuentes

Las fuentes suelen mantener el mismo estilo en dispositivos móviles, pero las fuentes grandes, como los encabezados, pueden reducirse para ajustarse al ancho del navegador. Si ves superposición de texto en un dispositivo móvil, cambia la altura de línea de la fuente.

Los números de teléfono agregados al texto del cuerpo o pie de página de tu sitio se muestran como enlaces en el navegador móvil Safari.

Algunas plantillas de la versión 7.0 utilizan fuentes de ajuste de escala para que puedas establecer manualmente los tamaños máximo y mínimo de títulos, encabezados y otros textos clave.

Estilos para dispositivos móviles de la versión 7.0

Estas funciones son exclusivas de los sitios que están en la versión 7.0:

Estilos específicos de plantillas

Para conocer más sobre las opciones para móviles de una plantilla específica, visita nuestras guías de plantillas.

Para ver una lista de plantillas con opciones específicas para móviles, visita Estilos avanzados para móviles.

Desactivar los Estilos para dispositivos móviles

La mayoría de las plantillas de Squarespace tienen un diseño único optimizado para dispositivos móviles, lo que ayuda a los visitantes a ver el sitio y navegar por este desde cualquier dispositivo. Algunas plantillas tienen la opción de deshabilitar esta función si lo prefieres, aunque te recomendamos que mantengas habilitados los estilos para dispositivos móviles.

Ten presente lo siguiente: 

  • Al deshabilitar los estilos para dispositivos móviles, el sitio aparece igual tanto en un dispositivo móvil como en un equipo de escritorio. En lugar de apilar contenido del sitio en una columna vertical, los bloques y otro contenido aparecen con el mismo diseño que se ve en un navegador de escritorio.
  • Al deshabilitar los estilos para dispositivos móviles, puede verse afectado el SEO. En abril de 2015, Google comenzó a considerar la “compatibilidad con dispositivos móviles” al clasificar sitios en búsquedas en dispositivos móviles. Los sitios de Squarespace solo cumplen con los requisitos de Google cuando están habilitados los estilos para dispositivos móviles.
  • Al deshabilitar los estilos para dispositivos móviles, se deshabilita la navegación móvil.
  • No es posible deshabilitar los estilos para dispositivos móviles para páginas de portada

Para deshabilitar los estilos para dispositivos móviles:

  1. En el menú de Inicio, haz clic en Diseño y, luego, en Configuración de plantilla.
  2. Marca Desactivar los estilos para dispositivos móviles.
  3. Haz clic en Guardar.

Esta opción no aparecerá si tu plantilla no admite la desactivación de estilos para dispositivos móviles. Los estilos para dispositivos móviles no pueden desactivarse en estas familias de plantillas:

  • Brine
  • Farro
  • Galapagos 
  • Skye
  • Supply 
  • Tremont
  • York

Preguntas frecuentes

¿Cómo decide Squarespace cuándo mostrar estilos para móviles o de escritorio?

Cuando visitas un sitio en un dispositivo móvil, Squarespace detectará automáticamente un sistema operativo móvil. Esto envía una señal para mostrar los estilos para dispositivos móviles, a menos que el sitio esté en la versión 7.0 y los hayas deshabilitado.

¿Puedo editar mi sitio en dispositivos móviles?

Puedes editar tu sitio en dispositivos móviles con la aplicación de Squarespace para iOS o Android. 

También puedes iniciar sesión a través de tu navegador móvil y administrar algunos aspectos de tu sitio de Squarespace en un dispositivo móvil, pero algunas funciones solo están disponibles en equipos de escritorio.

¿Cuál es la diferencia entre estilos para dispositivos móviles y diseño adaptativo? 

Los estilos para dispositivos móviles en la versión 7.0 y el diseño adaptativo son conceptos diferentes, pero relacionados.

  • Losestilos para dispositivos móviles son exclusivos de las plantillas de la versión 7.0. Estos estilos solo afectan la navegación específica de dispositivos móviles, las restricciones impuestas para subir fondos de contenido y otros elementos de diseño que pueden resultar inmanejables en dispositivos móviles. Estos elementos se deshabilitan cuando deshabilitas los estilos para dispositivos móviles para presentar una versión del sitio más similar a la de escritorio.
  • El diseño adaptativo se refiere a la capacidad del sitio y sus elementos de contenido para ajustar su tamaño y adaptarse a la ventana del navegador del visitante. El diseño se mantiene para todos los sitios de Squarespace, incluso con los estilos móviles 7.0 deshabilitados. Esto significa que el sitio web completo seguirá cambiando de tamaño para adaptarse a dispositivos más pequeños pero, si los estilos para dispositivos móviles están deshabilitados, el contenido no se reorganizará para facilitar la navegación. Los estilos no se pueden desactivar en la versión 7.1, por lo que el contenido siempre se reorganizará y cambiará de tamaño. Para obtener más información, visita Diseño adaptativo.

¿Puedo añadir CSS personalizados para cambiar el diseño del sitio web para móviles?

Sí, pero las modificaciones de código personalizado están fuera del alcance de nuestro soporte. Esto significa que no podemos ayudarte más con la configuración o la resolución de problemas. Además, con una solución basada en un código, no podemos garantizar su funcionamiento o la compatibilidad total con Squarespace. Esto incluye cómo funciona con nuestro diseño adaptable, en especial su aspecto en dispositivos móviles y sus funciones en todas las plantillas. El código personalizado también pueden ocasionar problemas de visualización con actualizaciones futuras de nuestra plataforma. Aunque no podemos ayudarte más, hay muchos recursos que te pueden orientar en la dirección correcta:

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 46 de 126