Agrega y personaliza las secciones de contenido apiladas verticalmente que crean la estructura de cada página.

Deberás crear las páginas y los pies de página de tu sitio con secciones personalizables apiladas verticalmente. Puedes agregar, eliminar y mover secciones para organizar tu contenido. En esta guía, aprenderás lo que puedes hacer con las secciones de página y cómo usarlas para crear diseños de página únicos.

Si necesitas ayuda para crear una página nueva en la que se añadirán secciones, consulta Agregar páginas a tu navegación.

Consejo: esta guía es para la versión 7.1. Para lograr un efecto similar en la versión 7.0, usa un índice apilado.

Mira el video

Agregar y editar secciones

Cuando añades una página nueva, esta empieza con, como mínimo, una sección creada previamente, a menos que sea una página en blanco. También puedes agregar más secciones a una página. La forma en que agregas y editas secciones depende de si estás editando en una computadora de escritorio o en la aplicación de Squarespace.

No hay límite en cuanto a la cantidad de secciones que puedes añadir, pero recomendamos no agregar más de veinte a una página porque las páginas con mucho contenido tardan más para cargarse. Para informarte mejor, consulta Mi sitio se carga lentamente.

Añadir contenidos a las secciones

La forma en la que agregas contenido y modificas su estilo depende de la sección. A continuación, indicamos tres tipos:

• Secciones de bloque: Personaliza un diseño con bloques.
• Secciones de diseño automático: agrega conjuntos de contenido y organízalos automáticamente en listas o galerías.
• Secciones de páginas de colección: Muestran los elementos de la colección. Por ejemplo, las Páginas de blog tienen secciones de colección que muestran las publicaciones de blog.

Puedes agregar secciones de bloques y diseño automático a cualquier página. Las secciones de páginas de la colección son exclusivas de sus páginas.

Secciones de bloques

Los bloques son características que puedes emplear para agregar contenido a tu sitio, como texto, imágenes, botones y formularios. Para agregar contenido a las secciones de bloque y modificar el estilo:

• Agrega o mueve los bloques para personalizar el diseño.
• Para añadir contenidos a un bloque, haz doble clic sobre él.
• Para eliminar un bloque, haz clic en él y luego haz clic en el icono de papelera. Después de guardar los cambios, no se podrán restablecer los bloques.
• Para cambiar los estilos de sección, haz clic en Editar sección.

Por lo general, la mayoría de las secciones de tu sitio serán secciones de bloque, que utilizan una de las dos experiencias de edición: el editor dinámico o el editor clásico.

Editor dinámico

El Editor dinámico es la experiencia de edición de contenido más reciente de Squarespace. Cuando agregas una nueva sección en blanco o una sección de bloques con un diseño prediseñado, utiliza el Editor dinámico. Si no sabes si una sección usa el Editor dinámico, verifica en la esquina superior derecha mientras editas para ver si hay un botón Agregar bloque.

En el Editor dinámico, deberás organizar y cambiar el tamaño de los bloques haciendo clic y arrastrando en una cuadrícula flexible. Los bloques se pueden solapar entre sí para crear diseños únicos.

Editor clásico

Si agregaste secciones de bloque antes del lanzamiento del Editor dinámico, utilizan nuestro editor clásico, que también se usa en otras áreas de tu sitio, como las entradas de blog. Si no sabes si una sección usa el editor clásico, desplaza el cursor sobre los bloques de la página para comprobar si hay íconos + encima o debajo de cada bloque. Se trata de puntos de inserción.

Para agregar una nueva sección de bloques con el editor clásico:

1. Haz clic en Editar en la página y, a continuación, en Añadir sección.
2. Desplázate hacia abajo hasta el final de la lista de tipos de sección.
3. Haz clic en Agregar espacio en blanco [Editor clásico].

Para actualizar una sección de bloques del editor clásico al editor dinámico, haz clic en Actualizar. Para obtener más información, consulta El Editor dinámico, la nueva experiencia de edición de contenido de Squarespace.

Secciones de diseño automático

Utiliza diseños inteligentes para añadir conjuntos de contenido, como imágenes y texto, en diseños visualmente llamativos que se actualizan automáticamente al agregar más contenido. En estas secciones se muestra un distintivo i en el selector de secciones.

Para obtener más información, visita Diseños inteligentes.

Secciones de galería

Las secciones de galería son un tipo de diseño inteligente adecuado para mostrar imágenes sin mucho texto. Para obtener más información, consulta Secciones de galería.

Secciones de página de colección

Usa páginas de colección para mostrar una colección de elementos, como entradas de blog o eventos. Las páginas de blog, eventos, portafolio y tienda son todas páginas de colección. Para informarte mejor, consulta las Secciones de páginas de colección.

Secciones de pie de página

Crea tu pie de página con secciones. Posiciona el cursor sobre el pie de página y presiona Editar pie de página para agregar secciones y editarlas. Agrega secciones de bloque en blanco o secciones de estilo de pie de página con diseños de bloque predefinidos. No es posible agregar otros tipos de secciones al pie de página.

Para obtener más información, consulta Cómo editar pies de página.

Prueba nuevos diseños

Si tu sección usa el Editor dinámico, puedes probar nuevos diseños automáticamente con el seleccionador de diseños. Mientras editas una página, desplaza el cursor sobre la sección y haz clic en el botón Ver diseños.

Haz clic en la vista previa del diseño que quieres probar y el contenido de tu sección se reorganizará automáticamente, luego haz clic en Guardar para mantener el nuevo diseño. Si quieres volver a tu diseño original, haz clic en deshacer.

Ten en cuenta que esta opción solo está disponible en las secciones de Editor dinámico. Dependiendo de los bloques que hayas agregado, el botón Ver diseños puede estar atenuado, lo que significa que no hay sugerencias de diseño para esa sección.

Cambiar el estilo de la sección

Puedes hacer que las secciones sigan los estilos de todo el sitio en el panel Estilos del sitio o puedes editar el diseño, el fondo y el color de una sección individual para dar a tus páginas más variedad o contraste.

Para aplicar estilo a secciones individuales, haz clic en Editar en la página, desplaza el cursor sobre la sección y haz clic en Editar sección o en el icono del lápiz. Las secciones de bloque incluyen tres pestañas: Diseño, Fondo y Color. Las opciones de la pestaña Diseño para las secciones de bloques variarán dependiendo del tipo de sección.

Diseño (Editor clásico)

En la pestaña Diseño del Editor clásico, puedes cambiar estos detalles:

• Alineación de contenido: cómo se alinea el contenido con los bordes de sección, a lo largo de la parte superior o inferior o equidistante de la parte superior e inferior.
• Ancho del contenido: cuánto del ancho de la sección abarca tu contenido.
• Altura de sección: la altura a la que la sección aparece en la página. Las secciones con más contenidos pueden aparecer a una altura más alta que tu configuración. También afecta a la cantidad de relleno por encima y por debajo del contenido de tu sección.
• Estilo: cómo aparece el borde inferior de la sección. Activa la opción Divisor para agregar un divisor de sección único.
• Enlace ancla: agrega un slug de anclaje único para que puedas enlazar directamente a la sección. Para informarte mejor, visita Crear enlaces ancla.

Diseño (Editor dinámico)

Para obtener una lista de las opciones de estilo de la sección de Editor dinámico, visita Editar tu sitio con Editor dinámico.

Fondo

En la pestaña Fondo, puedes agregar una imagen, un video o una ilustración de fondo. El contenido de fondo puede aparecer sin bordes o recuadro desde los bordes de la sección. Para obtener más información sobre tus opciones, consulta las siguientes guías:

• Imágenes y efectos de fondo de sección
• Añadir videos de fondo
• Fondos personalizados de sección

Color

En la pestaña Color, puedes seleccionar y personalizar un tema cromático para la sección. Ten en cuenta que cualquier cambio que hagas en un tema cromático afectará a todas las secciones de tu sitio web que utilicen ese tema. Para informarte mejor, visita Cómo cambiar los colores.

Otras secciones

Para obtener más información sobre las opciones de estilo para secciones de diseño automático y secciones de páginas de la colección, consulta estas guías:

• Diseños inteligentes
• Secciones de galería
• Crear un blog con Squarespace
• Páginas de eventos
• El Editor dinámico, la nueva experiencia de edición de contenido de Squarespace
• Páginas de portafolio
• Secciones de tienda

Divisores de sección

En la pestaña Formato de los estilos de sección, activa la opción Divisor para agregar un borde a la parte inferior de la sección. Puedes agregar divisores a secciones de bloques, diseños inteligentes y secciones de galería.

Para personalizar el divisor de sección:

• Forma. Haz clic en el ícono Aleatorio para clasificar los ajustes o haz clic en el ícono Configuración para seleccionar una forma y cambiar la configuración manualmente.
• Trazo. Selecciona un borde de línea continua, un borde de línea punteada o ningún borde para el divisor.
• Color: selecciona un color de la paleta de tu sitio para la línea del borde.
• Grosor. Establece el grosor del borde usando las opciones Pequeño, Mediano o Grande. Haz clic en ... para cambiar manualmente el grosor del divisor.

Después de crear el primer divisor de sección de tu sitio, la configuración de ese divisor se aplica a los divisores que crees después. Si quieres que los divisores de sección sean diferentes, personaliza cada uno usando la configuración indicada anteriormente.

Secciones sin divisores

Si tu página incluye una sección que no admite divisores de sección, como una sección de blog, eventos, portafolio o videos, puedes replicar el aspecto de un divisor con una sección de bloques en blanco:

1. Haz clic en Editar en la página con la sección que no admite divisores de sección.
2. Desplaza el cursor sobre Añadir sección debajo de esa sección.
3. Haz clic en Agregar una sección en blanco.
4. Desplaza el cursor sobre la sección en blanco y haz clic en Editar sección.
5. Ajuste la altura en pequeña y activa la opción Divisor.
6. Aplica los estilos que prefieras al divisor. No agregues ningún bloque a esta sección.

Ten en cuenta que este divisor de sección no interactuará con la sección anterior exactamente de la misma manera que los divisores de sección integrados. Por ejemplo, si la sección no compatible tiene una imagen de fondo, el divisor aparece debajo de la imagen en lugar de directamente en el borde.

Guarda las secciones

Si creas un diseño de sección de página que quieres reutilizar, puedes agregarlo a tus secciones guardadas. Al guardar una sección, se crea una “instantánea” del diseño que puedes agregar cuando quieras. Esto es ideal para sitios web donde necesitas reutilizar un diseño particular en varias páginas.

Para guardar una sección, haz clic en Editar en una página, luego desplaza el cursor sobre la sección y haz clic en el icono del corazón . 

Usar una sección guardada

Para usar una sección guardada:

1. Haz clic en Editar en una página y luego en Añadir sección.
2. Haz clic en Secciones guardadas.
3. Selecciona la sección guardada que quieres agregar.
4. Haz cualquier cambio en el diseño.

Eliminar una sección guardada

Para eliminar una sección de tus secciones guardadas:

1. Haz clic en Editar en una página y luego en Añadir sección.
2. Haz clic en Secciones guardadas. 
3. Marca la casilla en la esquina superior izquierda de una o más secciones.
4. Haz clic en Eliminar. No es posible deshacer esto.

Secciones guardadas en un plan Enterprise

Los administradores de equipo en un plan Enterprise también pueden guardar secciones en la biblioteca de Enterprise. Los miembros del equipo pueden usar estas secciones en cualquier sitio web propiedad de la organización. 

Para guardar una sección en la biblioteca de Enterprise:

1. Haz clic en Editar en una página, luego desplaza el cursor sobre la sección y haz clic en el icono del corazón .
2. Selecciona Biblioteca de Enterprise. 
3. Ingresa un nombre para la sección y luego haz clic en Guardar.   

Puedes acceder a la biblioteca de Enterprise cuando agregues una sección a tu página. 

1. Haz clic en Editar en una página y luego en Añadir sección. 
2. Haz clic en Secciones de Enterprise. 
3. Selecciona una sección de Enterprise guardada para agregarla a la página. Los administradores del equipo también pueden cambiar el nombre de una sección guardada, buscar o eliminar las secciones de Enterprise existentes de la biblioteca.

Ten en cuenta lo siguiente:

• Puedes tener hasta 50 secciones guardadas en tu sitio.
• Las secciones guardadas no están vinculadas a la sección original. Al actualizar la sección original, no se actualizará la versión guardada ni en ningún otro lugar en el que la hayas agregado.
• Las secciones guardadas conservan el contenido y los elementos de diseño. Algunas configuraciones, como las conexiones de almacenamiento en bloques de formularios y newsletter, no se trasladan de la sección original. Configura todo el almacenamiento de formularios y newsletters en las secciones guardadas manualmente.
• No es posible guardar secciones de página de colección o secciones de pie de página, y no es posible agregar secciones guardadas a tu pie de página.

Mover contenidos entre distintas secciones

Para mover contenidos:

• Secciones de bloques del editor clásico: arrastra bloques para moverlos de una sección de bloque a otra en la misma página.No es posible mover bloques entre las secciones de bloques del Editor dinámico.
• Secciones de diseño automático: reutiliza una lista o una imagen de galería para añadirla a una lista o sección de galería diferente.
• Secciones de colección: mueve las entradas de un blog, eventos y productos de una colección a otra del mismo tipo. Actualmente, no es posible mover proyectos de portafolio.