¿Cómo se verá mi sitio en los dispositivos móviles?
Descubre cómo se ven los diferentes elementos del sitio para los visitantes en dispositivos móviles.
Última actualización: 8 de agosto de 2024
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 computadoras de escritorio hasta tabletas o smartphones.
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.
Mira el video
Optimizar tu sitio web para dispositivos móviles
Todos los sitios de Squarespace se ajustan en navegadores más pequeños para adaptarse al formato de un dispositivo. Hacemos esto con diseño adaptativo, en el que tu contenido cambia automáticamente de tamaño en función del tamaño de la ventana del navegador que muestra tu sitio. En general, el contenido se apila verticalmente en los dispositivos móviles. Esto significa que los visitantes pueden desplazarse para acceder a todo tu contenido, en lugar de tener que pulsar, hacer un acercamiento o 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 las vistas en dispositivos móviles, pero algunas áreas, como las secciones o los encabezados del Editor dinámico, tienen opciones específicas para dispositivos móviles.
SEO para dispositivos móviles
Google da más prioridad a los sitios optimizados para dispositivos móviles. Los estilos únicos para dispositivos móviles de los sitios de Squarespace hacen que sean compatibles con los motores de búsqueda y estén disponibles para ser detectados en las búsquedas desde dispositivos móviles. Para obtener más información, visita Cómo optimiza Squarespace 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.
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 en dispositivo
La herramienta de vista en dispositivo muestra las diferentes vistas móviles de tu sitio. Esta es una excelente manera de probar el diseño adaptable de tu sitio desde un equipo mientras editas. Para obtener instrucciones detalladas, consulta Vista en dispositivo. En las áreas que usan el Editor dinámico, usa la vista en dispositivo para editar el diseño móvil independientemente del diseño de tu equipo.
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).
Audio y video
Los archivos de audio y video se abren y se reproducen según la funcionalidad de cada dispositivo o navegador. En algunos dispositivos, incluidos los que tienen iOS, los archivos de audio se abren en el reproductor multimedia del dispositivo.
Los videos se reproducen en la página en todos nuestros navegadores compatibles para dispositivos móviles. Si añadiste una imagen en miniatura personalizada como imagen superpuesta, toca dos veces para reproducir el vídeo. Descubre cómo funcionan los banners de video en dispositivos móviles en la siguiente sección.
Bloques
Los bloques agregan contenido a secciones, páginas y otras áreas editables, como las entradas de blog. La forma en que aparecen los bloques en los dispositivos móviles depende la versión de tu sitio y de dónde se agreguen los bloques.
En las áreas de los sitios de la versión 7.1 que usan el Editor dinámico, organiza el diseño móvil independientemente del diseño de tu equipo.
En los sitios de la versión 7.0 y en las áreas de los sitios de la versión 7.1 que usan el editor clásico, el diseño adaptable de Squarespace apila verticalmente de forma automática bloques en dispositivos móviles. Para obtener más información y ver un video sobre cómo funciona esto, consulta Cómo se apilan los bloques en dispositivos móviles en el editor clásico.
- Columnas únicas: los bloques de ancho completo se apilan verticalmente en dispositivos móviles, conservando el diseño de la página en equipos.
- 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 flotantes aparecen sobre su 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 de tu sitio funcionan tanto en equipos como en dispositivos móviles. No necesitas una URL independiente para dispositivos móviles.
Si tienes problemas con un dominio de terceros que se conecta en dispositivos móviles, asegúrate de haberlo vinculado correctamente al sitio.
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.
Bloques de Galería
En el Editor dinámico, los bloques de galería se muestran igual en dispositivos móviles que en equipos, pero puedes cambiar su tamaño y ubicación. En el editor clásico, la forma en que se muestran 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.
Normalmente, las leyendas de las imágenes se muestran de la misma forma en un dispositivo móvil que en un equipo. En los bloques de galería de diapositivas, no se muestran en los navegadores de más de 480 píxeles.
Para obtener más información, visita Bloques de galería.
Elementos del encabezado
La barra de anuncios, los menús de navegación, el título y el logotipo del sitio pueden cambiar en 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
El modo en que aparezca el menú de navegación depende de la versión de tu sitio.
Para obtener más información, visita Cómo dar estilo a la navegación.
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 de tu sitio.
Imágenes
Para tener en cuenta el ancho de los dispositivos móviles, algunas imágenes y sus características cambian en dispositivos móviles.
Los banners y las imágenes de fondo de sección siempre experimentan algún recorte en dispositivos móviles. El recorte ocurre porque las imágenes y los videos de los banners son anchos y horizontales, mientras que las pantallas de los dispositivos móviles son estrechas y verticales.
Sigue nuestros consejos de formato de las imágenes de banner y las prácticas recomendadas de diseño adaptable de imágenes antes de cargar imágenes. Cuando visualices tu sitio en dispositivos móviles, ten en cuenta que:
- La cantidad de recorte depende de la altura del banner y del ancho del navegador.
- La configuración de altura de cabecera no siempre se aplica a los dispositivos móviles.
- Los banners de video no se cargarán en un dispositivo móvil si la velocidad de conexión es lenta o si el navegador no lo permite. Establece una imagen de reserva para dispositivos móviles para que aparezca cuando el video no se pueda cargar.
- Para los banners de todo el sitio, el ajuste Fijar posición no aparecerá en algunos dispositivos móviles, incluido iOS. Para informarte mejor, visita Cómo agregar imágenes de fondo para todo el sitio en la versión 7.0.
Para minimizar los efectos de recorte en las imágenes de banner, visita Solución de problemas de recorte.
Leyendas de imagen
Los tipos de leyenda que utiliza el sitio dependen de la versión del sitio.
Bloques de Instagram y Flickr
Los bloques que muestran imágenes de cuentas de redes sociales, como Instagram y Flickr, muestran imágenes en una cuadrícula de dos columnas de ancho.
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 tu 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.
Elementos de la página
Los efectos de desplazamiento del cursor y el relleno cambian en dispositivos móviles para que tu sitio sea compatible con estos.
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 desplegables aparecen cuando los 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.
- Es posible que los títulos de las subpáginas y las imágenes destacadas del portafolio nunca se muestren.
Padding (Relleno)
Los sitios de Squarespace suelen tener un relleno incorporado para sitios móviles, lo que permite optimizar tu sitio para navegadores más pequeños, y diseño adaptativo. Esto significa que los ajustes de espacio y relleno que afectan tu sitio en una computadora de escritorio pueden no afectar siempre el aspecto 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 Visualización y frecuencia.
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 una computadora 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 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.
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 el texto se superpone cambia la altura de línea de la fuente.
Los números de teléfono agregados al cuerpo del texto 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
Mira el video
Estas funciones son exclusivas de los sitios que están en la versión 7.0:
- Páginas de portada: se adaptan a dispositivos móviles en función de su diseño.
- Encabezados y pies de página específicos: para las plantillas que admiten encabezados o pies de página, el contenido se muestra en dispositivos móviles.
- Desplazamiento de paralelo: el desplazamiento en paralelo es un efecto especial disponible en ciertas plantillas donde la imagen de fondo parece moverse más lento que el contenido en primer plano. Está disponible para dispositivo móvil en la familia Brine.
- Barras laterales: las barras laterales se muestran en la parte inferior de la página en un dispositivo móvil. En la plantilla Ishimoto no se muestran.
- Imágenes de fondo de todo el sitio: las imágenes de fondo de fondo de todo el sitio son compatibles con dispositivos móviles. Es posible que debas hacer transparente el área de contenido para que aparezca la imagen de fondo.
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 en cuenta lo siguiente:
- Si deshabilitas los estilos para dispositivos móviles, el sitio aparece igual en estos y en las computadoras 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 equipo.
- 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:
- Abre el panel de Diseño y haz clic en Configuración de plantilla.
- Marca Desactivar los estilos para dispositivos móviles.
- 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 dispositivos móviles o equipos?
Cuando visitas un sitio en un dispositivo móvil, Squarespace detecta 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 el 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 computadoras de escritorio.
- El diseño adaptable se refiere a la capacidad del sitio y sus elementos de contenido de ajustar su tamaño y adaptarse a la ventana del navegador de quien visita el sitio. El diseño adaptable se mantiene para todos los sitios de Squarespace, incluso con los estilos para dispositivos 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 para dispositivos móviles 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 adaptable.
¿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:
- Infórmate sobre las mejores prácticas para agregar código personalizado.
- Lee nuestra guía general sobre las personalizaciones de terceros.
- Visita el Squarespace Forum, nuestra comunidad de clientes y desarrolladores.
- Contrata a un Squarespace Expert para que te ayude a crear código personalizado para tu sitio. Obtén más información sobre los servicios de expertos disponibles a través de Squarespace Marketplace.
Las personas también vieron
Editar tu sitio con Editor dinámico
Agrega contenido a las páginas de tu sitio con este sistema de edición de arrastrar y soltar totalme...
Vista en dispositivo
Previsualiza tu sitio en un dispositivo móvil mientras lo editas. Con la vista en dispositivo, puede...
Pasar de la versión 7.0 a la versión 7.1 de Squarespace
Usa nuestra herramienta de actualización para migrar tu sitio de la versión 7.0 a la versión 7.1. Us...
![Footer Image](https://theme.zdassets.com/theme_assets/593095/55eab38f8a3ccacf801bfe301501da0131eaf1f8.png)
Recibe ayuda de nuestra comunidad
Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.
Contrata a un Squarespace Expert
Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.