Usa los Bloques de imagen para añadir imágenes a las páginas o a las publicaciones de blog en distintos diseños. Cada Bloque de imagen muestra una sola imagen.
Mira el video
Añadir un Bloque de imágenes
Para añadir cualquier Bloque de imagen:
- Edita una página o publicación, haz clic en un punto de inserción y, a continuación, en Imagen. Para obtener ayuda, visita Cómo agregar contenido con bloques.
- Usa la pestaña Contenido para agregar una imagen, leyendas, texto alternativo o un enlace de imagen.
- Haz clic en la pestaña Diseño para cambiar el diseño y animar el bloque.
- Haz clic fuera del editor de bloques cuando hayas terminado. Los cambios se guardan automáticamente.
Consejo: Cuando agregas un bloque de imagen, se expande a todo el ancho del área de contenido. Para cambiar el tamaño del bloque de imagen, puedes ajustar su tamaño.
Añadir una imagen
En la pestaña Contenido del editor de bloque de imagen:
Haz clic en el ícono + y, a continuación, elige cómo quieres agregar tu imagen:
- Para cargar una imagen desde tu dispositivo, haz clic en Cargar archivo.
- Para reutilizar una imagen, haz clic en Seleccionar desde biblioteca.
- Para buscar y agregar imágenes de stock, selecciona Examinar imágenes de stock.
Después de agregar una imagen, puedes:
- Agregar animaciones
- Editar la imagen.
- Establecer el punto focal de tu imagen.
- Cambia la imagen haciendo clic en Reemplazar.
- Eliminar la imagen haciendo clic en el ícono de la papelera.
Ten en cuenta lo siguiente:
- Para obtener los mejores resultados, utiliza una imagen de menos de 500 KB. Para obtener más sugerencias sobre el formato de imagen, visita Cómo dar formato a las imágenes para que se muestren en el sitio web.
- El bloque de imágenes no se mostrará en tu sitio web sin una imagen cargada.
Añade un enlace o botón en la imagen
En la pestaña Contenido, puedes convertir la imagen en un enlace o agregar un botón a su diseño.
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.
- El diseño incorporado no admite botones.
Para ver todos los demás diseños de bloque de imagen, utiliza el menú desplegable Enlace. Puedes elegir entre:
- None (Ninguno): sin enlace
-
Sobre imagen: toda la imagen se convierte en un enlace. Agrega una URL en el campo URL que aparece debajo del menú desplegable o bien, haz clic en
para acceder a opciones adicionales. -
Botón: aparece un botón incorporado con el texto, debajo del título y el subtítulo. Personaliza el texto del botón y agrega la URL en los campos que aparecen debajo del menú desplegable, o haz clic para acceder a opciones adicionales.
Elegir un diseño
Si tu sitio está en la versión 7.1 y usas Motor Dinámico, los bloques de imágenes agregados a las secciones de Motor Dinámico no tienen estas opciones de diseño integradas. Crea diseños similares solapando bloques de imágenes con otros bloques, como bloques de texto.
Cuando agregas un bloque de imagen, utiliza el diseño incorporado 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.
- Superposición: 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 superponiendo 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.
Consejo: si cambias entre incorporado y cualquier otro diseño, deberás volver a ingresar el texto de la imagen.
Añadir texto
En el bloque de imagen, 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 pocas palabras. Para subtítulos y leyendas, usa una o dos frases. De esta manera, tendrás un buen equilibrio entre las palabras y la imagen. También mantiene visible el texto en dispositivos móviles.
- Para agregar saltos de línea en el texto del título, pulsa Mayúscula + Enter. Si solo pulsas Enter, los saltos desaparecen después de guardar la página.
Consejo: resalta el texto para hacer cambios de formato con la barra de herramientas de texto, como negrita o cursiva o bien, agregar un enlace.
Leyendas frente a títulos y subtítulos
Los campos de texto y las opciones de estilo varían según el diseño. 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.
Modificar el estilo del Bloque de imagen
Algunos diseños tienen su propia configuración de estilo para fuentes, colores y botones. El lugar en que aparece esta configuración depende de la versión del 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.
Agregar formas de imagen
Utiliza formas de imagen para dar variedad y un efecto visual único a tus imágenes. La forma que elijas aparece sobre la imagen, como una máscara. Puedes agregar formas de imagen a cualquier diseño de bloque de imagen. Elige entre tres relaciones de aspecto: 1:1, 2:3 y 3:2.
Para agregar formas de imagen:
- En el editor de bloques de imagen, haz clic en Diseño.
- Elige Forma y, a continuación, haz clic en Forma.
- Elige una relación de aspecto y, a continuación, haz clic en la forma que quieras usar.
Después de elegir una forma, puedes:
- Utiliza el punto focal para personalizar cómo aparece la imagen en la forma.
- Activa las animaciones para agregar movimiento visual.
- Quita la forma. En la pestaña Diseño, elige Original para volver a la forma original.
Ten en cuenta lo siguiente:
- Si configuras las imágenes para que se abran con un efecto lightbox, la forma original de la imagen aparece después de que los visitantes hagan clic en ella.
- Si usas los diseños de tarjeta, collage o solapamiento y eliges la forma del círculo, tu imagen puede aparecer como un óvalo. Para que la imagen aparezca como un círculo, asegúrate de que tenga una relación de aspecto de 1:1. Puedes usar nuestro editor de imágenes integrado para recortar tu imagen.
Agregar un radio de esquina
Puedes redondear las esquinas de una imagen con el ajuste de radio de esquina. En la pestaña Diseño del editor de bloques de imagen:
- Ve a Radio de esquina y haz clic para establecer el radio de toda la imagen o de las esquinas individuales.
- En el campo radio de esquina, introduce números (medidos en píxeles) para cambiar la forma del borde.
- Posiciona el cursor sobre Listo y, luego, haz clic en Guardar.
Ten en cuenta lo siguiente:
- Los cambios que realices en el radio de un bloque de imagen solo se aplican al bloque de imagen individual. No cambia la imagen en tu sitio.
- Para quitar el radio de la esquina, deshaz los cambios mientras realizas ediciones o introduce 0 en los campos de radio de esquina.
Cambiar el tamaño de la imagen
Puedes cambiar el tamaño o recortar bloques de imagen de varias maneras, según el diseño.
Opciones de cambio de tamaño
Aquí encontrarás una guía rápida de las diferentes opciones disponibles en cada diseño:
| Opción | Inline (Alineado) | Poster (Póster) | Card (Tarjeta) | Overlap (Superpuesta) | Collage (Collage) | Apilada |
| Ajustar el tamaño con bloques | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Recortar la imagen original | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Usar el controlador de recorte | ✓ | ✓ | ✕ | ✕ | ✕ | ✕ |
| Estilos del sitio | ✕ | ✕ | ✓ | ✓ | ✓ |
✕ |
| Estirar para llenar | ✓ | n/a | n/a | n/a | n/a | n/a |
Hay varias formas de cambiar el tamaño de los bloques de imagen, como el uso de bloques, el controlador de recorte y la configuración de estilo. Para cambiar el tamaño de los bloques de imagen:
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.
- Puedes usar este mismo método con otros bloques. Esto es especialmente útil para texto junto a imágenes.
Para obtener más información sobre cómo usar bloques para cambiar el tamaño del contenido, consulta Cambiar el tamaño de bloques.
Para diseños incorporado y de póster, haz clic y arrastra el controlador de recorte para recortar la imagen verticalmente. Esto deja la imagen con el mismo ancho pero cambia la altura.
- Haz clic en el Bloque de imagen. Aparece un borde con un controlador circular en la parte inferior.
- Haz clic y arrastra el controlador de recorte para recortar la imagen.
Consejos para usar el controlador de recorte con bloques de imagen:
- Presiona y mantén presionada la tecla Mayúscula mientras arrastras el controlador de corte para modificar el tamaño de la imagen en incrementos de 20 píxeles. Esto puede permitir alinear la parte inferior de la imagen con otro bloque.
- El controlador de recorte solo aparece después de agregar una imagen.
- Puedes elegir un centro para la imagen recortada usando puntos focales.
- Haz doble clic en el controlador de recorte para deshacer el recorte.
- Tira del borde para ampliar la imagen.
- Haz clic y arrastra el controlador de recorte hacia abajo para recortar horizontalmente. Esto hace zum sobre la imagen y recorta los lados.
Para obtener más información sobre el uso del controlador de recorte, consulta Cambiar el tamaño de bloques.
Los diseños Tarjeta, Superposición y Collage tienen una opción para ajustar el tamaño en su configuración de estilo.
- 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.
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.
Ampliar para cubrir el bloque
Si estás usando el diseño Incorporado y tu imagen es más angosta que el bloque de imagen, la imagen conservará su ancho original. Verás un espacio en blanco a ambos lados de la imagen dentro del bloque. Esto preserva la calidad original de la imagen.
Para llenar el espacio en blanco y que la imagen ocupe todo el ancho del bloque:
- Abre el bloque de imagen y haz clic en Diseño.
- Activa el control Extender.
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.
- Si la imagen es más ancha que el área del bloque de imagen, se reducirá hasta caber (no se recortará).
- Los demás diseños de bloques de imagen se extienden automáticamente.
Si el bloque de imagen es más ancho que la imagen que cargaste, para asegurarte de que la imagen llene el bloque, activa la opción Expandir. Si la imagen tiene menos de 1500 píxeles de ancho, es posible que no llene todo el bloque. A continuación, se muestra un bloque de imagen que es más ancho que la imagen cargada y la opción Expandir está activada y desactivada.
Bloques de imagen en móvil
Cada diseño del Bloque de imagen conserva su formato en dispositivos móviles. El texto se moverá en el móvil para ajustarse al dispositivo y conservará una posición similar con relación a la imagen.
- Para ver cómo lucirá tu bloque de imagen, usa la vista en dispositivo.
- Con la excepción de los diseños incorporado y apilado, las leyendas mantienen el ancho establecido con respecto a la imagen. Esto significa que las leyendas más largas pueden ser más difíciles de leer o aparecer cortadas en dispositivos móviles. Esto puede ser especialmente visible en el diseño de póster, que fue diseñado para una cantidad limitada de texto.
- Las leyendas para el diseño en tarjeta se desplazan desde junto a la imagen hacia debajo de la imagen. Para los diseños en collage y en superposición, las leyendas se mueven desde junto a la imagen hacia la parte inferior de la imagen.
- Los diseños de tarjeta, collage, superpuesto y apilado tienen la opción Tamaño de fuente dinámico en el panel de estilos del sitio. Cuando está habilitada, el tamaño del texto no se ajustará a menos de 14 píxeles.
- Varios bloques de imagen se apilan verticalmente en dispositivos móviles.
Solucionar problemas de colores de imagen
Si una imagen se guarda en modo CMYK en lugar de RGB, los colores en tu sitio de Squarespace pueden diferir de aquellos en el archivo original de la imagen.
Siempre debes guardar las imágenes en modo RGB o sRGB. El modo de color RGB es un formato compatible con la web, mientras que CMYK es para la impresión y no renderiza en la mayoría de los navegadores. Para obtener más información sobre cómo ajustar el formato de una imagen, consulta Ajustar el formato de las imágenes para exhibirlas en la web.
Próximos pasos
Después de configurar el bloque de imagen, puedes reorganizarlo, editarlo o eliminarlo:
- 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.
- Para reemplazar la imagen sin agregar un nuevo bloque de imagen, haz clic en Eliminar imagen en la pestaña Contenido del editor de bloques y, a continuación, carga una imagen nueva.
- Borra el bloque.