Visión General de los Bloques de Imagen

Los Bloques de Imagen añaden imágenes individuales a las páginas y publicaciones del blog. Puedes subir tus propias imágenes o adquirir licencias para imágenes de Getty Images.

Hay seis diseños del Bloque de Imagen y su diseño y comportamiento se mantiene consistente en todas las plantillas.

Nota: Los estilos de la leyenda en el diseño Alineado los determina tu plantilla.

Consejo: Otras formas de añadir imágenes al sitio incluyen las imágenes de cabecera, las imágenes de fondo, los Bloques de Galería y las Páginas de Galería.

Mira el video

Comparación del Bloque de Imagen

Aquí tienes una descripción de las diferencias entre los seis diseños del Bloque de Imagen, con un ejemplo de cómo se puede ajustar el estilo de cada uno.

Poster (Póster)

El Bloque de Imagen de Póster muestra el texto sobre la imagen.

Card (Tarjeta)

El Bloque de Imagen Tarjeta alinea el texto a la izquierda o a la derecha de una imagen.

Overlap (Superpuesta)

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.

Collage (Collage)

El Bloque de Imagen Collage muestra una imagen a un lado y texto sobre una "tarjeta" de fondo, que desplaza y se superpone a la imagen.

Apilada

El Bloque de Imagen Apilado muestra una imagen con texto debajo, con un color de fondo opcional.

Inline (Alineado)

El Bloque de Imagen Alineado muestra una imagen simple con una leyenda opcional (nuestro Bloque de Imagen clásico).

Mézclalos y combínalos

Puedes mezclar y combinar varios estilos de Bloques de Imagen en una página o publicación.

Cada diseño tiene sus propias opciones de estilo.
Las opciones de estilo de diseño son universales para el sitio. Por ejemplo, cada Bloque de Imagen Póster de tu sitio tendrá el mismo estilo.

Leyendas frente a títulos y subtítulos

The Inline layout supports one basic caption. This is best for displaying an artist name, crediting a media outlet, or displaying the image title. Learn about caption style options, which are set automatically.

Note: Captions won't display if the Image Block is empty.

Todas las demás leyendas ofrecen campos para títulos y subtítulos. Tienen más opciones de estilo y enfatizan más el texto, creando más interacción entre la imagen y las palabras. Para más información, visita las guías para los diseños Póster, Tarjeta, Superpuesta, Collage y Apilada.

Los estilos de diseños tienen diferentes ventajas:

Inline (Alineado)	Todos los demás diseños
Un campo de leyenda Los estilos de texto se establecen automáticamente (en general después del texto del cuerpo) Se pueden mostrar al posicionar el cursor encima La leyenda se convierte automáticamente en texto alternativo	Dos campos de texto: un título y un subtítulo Cambia el estilo del texto en el Editor de Estilo Diferentes opciones de visualización según el diseño Añade el texto alternativo manualmente

Paso 1 - Agrega el Bloque de Imagen

Para añadir cualquier Bloque de Imagen:

Abre una página o un editor de publicación.
Haz clic en un punto de inserción o en el signo +.
Bajo Image Layouts (Diseños de Imagen), selecciona Poster (Póster), Card (Tarjeta), Overlap (Superpuesta), Collage (Collage) o Stack (Apilada). Para el diseño Inline (Alineado), selecciona Image (Imagen) en la sección Basic (Básico).

Paso 2 - Añade una imagen

Consejo: Te recomendamos mantener tus imágenes por debajo de 500 KB para obtener mejores resultados. Para conocer más, visita Ajustar el formato de las imágenes para exhibirlas en la web.

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 - Añade y cambia el estilo del texto (opcional)

Haz clic en Write here (Escribir aquí) para añadir una leyenda o un título y subtítulo a la imagen.

Los campos de texto y las opciones de estilo varían según el diseño:

Los diseños de Póster, Tarjeta, Superposición, Collage y Apilado tienen opciones de estilo en el Editor de Estilo. También soportan botones.
El estilo de leyenda para el diseño Alineado se establece automáticamente (en general después del cuerpo del texto).

Para la mejor visualización, mantén el texto 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.

Consejo: También puedes crear un texto alternativo para ayudar a los motores de búsqueda a reconocer tu imagen.

Paso 4 - Ajusta la configuración del diseño

En la pestaña Design (Diseño):

Para el diseño Alineado, ajusta el aspecto de la leyenda, la configuración de lightbox y los enlaces URL.
Para los diseños de Póster, Tarjeta, Superpuesta, Collage o Apilada, usa el menú desplegable Image Link (Enlace de Imagen) para añadir un botón o enlace URL.
Configura la Image Position (Posición de la Imagen) para los diseños Tarjeta, Superpuesta o Collage.

Paso 5: Guarda

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

Paso 6 - Personaliza el diseño

Los Bloques de Imagen Póster, Tarjeta, Superpuesta, Collage y Apilada tienen su propia configuración de estilo en el Editor de Estilo. Cambiará la vista previa de la imagen en tu página para que puedas ver los cambios en tiempo real. Te recomendamos probar los diferentes ajustes hasta que encuentres el diseño que te guste.

Para conocer más, visita nuestras guías de diseño:

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

Solo el diseño Alineado soporta lightbox. Para que la imagen se abra en lightbox:

Haz doble clic en la imagen para abrirla en el editor de imagen.
Haz clic en la pestaña Diseño .
Asegúrate de que el diseño esté configurado como Alineado.
Marca la opción Habilitar Lightbox.
Elige el estilo de tu lightbox con el menú desplegableTema del Lightbox.

Nota: Las leyendas siempre se muestran en lightbox. Una lightbox anula el enlace URL.

Editar la imagen con el Editor de imagen Adobe Creative Cloud

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

Elimina o reemplaza la imagen

Para eliminar el bloque, haz clic en el ícono de la papelera de reciclaje en la página o en el editor de la publicación.

Para eliminar la imagen sin quitar el bloque, abre el Editor del Bloque de Imagen y haz clic en Remove (Eliminar). Entonces podrás reemplazarla con otra imagen.

Cambia el diseño

Puedes cambiar el diseño a uno diferente en la pestaña Diseño del Editor del Bloque. De esta manera, podrás cambiar el diseño y el comprotamiento de tu imagen sin eliminar y volver a añadir el bloque.

Haz doble clic en el editor de página.
Haz clic en la pestaña Diseño .
Selecciona el nuevo diseño.
A medida que haces una selección, la vista previa de la imagen en tu página cambiará para que puedas ver los cambios en tiempo real.

Consejo: Cuando cambies entre el diseño Alineado y otro diseño, tendrás que volver a ingresar el texto de la imagen.

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

Hay dos maneras de crear enlaces en el Bloque de Imagen:

Convierte a la imagen misma en un enlace.
Añade un botón debajo del título y subtítulo (todos los diseños, excepto Inline [Alineado])

Diseño Alineado

Añade un enlace URL desde la pestaña Design (Diseño) del editor de bloques para crear un enlace en tu imagen.

Habilitar una lightbox desactiva los enlaces URL.
El diseño alineado no soporta botones.

Todos los demás diseños

En la pestaña Design (Diseño) del editor de bloque, crea un enlace desde el menú desplegable Image Link (Enlace a Imagen). Elige entre:

None (Ninguno): sin enlace
On Image (En la imagen): toda la imagen se convierte en un enlace URL
Button (Botón): Añade un botón alineado con el texto, por debajo del título y el subtítulo

Usa el campo Clickthrough URL (Enlace URL) para configurar el enlace para la imagen o botón. Puedes crear un enlace de tu imagen con otra página de tu sitio, un sitio externo o un archivo.

Usa el Editor de Estilo para personalizar el botón. Desplázate hasta la sección para que el diseño se adapte a estos ajustes:

Button Font (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)
Button Border Color (Color del Borde del Botón): ajusta el color del borde establecido con el ajuste Button Border Width (Ancho del Borde del Botón)
Button Border Width (Ancho del Borde del Botón)
Button Padding (Relleno del Botón)
Button Rounding (Redondeado del botón)
Button Separation (Separación del Botón): ajusta la posición del botón

Reajusta el tamaño o recorta la imagen

Para todos los diseños:

Añade bloques a cualquier lado para reducir todo el Bloque de Imagen.
Para recortar la imagen original, usa el Editor de Imagen Adobe Creative Cloud o un software de terceros.

Cada diseño tiene opciones adicionales para recortarlo y ajustar el tamaño:

Crear todo el texto

El texto alternativo ayuda a que los motores de búsqueda reconozcan tu imagen.

Las leyendas añadidas en el diseño alineado se convertirá en texto alternativo para la imagen. Para añadir un texto alternativo, pero no una leyenda, añade el texto de la leyenda, y seleccione Do Not Display Caption (No Mostrar la Leyenda).

Para todos los demás diseños, las leyendas no se convierten en texto alternativo, pero aún puede configurarlo manualmente en el diseño alineado:

Abre el editor de bloque.
En la pestaña Design (Diseño), elige el diseño Inline (Alineado).
Usa el campo leyenda para añadir el texto alternativo.
Cambia a cualquier otro diseño y añade cualquier texto que quieras mostrar en la leyenda. El texto que añadiste en el diseño Alineado continuará como texto alternativo.

Consejo: Si no ves el texto Write here (Escribe aquí) con el diseño alineado, cambia temporalmente el diseño de la leyenda a Caption Below (Leyenda Debajo) en la pestaña Design (DIseño).

Usa una imagen como cabecera de página

Para consejos sobre cómo usar un Bloque de Imagen como cabecera de página, visita Añadir una imagen de cabecera.

Bloques de imagen en móvil

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.

Excepto con los diseños Alineado y Apilado, las leyendas conservan su ancho establecido con relación a la imagen. Esto significa que las leyendas más largas pueden ser díficiles de leer.
Para ver cómo lucirá tu Bloque de Imagen, usa la Vista de Dispositivo.
Varios Bloques Verticales se alinean verticalmente en móviles.
Los diseños de Tarjeta, Collage, Superpuesto y Apilado tienen la opción Tamaño de Fuente Dinámico en el Editor de Estilo. Cuando está habilitada, no se ajustará el tamaño del texto a menos de 14 pixeles.

Preguntas frecuentes

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 o editarla en un programa externo y volver a cargarla.

Mis imágenes aparecen en colores diferentes

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.