Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
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 lo determinan 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.

poster.jpg

Card (Tarjeta)

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

card.jpg

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. 

overlap.jpg

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.

collage.jpg

Apilada

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

stack.jpg

Inline (Alineado)

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

inline.jpg

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.

mixed-layout.jpg

Leyendas frente a títulos y subtítulos

  • El diseño Alineado es compatible con una leyenda básica. Esta es la mejor opción para mostrar el nombre de un artista, dar crédito a un medio de difusión o mostrar el título de la imagen. Conoce las opciones de estilo de la leyenda, que se configuran automáticamente.
  • 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ósterTarjetaSuperpuestaCollageApilada. 

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:

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

image-block-menu.jpg

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

add-image.jpg

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.

add-getty-image.jpg

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:

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.

moving_a_block.gif

Ajusta el tamaño y recorta la imagen

Para reajustar el tamaño de imagen:

Cada diseño tiene sus propias opciones para cambiar el tamaño y recortar.

Establecer que la imagen se abra en lightbox

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

  1. Haz doble clic en la imagen para abrirla en el editor de imagen.
  2. Haz clic en la pestaña Design (Diseño) .
  3. Asegúrate de que el diseño esté configurado como Alineado.
  4. Marca la opción Enable Lightbox (Habilitar Lightbox).
  5. Elige el estilo de tu lightbox con el menú desplegable Lightbox Theme (Tema 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 Edit (Editar) para girar, cortar o añadir filtros a la imagen con el editor de imagen Adobe Creative Cloud.

edit.jpg

Elimina o reemplaza la imagen

Para eliminar el bloque, haz clic en el ícono del trash can (cesto de basura) 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.

remove.jpg

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.

  1. Haz doble clic en el editor de página.
  2. Haz clic en la pestaña Design (Diseño) .
  3. Selecciona el nuevo diseño.
  4. 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 (Margen del Botón)
  • Button Rounding (Redondeado del botón)
  • Button Separation (Separación del Botón): ajusta la posición del botón

button.png

Reajusta el tamaño o recorta la imagen

Para todos los diseños:

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:

  1. Abre el editor de bloque.
  2. En la pestaña Design (Diseño), elige el diseño Inline (Alineado).
  3. Usa el campo leyenda para añadir el texto alternativo.
  4. 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.

image-block-as-a-banner.png

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.
  • Cuando se habilita el ajuste Dynamic Font Sizing (Tamaño Dinámico de Fuente), el texto no tendrá un tamaño menor a 14 píxeles.

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.

 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 27 de 89
Visión General de los Bloques de Imagen