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 aparecerá mi sitio en un dispositivo móvil?

Las plantillas de Squarespace están diseñadas para garantizar que los visitantes puedan navegar fácilmente en el sitio en cualquier dispositivo, de escritorios a tabletas y a teléfonos inteligentes.

Todos los sitios Squarespace se ajustan a navegadores más pequeños y al formato de un dispositivo. Hacemos esto de dos maneras:

  • Diseño adaptable - El contenido cambia de tamaño automáticamente en función al tamaño de la ventana del navegador en la que el visitante abre el sitio.
  • Estilos para móviles - La mayoría de las plantillas Squarespace tienen estilos adicionales integrados para móviles que se activan cuando el sitio detecta que está siendo visto en un dispositivo móvil. Los estilos para móviles suelen afectar a los elementos de navegación y de diseño para ayudar a que el sitio sea compatible con dispositivos móviles y responda a la pantalla táctil.

Aunque la forma exacta en la que aparece el sitio en el dispositivo móvil varía según la plantilla, la mayoría de las plantillas tienen una funcionalidad similar. Esta guía describe lo que puedes esperar del sitio móvil y ofrece consejos para ajustar los estilos para móviles.

Conocer el sitio en un dispositivo móvil

La mejor manera de aprender cómo funciona el sitio en un dispositivo móvil es probarlo por ti mismo. Hay dos métodos principales para ver la funcionalidad móvil del sitio: Device view (Vista de dispositivo) y probar el sitio en dispositivos móviles y en navegadores más pequeños. Recomendamos ambos.

Vista de Dispositivo

La Vista de Dispositivo es una excelente manera de probar el diseño dadaptable del sitio desde un escritorio, mientras estás editando. Para abrir la Vista de Dispositivo, inicia sesión en el sitio y posiciona el cursor sobre la página en la parte superior del navegador. Haz clic en la flecha que aparece y selecciona un tipo de dispositivo. Para obtener instrucciones detalladas, consulta Device View (Vista de Dispositivo).

Usa tus dispositivos

La Vista de Dispositivo te da una idea general de cómo aparece el sitio en un navegador móvil normal, pero no es 100 % exacto para cada teléfono o tableta. Los tamaños de ventana varían entre los dispositivos y las características móviles de algunas plantillas se verán diferentes en un dispositivo móvil real en comparación con la Vista de Dispositivos. Por eso es una buena idea visitar el sitio desde todos los dispositivos que puedas usar.

Para visitar el sitio desde un dispositivo móvil, escribe la dirección URL del sitio en la barra de direcciones del navegador móvil. El sitio no tiene una dirección diferente para dispositivos móviles.

Consejo: Durante tu período de prueba, usa el Acceso de visitante (no inicies sesión como el Propietario) para ver cómo se verá tu sitio desde un dispositivo móvil.

SEO y mantener el sitio optimizado para dispositivos móviles

Google da a los sitios optimizados para móviles una prioridad más alta. Los estilos únicos para dispositivos móviles de las plantillas 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, consulta Visión general de SEO y Squarespace.

Además de las plantillas optimizadas para dispositivos móviles, hay ciertas cosas que puedes hacer para garantizar que el sitio sea compatible con dispositivos móviles, incluso limitar el contenido de una Página de Índice, utilizando fragmentos de blog, reduciendo el tamaño de la imagen y minimizando el número de imágenes en una página. Para más información, consulta Mantener el sitio de Squarespace compatible con dispositivos móviles.

Reglas generales

En general, el contenido se apila verticalmente en el dispositivo móvil. Esto significa que los visitantes pueden desplazarse para ver todo el contenido, en lugar de tener que hacer zum y desplazarse en varias direcciones.

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

La siguiente información muestra las normas generales para determinados elementos del sitio en el dispositivo móvil.

Nota: Algunas plantillas tienen opciones de estilo específicos para dispositivos móviles en el Editor de Estilo. Puesto que no puedes editar el sitio en un dispositivo móvil, puedes realizar estos cambios en un equipo de escritorio. Para obtener ayuda, consulta Hacer cambios de estilo.

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, incluyendo 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 móviles. Si has añadido una miniatura personalizada como imagen superpuesta, toca dos veces para reproducir el vídeo.

Imágenes de fondo

Las imágenes de fondo son compatibles con los dispositivos móviles. En algunas plantillas, es posible que tengas que hacer que el fondo o el área de contenido sean transparentes para que se muestre la imagen de fondo. Para obtener más información, consulta Cambiar los colores.

Se mostrará la misma imagen de fondo en dispositivos de escritorio y móviles. Dado que se ajustan a una pantalla del navegador más larga y angosta que la de un dispositivo móvil, las imágenes de fondo pueden sufrir algún recorte o distorsión. Hay algunas cosas que puedes hacer para minimizar que aparezcan recortadas:

  • Cuando elijas una imagen de fondo, la forma de la imagen puede marcar una gran diferencia en la forma en que se ve desde dispositivos móviles.
  • Consulta nuestros consejos de resolución de problemas para los ajustes del Editor de Estilo que funcionan bien en dispositivos móviles.
  • Cuando añades una imagen de fondo, usa un dispositivo móvil o la Device view (Vista de Dispositivo) para ver qué aspecto tiene en un dispositivo móvil.

Imágenes de cabecera y Parallax scrolling

Las imágenes de cabecera siempre tendrán algunos inconvenientes y aparecerán recortadas en los dispositivos móviles. Hay algunas cosas que puedes hacer para minimizar que aparezcan recortadas:

  • Utiliza el Editor de Estilos para modificar la posición del encabezado, cambiar el tamaño o configurarlo para que sea fijo.
  • Los patrones funcionan mejor que las palabras, y los paisajes funcionan mejor que los retratos.
  • En las imágenes de cabecera de la página, puedes ajustar el punto focal de la imagen para controlar el recorte de la imagen.

Parallax scrolling es un efecto especial disponible en ciertas plantillas, en el que la imagen de fondo parece que se mueve más lentamente que el contenido en primer plano.

  • Brine, Aria, Basil, Blend, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West - Parallax scrolling works on mobile.
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (descontinuadas) - El efecto Parallax scrolling funciona en dispositivos móviles.

Páginas de Portada

Las Páginas de portada se adaptan al dispositivo móvil basado en el layout. Para obtener más información, consulta Estilos para móviles de Páginas de Portada.

Fuentes

Las fuentes suelen mantener el mismo estilo en los dispositivos móviles, pero las fuentes grandes, tales como los heading, pueden achicarse para ajustarse al tamaño del navegador.

Algunas plantillas utilizan escala de fuentes para que puedas establecer manualmente los tamaños máximo y mínimo para los títulos, encabezados y otro texto fundamental.

Nota: Si ves texto superpuesto en un dispositivo móvil, ajusta la line height (altura de la línea) de la fuente en el Editor de Estilo.

Padding (Relleno)

Las plantillas con frecuencia tienen relleno incorporado para móviles, lo que ayuda a optimizar el sitio para navegadores más pequeños y para el diseño adaptable. Esto significa que los ajustes de espaciado y relleno que afectan al sitio de escritorio podrían no afectar el aspecto en dispositivos móviles.

Galerías

Cómo se muestran la Página de Galería o el Bloque de Galería en el dispositivo móvil depende de su formato.

Consejo: Las imágenes grandes o tener demasiadas imágenes puede hacer que el sitio cargue lentamente. Para obtener más información, consulta Mantener el sitio de Squarespace compatible con dispositivos móviles.

Bloque de Galería

  • Cuadrícula: se muestra como una cuadrícula de dos columnas.
  • Diapositivas - Permanecen como una presentación de diapositivas. 
  • Carrusel - Se muestran como un carrusel, pero sólo muestra una imagen a la vez.
  • Apilado - Permanecen apilados.
Nota: En la mayoría de los casos, las leyendas de las fotos se muestran de la misma manera en los dispositivos móviles que en computadoras de escritorio. Para los Bloques de Galería tipo Presentación de Diapositivas, las leyendas no se mostrarán en los navegadores con un ancho inferior a 480 píxeles.

Páginas de Galería

Cada plantilla tiene sus propias reglas sobre cómo se muestran las Páginas de Galería en los dispositivos móviles. En general:

  • Cuadrícula: Las Páginas de Galeria se apilan verticalmente. Pulsa en una imagen para la vista lightbox. Los títulos de las imágenes y las descripciones no se muestran.
  • Diapositivas - Las Páginas de Galería se muestran como una presentación de diapositivas. Pulsa para navegar.
  • 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 siguientes plantillas de Páginas de Galería tienen propiedades únicas en el dispositivo móvil. Las plantillas se agrupan por familia.

  • 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.
  • Galapagos - Para imágenes lightbox en cuadrícula, pulsa en el punto en la esquina inferior derecha para mostrar los títulos y las descripciones de las imágenes.
  • Ishimoto - Las imágenes se apilan verticalmente.
  • Momentum - Las flechas de navegación desaparecen después de que te deslizas por primera vez.
  • Montauk, Julia, Kent, Om - 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, Camino, Carson, Henson: 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. 
  • Wells - Las imágenes se apilan verticalmente. Los títulos de las imágenes y las descripciones se muestran debajo de la imagen.
  • Wexley - Las imágenes se apilan verticalmente. Lightbox está deshabilitada.

Menú de navegación

La apariencia de la navegación en un dispositivo móvil depende de la plantilla, pero la navegación principal normalmente se minimiza en un icono del menú (conocido como un icono 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 información específica sobre tu plantilla, visita Íconos del menú de navegación

Aquí puedes ver un ejemplo de cómo se ve la navegación móvil en la plantilla Supply:

Encabezados y pie de páginas

Para las plantillas que son compatibles con los encabezados o pie de página, el contenido se mostrará en el dispositivo móvil.

Páginas de Productos y Comercio Electrónico

Los clientes pueden comprar en el sitio en los 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 para agregar al carrito .

Categoría de navegación por lo general se muestra como un menú desplegable para filtrar. En la plantilla Marquee (descontinuada), la categoría de navegación se muestra en la parte inferior. En la plantilla Supply, se muestra en el menú de navegación.

El carrito de compra aparece una vez que el cliente ha añadido al menos un artículo. Toca el carrito para pagar. En la mayoría de las plantilas, el carrito aparece en una barra móvil negra en la parte inferior del sitio. Hay algunas excepciones, que aparecen a continuación; esta lista agrupa a las plantillas por familias.

  • Brine, Aria, Basil, Blend, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West - Displays in the top or bottom mobile bar. Can be hidden.
  • Farro, Haute:se muestra en la parte superior o inferior de la barra móvil. Puede estar oculta.
  • Pacific, Charlotte, Fulton, Horizon, Naomi: se muestra como un botón.
  • Tremont, Camino, Carson, Henson: se muestra en la superposición de navegación o en el encabezado. Puede estar oculto.
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori: se muestra en la superposición de navegación.

Las Páginas Avanzadas y de Productos Únicos tienen características especiales del producto. Actualmente, la Quick view (Vista Rápida) y Product Image Zoom (Zoom de la Imagen de Producto) no están disponibles para dispositivos móviles. En ciertas plantillas, puedes ajustar el estilo móvil para el carrito de compras.

Páginas Normales y bloques

Los bloques añaden contenido a las Páginas Normales y a cualquier área editable como barras laterales, pie de página y publicaciones de blog. El diseño adaptable de Squarespace apila automáticamente los bloques en forma vertical en los 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 de Espacio se ocultan automáticamente en los dispositivos móviles en la mayoría de las plantillas.

Ventanas emergentes promocionales

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 para 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).

Leyendas de imagen

  • Páginas de Galería - La visualización en dispositivos móviles depende de tu plantilla
  • 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.

Barras laterales

Las barras laterales se mostrarán en la parte inferior de la página en los dispositivos móviles. En Ishimoto, las barras laterales no se muestran en los dispositivos móviles.

Título del sitio web y logos

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 un desglose de cómo cada plantilla muestra el título del sitio web en el móvil, consulta Agregar un título del sitio web .

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. 

Estilos para móviles en plantillas específicas

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

Desactivar los estilos para móviles

Los estilos para móviles traducen las características de las plantillas a una interfaz dirigida a dispositivos móviles en la que puedes usar gestos, como menús de navegación desplegables y fuentes legibles.

Los estilos para móviles están habilitados de forma predeterminada, pero se pueden desactivar en la mayoría de las plantillas en el panel de Diseño avanzado. Para obtener más información, consulta Deshabilitar los estilos para móviles.

Nota: El diseño adaptabe está integrado en cada sitio Squarespace y no se puede desactivar.

Dominios

Los dominios incorporados y personalizados de tu sitio funcionan tanto en escritorio como en móviles; no necesitas una URL diferente para móviles.

Nota: Si tienes problemas con la conexión de un dominio externo en móviles, asegúrate de que lo vinculaste correctamente con el sitio

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.

Preguntas frecuentes

¿Cuál es la diferencia entre el diseño adaptable y los estilos para móviles?

El diseño adaptable permite que el contenido del sitio se dimensione automáticamente a escala para la mejor visualización en base a la resolución de pantalla y el tamaño actual. Todos los sitios Squarespace están construidos con un diseño adaptable.

Los estilos para móviles son reglas de estilo integradas en cada plantilla que reorganizan cómo se muestra el contenido de un sitio en dispositivos móviles. Estos estilos permiten una visión óptima del contenido de un sitio en pantallas más pequeñas. Un sitio web con estilos para móviles tendrá un aspecto diferente que un sitio web que se visualiza en un navegador de escritorio.

¿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 móviles. La excepción a esto es si deshabilitas los estilos para móviles en la configuración.

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

Sí, esto es posible con un código personalizado, aunque es una modificación avanzada. No podemos ofrecer ayuda con esta configuración, ni con ninguna modificación a códigos de terceros o para agregarlos. Recomendamos visitar nuestro foro de la comunidad, answers.squarespace.com, para obtener información relacionada con códigos. Para obtener más información sobre cómo añadir CSS personalizado, consulta Usar el editor de CSS.

¿Puedo editar el sitio web en un dispositivo móvil?

Puedes iniciar sesión y administrar algunos aspectos de tu sitio de Squarespace desde tu dispositivo móvil, aunque algunas funciones solo están disponibles en una computadora de escritorio o portátil.

También puedes administrar ciertos aspectos de tu sitio en dispositivos móviles usando nuestras aplicaciones móviles.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 22 de 56
¿Cómo aparecerá mi sitio en un dispositivo móvil?