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

Puedes ordenar el contenido en columnas y filas arrastrando los bloques y siguiendo las pautas para ayudarte a colocarlos.

Si eres nuevo en Squarespace, te recomendamos que uses las guías y los videos a continuación antes de comenzar con esta guía:

Consejo: presta atención a las guías, las líneas negras que aparecen cuando haces clic y arrastras los bloques. Si las guías cubren la altura completa de la página, se creará una nueva columna. Si la guía se extiende a lo ancho de la página, se creará una nueva fila.

Glosario

Antes de crear filas y columnas, te recomendamos que revises los siguientes términos:

Cuadrícula del área de contenido

La cuadrícula del área de contenido es un esquema invisible que controla dónde puedes colocar los bloques. En la mayoría de las áreas, como las Páginas Normales y las publicaciones de blog, la cuadrícula admite hasta 12 columnas y una cantidad ilimitada de filas.

Algunas áreas específicas de ciertas plantillas, como las barras laterales y los pies de página, tienen limitaciones diferentes. Para conocer más sobre las opciones de tu plantilla, visita nuestras guías de plantillas.

Guías

Cuando mueves un bloque aparecen estas líneas negras para mostrarte dónde lo colocarás.

Mientras arrastras los bloques, las guías cambian para mostrarte si el bloque:

  • Ocupará toda la altura de la página, lo que creará una nueva columna.
  • Ocupará todo el ancho de la página, lo que creará una nueva fila.
  • Igualará en ancho o altura a otro bloque, para quedar en una columna o fila existente.

Bloques en movimiento

Cuando haces clic y arrastras un bloque para cambiar su posición en la cuadrícula, podrás verlo como semitransparente. Si mueves un bloque dentro de un área de texto, aparecerá un cuadro gris dondequiera que lo coloques para indicar cómo se organizará el texto a su alrededor.

Bloque de Línea y Bloque de Espacio

El Bloque de Línea y el Bloque de Espacio son herramientas útiles para separar el contenido en columnas y filas.

Dado que los Bloques de Texto a menudo se combinan cuando se los apila, puedes usar un Bloque de Línea o Bloque de Espacio para dividirlos y evitar que se mezclen. Consulta la sección a continuación sobre los Bloques de Texto para obtener ayuda al respecto.

También puedes usar los Bloques de Línea y Bloques de Espacio para separar momentáneamente contenido mientras diseñas una página o área de contenido. Usa un Bloque de Línea para dividir filas, luego añade bloques para crear nuevas columnas en paralelo. Una vez que el contenido esté ordenado, elimina el Bloque de Línea o de Espacio. Recuerda que los Bloques de Texto se pueden combinar si eliminas el Bloque de Línea o de Espacio.

Crear columnas

Hay dos tipos de columnas en Squarespace:

  • Una columna de página completa es una nueva columna que abarca toda la altura de una página. Divide toda la página, lo que deja más espacio para apilar los bloques de forma vertical.
  • Una columna de la misma altura se alinea con un bloque de la columna existente. No agregará las filas por encima o debajo de ella. En lugar de crear una columna que divida toda la página, una columna la misma altura crea una disposición más compleja.

Para crear una columna:

  1. Posiciona el cursor sobre el bloque que quieras mover.
  2. El cursor se convertirá en el ícono de una mano y te permitirá hacer clic en el bloque y arrastrarlo para moverlo por la página.
  3. Mientras mueves el bloque, aparecerán las guías para mostrarte la nueva columna que ocupará el bloque.
  4. Sigue los pasos a continuación para añadir la columna a una columna de página completa o de la misma altura

Crear una columna de página completa

Para crear una columna que se extienda por todo el alto de la página, haz clic en un bloque y arrástralo hasta que la guía se extienda verticalmente por toda la página. Esto creará una nueva columna que ocupe toda la página.

Crear una columna de la misma altura

Para crear una columna que tenga la misma altura que otro bloque, haz clic en el bloque y arrástralo hasta que la guía coincida con la altura del otro bloque. Esto resulta útil para colocar bloques uno al lado del otro, por encima o por debajo de bloques más anchos.

Cambiar el ancho de la columna

Para crear columnas que tengan el mismo ancho, tendrás que tener una de estas cantidades de columnas:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Si tienes un número diferente de columnas, tendrás anchos diferentes. Esta regla se aplica a todas las áreas de contenido del sitio, excepto a las barras laterales y algunos pies de página.

Para cambiar el ancho de una columna:

  1. Posiciona el cursor entre dos bloques.
  2. Haz clic y arrastra el cursor para extender y reducir la columna.
  3. Esto cambia el ancho de la columna y el tamaño de ambos bloques.
  4. Repite con los espacios entre los demás bloques de la fila según sea necesario.

Crear filas

Así como con las columnas, puedes crear dos tipos de filas. Las filas pueden ocupar todo el ancho de un área, o bien alinearse con un bloque de una columna existente para crear una pila.

Para crear una fila:

  1. Posiciona el cursor sobre el bloque que quieras mover.
  2. El cursor se convertirá en el ícono de una mano, lo que te permitirá hacer clic en el bloque y arrastrarlo para moverlo por la página.
  3. Mientras mueves el bloque, aparecerán las guías para mostrarte la columna o la fila que ocupará el bloque.
  4. Usa la guía para colocar el bloque en una fila de página completa o en una fila alineada.
Nota: Los Bloques de Imagen, los Bloques de Espacio, los Bloques de Mapa y los Bloques de Galería Carrusel incluyen una palanca de recorte que te permite ajustar la altura del bloque. Usa estos bloques para personalizar la altura de las filas en tu página.

Crear una fila de página completa

Para crear una fila que ocupe todo el ancho de una página o publicación, haz clic en un bloque y arrástralo para que la guía se extienda horizontalmente por toda la página.

Crear una fila del mismo ancho

Para igualar el ancho de otro bloque, mueve un bloque por encima o por debajo de otro hasta que la guía se reduzca y coincida con el ancho del bloque existente. En lugar de crear toda una fila en la página, esta acción apila los bloques individuales unos sobre otros.

Crear columnas y filas de solo texto

Mover el texto a columnas o filas puede ser difícil. Los Bloques de Texto con frecuencia se combinan cuando los colocas uno al lado del otro. Puedes evitarlo si usas un Bloque de Espacio para separar el contenido mientras creas la página.

Columnas de texto

Mover el texto en columnas es una excelente manera de dividir visualmente el contenido o de conectar el texto con otros bloques, como los Bloques de Imagen.

Añade tu primer Bloque de Texto en cualquier lugar de la página.

Después, haz clic en un Punto de Inserción en cualquier lugar de la página para añadir un Bloque de Espacio. Haz clic en el bloque y arrástralo junto al primer Bloque de Texto.

Haz clic en un Punto de Inserción en cualquier lugar de la página para añadir el próximo Bloque de Texto. Dado que puede ser difícil mover los Bloques de Texto una vez que los colocaste, haz clic en este segundo bloque y arrástralo directamente desde la opción Text (Texto) dentro del Menú del Bloque. Verás las guías, como cuando mueves un bloque que ya habías colocado.

Mueve el segundo Bloque de Texto hacia el Bloque de Espacio hasta que guía se reduzca a la misma altura, luego suéltalo. Añade el texto al nuevo bloque. 

Ahora tendrás dos columnas de texto, separadas por un espacio. Repite el proceso de añadir Bloques de Espacio y Bloques de Texto para crear tantas columnas como necesites. Cuando hayas colocado todas las columnas de texto, elimina los Bloques de Espacio para dejar solo las columnas de texto.

Filas de texto

Los Bloques de Texto apilados con frecuencia se combinan en un solo bloque. Para mantenerlos separados, te recomendamos dividir el texto con un Bloque de Línea o de Espacio. Para lograr espacios más definidos, usa un Bloque de Línea:

Para insertar un espacio abierto, usa un Bloque de Espacio:

Combinar filas y columnas

Tal vez quieras combinar columnas y filas para personalizar tu página. Un ejemplo común es la información de una empresa o la página "Acerca de", en la que puedes querer colocar Bloques de Texto con sus correspondientes Bloques de Imagen en filas iguales.

En este ejemplo, combinamos tres Bloques de Imagen y tres Bloques de Texto. Es la misma estructura que verás en el contenido de demostración de algunas plantillas, incluso en Five.

Primero, añade tres Bloques de Iimagen, cada uno en su columna, con los pasos que usaste arriba para crear filas del mismo ancho.

A continuación, añade un Bloque de Texto debajo de cada Bloque de Imagen. Asegúrate de que la guía coincida con el Bloque de Imagen que está arriba, para crear una nueva fila dentro de la columna que ya existe debajo de cada imagen.

Si necesitas títulos, añádelos en la parte superior de cada columna usando los Bloques de Texto adicionales alineados con los Bloques de Imagen.

Resolución de problemas

Consejo: al crear la disposición de una página, puede resultarte útil probar arrastrar y soltar los bloques de diferentes maneras. Sobre todo si eres nuevo en Squarespace, experimentar con cómo ubicar los bloques en su lugar es una gran manera de familiarizarte con la plataforma y lograr la disposición que quieres.

Mis imágenes tienen tamaños diferentes

Para lograr los mejores resultados, ayuda asegurarte de que cada imagen que uses tenga la misma relación de aspecto antes de cargarla. En la mayoría de los casos, te recomendamos usar imágenes de al menos 1500 píxeles de ancho. Si necesitas ayuda para editar tus imágenes, visita Ajustar el formato de las imágenes para exhibirlas en la web.

Mis columnas no son iguales

Para crear columnas que tengan el mismo ancho, tendrás que tener una de estas cantidades de columnas:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Para cambiar el ancho de este número de columnas, sigue los pasos en la sección Columnas de esta guía. Si tienes un número diferente de columnas (por ejemplo, si tienes cinco o siete bloques en una fila), deben tener anchos diferentes.

Mis columnas se convierten en filas en un dispositivo móvil

Este es el comportamiento esperado. El diseño adaptable de Squarespace apila automáticamente los bloques de forma vertical en los dispositivos móviles

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 19 de 43
Usar bloques para crear columnas y filas