Visión general de los Bloques de Imagen

Los Bloques de imagen agregan imágenes separadas a las páginas y a las publicaciones de blog. Puedes subir tus propias imágenes u obtener licencias de fotografías de stock a través de nuestras integraciones con Unsplash o 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

El diseño Incorporado es compatible con una leyenda básica. Esta es la mejor opción para mostrar el nombre de un artista, para dar crédito a un medio de difusión o para mostrar el título de la imagen. Conoce las opciones de estilo de la leyenda, que se configuran automáticamente.

Nota: Las leyendas no se mostrarán si el Bloque de Imagen está vacío.

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 panel de Estilos del sitio 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 Editar imagen , arrastra la imagen al cargador de imágenes. También puedes hacer clic en Subir una imagen para seleccionar un archivo de tu computadora. Haz clic en Aplicar.

Opción 2: Usa una imagen de stock

Con nuestras integraciones de imágenes de stock, puedes agregar imágenes de stock gratuitas y premium directamente desde tu sitio. Es una opción genial si no tienes una imagen para usar.

Haz clic en Buscar imagen para buscar, acceder a una vista previa y agregar una imagen de stock a tu miniatura. Para informarte mejor, visita Cómo buscar y agregar imágenes de stock.

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 panel de Estilos del sitio. También admiten 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 de Póster, de Tarjeta, Superpuesta, Collage y Apilada tienen su propia configuración de estilo en el panel de Estilos del sitio. 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:

Agregar animación

Estamos probando nuevas opciones de animaciones en una pequeña cantidad de sitios seleccionados al azar. Si estás en este grupo, puedes agregar efectos visuales a los Bloques de imágenes. Los que visiten el sitio verán las animaciones cuando carguen o actualicen la página.

Para agregar una animación:

En cualquier editor del Bloques de imágenes, haz clic en la pestaña Animaciones. (Si no ves la pestaña Animaciones, tu sitio no se encuentra en el grupo de prueba).
Selecciona un efecto del menú desplegable del Bloque de imágenes animadas para aplicarlo en la imagen y en cualquier posible texto. Cuando selecciones una opción, verás una vista previa de cómo se cargará en la página.

Elige entre lo siguiente:

Fundido de entrada: El bloque entra con un fundido
Entrada fuera de foco: El bloque aparece borroso y, luego, se hace foco
Deslizar hacia arriba: El bloque se desliza hacia arriba
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
Personalizada: Elige animaciones especiales para la imagen y el texto

Para animar la imagen separada del texto, selecciona Personalizada, luego elige las opciones Animar imagen y Animar texto de imagen.

Elige entre lo siguiente:

Fundido de entrada: La imagen o el texto entra con un fundido
Deslizar hacia arriba: La imagen o el texto se deslizan hacia arriba
Deslizar hacia abajo: La imagen o el texto se deslizan hacia abajo
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

Las animaciones solo están disponibles en una pequeña cantidad de sitios seleccionados al azar. Como actualmente estamos probando esta función, no podemos agregarla a los sitios que no la tienen. Esperamos añadir esta función en todos los sitios próximamente.

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

Haz clic en Editar para girar, recortar o añadir filtros a la imagen con el Editor de Imágenes integrado.

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.

Utiliza el panel de Estilos del sitio 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 Imágenes 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.

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.

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 Imágenes 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.