Usa bloques de imagen para agregar imágenes a páginas o entradas de blog. Cada bloque de imagen muestra una imagen.
Mira el video
Este video muestra el editor clásico, pero agregar y cargar imágenes es similar en el Editor dinámico.
Añadir una imagen
Para añadir cualquier Bloque de imagen:
- Edita una página o una publicación, haz clic en Agregar bloque o en un punto de inserción y, a continuación, presiona Imagen. Para obtener ayuda, visita Cómo agregar contenido con bloques.
- Haz clic en el ícono + del bloque de imagen.
- Carga un archivo desde tu equipo o dispositivo móvil, reutiliza una imagen de tu biblioteca o busca imágenes de archivo. Para obtener los mejores resultados, utiliza una imagen de menos de 500 KB.
- Usa el editor de bloques de imagen para reemplazar, eliminar o editar la imagen.
- Si utilizas el Editor dinámico, asegúrate de configurar también el diseño para dispositivos móviles.
Consejo: El bloque de imagen no se mostrará en tu sitio activo sin una imagen cargada.
Cargar imágenes desde un dispositivo móvil
Puedes agregar imágenes desde tu teléfono u otro dispositivo móvil con la aplicación de Squarespace. Para subir una imagen:
- En el editor de bloque de imagen, haz clic en + y selecciona Cargar desde dispositivo móvil.Esto envía una notificación push a tu dispositivo.
- Si es la primera vez que cargas en este sitio, aparecerá un código QR en tu equipo. Si aún no tienes la aplicación de Squarespace, escanea el código para descargarlo y, luego, haz clic en Continuar y Enviar notificación push.
- Toca la notificación en tu dispositivo para abrir la herramienta de importación de la aplicación de Squarespace. La aplicación extrae automáticamente imágenes desde la biblioteca de fotos de tu dispositivo.
- Si la notificación no aparece, verifica en los ajustes del dispositivo que las notificaciones push de la aplicación estén habilitadas..
- Pulsa la imagen que quieres usar y, a continuación, Cargar.
- La imagen aparecerá en el bloque de imagen de tu equipo. En la aplicación de Squarespace, toca Reemplazar para elegir una imagen diferente o toca Listo para cerrar el cargador.
Consejo: Cuando cargues imágenes desde un dispositivo móvil, haz clic en Solucionar problemas en la ventana emergente que aparece en tu equipo para volver a escanear el código QR que descarga la aplicación de Squarespace o busca la opción para volver a enviar la notificación push.
Abre el editor de bloques de imagen
En el editor de bloques de imagen, puedes:
- Reemplazar, eliminar o editar la imagen
- Definir el punto focal
- Definir las opciones de diseño
- Agregar texto alternativo
- Editar el nombre del archivo
- Habilitar o deshabilitar un lightbox
Para abrir el editor de bloques de imagen:
- Edita la página o la publicación.
- Haz clic en el bloque de imagen.
- En la barra de herramientas del bloque, haz clic en el ícono del lápiz.
Agregar un enlace de imagen
Para convertir la imagen en un enlace en el diseño incorporado, agrega la URL al campo Enlace o haz clic en 
para ver otras opciones.
Ten en cuenta lo siguiente:
- Habilitar una lightbox desactiva los enlaces URL clickthrough
- La mayoría de los diseños del editor clásico incluyen una opción de botón.
Diseños del editor clásico
Los bloques de imagen agregados a las secciones del Editor dinámico no tienen opciones de diseño integradas. Crea diseños similares solapando bloques de imagen con otros bloques, como bloques de texto y de botón.
Cuando agregas un bloque de imagen en el editor clásico, utiliza el diseño en línea de forma predeterminada. Para cambiar el diseño, haz clic en la pestaña Diseño y, a continuación, elige el diseño que prefieras de las siguientes opciones:
- Incorporado: bloque de imagen básico, con leyendas opcionales debajo o superponiendo la imagen. Establece cómo se muestra la leyenda en la pestaña Contenido.
- Póster: muestra texto sobre imágenes, creando el aspecto de un banner o póster.
- Tarjeta: muestra imágenes con texto a la izquierda o a la derecha. Por lo general, el texto se mueve por debajo de las imágenes en navegadores más pequeños y dispositivos móviles, o cuando se utilizan bloques de imagen en columnas.
- Solapamiento: muestra una imagen a un lado con texto en el otro, parcialmente superpuesto a la imagen. Añade un color de fondo al título para lograr un efecto de resaltado. El texto generalmente se mueve hacia la parte inferior de las imágenes en navegadores más pequeños y en dispositivos móviles o cuando se utilizan bloques de imagen en columnas.
- Collage: muestra imágenes en un lado y texto sobre "tarjetas" de fondo en el otro, desplazando y solapando la imagen. Por lo general, el texto se mueve hacia la esquina inferior de las imágenes en navegadores más pequeños y dispositivos móviles, o cuando se utilizan bloques de imagen en columnas.
- Apilado: muestra imágenes con texto en la parte inferior.
Cuando selecciones un diseño, verás su vista previa en la página. Para ver cómo aparecerá tu bloque de imagen en dispositivos móviles, usa la vista en dispositivo.
Cambiar rápidamente el diseño y la alineación del texto
En el editor clásico, puedes cambiar el diseño y la alineación del texto de un bloque de imagen sin abrir el editor mediante botones de acción rápida. Haz clic en el bloque de imagen mientras editas la página y luego haz clic en los botones de diseño o alineación que aparecen entre los iconos de lápiz y papelera.
Definir la forma de la imagen
Además de recortar y cambiar el tamaño, puedes dar forma a los bloques de imagen para agregar variedad y un efecto visual único a tus imágenes. Establece la forma de la imagen en la pestaña Diseño del editor de bloques de imagen:
- Radio de vértice: para obtener un efecto sutil, redondea las esquinas de una imagen.
- Forma: para un cambio más drástico, establece una forma, como un círculo o un triángulo.La forma aparece sobre la imagen, como una máscara.
Radio de esquina
En la pestaña Diseño, usa las opciones de Radio de vértice para establecer el radio de toda la imagen o de cada vértice.
Ten en cuenta lo siguiente:
- Para quitar el radio de la esquina, deshaz los cambios mientras realizas ediciones o introduce 0 en los campos de radio de esquina.
- Si las opciones de radio de vértice no aparecen en la pestaña Diseño, verifica que la opción Forma no esté seleccionada.
Forma
En la pestaña Diseño, haz clic en Forma, y elige una relación de aspecto (1:1, 2:3 o 3:2) y la forma.Para eliminar la forma, selecciona otra opción en la pestaña Diseño (Ajustar/Rellenar u Original).
Ten en cuenta lo siguiente:
- Utiliza el punto focal para personalizar cómo aparece la imagen en la forma
- Si configuras las imágenes para que se abran con efecto lightbox, la forma original de la imagen aparece después de que los visitantes hacen clic en ella
- Si eliges la forma circular pero la imagen aparece ovalada, usa nuestro editor de imágenes integrado para recortar la imagen a una relación de aspecto de 1:1.
Cambiar el tamaño de la imagen
Puedes cambiar el tamaño o recortar los bloques de imágenes de varias maneras. La forma principal de cambiar el tamaño de una imagen es:
- Editor dinámico: Haz clic y arrastra desde las esquinas o los lados, y utiliza la opción Rellenar en la pestaña de diseño para recortar y dar forma.
- Editor clásico: Cambia el tamaño con bloques
Para todos los bloques de imágenes, también puedes usar el editor de imágenes para recortar la imagen original. Ten en cuenta que este cambio es permanente.
Cambiar el tamaño en el editor clásico
En el editor clásico, puedes reducir el tamaño del bloque de imagen si añades bloques a cualquiera de los lados. La forma más común de hacerlo es con bloques de espacio, que crean un espacio en blanco.
Para cambiar el tamaño mediante bloques:
- Haz clic en un punto de inserción para añadir un bloque de espacio.
- Arrastra el bloque espaciador a la izquierda o derecha del bloque de imagen.
- Haz clic y arrastra el controlador de redimensionamiento.
Ten en cuenta lo siguiente:
- Para centrar la imagen, añade bloques espaciadores de igual tamaño a ambos lados.
- Para los diseños En línea y Póster en el editor clásico, haz clic y arrastra el controlador para recortar la imagen verticalmente. Esto deja la imagen con el mismo ancho, pero cambia la altura.
- Los diseños Tarjeta, Solapamiento y Collage tienen una opción para ajustar el tamaño en la configuración de estilo del editor clásico:
- Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Bloques de imagen.
- Desplázate hasta la sección de ese diseño. (Por ejemplo, desplázate hasta la sección Bloque de imagen: Tarjeta).
- Usa el ajuste Ancho de imagen para cambiar el tamaño. El texto de la imagen se ajustará automáticamente al espacio.
- Haz clic en Guardar.
- En el Menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio.
- Desplázate hasta la sección de ese diseño. (Por ejemplo, desplázate hasta la sección Bloque de imagen: Tarjeta).
- Usa el ajuste Ancho de imagen para cambiar el tamaño. El texto de imagen se agrandará o reducirá automáticamente para adaptarse al espacio.
- Haz clic en Guardar.
Ten en cuenta que hacer estos cambios afecta a todos los bloques de imagen con ese diseño.
Consejo: puedes eliminar el relleno aplicado automáticamente a bloques de imagen añadiendo código personalizado. Para obtener más información, visita esta publicación en el Squarespace Forum. Ten en cuenta que las modificaciones de código personalizado quedan fuera del alcance de nuestro servicio de atención al cliente. Esto significa que no podemos ayudarte a configurar ni resolver problemas de las soluciones basadas en código.
Rellenar el bloque
Puedes configurar imágenes para rellenar toda el área del bloque en Editor dinámico y el diseño del editor clásico En línea. Los otros diseños clásicos rellenan el área de bloques automáticamente.
- Editor dinámico: utiliza la opción Rellenar que está en la pestaña Diseño para que la imagen rellene el contenedor. Si eliges Ajustar, la imagen tendrá un relleno alrededor.
- Editor clásico: activa la opción Expandir de la pestaña Diseño.
- Si la imagen es más ancha que el área del bloque de imagen, se reducirá hasta caber (no se recortará).
Ten en cuenta lo siguiente:
- Ampliar una imagen puede afectar su calidad.
- Para reducir la necesidad de expandirla, te recomendamos cargar una imagen que tenga un ancho entre 1500 y 2500 pixeles.
Agregar animaciones
Puedes agregar animaciones sutiles a las imágenes para crear interés visual en tu sitio:
- Editor dinámico: Habilita animaciones de todo el sitio en los estilos del sitio para animar bloques de imagen del Editor dinámico.
- Editor clásico: habilita las animaciones de bloques en la pestaña Diseño de cada bloque de imagen que desees animar.
Añadir texto
Los bloques de imagen del editor clásico tienen opciones de leyenda incorporadas, mientras que Editor dinámico ofrece más versatilidad.
Consejo: También recomendamos agregar texto alternativo a cada imagen para mejorar la accesibilidad y el SEO.
Editor dinámico
En las secciones de Editor dinámico, utiliza un bloque de texto para agregar texto adyacente o superpuesto a un bloque de imagen.
Editor clásico
En las secciones del editor clásico, haz clic en los campos de texto para agregar texto a la imagen. Es posible que veas texto de marcador de posición como Agregar una descripción de imagen o Hacer que destaque.
Ten en cuenta lo siguiente:
- Limita los títulos a unas cuantas palabras. Para los subtítulos y leyendas, usa una o dos oraciones para tener un equilibrio entre las palabras y la imagen. También mantiene el texto visible en dispositivos móviles.
- Para agregar saltos de línea en el texto del título, pulsa Mayúscula + Enter.
- Resalta el texto y usa la barra de herramientas para hacer cambios de formato, como poner en negrita o cursiva, o agregar un enlace.
- A excepción de los diseños en línea y de pila, el texto mantiene su ancho relativo establecido con respecto a la imagen en dispositivos móviles y navegadores estrechos.
- Al cambiar entre el diseño en línea y cualquier otro diseño por primera vez, tendrás que volver a introducir el texto de la imagen.
El diseño incorporado admite una leyenda básica, mientras que otros diseños tienen campos para el título y el subtítulo.
El diseño incorporado admite una leyenda con lo siguiente:
- Un campo de texto básico
- Texto de estilo en el panel Estilos del sitio (versión 7.1) o Estilos del sitio para la plantilla (versión 7.0)
En la pestaña Contenido, selecciona una opción de visualización en el menú desplegable de leyendas:
- Desactivado: no se muestra ninguna leyenda a menos que la imagen se vea en lightbox.
- Leyenda inferior: la leyenda se muestra debajo de la imagen.
- Leyenda superpuesta: La leyenda aparece encima de la imagen en una barra gris oscura.
- Leyenda superpuesta cuando se pasa el cursor: La leyenda aparece sobre la imagen en una barra gris oscura cuando se posiciona el cursor sobre la imagen.
Consejo: Si no ves Agregar una descripción de imagen, cambia temporalmente el estilo de leyenda a Leyenda inferior en la pestaña Contenido.
Las leyendas siempre aparecen en lightbox. No aparecen en los Bloques de imagen que estén vacíos. Para añadir un texto sin imagen, usa un Bloque de texto.
Otros diseños admiten un título y un subtítulo:
- Dos campos de texto, uno arriba del otro
- Texto de estilo en el panel Estilos del sitio (versión 7.1) o Estilos del sitio para la plantilla (versión 7.0)
- En la versión 7.1, para cambiar la alineación o el espaciado del texto, aplica estilo al bloque de imagen.
- Agrega texto alternativo manualmente en el campo Texto alternativo de imagen de la pestaña Contenido.
Fuentes y colores del editor clásico
El estilo de las fuentes y los colores de los bloques de imagen en el editor clásico depende de la versión de tu sitio.
Para dar estilo a los bloques de imagen de forma global:
- Cambiar las fuentes del bloque en el panel Fuentes.
- Cambia los colores de la sección de ese bloque en el panel Colores.
- Personaliza los colores del tema para elementos como el título, la superposición de imagen o el fondo del botón con los ajustes de color de Bloque de imagen.
- Cambia el estilo del botón del bloque en el panel Botones. Los botones de bloque de imagen siguen la configuración de estilo Principal.
- Establece el tamaño de fuente y otros formatos en la barra de herramientas de texto. El tamaño de fuente del botón sigue Párrafo 2.
Para dar estilo a los elementos específicos del diseño del bloque de imagen, como la alineación del texto o el ancho del contenido:
- Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Bloques de imagen.
- Desplázate hasta la sección de cada diseño para cambiar sus ajustes.
En la versión 7.0, todos los diseños de bloque de imagen, excepto el diseño incorporado, tienen su propia configuración de estilo en estilos del sitio. Para encontrar estas opciones:
- En el menú de Inicio, haz clic en Diseño y, a continuación, en Estilos del sitio.
- Desplázate hasta la sección de cada diseño para cambiar sus ajustes.
El bloque de imagen incorporada no tiene sus propios ajustes de diseño en estilos del sitio. Para obtener más información acerca de los estilos, los colores y el tamaño de las fuentes de leyendas, visita Cómo aplicar estilo a las leyendas de imágenes.
Próximos pasos
Tras configurar el bloque de imagen, puedes:
- Arrastra y suelta el bloque para moverlo o para crear filas y columnas.
- Usa el editor de imágenes para recortar o rotar las imágenes o agregarles filtro.
- Borra el bloque.
Para solucionar cualquier problema con las imágenes, consulta Cómo dar formato a las imágenes para mostrarlas en la web.