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 galería

Usa Bloques de galería para añadir galerías de imágenes y videos a páginas y publicaciones de blog en una variedad de diseños. Puedes subir imágenes, incrustar videos, obtener imágenes de stock con licencia o mostrar contenidos de una Página de Galería existente.

Si deseas informarte sobre cómo configurar los Bloques de galería en tu sitio, sigue los pasos de esta guía. Para preguntas frecuentes, consulta Preguntas frecuentes sobre los Bloques de galería.

In version 7.1, you can only add Gallery Blocks to blog posts, product items, and individual events. To add galleries to pages, use gallery sections.

Mira el video

Añadir un Bloque de galería

Para añadir un Bloque de galería:

  1. Presiona Editar en una página o en una publicación.
  2. Presiona un punto de inserción. Si necesitas más detalles sobre estos primeros pasos, consulta Agregar bloques.
  3. En Galería, selecciona PresentaciónCarruselCuadrícula, o Apilado.

Opciones del Bloque de galería en el menú del bloque.

  1. Usa la pestaña Contenidos para añadir imágenes y videos.
  2. Usa la pestaña Diseño para cambiar el diseño y personalizarlo.
  3. Haz clic en Aplicar para guardar tus cambios.

Añadir imágenes y videos

En la pestaña Contenidos del editor del Bloque de galería, puedes subir imágenes, añadir imágenes de stock, incrustar videos o mostrar los contenidos de una Página de Galería existente. También puedes reutilizar una imagen de stock o una que hayas subido a otras áreas de tu sitio.

Para informarte mejor sobre nuestras mejores prácticas para subir imágenes, consulta Ajustar el formato de tus imágenes para mostrarlas en la web o ve nuestra serie de videos Todo sobre las imágenes.

Limitaciones

  • Puedes añadir hasta 250 imágenes y videos.
  • Cuanto más contenido agregues, más lento cargará la página. Esto es especialmente así para los dispositivos móviles con capacidad de procesamiento limitada. Para disminuir el tamaño de la página, siempre se pueden crear múltiples galerías en varias páginas.

Opción 1 - Agrega tus propias imágenes

En el editor de Bloques de galería, arrastra múltiples imágenes al cargador de imágenes. También puedes hacer clic en el cargador de imágenes para abrir un menú de selección de archivos.

Opción 2: Buscar imágenes de stock

Haz clic en el icono +, en la esquina superior derecha y, luego, haz clic en Buscar imágenes. Según el tamaño de tu navegador, podrías tener que desplazarte para ver el ícono +.

Para conocer más, visita Buscar y agregar imágenes de stock.

Opción 3: Añadir videos

Puedes incrustar videos desde los servicios de alojamiento. Los videos no se pueden subir directamente. Actualmente, se admiten direcciones URL directas de YouTube, Vimeo, Wistiay Animoto. Para otros servicios, usa códigos para insertar. Para informarte mejor, consulta Elegir la opción correcta para insertar videos.

Para añadir un video:

  1. Haz clic en el icono +, en la esquina inferior derecha y, a continuación, en Video.
  2. En la ventana de Editar video, pega la URL del vídeo en la casilla Introducir una URL integrable aquí . También puedes hacer clic en el icono </> y pegar el código para insertar del video en la ventana Insertar datos que aparecerá.
  3. Puedes agregar una imagen en miniatura personalizada para mostrar sobre el video antes de que lo reproduzca quien visita el sitio. Algunos videos tienen una imagen que los archivos del Bloque de Galería cargan, pero puedes eliminar esta imagen y cargar una nueva.
  4. Para utilizar imágenes en miniatura personalizadas, marca Utilizar miniaturas.
  5. Luego de que hayas terminado, haz clic en Guardar.

Opción 4: Usar una galería existente

Los Bloques de galería pueden mostrar las imágenes y los videos que has añadido a una Página de Galería existente.

Para mostrar los contenidos de una Página de Galería, haz clic en Usar Galería existente y, a continuación, selecciona la Página de Galería que quieres usar.

Diseños del Bloque de galería

Estos son algunos ejemplos de cada diseño del Bloque de galería. Puedes cambiar el diseño en la pestaña Diseño del Bloque de galería. Cuando selecciones un diseño, verás su vista previa en la página.

PresentaciónCarruselCuadrículaApilado

Los Bloques de galería en presentación muestran los elementos en un formato de presentación. Los visitantes pueden hacer clic para pasar los elementos, o la presentación puede reproducirse de manera automática. Se muestra un elemento a la vez.

Ejemplo de Bloque de galería en modo presentación.

Los Bloques de galería en carrusel muestran los elementos en una banda horizontal. Los visitantes pueden hacer clic para que pasen los elementos, o el carrusel puede desplazarse de manera automática. La cantidad de elementos que aparecen al mismo tiempo depende del tamaño del bloque.

Ejemplo de Bloque de galería en carrusel.

Los Bloques de resumen en cuadrícula muestran los elementos en una cuadrícula pareja. Los elementos de diferentes longitudes tienen un espacio entre ellos.

Ejemplo de Bloque de galería en cuadrícula.

Los Bloques de galería apilados muestran los elementos en una sola columna con un pixel de espacio entre los elementos. Los elementos cubren todo el ancho del bloque. Este diseño es menos personalizable y no tiene opciones de relación de aspecto ni controles de navegación.

Ejemplo de Bloque de galería apilado.

Personalizar el diseño

En la pestaña Diseño de los Bloques de galería, puedes personalizar el diseño y el comportamiento del bloque. A medida que ajustas las configuraciones, verás una vista previa de los cambios que introduzcas en la página. Tus opciones dependen del diseño.

PresentaciónCarruselCuadrículaApilado

Estas son las opciones de diseño para los Bloques de galería en modo presentación:

Opción del diseño Usa estas opciones con los siguientes fines
Transición automática entre las diapositivas

Cambia la presentación automáticamente a la siguiente imagen después de un periodo de tiempo determinado. Cuando se activa, aparecerá un control deslizable para ajustar el tiempo de transición de 1 a 10 segundos.

Reproducir un video desactiva esta configuración. Si la persona que visita el sitio reproduce el video, deberá hacer clic en la flecha de siguiente para ver el próximo elemento de la galería.

Mostrar los controles Siguiente y Anterior

Añadir flechas para la navegación. Los controles aparecen como superposiciones a la izquierda y a la derecha de la imagen o del video principal.

Si tu galería contiene videos y has marcado Transición automática entre diapositivas, te recomendamos marcar esta configuración.

Recortar imágenes automáticamente

Recortar las imágenes o cambiar su tamaño para obtener el mejor diseño.

Si no está marcada:

  • La imagen o el video más ancho ocupa todo el ancho del bloque. Se cambia la altura para conservar su relación de aspecto.
  • Se modifica el tamaño de todas las demás imágenes y videos para que tengan la misma altura que la imagen o el video más ancho.
  • Se conservan las relaciones de aspecto.
Si está marcada:
  • La imagen o el video más ancho ocupa todo el ancho del bloque. Se conserva la relación de aspecto con su altura.
  • Se modifica el tamaño de todas las demás imágenes y videos para que tengan la misma altura y el mismo ancho que la imagen o el video más ancho.
Mostrar miniaturas

Añadir una banda con imágenes en miniatura de todas las imágenes y los videos a la galería debajo de la imagen principal.

Si está seleccionada, aparecen controles deslizantes para configurar la altura de la banda de miniatura y la distancia entre la banda de miniatura y la imagen principal.

Mostrar título y descripción

Mostrar títulos y descripciones de imágenes según lo definido en las configuraciones de cada imagen.

Si está seleccionado, aparecen más opciones para configurar la ubicación y para mostrarla solo cuando se posiciona el cursor sobre ellas.

Fondo transparente Eliminar el color gris detrás de las imágenes que no están recortadas. Esta opción solo aparece cuando no se ha seleccionado Recortar las imágenes automáticamente.
Abrir enlaces en una nueva ventana Abrir las URL clickthrough en pestañas nuevas con un clic.

Altura de la presentación

La altura de los Bloques de galería en modo presentación se configura de acuerdo con la altura de la imagen más ancha. El bloque considera que la imagen más ancha es la que tiene la relación de aspecto más ancha.

Este es un ejemplo de dos imágenes que podrías subir al Bloque de galería. Una de ellas tiene una proporción mayor de ancho:altura y la otra es más ancha en píxeles:

Comparación de imágenes con diferentes proporciones de ancho:altura.

La imagen con la proporción mayor de ancho:altura fija la altura del bloque:

La imagen con la proporción mayor de ancho:altura establece la altura del Bloque de galería en modo presentación.

Para configurar la altura de la galería, verifica que la imagen con la relación de aspecto más ancha tenga la altura que deseas. Por ejemplo, para reducir la altura de toda la galería, podrías recortar la imagen con la relación de aspecto más ancha para hacerla más corta.

Estos son algunos consejos adicionales para ajustar la altura:

  • Para ayudar a predecir la altura de tu galería y para mantener uniformes los tamaños de tus imágenes, considera usar un editor de imágenes de terceros para recortar las imágenes con el fin de que tengan la misma relación de aspecto antes de subirlas.
  • Para las imágenes de stock o las imágenes que ya has cargado, recórtalas con el Editor de imágenes integrado.
  • Elige si todas las imágenes de la presentación se mostrarán con la misma relación de aspecto marcando Recortar automáticamente las imágenes en la pestaña Diseño. 
  • Para informarte mejor sobre las relaciones de aspecto, consulta Comprender las relaciones de aspecto.

Estas son las opciones de diseño para los Bloques de galería en carrusel:

Opción del diseño Usa estas opciones con los siguientes fines
Transición automática entre las diapositivas

Haz que la galería cambie automáticamente al siguiente elemento después de un tiempo específico (entre 1 y 10 segundos).

Reproducir un video desactiva esta configuración. Si la persona que visita el sitio reproduce el video, deberá hacer clic en la flecha de siguiente para ver el próximo elemento de la galería.

Mostrar los controles Siguiente y Anterior

Añadir flechas para la navegación. Los controles aparecen superpuestos a la izquierda y a la derecha de la publicación principal.

Si tu galería contiene videos y has marcado Transición automática entre diapositivas, te recomendamos marcar esta configuración.

Abrir enlaces en una nueva ventana Hacer que las URL clickthrough se abran en pestañas nuevas.

Estas son las opciones de diseño para los Bloques de galería en cuadrícula:

Opción del diseño Usa estas opciones con los siguientes fines
Relación de aspecto Cambiar la forma de las imágenes y los videos. Cuadrado 1:1 está seleccionado por defecto.
Recortar imágenes

Eliminar el relleno, y mostrar las imágenes y los videos con la relación de aspecto seleccionada.

Si no está seleccionado, se estandariza la altura de cada fila según la imagen o el video más alto. Según la relación de aspecto seleccionada, tal vez veas espacios no uniformes, especialmente si se ha configurado la cuadrícula en una miniatura por fila.

Mostrar título

Mostrar títulos debajo de las imágenes.

Cuando se abren las imágenes en una lightbox, los títulos y las descripciones aparecen cuando se posiciona el cursor sobre estos.

Miniaturas por fila Configura la cantidad de miniaturas en una fila. Aumentar la cantidad disminuye el tamaño de cada miniatura.
Relleno Ajustar el relleno/los márgenes entre cada imagen o video. Mover el control deslizante a 0 elimina el relleno.
Lightbox

Si está seleccionado, hacer clic en una imagen o video lo mostrará en un lightbox en modo presentación con un fondo negro o blanco. Se desactivarán las URL clickthrough.

Usar el menú desplegable de Tema de lightbox para elegir si el fondo del lightbox será negro o blanco.

Abrir enlaces en una nueva ventana Abrir las URL clickthrough en pestañas nuevas con un clic.

Estas son las opciones de diseño para los Bloques de galería apilados:

Opción del diseño Usa estas opciones con los siguientes fines
Mostrar título y descripción

Mostrar el título y las descripciones debajo de cada imagen o video.

Abrir enlaces en una nueva ventana Abrir las URL clickthrough en pestañas nuevas con un clic.

Añadir el título y la descripción de las imágenes.

Los títulos y las descripciones se muestran solo en los Bloques de galería en presentación, en cuadrícula y apilado. Cada título de imagen actúa como texto alternativo, lo que puede ayudarte con la SEO y la accesibilidad.

Para añadir un título y una descripción en una imagen o video:

  1. Posiciona el cursor sobre una imagen o un video en el editor del Bloque de galería o en una Página de Galería existente.
  2. Haz clic en el icono del engranaje.
  3. Agrega un título y una descripción. Recomendamos usar términos breves que describan la imagen y estén relacionados con el contenido general del sitio.
Consejo: Si las imágenes en el Bloque de galería son de una Página de Galería existente, los títulos de las imágenes y las descripciones de la Página de Galería aparecerán automáticamente en el Bloque de galería.

El comportamiento y el aspecto del texto dependen del diseño del Bloque de galería:

PresentaciónCarruselCuadrículaApilado

Los títulos y las descripciones pueden mostrarse siempre o cuando se posiciona el cursor sobre estos. Configurar la posición en la pestaña Diseño del bloque.

En los navegadores más pequeños y en los dispositivos móviles, tal vez no aparezcan los títulos y las descripciones.

Los títulos y las descripciones no se mostrarán en el Bloque de galería en carrusel.

Los títulos aparecen debajo de las imágenes. Los títulos y las descripciones aparecen cuando se posiciona el cursor si las imágenes se abren en un lightbox, pero no aparecen para los videos que se reproducen en un lightbox.

Los títulos y las descripciones aparecen debajo de las imágenes.

Consejo: El estilo de la leyenda depende del diseño del Bloque de galería y de tu plantilla. Para conocer más, consulta Cambiar el estilo de las leyendas de imágenes.

Añadir URL clickthrough

Usa las URL clickthrough para vincular imágenes con páginas externas, contenidos internos o archivos. Esta es una excelente manera de incentivar que los visitantes hagan clic en otros contenidos, como los proyectos de los clientes, los productos o las publicaciones en los blogs. Las URL clickthrough funcionan con imágenes, pero no funcionan con videos.

Para agregar un enlace URL:

  1. Posiciona el cursor sobre una imagen o un video en el editor del Bloque de galería o en una Página de Galería existente.
  2. Haz clic en el icono del engranaje.
  3. Configura el enlace en la casilla Haz clic para añadir la URL.... Para obtener pasos detallados, consulta Usar URL clickthrough.
  4. Marca o desmarca la opción Abrir enlaces en una nueva ventana en la pestaña Diseño para controlar cómo aparecen tus enlaces.
Nota: Los Bloques de Galería tienen ciertas limitaciones con los enlaces URL:
  • En el Bloque de galería en modo presentación, la URL clickthrough anula la navegación. Si utilizas URL clickthrough y el diseño Presentación, recomendamos que marques Mostrar controles siguientes y previos en la pestaña Diseño del editor de bloques.
  • En los Bloques de galería en cuadrícula, las URL clickthrough no son compatibles cuando Lightbox está activo.

Recorta o cambia el tamaño de las imágenes

Puedes modificar el tamaño de la imagen o recortar los Bloques de galería de distintos modos. Tus opciones dependen del diseño.

PresentaciónCarruselCuadrículaApilado
  • Para recortar las imágenes automáticamente con la misma relación de aspecto, marca Recortar imágenes en la pestaña Diseño.
  • Para cambiar el tamaño de todas las imágenes, ajusta la cantidad de miniaturas por fila en la pestaña Diseño.
  • Para recortar cada imagen por separado, usa el Editor de imágenes integrado.
  • Para volver a centrar las imágenes, ajusta el punto focal de las imágenes.
  • Para reducir todo el Bloque de galería, añade bloques a cada lado.

Bloques de galería en dispositivos móviles

Los Bloques de galería pueden aparecer o comportarse de manera diferente en los dispositivos móviles que en las computadoras de escritorio, según el diseño.

PresentaciónCarruselCuadrículaApilado

Los Bloques de galería en modo presentación conservan su diseño de presentación en los dispositivos móviles:

  • Las configuraciones de navegación y transición automática que elijas en la pestaña Diseño seguirán siendo válidas. Las URL clickthrough funcionan cuando se las toca.
  • Los títulos y las descripciones no aparecerán en las pantallas de menos de 480 píxeles de ancho. Esto incluye a la mayoría de los teléfonos inteligentes cuando se los sostiene en posición vertical.
  • Tal vez aparezcan los títulos y las descripciones (incluidas las leyendas que aparecen cuando se posiciona el cursor) en posición horizontal en los dispositivos más grandes, como las tabletas. Esto depende del dispositivo.

Los Bloques de galería en carrusel conservan su diseño de carrusel en los dispositivos móviles:

  • Según tus imágenes, tal vez aparezca una sola imagen por vez.
  • Las configuraciones de navegación y transición automática que elijas en la pestaña Diseño seguirán siendo válidas. Las URL clickthrough funcionan cuando se las toca.

Los Bloques de galería en cuadrícula aparecen como cuadrículas de dos columnas de ancho en los dispositivos móviles:

  • Sigue vigente la relación de aspecto que hayas seleccionado en la pestaña Diseño.
  • Los lightboxes aparecen si los activas.
  • Cuando los lightboxes están desactivados, las URL clickthrough funcionan si se las toca.
  • Mientras estás en un lightbox, toca el círculo en la esquina inferior derecha para mostrar el título y la descripción de una imagen.

Tocar el círculo para mostrar el texto de una imagen en un lightbox, en dispositivos móviles.

Los Bloques de galería apilados aparecen y se comportan de igual modo en los dispositivos móviles.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 121 de 306
Usar Bloques de galería