Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
CMS-Pages-Editor

Agregar imágenes a un módulo de galería de imágenes

Última actualización: enero 28, 2019

Requisitos

Marketing Hub  Professional, Enterprise
Básico
HubSpot CMS

Utiliza un módulo de galería de imágenes para mostrar imágenes en tu sitio. Descubre cómo agregar diapositivas a un módulo deslizante de imagen y personalizar tu configuración de estilo.

  • En tu cuenta de HubSpot, navega a tu blog, páginas de destino o páginas de sitio web.
  • Coloca el cursor sobre la página o post con el módulo deslizante de imagen que deseas actualizar y luego haz clic en Editar.
  • Haz clic directamente en el módulo deslizante de imagen en el editor de contenido o haz clic en el símbolo del módulo en la barra lateral izquierda y selecciona el módulo Galería de imágenes de tu lista de módulos. 
  • Haz clic en + Agregar imagen para insertar una diapositiva nueva en tu galería de imágenes.
  • Coloca el cursor sobre una diapositiva y haz clic en el ícono del lápiz para editar o agregar una imagen de diapositiva y editar su leyenda y URL
    • Haz clic en Seleccionar imagen para seleccionar una imagen de tu equipo o tu administrador de archivos.
    • Introduce cualquier texto alternativo que desees incluir. 
    • Cambia la opción Mostrar leyenda a la posición ON si deseas mostrar una leyenda debajo de esta imagen. Luego usa el editor de texto enriquecido para introducir tu leyenda.
    • Si quieres que esta imagen enlace a una página web, agrega una URL de enlace.
    • Después de haber realizado tus selecciones, haz clic en Volver a Galería de imagen.

edit-slide

  • Para eliminar una diapositiva desde tu módulo de galería de imágenes, coloca el cursor sobre una diapositiva existente y haz clic en eliminar el símbolo de la papelera.
  • Para reordenar tus diapositivas en tu módulo de galería de imágenes, haz clic en una diapositiva y arrástrala y suéltala en su lugar.

reorder%20slides

Después de agregar tus imágenes para tu galería de imágenes, puedes personalizar las opciones de tu módulo en el editor de la barra lateral izquierda:
  1. Modo de presentación: elige qué tipo de diapositivas deseas que aparezcan en la página. Puedes elegir un control deslizante estándar; un control deslizante con imágenes de miniaturas para que tus visitantes para naveguen o una galería de pantalla completa, lo que permite a los usuarios hacer clic en una imagen en miniatura para abrir una ventana de pantalla completa y navegar entre la versión de tamaño completo de tus diapositivas. 
  2. Repetir diapositivas: Cambia esta opción a la posición ON para repetir automáticamente tus diapositivas.
  3. Avance automático: Cambia esta opción a la posición ONsi quieres que tus diapositivas se desplacen automáticamente en tu página.
  4. Tiempo en segundos entre el desplazamiento automático: Usa las teclas de flecha para indicar el número de segundos entre diapositivas.
  5. Mostrar botones de navegación: Cambia esta opción a la posición ON para agregar indicadores al final del control deslizante para mostrar a los visitantes cuántas diapositivas hay y cuáles están viendo en la actualidad. 
  6. Altura variable: usa el menú desplegable para seleccionar si deseas que tu control deslizante se mantenga tan alto como la diapositiva más alta, o que cambie el tamaño automáticamente con cada imagen.
  7. Transiciones de diapositivas: elige qué efecto visual (diapositiva o desvanecimiento) te gustaría ver cuando se realice la transición entre diapositivas.
  8. Posición de la leyenda: si eliges mostrar leyendas en tus diapositivas, elige si deseas que estas leyendas se superpongan en la parte superior de tus imágenes o se muestren debajo de las imágenes. 

image-gallery

  • Haz clic en la pestaña Estilos en la parte superior del editor de módulo para acceder a tu configuración para tu módulo de galería de imágenes:
    • Personaliza la familia de fuentes, el tamaño de la fuente, el color del texto, la alineación de texto, la altura de la línea y los estilos para las leyendas de tu galería de imágenes.
    • Establece el relleno y los márgenes en torno a tus imágenes de la galería de imágenes y las miniaturas. Haz clic en la casilla de comprobación Uniforme para establecer la misma cantidad de espaciado en cada imagen.
    • Especifica el color de fondo y el estilo del módulo de la galería de imágenes. Haz clic en Aplicar para ver tus cambios reflejados en el módulo en el editor.

image-gallery-styles

  • Después de agregar tus imágenes y la configuración de estilo, haz clic en Guardar y ve a la lista del módulo
  • Haz clic en Publicar o en Actualizar para finalizar tus cambios.