Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Usar Bloques de imágenes

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.

Consejo: Para añadir varias imágenes a un bloque, usa Bloques de galería. Para informarte sobre cómo añadir imágenes a otras áreas de tu sitio, consulta nuestras guías sobre los banners, los fondos, las Páginas de Galería y las imágenes de productos.

Mira el video

Añadir un Bloque de imágenes

Para añadir cualquier Bloque de imagen:

  1. Presiona Editar en una página o en una publicación.
  2. Presiona un punto de inserción o el icono +. Si necesitas más detalles sobre estos primeros pasos, consulta Agregar bloques.
  3. Selecciona Imagen para un Bloque de imagen incorporada, o PósterTarjetaSuperposiciónCollagePila para usar otros diseños.

Menú de bloque con las opciones de Bloque de imagen destacadas.

  1. Usa la pestaña Contenidos para añadir una imagen.
  2. Utiliza la pestaña Diseño para cambiar el diseño y añadir un enlace de imagen.
  3. Usa la pestaña Animaciones para animar el bloque.
  4. 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 Contenidos del editor de Bloque de imagen, sube o agrega una imagen usando nuestras integraciones con imágenes de stock. También puedes reutilizar una imagen de stock o una imagen cargada desde la ventana de Búsqueda de imágenes.

Consejo: Para obtener los mejores resultados, sube una imagen que tenga menos de 500 KB. Si necesitas más consejos sobre el formato de imágenes, consulta Cambiar el formato de tus imágenes para que aparezcan en la web.

Opción 1: Subir una 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.

En la pestaña Contenidos del Bloque de imagen, presiona Subir una imagen para añadir tu propia imagen.

Opción 2: Añadir una imagen de stock

Para añadir una imagen de stock, haz clic en Buscar imagen. Puedes elegir entre las opciones gratuitas o premium. Para conocer más, consulta Buscar y agregar imágenes de stock.

En la pestaña Contenidos del Bloque de imagen, haz clic en Buscar imagen para añadir una imagen de stock.

Diseños del Bloque de imagen

Estos son algunos ejemplos de cada diseño del Bloque de imagen. Puedes cambiar el diseño en la pestaña Diseño del Bloque de imagen. 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.
IncorporadoPósterTarjetaSuperposiciónCollagePila

Los Bloques de imagen incorporada muestran las imágenes con leyendas optativas debajo de ellas o superpuestas a la imagen.

Ejemplos de Bloques de imagen incorporada, uno con una leyenda debajo de él y otro con la leyenda superpuesta.

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.

Ejemplo de un Bloque de imagen de póster.

Los Bloques de imagen de tarjeta muestran imágenes con texto a la derecha o a la izquierda y con colores de fondo optativos. 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.

Ejemplo de un Bloque de imagen de tarjeta.

Para seleccionar de qué lado aparecerá la imagen, usa el menú desplegable Posición de 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.

Ejemplo de un Bloque de imagen de superposición.

Para seleccionar de qué lado aparecerá la imagen, usa el menú desplegable Posición de imagen en la pestaña Diseño del 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.

Ejemplo de un Bloque de imagen de collage.

Para seleccionar de qué lado aparecerá la imagen, usa el menú desplegable Posición de imagen en la pestaña Diseño del Bloque de imagen.

Los Bloques de imagen en pila muestran las imágenes con texto debajo y con colores optativos de fondo.

Ejemplo de un Bloque de imagen de pila.

Añade un enlace o botón en la imagen

En la pestaña Diseño del Bloque de imagen, puedes hacer que la imagen pase a ser un enlace o añadir un botón a su diseño.

IncorporadoTodos los demás diseños

Para hacer que la imagen pase a ser un enlace en el diseño Incorporado, agrega una URL clickthrough.

Ten presentes estos consejos:

  • 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.
  • En la imagen: Toda la imagen se convierte en un enlace. Añade la URL al campo que aparece cuando seleccionas esta opción.
  • Botón: Aparece un botón incorporado con el texto, debajo del título y del subtítulo. Personaliza el texto del botón y añade la URL a los campos que aparecen cuando seleccionas esta opción. Puedes modificar el estilo del botón en el panel Estilos del sitio.

Agregar animaciones

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. Recomendamos experimentar con diferentes opciones para encontrar las animaciones que te gusten.

Para agregar una animación:

  1. En el editor del Bloque de imágenes, haz clic en Animaciones.
  2. 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.
  3. Para animar la imagen separada del texto, selecciona Personalizada, luego elige las opciones Animar imagen y Animar texto de imagen.

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

Ejemplo de un Bloque de imagen con animaciones.

Añadir texto

Después de hacer clic en Aplicar para guardar el bloque, presiona Escribe una leyenda aquíEscribe un título aquí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.

IncorporadoTodos los demás diseños

El diseño Incorporado admite una leyenda con lo siguiente:

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:

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.

IncorporadoPósterTarjetaSuperposiciónCollagePila

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:

En el diseño Póster, las imágenes se amplían automáticamente para ocupar todo el ancho del bloque.

Hay varios modos de ajustar el tamaño y de recortar la imagen:

Hay varios modos de ajustar el tamaño y de recortar la imagen:

Hay varios modos de ajustar el tamaño y de recortar la imagen:

Hay varios modos de ajustar el tamaño y de recortar la imagen:

En el diseño Pila, las imágenes se amplía automáticamente para ocupar todo el ancho del bloque.

Hay varios modos de ajustar el tamaño y de recortar la imagen:

Modificar el estilo del Bloque de imagen

Algunos diseños tienen sus propias configuraciones de estilo para las fuentes, los colores y los botones.

Para encontrar estas opciones:

En el Menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio.

IncorporadoPósterTarjetaSuperposiciónCollagePila

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 ajuste 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 ajuste 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 ajuste 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 ajuste 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 ajuste 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.
  • Excepto con los diseños Incorporado y Apilado, las leyendas conservan su ancho establecido con relación a la imagen. Esto significa que las leyendas más largas pueden ser más difíciles de leer.
  • 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.

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 para crear filas y columnas. Si deseas informarte mejor, consulta Mover bloques.
  • Usa el Editor de imágenes para recortar, rotar o añadir filtros a las imágenes.
  • Reemplaza la imagen con un clic en Borrar, en la pestaña Contenidos 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 anuncio con el bloque, muévelo a la parte superior de la página. Para informarte mejor, visita Añadir una imagen de banner.
  • Borra el bloque.

Preguntas frecuentes

La imagen está de costado

Si el archivo de la imagen aparece de costado cuando lo subes, aparecerá así en tu sitio. Para rotar la imagen, usa el Editor de imágenes.

Cuando las subo, mis imágenes tienen otros colores

Si una imagen está guardada en modo CMYK, en lugar de en modo RGB, sus colores en tu sitio de Squarespace pueden diferir de lo que ves 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.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 47 de 155
Usar Bloques de imágenes