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 apilan los bloques en dispositivos móviles

Para que el sitio sea legible y evitar que quienes lo visiten tengan dificultades para ver y tengan que ampliar la vista y desplazarse para ver el contenido, el diseño adaptable de Squarespace automáticamente acomoda los bloques en forma vertical en los dispositivos móviles.

Si los bloques no se apilan de la forma que deseas, puedes mover bloques utilizando los casos de esta guía y video. Experimentar y previsualizar tu sitio web es la mejor manera de perfeccionar el diseño hasta lograr uno que te gusta y que se vea bien en todos los dispositivos. 

Mira el video

El video muestra un sitio de la versión 7.0, pero los bloques y columnas tienen las mismas funciones en los sitios de la versión 7.1

Diseños de columna en vista de dispositivos móviles

Cuando los bloques se apilan verticalmente y ocupan todo el ancho de una página (sin bloques en ninguno de los lados), también se apilarán verticalmente en dispositivos móviles, conservando el diseño del equipo de la página. 

Agregar bloques a la izquierda o a la derecha de otros bloques crea columnas. Cuando una página tiene columnas, Squarespace moverá la segunda y tercera columnas y otras columnas adicionales debajo de la primera en dispositivos móviles. Es decir, las columnas se mueven de horizontal a vertical en dispositivos móviles.

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

Ten en cuenta estas excepciones:

  • Los bloques espaciadores se ocultan automáticamente en dispositivos móviles en todos los sitios de la versión 7.1 y en la mayoría de los sitios de la versión 7.0.
  • Los bloques flotantes en un bloque de texto (por ejemplo, imágenes ajustadas en texto) se muestran encima del bloque de texto en la vista de dispositivos móviles. Si los bloques aparecen incorrectamente, muévelos para asegurarte de que no están flotando en el texto.

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

En diseños donde algunas áreas tienen tamaños de columna diferentes a otros, todavía tienes control sobre cómo se ordenan los bloques en dispositivos móviles.

Al agregar bloques, verás líneas guía que muestran cómo se ordenarán. Si una línea recorre la longitud de un bloque junto a este, esto le indica 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.

move_text_block_under_image_block.png

Más ayuda

  • Para obtener una vista previa de cómo puede aparecer tu sitio web en dispositivos móviles, usa la vista en dispositivo. Dado que los sitios pueden tener un aspecto ligeramente diferente por dispositivo, también recomendamos probar cómo se ve en tu propio dispositivo móvil.
  • Para obtener una mejor idea de cómo aparece tu sitio web en dispositivos móviles, edítalo desde la aplicación Squarespace.

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