Cómo se apilan los bloques en dispositivos móviles en el editor clásico

Asegúrate de que los bloques aparezcan en el orden correcto en los dispositivos móviles cuando uses el editor clásico.

Última actualización: 8 de agosto de 2024

En el editor clásico, el diseño adaptable de Squarespace apila verticalmente de forma automática bloques en los dispositivos móviles. Esto ayuda a mantener tu sitio legible y evita que los visitantes tengan que pellizcar, hacer zoom y desplazarse para navegar por tu contenido.

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

Cómo acceder a esta función

Esta guía trata sobre el comportamiento en dispositivos móviles de los bloques agregados en el editor clásico, que se usa en todos los sitios de la versión 7.0 y en ciertas áreas de los sitios de la versión 7.1. Si utilizas el Editor dinámico, organiza los diseños de equipo y dispositivo móvil de forma independiente. Si no sabes qué editor usa un área de tu sitio, consulta El Editor dinámico, la nueva experiencia de edición de contenido de Squarespace.

Mira el video

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 con texto alrededor) se muestran encima del bloque de texto en la vista de dispositivos móviles. Si un bloque aparece incorrectamente sobre texto en la vista de dispositivo móvil, mueve el bloque para asegurarte de que no esté 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

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.
Footer Image
  • 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.

Cómo se apilan los bloques en dispositivos móviles en el editor clásico