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

El diseño de página y de bloque cambia en dispositivos móviles

Los navegadores móviles son más pequeños (y normalmente más estrechos) que las ventanas de un equipo de escritorio. Para mantener tu sitio legible y evitar que los visitantes tengan que pellizcar, hacer zoom y desplazarse para ver el contenido, el diseño adaptativo de Squarespace apila automáticamente los bloques de forma vertical en dispositivos móviles.

Si los bloques no se alinean de la manera que quieres en un dispositivo móvil, puedes moverlos basándote en los casos de esta guía y el video.

Mira el video

Para ver cómo funciona esto y para obtener consejos sobre cómo cambiar el diseño para la mejor visualización en un dispositivo móvil, mira este video:

Probar con Vista en dispositivo

Recomendamos editar el sitio en Vista en dispositivo y probar cómo se ve en tu propio dispositivo.

Dado que el diseño de cada persona es diferente, experimentar y previsualizar el sitio es la mejor manera de perfeccionar el diseño hasta lograr uno que te guste y que se vea bien en todos los dispositivos. 

Diseños de una sola columna en vista en dispositivo móvil

Cuando los bloques ocupan todo el ancho de una página (sin bloques a cada lado), se apilan verticalmente en los dispositivos móviles, conservando el diseño de escritorio de la página.

Varias columnas pares en vista en dispositivo móvil

Al añadir bloques a la izquierda o a la derecha de otros bloques, se crean columnas en una página.

Las páginas con múltiples columnas son ideales para los navegadores de escritorio, pero pueden ser difíciles de leer en los dispositivos móviles. Para hacer el contenido más accesible, Squarespace moverá la segunda, tercera y más columnas debajo de la primera en los dispositivos móviles. En otras palabras, las columnas se mueven de horizontal a vertical.

Por ejemplo:

  • Si tienes tres bloques de imágenes en una fila horizontal, se apilarán uno encima del otro de izquierda a derecha en un dispositivo móvil.
  • Si tienes tres bloques de imágenes en una fila con bloques de texto debajo de cada uno que describen cada imagen, cada bloque de imágenes tendrá su bloque de texto asociado apilado debajo de este en la vista en dispositivo móvil, seguido de la próxima imagen. Mira el video de arriba para ver cómo funciona esto.

Diseños más complejos en vista en dispositivo móvil

Con diseños más complejos donde algunas áreas tienen diferentes tamaños de columnas que otras, todavía tienes control sobre cómo se ordenan los bloques en un dispositivo móvil.

Cuando se añaden bloques, las líneas guía muestran cómo se ordenarán. Si una línea recorre la longitud de un bloque que se encuentra al lado, esto le dice a Squarespace que los dos bloques deben agruparse en todas las pantallas.

Para mantener un bloque apilado con otro bloque, arrastra el bloque y suéltalo cuando la línea guía (la línea horizontal) recorra la longitud del otro bloque.

Mira el video de arriba para ver cómo funciona esto.

Bloques flotantes en vista en dispositivo móvil

Los bloques que flotan en un bloque de texto (por ejemplo, imágenes envueltas en texto) se muestran encima del bloque de texto en la vista en dispositivo móvil.

Para aprender más sobre los bloques flotantes en el texto, visita Cómo mover bloques.

Nota: Si no hay suficiente texto para rodear el bloque, este aparecerá junto al texto. Si los bloques aparecen incorrectamente encima del texto en la vista en dispositivo móvil, puedes resolverlo moviendo el bloque para asegurarte de que no esté flotando en el texto.

Bloques de espacios

Los Bloques de Espacio se ocultan automáticamente en los dispositivos móviles en la mayoría de las plantillas.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 54 de 327
El diseño de página y de bloque cambia en dispositivos móviles