Mover bloques para personalizar los diseños

Haz clic y arrastra bloques a nuevas posiciones para reorganizar el contenido de tu sitio web.

Última actualización: 9 de septiembre de 2024

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 a una entrada de blog.

Mira el video

Este video muestra el editor clásico.

Mover un bloque

Dondequiera que agregues bloques en Squarespace, puedes moverlos para personalizar el diseño. Para mover un bloque:

  1. Desplaza el cursor sobre el bloque que quieres mover. Cuando el cursor se convierta en una mano, haz clic y arrastra el bloque para moverlo por la página. Si la mano no aparece, haz clic primero en el bloque. 
  2. A medida que arrastres el bloque, usa las líneas guía que aparecen para elegir la nueva ubicación.

Dónde puedes colocar los bloques y cómo cambian los diseños cuando los mueves depende de dónde muevas los bloques:

  • En el Editor dinámico, la experiencia de edición actual de Squarespace, coloca bloques en cualquier parte de la cuadrícula del área de contenido, incluso solapándolos a otros bloques. Deberás organizar los diseños de equipo y dispositivo móvil para los bloques por separado. Para obtener más información, revisa los diseños del Editor dinámico a continuación.
  • En el editor clásico, coloca bloques en cualquier lugar junto a otros bloques o bloques flotantes en el texto. Los diseños se reorganizan automáticamente para llenar el espacio vacío y los bloques no se pueden solapar. Los cambios que realices en el diseño del equipo afectan el diseño móvil. Para obtener más información, consulta los diseños del editor clásico a continuación.
  1. Toca y mantén pulsado el bloque que quieres mover. Se desplazará sobre el contenido.
  2. Arrastra el bloque para moverlo alrededor de la página.
  3. A medida que arrastres el bloque, usa las líneas guía para elegir la nueva ubicación.

Consejo

Para ayudar a que el contenido de tu sitio sea accesible para la audiencia más amplia posible, visita Recursos de accesibilidad en Squarespace.

Diseños del Editor dinámico

La experiencia actual de edición de bloques en Squarespace se llama Editor dinámico. Se admite en los sitios de la versión 7.1 en cualquier área en la que agregues secciones de bloques, incluidas las páginas de diseño, las subpáginas de portafolio y el pie de página. Los elementos de la colección y cualquier sección de bloques agregados antes del lanzamiento del Editor dinámico utilizan el editor clásico.

Debido al sistema de cuadrícula en Editor dinámico, mover un bloque puede hacer que algunos bloques a su alrededor también se muevan ligeramente. Esto sucede para preservar el equilibrio general del diseño de la sección. 

Ten en cuenta que, en el Editor dinámico, deberás configurar las vistas en equipo y dispositivo móvil por separado.

Bloques centrales

Para centrar un bloque horizontalmente, haz clic y arrastra el bloque hacia la mitad de la sección y suéltalo cuando aparezca una línea amarilla verticalmente por el centro de la cuadrícula. El bloque puede cambiar de tamaño ligeramente para que esté en el centro de la sección.

Crear bloques sin bordes

Cuando mueves un bloque fuera de la cuadrícula del Editor dinámico, se cambiará el tamaño para ajustarse al borde del ancho de contenido de la sección. Esto crea un efecto sin bordes. Es posible que algunos bloques, como los bloques de imagen configurados como relleno, deban recortarse de otra forma para crear el efecto. 

Establecer alineación y solapamiento de contenido

Después de mover un bloque a un nuevo lugar en el Editor dinámico, aparece la barra de herramientas del bloque.

  • Para alinear el contenido del bloque horizontal o verticalmente o ambos dentro de los bordes del bloque, haz clic en los iconos de alineación en la barra de herramientas del bloque. Ten en cuenta que algunos bloques, como los bloques de imagen y los bloques de botón configurados para rellenar, no tienen opciones de alineación.
  • Si los bloques se solapan, la barra de herramientas muestra los íconos Avanzar y Retroceder, para que puedas establecer qué bloque está en la parte superior. Si muchos bloques se solapan, es posible que tengas que hacer clic varias veces para que el bloque avance o retroceda.
  • Para ayudar a que el contenido de los bloques sea más visible en los bloques solapados, agrega colores de fondo a ciertos bloques.

Acomodar varios bloques al mismo tiempo

Resalta varios bloques haciendo clic y arrastrando en el fondo de la sección. Luego, mueve o arregla todos los bloques resaltados al mismo tiempo:

  • Para mover varios bloques resaltados al mismo tiempo, haz clic y arrastra uno de los bloques. Esto mueve todos los bloques resaltados al mismo tiempo, conservando su diseño actual.
  • Para alinear todos los bloques resaltados al mismo tiempo, haz clic en el botón Alinear grupo que aparece en la barra de herramientas.Luego, selecciona una de las opciones de alineación.
  • Para mover todos los bloques resaltados hacia atrás o hacia adelante, haz clic en los botones Mover hacia atrás o Mover hacia adelante que aparecen en la barra de herramientas.
  • Para cambiar el tamaño de todos los bloques resaltados, desplaza el cursor sobre uno de los cuadrados del delineado de un bloque hasta que se convierta en una flecha, luego haz clic y arrastra los bloques más grandes o más pequeños.

Para resaltar y mover todos los bloques en una sección de Editor dinámico al mismo tiempo, presiona Command + A o Control + A, y luego haz clic y arrástralos.

Diseños de editor clásico

Todas las áreas de bloques de los sitios de la versión 7.0 usan el editor clásico. También se encuentra en algunas áreas de los sitios de la versión 7.1:

  • Entradas de blog, eventos e información adicional sobre productos
  • Secciones de bloque agregadas antes del Editor dinámico

Mover bloques

En la mayoría de las áreas que utilizan el editor clásico, una cuadrícula invisible admite hasta 12 columnas y una cantidad ilimitada de filas. Algunas áreas, como los pies de página, pueden tener diferentes limitaciones.

  • Al hacer clic en un bloque y arrastrarlo para cambiar su posición en la cuadrícula, podrás ver que aparece semitransparente.
  • Al mover un bloque, aparecen líneas negras llamadas líneas guía para mostrarte dónde estás colocando el bloque. Estas son especialmente útiles cuando estás creando columnas y filas.
  • Si haces flotar un bloque en un área de texto, como cuando creas una cita extraída, aparecerá un cuadro gris donde se coloque el bloque para mostrar cómo se ajustará el texto a su alrededor.

Colocación de bloques

A medida que arrastras un bloque, aparecen líneas guía que muestran lo que sucederá cuando lo sueltes:

  • Línea vertical a la altura del área de contenido: el bloque abarcará toda la altura de la página, creando una nueva columna.
  • Línea horizontal del ancho del área de contenido: el bloque abarcará todo el ancho de la página, creando una nueva fila.
  • Línea que coincide con la altura o el ancho de otro bloque: el bloque se agregará a una columna o fila existente, a la misma altura o ancho que ese bloque.

Separar bloques en columnas y filas

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 una línea o un bloque de espacio para dividirlos y evitar que se fusiones. Consulta la sección a continuación sobre los bloques de texto para obtener ayuda al respecto.
  • También puedes usar bloques de línea y de espacio para separar temporalmente el contenido mientras se diseña una página o un área de contenido. Utiliza un bloque de línea o de espacio para dividir filas y luego agrega bloques para crear nuevas columnas paralelas. Después de organizar el contenido, elimina los bloques de línea o de espacio teniendo en cuenta que los bloques de texto se fusionarán después de eliminarlos.

Diseños para dispositivos móviles

La disposición de los bloques en los navegadores móviles depende del editor en el que se encuentren los bloques:

  • Editor dinámico: los diseños en dispositivos móviles y equipos están separados. Haz clic en el ícono Vista en dispositivo móvil en la esquina superior derecha para ver y editar el diseño móvil de la página. Mover bloques en el diseño de equipo no afecta el diseño móvil. 
  • Editor clásico: no es posible editar los diseños de equipo y dispositivo móvil por separado. El diseño móvil coincide con el diseño de equipo y los bloques se reorganizan automáticamente para adaptarse a dispositivos más pequeños.

Crear columnas y filas

Tu sitio incluye varias opciones para crear automáticamente columnas y filas con tipos de contenido comunes. Puedes agregarles más contenido poco a poco sin tener que reorganizarlas manualmente. Recomendamos usar estas opciones para obtener columnas y filas limpias y coherentes, que incluyen:

Sin embargo, si necesitas crear columnas y filas con otros tipos de contenido, o en diseños no admitidos por las opciones anteriores, puedes crear columnas y filas con conjuntos de bloques:

  • Editor dinámico: coloca los bloques en su lugar y cambia su tamaño utilizando las líneas guía de la cuadrícula para dar coherencia a las columnas y filas, y luego organiza el diseño móvil en diferentes columnas y filas si es necesario.
  • Editor clásico: crear columnas y filas es más complejo. El resto de esta guía explica cómo crear columnas y filas manualmente en el editor clásico.

Este video muestra la versión 7.0, pero también se aplica al editor clásico de la versión 7.1.

Crea columnas en el editor clásico

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. El cursor pasará a ser el icono de una mano. Si no aparece la mano, haz clic primero en el bloque.
  2. Haz clic y arrastra el bloque en 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 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 en el editor clásico

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. El cursor pasará a ser el icono de una mano. Si no aparece la mano, haz clic primero en el bloque.
  2. Haz clic y arrastra el bloque en 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 imagen, los bloques espaciadores, 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 unos sobre otros.

matching_width_row.gif

Crear columnas y filas de solo texto en el editor clásico

Mover texto a columnas o filas puede ser complicado. Los bloques de texto a menudo se fusionan cuando se apilan. Puedes evitar que suceda esto con bloques de espacio 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ú del bloque. Aparecerán las guías, como cuando mueves un bloque que ya habías 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 espaciadores 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 espaciador.

Combinar columnas y filas en el editor clásico

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 otros Bloques de Texto alineados con los Bloques de Imagen.

Solución de problemas de columnas y filas en el editor clásico

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 que pinchar, ampliar y desplazarse para ver tu contenido, el diseño adaptable de Squarespace automáticamente apila los bloques de manera 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 Cómo se apilan los bloques en dispositivos móviles en el editor clásico.

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.

Mover bloques para personalizar los diseños