Usar imágenes en el contenido de HubSpot

Puedes agregar imágenes a módulos de texto enriquecido o módulos de imágenes en el contenido de HubSpot. Los módulos de texto enriquecido admiten múltiples tipos de contenido (imágenes, texto, CTA, etc.), mientras que cada módulo de imagen solo puede contener una sola imagen. 

Nota: los módulos de texto y los módulos de texto enriquecido personalizados en el editor de correo electrónico arrastrar y soltar no pueden contener imágenes. 

Agregar imágenes

• Navega a tu contenido:

  • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas de sitio web.
  • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • Blog: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Blog.
  • Base de conocimientos: En tu cuenta de HubSpot, dirígete a Servicio al cliente > Base de conocimientos.

• • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correo.
• Coloca el cursor sobre tu contenido y haz clic en Editar. 

Nota: solo se pueden agregar archivos de imagen .png, .ico, .bmp, .jpg y .gif a correos electrónicos de marketing.

• Insertar una imagen: 
  • Para agregar una imagen a un módulo de texto enriquecido, haz clic en el módulo de texto enriquecido y luego haz clic en el icono de imagen  insertImage ici en la barra de herramientas de texto enriquecido.
  • Para agregar una imagen a un módulo de imagen, haz clic en el módulo de imagen y luego en Reemplazar en el editor de la barra lateral sobre la imagen del marcador de posición. 
• Selecciona una imagen: 
  • Para insertar una imagen existente, haz clic en la imagen en el panel derecho.

• • Para cargar una nueva imagen desde tu computadora o mediante URL de archivo, haz clic en Agregar imagen en el panel derecho. Para crear una nueva imagen con herramientas de edición de Canva, haz clic en Diseñar con Canva. Luego haz clic en la imagen para insertarla.

Antes de insertar una imagen, puedes optimizar la imagen para el tiempo de carga o resolución haciendo clic en Detalles en la imagen en el panel derecho. Haz clic en el menú desplegable Optimización de imágenes y selecciona una opción de optimización: 

• • Alta: la imagen se cargará con una resolución más alta, pero con un mayor tiempo de carga.
  • Predeterminada: la imagen se optimizará tanto para la resolución como para el tiempo de carga.
  • Baja: la imagen se cargará a una resolución más baja, pero con un menor tiempo de carga. Más información sobre cómo optimizar las páginas para el tiempo de carga en nuestra documentación para desarrolladores. 

Editar imágenes

Una vez que hayas agregado una imagen a tu contenido, puedes editar su tamaño, agregar texto alternativo, agregar un enlace o establecer su comportamiento de carga. 

Editar una imagen en un módulo de texto enriquecido 

• Navega a tu contenido:

  • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas de sitio web.
  • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • Blog: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Blog.
  • Base de conocimientos: En tu cuenta de HubSpot, dirígete a Servicio al cliente > Base de conocimientos.
  • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correo.
• Coloca el cursor sobre tu contenido y haz clic en Editar. 
• En el editor de contenido, haz clic en la imagen para mostrar la barra de herramientas de edición de imágenes.
• Editar la imagen:  
  • Para ajustar cómo rodea el texto la imagen, haz clic en los inline íconos de alineación. 

• • Para ajustar el tamaño de la imagen, haz clic en las flechas de ancho y alto o introduce un valor en píxeles. 
  • Para ajustar el relleno alrededor de tu imagen, haz clic en el menú desplegable Espaciado o introduce un valor en píxeles alrededor de los bordes del icono de imagen.
• Para eliminar una imagen de un módulo de texto enriquecido, haz clic en la imagen y luego haz clic en el delete icono de la papelera. 

• Para reemplazar una imagen en un módulo de texto enriquecido, haz clic en la imagen y luego haz clic en el replace repl icono reemplazar y agrega una nueva imagen.

• Para vincular la imagen, agregar texto alternativo o establecer el comportamiento de carga, haz clic en la imagen y luego haz clic en el ícono del lápiz edit:
  • Para agregar un enlace a la imagen, haz clic en el menú desplegable Enlazar con en el cuadro emergente y selecciona una categoría de enlace. En el campo de abajo, escribe el destino del enlace. Más información sobre los diferentes tipos de enlaces.

• • En el campo Texto alternativo, escribe texto para describir a los motores de búsqueda y lectores de pantalla qué es la imagen. Esto mejorará la accesibilidad y el SEO de tu sitio. Más información sobre la accesibilidad del sitio web en nuestra documentación de desarrollador. 

Nota: agregar texto alternativo a una imagen no agrega ningún texto de título. El texto alternativo afecta las clasificaciones en motores de búsqueda y la accesibilidad, mientras que el texto del título aparece cuando un visitante pasa el cursor sobre la imagen.

• Para establecer el comportamiento de carga de imágenes y personalizar el tipo de enlace de imagen para los motores de búsqueda, haz clic en Avanzado. 
  • Para establecer el comportamiento de carga de imágenes, haz clic en el menú desplegable Carga de imágenes y selecciona una opción: 
    • Diferida: la imagen solo se cargará cuando el visitante llegue a esa parte de la página. Esto reduce el tiempo que tu página requiere para cargar y mejora el SEO. Por opción predeterminada, las imágenes se cargarán con esta configuración. 
    • Predeterminada: la imagen se cargará tan pronto como la página se carga. 
    • Valor predeterminado del navegador: el comportamiento de carga de la imagen se determina por la configuración del navegador del visitante. 
  • Para personalizar el tipo de enlace de imagen, en la sección Tipo de enlace, selecciona uno o más atributos: 
    
    • Regular: este enlace no está patrocinado. 
    • Sin seguir: este enlace no está asociado con tu sitio web.
    • Patrocinado: este enlace es un enlace patrocinado o un anuncio.
    • Contenido generado por el usuario: este enlace lleva a contenido generado por el usuario, como un comentario en un blog o una discusión en un foro. 
• Haz clic en Aplicar para aplicar tus cambios a la imagen.

• En la parte superior derecha del editor de contenido, haz clic en Actualizar o Publicar para establecer tus cambios en vivo. 

Editar una imagen en un módulo de imagen

• Navega a tu contenido:

  • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas de sitio web.
  • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • Blog: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Blog.
  • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correo.
• Coloca el cursor sobre tu contenido y haz clic en Editar. 
• En el editor de contenido, haz clic en el módulo de imagen.   
• Para eliminar la imagen actual, haz clic en Eliminar en la sección Imagen del editor de la barra lateral. Esto eliminará la imagen actual del módulo de imagen, pero no eliminará el módulo de la página. 

• Para reemplazar la imagen actual, haz clic en Reemplazar en la sección Imagen del editor de la barra lateral y luego agrega una nueva imagen. 
• En el campo Texto alternativo, escribe texto para describir a los motores de búsqueda y lectores de pantalla qué es la imagen. Esto mejorará la accesibilidad y el SEO de tu sitio. Más información sobre la accesibilidad del sitio web en nuestra documentación de desarrollador. 

Nota: agregar texto alternativo a una imagen no agrega ningún texto de título. El texto alternativo afecta las clasificaciones en motores de búsqueda y la accesibilidad, mientras que el texto del título aparece cuando un visitante pasa el cursor sobre la imagen.

• Establecer el tamaño de la imagen. Puedes establecer el tamaño automáticamente o estableciendo una altura y un ancho personalizados: 
  
  • Ajustar automáticamente: la imagen se escalará en tamaño para adaptarse al dispositivo en el que se está viendo. 
  • Ancho y alto exactos: la imagen se mostrará del mismo tamaño en todos los dispositivos.
• Configura un tamaño máximo: 
  • Tamaño original de la imagen: la imagen nunca aparecerá más grande que su tamaño original. 
  • Personalizado: la imagen nunca aparecerá más grande que un ancho y alto específicos establecidos en los campos ancho y alto. 
• Para establecer el comportamiento de carga de imágenes, haz clic en el menú desplegable Carga de imágenes y selecciona una opción: 
  • Diferida: la imagen solo se cargará cuando el visitante llegue a esa parte de la página. Esto reduce el tiempo que tu página requiere para cargar y mejora el SEO. Por opción predeterminada, las imágenes se cargarán con esta configuración. 

• • Valor predeterminado del navegador: el comportamiento de carga de la imagen se determina por la configuración del navegador del visitante. 
• Para agregar un enlace a la imagen, ingresa una URL de destino en el campo Enlace (opcional). Selecciona la casilla de verificación Abrir enlace en una nueva pestaña para dirigir al visitante a la URL de destino en una nueva pestaña del navegador. 

• En la parte superior derecha del editor de contenido, haz clic en Actualizar o Publicar para activar tus cambios.