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 el Bloque de Imagen

El Image Block (Bloque de Imagen) agrega una sola imagen a una página o una publicación de blog. Puedes cambiar el tamaño y organizar múltiples Bloques de Imagen para crear diseños de página únicos. Usar este bloque es una excelente manera de dividir el texto y personalizar el sitio.

Nota: El límite de tamaño para cargar un archivo desde el Bloque de Imagen es de 20 MB. Te recomendamos usar imágenes que tengan entre 1500 y 2500 píxeles de ancho. Para obtener más información sobre las mejores prácticas para trabajar con imágenes, consulta Ajustar el formato de las imágenes para exhibirlas en la web.
Nota: Otras formas de añadir imágenes al sitio incluyen las imágenes de cabecera, las imágenes de fondo, los Bloques de Galeríay las Páginas de Galería.

Paso 1 - Agrega el Bloque de Imagen

  1. Abre una página o un editor de publicación.
  2. Haz clic en un punto de inserción o en el signo +.
  3. Selecciona Image (Imagen) del menú.
  4. Para conocer los pasos detallados, visita Añadir bloques.

Paso 2 - Añade una imagen

Opción 1 - Agrega tu propia imagen

En la ventana de Edit image (Editar imagen) , arrastra la imagen al cargador de imágenes. También puedes hacer clic en el cargador de imágenes para seleccionar un archivo del equipo. Haz clic en Apply (Aplicar).

Opción 2 - Usa una imagen de Getty Images

Gracias a nuestra alianza con Getty Images, puedes licenciar una imagen individual presideñada por $10. Es una opción genial si no tienes una imagen para usar.

Haz clic en Getty Images para buscar, realizar una vista previa y comprar una imagen prediseñada para la miniatura. Para obtener más información, consulta Getty Images y visión general de Squarespace.

Paso 3 - Personaliza la imagen

Después de añadir una imagen al Bloque de Imagen, sigue la secciones que empiezan aquí para personalizarlo. Hay muchas maneras de personalizar el Bloque de Imagen dependiendo del diseño que quieres lograr, incluso:

Paso 4 - Guarda

Haz clic en Apply (Aplicar) para guardar los cambios en el bloque.

Paso 5 - Cambia el tamaño y mueve el Bloque de Imagen

Después de guardar la imagen, arrastra y suelta el bloque en cualquier lugar de la página. También puedes utilizar este método para ajustar el texto alrededor de la imagen. Para obtener más información, consulta Mover bloques.

Para cambiar el tamaño de la imagen en relación con otro contenido de la página, consulta Ajustar el tamaño de una imagen.

Estirar y rellenar el espacio en blanco

Si la imagen es más estrecha que el área de contenido, la imagen conservará su ancho y verás 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 mostrar la imagen en todo el ancho del bloque, activa Stretch (Estirar). Estirar una imagen puede afectar a la calidad de imagen.

Establecer que la imagen se abra en lightbox

Activa la casilla Lightbox para mostrar la imagen en un lightbox cuando haces clic.

Las leyendas se ven en lightbox aun cuando está configurado Do Not Display Caption (No mostrar leyenda). Usar lightboxes desactiva los enlaces de URL.

Ajusta el estilo del lightbox eligiendo Dark Overlay (Capa oscura) o Light Overlay (Capa clara) desde el menú desplegable. 

Conectar la imagen mediante un enlace URL

Puedes convertir la imagen en un enlace si agregas un enlace URL.

Añadir texto como leyenda y como texto alternativo

Las leyendas son una gran manera de mostrar el nombre del artista, dar crédito a un medio de comunicación o mostrar el título de la imagen. Las leyendas se usan como texto alternativo de la imagen.

Las leyendas no son recomendables para bloques de texto largos.

Ajustar el texto

Para agregar una leyenda/texto alternativo, aplica cualquier cambio en el bloque y luego haz clic en Write here... (Escribe aquí...) debajo de la imagen e ingresa el texto.

Configurar la visualización

Para cambiar dónde se mostrará la leyenda, haz doble clic en el Bloque de Imagen para abrir el editor. Puedes seleccionar:

  • Do Not Display Caption (No mostrar la layenda) - No se mostrará la leyenda en la página a menos que la imagen se muestre en lightbox.
  • Caption Below (Leyenda debajo) - La leyenda aparece debajo de la esquina inferior izquierda de la imagen.
  • Caption Overlay (Leyenda Superpuesta) - La leyenda aparece sobre la imagen en una barra overlay (superpuesta) de color gris oscuro.
  • Caption Overlay on Hover (Leyenda superpuesta cuando posicionas el cursor sobre el elemento) - Cuando posicionas el cursor sobre la imagen, la leyenda aparece en una barra superpuesta de color gris oscuro.
Consejo: Para usar el texto alternativo, pero no la leyenda, agrega el texto y configura la opción en Do Not Display Caption (No mostrar leyenda).

Dar estilo al texto

Para la mayoría de las plantillas, el texto de leyenda tiene el mismo estilo de fuente y de color que el cuerpo de texto del sitio.

En las plantillas Skye, Foundry y Tudor, usa los ajustes Image & Gallery Block Captions (Leyendas del Bloque de Imagen y de Galería) para establecer la fuente y el color de la leyenda.

Editar la imagen con el Editor de imagen Adobe Creative Cloud

Haz clic en Edit (Editar) para girar, cortar o añadir filtros a la imagen con el editor de imagen Adobe Creative Cloud.

Elimina la imagen del bloque

Para eliminar la imagen sin necesidad de quitar el bloque, haz clic en Remove (Quitar) en el Editor del Bloque de Imagen.

Preguntas frecuentes

¿Cómo puedo cambiar el tamaño de las imágenes en el Bloque de Imagen?

Puedes cambiar el tamaño de los Bloques de Imagen si los recortas o si utilizas bloques adicionales. Para conocer cómo hacerlo, consulta Ajustar el tamaño de una imagen.

¿Puedo añadir texto alternativo?

Sí. Para agregar texto alternativo, agrega una layenda a la imagen, siguiendo los pasos de esta guía. Las leyendas actúan como el texto alternativode la imagen, incluso si has seleccionado que no se muestre la leyenda.

Para usar el texto alternativo, pero no mostrar ua leyenda, agrega el texto y configura la opción en Do Not Display Caption (No mostrar leyenda).

¿Puedo dar estilo a las leyendas?

Cuando la leyenda se establece en Caption Below (Leyenda debajo), por lo general tiene el mismo color y fuente que el texto normal.

En las plantillas Skye, Foundry y Tudor, usa los ajustes Image & Gallery Block Captions (Leyendas del Bloque de Imagen y de galería) para establecer la fuente y el color de la leyenda.

No puedo añadir letras minúsculas a las leyendas en la plantilla Five.

Las layendas que se agregan al los Bloques de Imagen en la plantilla Five siempre van a estar en mayúsculas. Ya que las leyendas de la plantilla Five son bastante pequeños por defecto, esto ayuda a que las leyendas sean más visibles. 

Los enlaces a las imágenes son de un color equivocado.

Esto suele suceder cuando el Bloque de Imagen tiene un enlace de URL un enlace en las leyendas. Para resolver el problema, utiliza uno u otro.

Cuando hago clic en una imagen, ¿se puede abrir en una nueva pestaña?

Sí. Puedes hacer esto si agregas un  enlace URL.

La imagen continúa apareciendo recortada.

Lo más probable es que esto sea el resultado de usar el controlador inferior o lateral para modificar el tamaño de la imagen. Para restablecer la imagen a las dimensiones originales, haz doble clic en el controlador de recorte circular en la parte inferior.

La imagen está de costado.

Esto puede ocurrir si la imagen original fue tomada de costado y se carga directamente sin girarla en un programa de edición de imágenes antes.

Para girar la imagen, puedes utilizar el editor de imagen Adobe Creative Cloud. También puedes editarla en un programa externo que elijas y volver a cargarla.

Mis imágenes aparecen en diferentes colores.

Esto ocurre cuando una imagen se guarda en modo CMYK en lugar de en modo RGB .

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 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.

¿Cuál es el tamaño de archivo recomendado?

Mientras que el Bloque de Imagen tiene un límite de tamaño de archivo de 20 MB, recomendamos mantener las imágenes en un tamaño menor a 500 KB para obtener los mejores resultados. Para obtener más información, 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: 21 de 67
Usar el Bloque de Imagen