Bloques de imágenes

Muestra imágenes en tu sitio y agrega animaciones, leyendas y enlaces.

Última actualización: 11 de febrero de 2025

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

Añadir una imagen

Para añadir cualquier Bloque de imagen:

  1. 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.
  2. Haz clic en el ícono + del bloque de imagen.
  3. Carga un archivo desde tu equipo o dispositivo móvil, reutiliza una imagen de tu biblioteca o busca imágenes de stock. Para obtener los mejores resultados, utiliza una imagen de menos de 500 KB.
  4. Usa el editor de bloques de imagen para reemplazar, eliminar o editar la imagen.
  5. 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:

  1. 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.
  2. 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..
  3. Pulsa la imagen que quieres usar y, a continuación, Cargar.
  4. 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:

Para abrir el editor de bloques de imagen:

  1. Edita la página o la publicación.
  2. Haz clic en el bloque de imagen.
  3. 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, haz clic en el bloque para resaltarlo y haz clic en el icono de enlace en la barra de herramientas del bloque, o haz clic en Adjuntar enlace en el editor de bloques. Para la mayoría de los diseños de editor clásico, debes seleccionar En imagenEn botón antes de que aparezca Adjuntar enlace. Cuando hayas terminado, haz clic en el editor de bloques para guardar los cambios.

Ten en cuenta que habilitar un efecto lightbox deshabilita las URL clickthrough.

Diseños del editor clásico

Cómo acceder a esta función

Los bloques de imagen agregados a las secciones del Editor dinámico no tienen opciones de diseño integradas. Crea diseños similares superponiendo 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.

quick_actions_-__image_block_classic_layout.png

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:

Consejo

Si tu sitio es compatible con Editor dinámico, puedes usar bloques de formas para agregar formas de color sólido a tus páginas sin imágenes.

Radio de las esquinas

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:

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:

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:

  1. Haz clic en un punto de inserción para añadir un bloque de espacio.
  2. Arrastra el bloque espaciador a la izquierda o derecha del bloque de imagen.
  3. Haz clic y arrastra el controlador de redimensionamiento.
Cambiar el tamaño de una imagen para hacerla más pequeña utilizando otro bloque.

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:
  1. Abre el panel de Bloques de imagen
  2. Desplázate hasta la sección de ese diseño. (Por ejemplo, desplázate hasta la sección Bloque de imagen: Tarjeta).
  3. Usa el ajuste Ancho de imagen para cambiar el tamaño. El texto de la imagen se ajustará automáticamente al espacio.
  4. Haz clic en Guardar.
  1. Abre el panel de Diseño y luego haz clic en estilos del sitio.
  2. Desplázate hasta la sección de ese diseño. (Por ejemplo, desplázate hasta la sección Bloque de imagen: Tarjeta).
  3. 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.
  4. 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.

Agrega animaciones y efectos de imagen

Puedes agregar animaciones sutiles a las imágenes para crear interés visual en tu sitio:

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. Para informarte sobre cómo hacer tus imágenes más accesibles, visita Hacer que los audios, imágenes y videos sean más accesibles

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:

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:

Fuentes y colores

Editor dinámico

En las secciones del Editor dinámico, puedes agregar un color de superposición a un bloque de imagen al activar la opción Superposición en la pestaña Diseño.Las superposiciones aplican un filtro de color en la parte superior de las imágenes, lo que les da un tono ligero. 

Usa el selector de colores para seleccionar un color y transparencia para la superposición. Haz clic en Modo de fusión para agregar efectos visuales a la superposición. Estos se renderizarán con sutiles diferencias visuales según el navegador.

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 del 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 coincide con el de 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:

  1. Abre el panel Bloques de imagen. Mientras editas una página, abre estilos del sitio y, a continuación, haz clic en bloques de imagen.
  2. 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:

  1. Abre el panel de Diseño y luego haz clic en estilos del sitio.
  2. 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:

Para solucionar cualquier problema con las imágenes, consulta Cómo dar formato a las imágenes para mostrarlas en la web.

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.