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 imagen.
Mira el video
Este video corresponde a la versión 7.0 de Squarespace.
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 selecciona Imagenpara un bloque de imagen incorporado, o Póster, Tarjeta, Superposición, Collageo Apilar para otros diseños. Para obtener ayuda, visita Agregar contenido con bloques.
- Usa la pestaña Contenidos para añadir una imagen.
- Utiliza la pestaña Diseño para cambiar el diseño y añadir un enlace de imagen.
- Usa la pestaña Animaciones para animar el bloque.
- Haz clic en Aplicar para guardar los cambios.
Si necesitas pasos más detallados, visita las secciones que siguen.
Añadir una imagen
En la pestaña Contenido del editor de bloque de imagen:
- Para subir una imagen propia, haz clic en Subir una imagen. También puedes arrastrar la imagen al cargador de imágenes desde tu computadora.
- Para agregar una imagen de stock, haz clic en Buscar imagen. Puedes elegir entre las opciones gratuitas o premium. Para obtener más información, visita Cómo buscar y agregar imágenes de stock.
- También puedes reutilizar imágenes desde la ventana Búsqueda de imágenes.
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.
- Editor de imágenes.
Diseños del Bloque de imagen
Estos son ejemplos del diseño de cada bloque de imagen, que puedes cambiar en la pestaña Diseño. Cuando selecciones un diseño, aparecerá 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.
Los Bloques de imagen incorporada muestran las imágenes con leyendas optativas debajo de ellas o superpuestas a la imagen.
Los Bloques de imágenes en póster muestran el texto sobre las imágenes y crean el aspecto de un banner o póster.
Los bloques de imagen de tarjeta muestran 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 y dispositivos móviles más pequeños, o cuando los bloques de imagen se utilizan en columnas.
Para elegir en qué lado aparece la imagen, utiliza el menú desplegable Posición de la imagen en la pestaña Diseño del bloque de imagen.
El Bloque de imagen superpuesta 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. Por lo general, el texto se mueve debajo de las imágenes en los navegadores más pequeños y los dispositivos móviles, o cuando se usan los Bloques de imagen en columnas.
Para elegir en qué lado aparece la imagen, utiliza el menú desplegable Posición de la imagenen la pestaña Diseñodel bloque de imagen.
El Bloque de imagen de collage muestra una imagen a un lado y texto sobre "tarjetas" de fondo, que se desplaza y se superpone a la imagen. Por lo general, el texto se mueve debajo de las imágenes en los navegadores más pequeños y los dispositivos móviles, o cuando se usan los Bloques de imagen en columnas.
Para seleccionar en qué lado aparece la imagen, utiliza el menú desplegable Posición de la imagen en la pestaña Diseño del bloque de imagen.
Los bloques de imagen de pila muestran imágenes con texto a continuación.
Añade un enlace o botón en la imagen
En la pestaña Diseño, puedes hacer que la imagen se convierta en un enlace o agregar un botón a su diseño.
Para que la imagen pase a ser un enlace en el diseño Incorporado, añade la URL en la casilla URL clickthrough o haz clic en 
para ver otras opciones.
Ten en cuenta lo siguiente:
- Habilitar una lightbox desactiva los enlaces URL clickthrough.
- El diseño alineado no soporta botones.
Para todos los demás diseños de Bloques de imagen, usa el menú desplegable de Enlace a imagen. Puedes elegir entre las siguientes opciones:
- 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
para obtener 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 obtener opciones adicionales. Obtén información sobre el estilo del botón a continuación.
Agregar animaciones (solo en equipos de escritorio)
En la pestaña Animaciones del editor del bloque de imagen, puedes agregar animaciones que ven los visitantes cuando cargan o actualizan la página.
Para agregar una animación:
- En el editor del Bloque de imágenes, haz clic en Animaciones.
- Selecciona un efecto del menú desplegable del Bloque de imágenes animadas para aplicarlo a la imagen y a cualquier posible texto. Cuando selecciones una opción, verás una vista previa de cómo se cargará en la página.
- Para animar la imagen separada del texto, selecciona Personalizada, luego elige las opciones Animar imagen y Animar texto de imagen.
Consejo: En la versión 7.1, puedes aplicar animaciones de forma global a todas las imágenes de tu sitio.
Elige entre estas opciones de animación para tu imagen, texto o para ambos:
- Fundido de entrada: El bloque, la imagen o el texto ingresa difuminado.
- Deslizar hacia arriba: El bloque, la imagen o el texto se desliza hacia arriba.
- Deslizar hacia abajo: La imagen o el texto se deslizan hacia abajo
- Recorte horizontal: El bloque o la imagen se carga en capas horizontales.
- Recorte vertical: El bloque o la imagen se carga en capas verticales.
- Inclinado hacia arriba: El bloque o la imagen ingresa con una ampliación y una inclinación hacia arriba.
- Inclinado hacia abajo: El bloque o la imagen ingresa con una ampliación y una inclinación hacia abajo.
- Foco de ingreso: El bloque, la imagen o el texto aparece borroso y, luego, se hace foco.
- Colisionar: La imagen y el texto se desplazan hacia dentro desde los laterales
- Revelar: La imagen y el texto se desplazan hacia fuera desde el centro
- Deslizar desde la izquierda: La imagen o el texto se deslizan desde la izquierda
- Deslizar desde la derecha: La imagen o el texto se deslizan desde la derecha
Este es un ejemplo de un Bloque de imagen de collage con estas configuraciones:
- Animar Bloque de imagen: Personalizada
- Animar imagen: Deslizar desde la derecha
- Animar el texto de imagen: Deslizar desde la izquierda
Añadir texto
Después de hacer clic en Aplicar para guardar el bloque, presiona Escribe una leyenda aquí, Escribe un título aquí o Escribe un subtítulo aquí para añadir el texto correspondiente a la imagen.
Para obtener los mejores resultados, haz que tu texto sea breve. Intenta limitar los subtítulos a una o dos oraciones. Esto conserva un buen equilibrio entre las palabras y la imagen. También mantiene visible el texto en dispositivos móviles.
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
- Estilo establecido por estilos de sección (versión 7.1) o plantilla (versión 7.0)
- Automáticamente pasa a ser el texto alternativo
En la pestaña Diseño, selecciona una opción de visualización del menú desplegable de las leyendas:
- No incluir la leyenda: No aparece la leyenda, a menos que la imagen se visualice en lightbox.
- Leyenda abajo: La leyenda aparece debajo de la imagen, alineada a la izquierda.
- 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 Escribir leyenda aquí, cambia transitoriamente el diseño de la leyenda a Leyenda abajo en la pestaña Diseño.
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
- Estilos establecidos en el panel Diseño
- Agrega texto alternativo manualmente en el campo Nombre de archivo de la pestaña Contenido.
Cambiar el tamaño de la imagen
Puedes modificar el tamaño de la imagen o recortar los Bloques de imagen de distintos modos. Tus opciones dependen del diseño.
Los Bloques de imagen incorporada conservan el ancho del archivo original de la imagen. Si el archivo de la imagen es más angosto que el área de contenidos, verás un espacio en blanco a ambos lados de la imagen. Esto preserva la calidad original de la imagen. Para completar el espacio en blanco y para mostrar la imagen en el ancho completo del bloque, marca Ampliar en la pestaña Diseño del bloque. Ampliar una imagen puede afectar su calidad.
También puedes ajustar el tamaño de la imagen o recortarla de otros modos:
- Para recortar el archivo original de la imagen, usa el Editor de imágenes.
- Para recortar la imagen horizontal o verticalmente, usa la función de recortar.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
- Para ajustar dónde se centrará la imagen, usa el punto focal.
En el diseño Póster, las imágenes se amplían automáticamente para ocupar todo el ancho del bloque.
Para cambiar el tamaño y el recorte de la imagen:
- Para recortar el archivo original de la imagen, usa el Editor de imágenes.
- Para recortar la imagen horizontal o verticalmente, usa la función de recortar.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
- Para ajustar dónde se centrará la imagen, usa el punto focal.
Para cambiar el tamaño y el recorte de la imagen:
- Para ajustar el ancho de la imagen, usa el ajuste del Ancho de la imagen en el panel de Estilos del sitio.
- Para recortar la imagen original, utiliza el editor de imágenes.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
Para cambiar el tamaño y el recorte de la imagen:
- Para ajustar el ancho de la imagen, usa el ajuste del Ancho de la imagen en el panel de Estilos del sitio.
- Para recortar la imagen original, utiliza el editor de imágenes.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
Para cambiar el tamaño y el recorte de la imagen:
- Para ajustar el ancho de la imagen, usa el ajuste del Ancho de la imagen en el panel de Estilos del sitio.
- Para recortar la imagen original, utiliza el editor de imágenes.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
En el diseño Pila, las imágenes se amplía automáticamente para ocupar todo el ancho del bloque.
Para cambiar el tamaño y el recorte de la imagen:
- Para recortar la imagen original, utiliza el editor de imágenes.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
Consejo: puedes eliminar el relleno aplicado automáticamente a los bloques de imagen con una solución basada en código. Para obtener más información, consulta esta publicación en el Foro de Squarespace.
Ten en cuenta que las modificaciones al código personalizado están fuera del alcance de nuestro soporte técnico. Esto significa que no podemos ayudarte a configurar ni resolver problemas de las soluciones basadas en código.
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.
Versión 7.1
En la versión 7.1, algunos diseños tienen su propia configuración de estilo.
El bloque de imagen incorporado no tiene opciones de diseño únicas. Los estilos de leyenda coinciden con las selecciones de fuente y color de la sección.
Otros diseños tienen opciones exclusivas en el panel de Diseño:
- En el Menú de inicio, pulsa Diseño y, luego, Bloques de imagen.
- Desplázate hasta la sección de cada diseño para cambiar sus ajustes. Estos ajustes afectan a todos los Bloques de imagen de tu sitio que tengan ese diseño.
- Para modificar la fuente del bloque, cambia la fuente del sitio.
- Para modificar los colores del bloque, cambia los colores de la sección de ese bloque.
- Para aplicar estilo al botóndel bloque, ajusta la configuración del botóndel sitio. La fuente del botón coincide con la fuente de todo el sitio. El color del botón coincide con los colores de esa sección.
Versión 7.0
En la versión 7.0, algunos diseños 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, luego, en Estilos del sitio.
El Bloque de imagen incorporada no tiene opciones exclusivas para los Estilos del sitio. Los estilos de las leyendas están preconfigurados para cada plantilla.
Desplázate hacia abajo hasta la sección Bloque de imagen: Póster para seleccionar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen de póster de tu sitio:
- Alineación del texto: Izquierda, Derecha, Centro
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
- Ancho del contenido: Elige el ancho de la leyenda
- Color de fondo del título: Añade un color detrás del título
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada retoque de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Tarjeta para seleccionar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen de tarjeta en tu sitio:
- Tamaño dinámico de la fuente: Modifica el tamaño del texto según el ancho del bloque y del navegador. El texto del título y del subtítulo no se modificará a un tamaño menor que 14 píxeles.
- Posición de los contenidos: Arriba, Centro, Abajo
- Alineación del texto: Izquierda, Centro, Derecha, Coincidente, Opuesta: Alinea el título con el subtítulo. Coincidente alinea el texto del mismo lado que la imagen. Opuesto alinea el texto del otro lado.
- Ancho de la imagen: Configura el tamaño de la imagen
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Color de fondo de la tarjeta: Ajusta el fondo que aparece detrás del texto
- Relleno de la tarjeta: Elige el relleno a ambos lados del texto
- Separación de la tarjeta: Añade espacio entre la imagen y el fondo de la tarjeta
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
- Color de fondo del título: Añade un color detrás del título
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada retoque de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Superposición para modificar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen superpuesta de tu sitio:
- Tamaño dinámico de la fuente: Modifica el tamaño del texto según el ancho del bloque y del navegador. El texto del título y del subtítulo no se modificará a un tamaño menor que 14 píxeles.
- Posición de los contenidos: Arriba, Centro, Abajo
- Alineación del texto: Izquierda, Centro, Derecha, Coincidente, Opuesta: Alinea el título. Coincidente alinea el texto del mismo lado que la imagen. Opuesto alinea el texto del otro lado.
- Ancho de la imagen: Configura el tamaño de la imagen
- Superposición del título: Elige cuánto del título se superpondrá a la imagen. Esto afecta el tamaño del texto.
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
- Color de fondo del título: Añade un color detrás del título
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada retoque de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Collage para modificar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen de collage en tu sitio:
- Tamaño dinámico de la fuente: Modifica el tamaño del texto según el ancho del bloque y del navegador. El texto del título y del subtítulo no se modificará a un tamaño menor que 14 píxeles.
- Posición de los contenidos: Arriba, Centro, Abajo
- Alineación del texto: Izquierda, Centro, Derecha, Coincidente, Opuesta: Alinea el título con el subtítulo. Coincidente alinea el texto del mismo lado que la imagen. Opuesto alinea el texto del otro lado.
- Ancho de la imagen: Configura el tamaño de la imagen
- Ancho del contenido: Elige el ancho de la leyenda. Esto afecta el tamaño del texto.
- Superposición del contenido: Elige cuánto de la leyenda se superpondrá a la imagen. Esto afecta el tamaño del texto.
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Fondo de la tarjeta: Ajusta el color del fondo que aparece detrás de la leyenda
- Relleno de la tarjeta: Elige el relleno a ambos lados de la leyenda
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada retoque de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Pila para modificar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen en pila de tu sitio:
- Tamaño dinámico de la fuente: Modifica el tamaño del texto según el ancho del bloque y del navegador. El texto del título y del subtítulo no se modificará a un tamaño menor que 14 píxeles.
- Alineación del texto: Izquierda, Derecha, Centro
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Fondo de la tarjeta: Ajusta el color del fondo que aparece detrás de la leyenda
- Relleno de la tarjeta: Elige el relleno a ambos lados de la leyenda
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada retoque de color.
Bloques de imágenes en dispositivos móviles
Cada diseño del Bloque de Imagen conserva su formato en móviles. El texto se moverá en el móvil para ajustarse al dispositivo y que conservará una posición similar con relación a la imagen.
- Para ver cómo lucirá tu Bloque de Imagen, usa la Vista de Dispositivo.
- Con la excepción de los diseños Incorporado y Pila, las leyendas mantienen su ancho establecido en relación con 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.
- Las leyendas de los diseños de Tarjeta, Collage y Superpuesto se mueven por la imagen hasta quedar debajo 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 Verticales se alinean verticalmente en 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
Una vez configurado el Bloque de imagen, puedes seguir estos pasos para reorganizarlo, editarlo o eliminarlo:
- Arrastra y suelta el bloque para moverlo o crear columnas y filas. Para obtener más información, visita Cómo mover bloques para personalizar diseños.
- Usa el editor de imágenes para recortar o rotar las imágenes o agregarles filtro.
- Reemplaza la imagen con un clic en Borrar, en la pestaña Contenido del editor de bloques y, luego, sube una imagen nueva. De este modo, no deberás agregar un nuevo bloque de imagen.
- Para crear un efecto de imagen de banner con el bloque, muévelo a la parte superior de la página. Para informarte mejor, visita Cómo agregar una imagen de banner.
- Borra el bloque.