Agrega contenido a las páginas de tu sitio con este sistema de edición de arrastrar y soltar totalmente personalizable.

Editor dinámico es el editor de contenidos principal para sitios en la versión 7.1 de Squarespace. En todos los tipos de páginas, los proyectos de portafolio y el pie de página de tu sitio, las secciones de bloque usan Editor dinámico.

El Editor dinámico está disponible para todas las secciones de bloque en sitios 7.1. Actualmente, el Editor dinámico no es compatible con:

• Las áreas de bloques que no usan secciones de página, como las publicaciones de blog, las descripciones de eventos y la información adicional de los productos
• Secciones que no usan bloques, como diseños inteligentes, secciones de colección y secciones de galería
• Los sitios de la versión 7.0

En la aplicación de Squarespace, actualmente no es posible agregar o editar bloques en las secciones de Editor dinámico.

Mira el video

Inicio rápido con Editor dinámico

Editor dinámico es la experiencia de edición de secciones de página que usan bloques en sitios de la versión 7.1. Si tu sitio está en la versión 7.1, puedes comenzar a usar Editor dinámico en cualquier momento agregando una página de diseño, agregando una sección de bloques a una página existente o editando tu pie de página. Si tu sitio tiene secciones de bloque creadas antes del lanzamiento de Editor dinámico, puedes actualizarlas.

Con la cuadrícula flexible de Editor dinámico, coloca los bloques en cualquier lugar, incluso solapados a otros bloques, y cambia el tamaño directamente en la página. Ten en cuenta que crearás dos diseños: uno para los visitantes que ven tu sitio en un equipo de escritorio y otro para dispositivos móviles. Haz clic en los iconos del dispositivo en la esquina superior derecha para establecer los diferentes diseños.

Para más detalles, revisa el resto de esta guía.

¿Estoy usando el Editor dinámico?

Editor dinámico es compatible con los sitios de la versión 7.1 en:

• Secciones de bloque en cualquier página
• Pies de página
• Proyectos de portafolio

Al hacer clic en Editar en la página, las secciones del Editor dinámico tienen un botón Agregar bloque en la esquina superior izquierda. Al hacer clic en un bloque y arrastrarlo, deberá aparecer una cuadrícula en el fondo.

Consejo: Para que la cuadrícula se mantenga visible, presiona G. Vuelve a presionar G para ocultar la cuadrícula.

Si no aparece ningún botón o cuadrícula, esta área de bloque utiliza el editor clásico.

Editor clásico

Todas las áreas de bloques de la versión 7.0 usan el editor clásico. En los sitios de la versión 7.1, algunas áreas de bloques siguen usando nuestro editor clásico, incluyendo:

• Publicaciones de blog
• Descripciones de eventos
• Información adicional de producto
• Secciones de bloque agregadas antes del lanzamiento del Editor dinámico

Para aprender más sobre las diferencias entre Editor dinámico y el editor clásico, revisa Editor dinámico frente al editor clásico. 

Agregar una sección del Editor dinámico

Para agregar una sección del Editor dinámico a una página:

1. En la página, haz clic en Editar.
2. Haz clic en Añadir sección.
3. Haz clic en Añadir sección en blanco para agregar una sección del Editor dinámico en blanco, o haz clic en una categoría para buscar secciones prediseñadas. Ten en cuenta que si la sección tiene un ícono i en la esquina superior derecha, es un diseño inteligente que no usa el Editor dinámico.

Para cambiar la altura de la cuadrícula de la sección, haz clic y arrastra el ícono de la flecha azul en la esquina inferior derecha. Ten en cuenta que la cantidad y la colocación de los bloques pueden impedir que disminuyas la altura. Cada sección de Editor dinámico tiene un límite de 1000 filas.

Actualizar las secciones del editor clásico

Nota: No es posible revertir una sección al editor clásico después de actualizarlo y guardar la página. Si no sabes si vas a utilizar Editor dinámico con una sección, te recomendamos que dupliques la sección antes de actualizarla por si acaso.

Si agregaste secciones de bloques que usan el editor clásico antes del lanzamiento del Editor dinámico, puedes convertirlas en secciones del Editor dinámico. Para ello:

1. En la página, haz clic en Editar.
2. Haz clic en Actualizar en la esquina superior izquierda de cualquier sección del editor clásico.
3. La sección del editor clásico se convierte en una sección del Editor dinámico. Si la altura del editor clásico excede el límite de cuadrícula de 1000 filas, se dividirá en varias secciones del Editor dinámico.

Debido a las diferencias entre el editor clásico y el Editor dinámico, el diseño puede cambiar ligeramente o los bloques pueden desalinearse al actualizar, y no todos los diseños en el editor clásico tendrán un equivalente exacto en el Editor dinámico. Sin embargo, ten en cuenta que la actualización puede ser una gran oportunidad para reinventar los diseños de bloques con las nuevas opciones del Editor dinámico y una mayor flexibilidad.

Si decides que no quieres usar el Editor dinámico con esa sección, haz clic en Deshacer antes de guardar.

Agregar bloques

Para agregar bloques a una sección del Editor dinámico:

1. En la página, haz clic en Editar.
2. Haz clic en Agregar bloque arriba a la izquierda.
3. Selecciona el bloque que quieres agregar. Para obtener más información sobre los diferentes tipos de bloques, consulta Agregar contenido con bloques.

No hay un límite estricto para el número de bloques que puedes agregar, pero te recomendamos agregar un máximo 60 bloques por página, ya que demasiado contenido puede hacer que tu sitio cargue lentamente. Los navegadores móviles, en particular, pueden tener problemas para descargar páginas con mucho contenido.

Después de agregar bloques, puedes:

• Fijar bloques
• Duplicar bloques ya en la sección.
• Copiar y pegar bloques hacia y desde otras secciones de Editor dinámico.
• Mover y cambiar el tamaño de los bloques haciendo clic y arrastrando.
• Editar el diseño para dispositivos móviles para establecer cómo aparece en los dispositivos móviles.
• Aprender las mejores prácticas para hacer accesibles las secciones del Editor dinámico, especialmente si solapas bloques.

Nota: Los bloques de espacio no son compatibles con el Editor dinámico. En el editor clásico, los bloques de espacio agregan espacio entre los bloques, pero con el Editor dinámico, puedes agregar espacio entre bloques haciendo clic y arrastrando los bloques a nuevas posiciones de la sección.

Fijar bloques

Fija uno o más bloques en las secciones del Editor dinámico para mantenerlos estacionarios mientras tus visitantes se desplazan por otros contenidos de la sección. Esta es una excelente manera de destacar contenidos específicos y darle a tu página un diseño único.

Para fijar un bloque:

1. Haz clic en el bloque, luego haz clic en el icono del alfiler en la barra de herramientas del bloque. Puedes fijar cualquier tipo de bloque.
2. De forma predeterminada, los bloques fijados están configurados para alinearse con la parte superior de la sección. Alternativamente, puedes hacer clic en los iconos correspondientes para alinear al centro o alinear con la parte inferior.
3. Usa el control deslizante de Desplazamiento para cambiar la distancia entre el bloque fijado y el borde del navegador, entre 0px y 50px. Por ejemplo, un bloque fijado alineado a la parte superior en 0px permanecerá en el borde del navegador cuando el visitante se desplace.

Recomendamos experimentar con diferentes configuraciones para obtener el efecto que buscas.

Ten en cuenta lo siguiente:

• Los bloques fijados solo permanecen fijos en su sección. Si tu sección no tiene suficientes contenidos o es muy corta, es posible que el efecto de fijado no se note.
• Los bloques fijados en el diseño para computadoras de escritorio no se fijan en el diseño para dispositivos móviles, y viceversa.
• Los bloques fijados no son compatibles con el editor clásico ni con otros tipos de secciones de página.
• Si bien no hay límite para la cantidad de bloques que puedes fijar, cualquier sección que tenga mucho contenido agregado puede cargarse más lentamente. Recomendamos agregar no más de 60 bloques, fijados o no, por página. Para obtener más información, visita Mi sitio carga lentamente.

Agregar un color de fondo a bloques

Cuando los bloques con mucho texto se solapan con otro contenido, haz que el texto sea más legible agregando un color de fondo al bloque. Para obtener más información sobre cómo funcionan las paletas de colores y los temas cromáticos, consulta Cambiar colores.

Ajustar o rellenar bloques

Para establecer el relleno entre los bloques de imagen y los bloques de botón, configúralos para que se ajusten. Si un bloque está configurado como relleno, la imagen o el botón ocupan todo el espacio del bloque, por lo que los bordes de la imagen o del botón quedarán alineados con los bloques adyacentes. Si se establece un bloque para que se ajuste, la imagen o el botón quedan rodeados de espacio adicional.

Para configurar bloques de botón o imagen para que se ajusten o rellenen:

1. Haz clic en un bloque de imagen o botón, en el ícono del lápiz y, a continuación, en la pestaña Diseño.
2. Haz clic en Ajustar o Rellenar. Los bloques de imagen están configurados para ajustarse de forma predeterminada, mientras que los bloques de botón están configurados para rellenar.
3. Si seleccionas Ajustar, las opciones de alineación aparecen debajo o en la barra de herramientas del bloque.
4. Después de hacer cambios, haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego en Guardar para cerrar el editor.

Editor dinámico y diseño adaptable

Todos los sitios de Squarespace usan un diseño adaptable para garantizar que tu sitio se vea bien en una variedad de tamaños de navegador y dispositivos. La cuadrícula flexible del Editor dinámico en particular está diseñada de modo que, cuando los bloques se reordenan, cambian de tamaño o editan, otros bloques de la página pueden moverse o cambiar el tamaño para preservar diseños más complejos.

Por ejemplo, si colocas un bloque de texto sobre un bloque de imagen y luego agregas más texto al bloque de texto, el bloque de imagen puede ampliarse para acomodar el texto agregado.

Si los bloques se mueven o cambian de tamaño de la manera que no quieres, deshaz tus cambios más recientes y luego intenta mover bloques antes de volver a hacer los cambios. En el ejemplo anterior, si quieres agregar texto sin cambiar el tamaño del bloque de imagen, puedes mover el bloque de texto del bloque de imagen, agregar el texto y luego superponerlo con el bloque de imagen nuevamente.

Diseño para dispositivos móviles

En las secciones del Editor dinámico, los diseños para dispositivos móviles muestran el mismo contenido, pero puedes organizar el diseño para dispositivos móviles y cambiar el tamaño de los bloques independientemente del diseño en un equipo. Para configurar el diseño en dispositivos móviles de la sección:

1. Haz clic en Editar en la página y, luego, en el ícono Vista en dispositivos móviles, en la esquina superior derecha.
2. Organiza y cambia el tamaño de los bloques según prefieras. Para mover un bloque por encima o por debajo de un bloque adyacente automáticamente, haz clic en el bloque y luego en ↑ o ↓. Esta es una excelente manera de reorganizar rápidamente los bloques en el diseño móvil sin tener que hacer clic y arrastrar.
3. Después de hacer cambios, haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego en Guardar para cerrar el editor.

Los cambios que hagas en la ubicación o el tamaño de los bloques no afectarán el diseño en una computadora de escritorio, incluido el uso del ícono de flecha azul para aumentar o disminuir la altura de la cuadrícula. No obstante, los cambios en los contenidos del bloque o los estilos de sección son generales y afectan al diseño para dispositivos móviles y computadoras de escritorio. Por ejemplo:

• Mover un bloque de texto para que se solape con un bloque de imagen en el diseño para dispositivos móviles no cambiará el diseño para computadora.
• Si cambias lo que dice el texto o el color del texto, esos cambios afectarán ambos diseños.

Si agregas nuevos bloques a tu sitio después de editar el diseño móvil, nuestro sistema organiza los nuevos bloques en el diseño móvil de la manera más similar posible al diseño de una computadora. Te sugerimos revisar el diseño móvil a medida que realices cambios en tu sitio.

Aplicar estilo a secciones del Editor dinámico

Para modificar el estilo de las secciones del Editor dinámico:

1. Haz clic en Editar en la página y, a continuación, haz clic en Editar sección, en la esquina superior derecha de la sección a la que quieras aplicar estilo.Si no aparece Editar sección, es posible que hayas seleccionado un bloque.Haz clic en el fondo de la sección para que aparezca Editar sección.
2. En la pestaña Formato, realiza cambios de estilo en el espaciado y el relleno de la sección.Te recomendamos probar diferentes configuraciones para hacerte una idea de cómo afectan el aspecto de tu sitio.Obtén más información sobre las opciones a continuación.
3. Haz clic en Fondo para cambiar la configuración del fondo.Para obtener más información, consulta Imágenes de fondo de sección, Agregar videos de fondo y Fondos personalizados de sección.
4. Haz clic en Colores para cambiar la combinación de colores de la sección.Para obtener más información, consulta Cómo cambiar los colores.
5. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego en Guardar para cerrar el editor.

Opciones de diseño

Cambia los siguientes ajustes de estilo en la pestaña Diseño:

• Cantidad de filas: establece el número de filas en la cuadrícula de la sección.Esta es la única opción de estilo de sección en la que puedes tener diferentes configuraciones en el diseño para equipos y dispositivos móviles, pero el número mínimo de filas también depende del número de bloques que hayas agregado y de cómo estén organizados.
• Espacio: establece el espacio entre las unidades de la cuadrícula para controlar cuánto espacio habrá entre los bloques.Puedes elegir no tener espacio, un espacio preestablecido o hacer clic en ... para establecer separaciones verticales y horizontales personalizadas.
• Rellenar pantalla: habilita esta opción para tener más control sobre la altura y la alineación de tu contenido. Si no quieres relleno alrededor del contenido de la sección, deja la opción desactivada. Las siguientes opciones solo aparecen si Rellenar pantalla está habilitado:
  
  • Altura: agrega relleno a la sección fuera de la cuadrícula. Puedes elegir entre altura pequeña, mediana o grande, o hacer clic en ... para establecer una altura personalizada.
  • Alineación: establece dónde aparece el relleno de altura adicional.Alinea el contenido con la parte superior para agregar relleno debajo del contenido.Alinea el contenido en el centro para agregar relleno por encima y por debajo del contenido.Alinea el contenido con la parte inferior para agregar relleno por encima del contenido.
• Divisor. Agrega y dale estilo a un divisor en la parte inferior de la sección. Para obtener más información, visita Secciones de página.

Editor dinámico versus editor clásico

Esta tabla describe las diferencias entre Editor dinámico y el editor clásico. Aunque comparten muchas cualidades y características, los diseños posibles varían y, a menudo, solo Editor dinámico tiene las opciones más actualizadas.

Característica	Editor dinámico	Editor clásico
Diseño y disposición	Cuadrícula flexible de hacer clic y arrastrar donde puedes colocar bloques en cualquier lugar, incluso superpuestos a otros bloques. Usa el seleccionador de diseños para probar diferentes diseños con el contenido que has agregado.	Cuadrícula fija de hacer clic y arrastrar donde los bloques solo se pueden colocar junto a otros bloques, con algunas excepciones como los bloques flotantes en el texto.
Bloques disponibles	Todos los bloques excepto los espaciadores, que no son necesarios en Editor dinámico. Crea espacio haciendo clic y arrastrando bloques a nuevos lugares.   Los bloques de imagen no tienen diseños integrados, pero puedes recrear esos diseños y más en Editor dinámico usando bloques de imagen, bloques de texto y fondos de bloques.	Todos los bloques excepto los bloques de forma, que son exclusivos de Editor dinámico.
Duplicar bloques	Duplicar uno o más bloques al mismo tiempo, o copiar y pegar bloques en otras secciones de Editor dinámico.	No es posible duplicar bloques ni copiar ni pegar bloques. En su lugar, puedes duplicar páginas, publicaciones o secciones.
Mover bloques	Haz clic y arrastra para mover bloques a cualquier parte de la sección de Editor dinámico. Solapa otros bloques y usa líneas guía para centrar los bloques.	Haz clic y arrastra para mover bloques junto a otros bloques en cuadrículas de hasta 12 columnas. Los bloques no pueden superponerse a otros bloques, y el espacio entre bloques es fijo.
Cambiar el tamaño de los bloques	Haz clic y arrastra desde los bordes y esquinas de los bloques para cambiar el tamaño de cualquier bloque. La cantidad y el tipo de contenido pueden afectar la forma en que se puede cambiar el tamaño de un bloque.	Usa otros bloques en el diseño para cambiar el tamaño de los bloques. Algunos bloques también tienen controladores de recorte.
Diseño en dispositivos móviles	Crea tu diseño en dispositivos móviles independientemente del diseño en un equipo de escritorio.	La colocación de bloques en un equipo establece el diseño para dispositivos móviles con un diseño adaptable. No es posible organizar el diseño para dispositivos móviles de forma independiente.

Más ayuda

Esta guía cubre las funciones y opciones básicas del Editor dinámico. Consulta las siguientes guías para obtener más información sobre otros ajustes de contenido y estilo que aparecen en tus secciones del Editor dinámico:

• Para mover, duplicar y eliminar secciones, visita Secciones de página.
• Para conocer los diferentes tipos de bloques, consulta Agregar contenido con bloques.
• Para mover bloques y organizar diseños, visita Mover bloques para personalizar diseños.
• Para cambiar el tamaño de bloques, visita Cambiar el tamaño de bloques.
• Para establecer los estilos globales de tu sitio, visita Hacer cambios de estilo.
• Para ayudar a que tu sitio sean accesible para la audiencia más amplia posible, visita Recursos de accesibilidad en Squarespace.