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

Mover bloques para personalizar los diseños

Mueve bloques por las páginas para personalizar diseños o crear columnas y filas.

Esta guía es el siguiente paso para agregar contenido con bloques, que te sugerimos leer primero si eres nuevo en Squarespace.

Nota: Puedes mover un bloque dentro del área de contenido de la página en la que se agregó. No es posible trasladar bloques entre distintas páginas o entre distintas áreas de contenido, como, por ejemplo, del pie de página al encabezado.

Mira el video

Este video usa la versión 7.0, pero también sirve para la versión 7.1.

Cómo funcionan los diseños de bloques

Antes de mover bloques, recomendamos revisar estos términos para obtener más información sobre cómo funciona nuestro sistema de bloques.

Cuadrícula del área de contenido

La cuadrícula del área de contenido es un esquema invisible que controla dónde se pueden colocar bloques. En la mayoría de las áreas, como páginas de diseño y publicaciones de blog, la cuadrícula admite hasta 12 columnas y una cantidad ilimitada de filas. Algunas áreas, como pies de página, pueden tener diferentes limitaciones.

Bloques en movimiento

Cuando haces clic y arrastras un bloque para cambiar su posición en la grilla, podrás verlo semitransparente.

Casillas grises

Si mueves un bloque dentro de un área de texto, aparecerá una casilla gris donde coloques el bloque para mostrar cómo se organizará el texto a su alrededor.

Guías

Al mover un bloque, aparecen líneas negras, denominadas líneas guía, para indicar dónde estás colocando el bloque. Estas son especialmente útiles cuando se crean columnas y filas.

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 de línea y bloques espaciadores

Los bloques de línea y bloques espaciadores 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 utilizar bloques de línea y espaciadores para separar temporalmente el contenido mientras se diseña una página o un área de contenido. Utiliza un bloque de línea o espaciador para dividir filas y, a continuación, agrega bloques para crear nuevas columnas paralelas. Después de organizar el contenido, elimina el bloque de línea o espaciador teniendo en cuenta que los bloques de texto pueden fusionarse. 

Mover un bloque

Para mover un bloque:

  1. Posiciona el cursor sobre el bloque que quieras mover. El cursor se convertirá en una mano.
  2. Haz clic y arrastra el bloque en la página.
  3. A medida que arrastras el bloque, usa las líneas guía y casillas para elegir su nueva ubicación.
  1. Toca y mantén pulsado el bloque que deseas mover. Se pondrá gris y se desplazará sobre el contenido.
  2. Arrastra el bloque para moverlo alrededor de la página.
  3. A medida que arrastras el bloque, usa las líneas guía y casillas para elegir su nueva ubicación.

Imágenes flotantes y otros bloques en el texto

Puedes colocar un bloque flotante dentro de un área de texto para crear un efecto que envuelva al texto. Este video usa la versión 7.0, pero también sirve para la versión 7.1.

Tal vez quieras hacerlo en una imagen para crear una disposición de múltiples columnas en una publicación del blog, o bien en una página de texto.

Para crear este diseño, haz clic y arrastra un bloque sobre un Bloque de texto. Un cuadro gris indica dónde va a aparecer el bloque en el texto.

Crear columnas y filas

Este video muestra la versión 7.0, pero también se aplica a la versión 7.1.

Crear columnas

Las columnas pueden abarcar toda la altura del área de contenido o alinearse con un bloque de una fila para crear una columna con la misma altura. Para crear una columna:

  1. Posiciona el cursor sobre el bloque que quieras mover.
  2. El cursor pasará a ser el icono de una mano. Haz clic y arrastra el bloque 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.

full_height_column.gif

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.

matching_height_column.gif

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. Sitúa el cursor entre dos bloques hasta que veas dos flechas apuntando a la izquierda y a la derecha.
  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

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. Sigue los pasos que se indican a continuación para colocar el bloque en una fila de página completa o alineada.
Consejo: Los Bloques de imágenes, los Bloques de espacio, los Bloques de mapa y los Bloques de galería en carrusel incluyen un controlador de recorte que puedes usar para ajustar la altura del bloque. Usa estos bloques para personalizar las alturas 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.

full_width_row.gif

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.

matching_width_row.gif

Crear columnas y filas de solo texto

Mover texto a columnas o filas puede ser complicado. Los bloques de texto a menudo se fusionan cuando se apilan. Puedes evitar esto con bloques espaciadores para separar el contenido mientras se construye 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. Para crear columnas de texto:

  1. Añade tu primer Bloque de Texto en cualquier lugar de la página.
  2. Haz clic en un punto de inserción en cualquier lugar de la página para agregar un bloque espaciador. Haz clic y arrastra el bloque junto al primer bloque de texto.

add_spacer_block.gif

  1. Haz clic en un punto de inserción en cualquier lugar de la página para agregar el siguiente bloque de texto. Como a veces puede ser difícil mover los bloques de texto después de colocarlos, haz clic y arrastra el ícono Texto directamente desde el menú Bloque. Verás que aparecen líneas guía, tal como cuando mueves un bloque que ya se ha colocado.
  2. Arrastra el ícono Texto hacia el bloque espaciador hasta que la línea guía se reduzca a la misma altura, suéltalo y agrega el texto.

second_text_block.gif

  1. Repite el proceso de añadir Bloques de Espacio y Bloques de Texto para crear tantas columnas como necesites.
  2. 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, 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.

Para combinar columnas y filas:

  1. Agrega tres bloques de imagen, cada uno en su propia columna, siguiendo los pasos anteriores para crear columnas de la misma altura.
  2. 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.

text_under_image.gif

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.

Solución de problemas

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

No aparece mi diseño de columnas y filas en un dispositivo móvil

Para que el sitio sea legible y evitar que los visitantes tengan dificultades para ver y tengan que hacer zum 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. El orden de los bloques dependerá de la estructura de tus columnas y filas.

Para obtener más información, consulta Cambios de las páginas y los bloques en dispositivos móviles.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 35 de 145
Mover bloques para personalizar los diseños