Usar imágenes en el contenido de HubSpot

Puedes Agregar imágenes a módulos de texto enriquecido o a módulos de imágenes en Contenido de HubSpot. Los módulos de texto enriquecido admiten varios tipos de contenido (imágenes, texto, CTA, etc.), mientras que cada módulo de imagen sólo puede contener una única imagen. 

Por favor, ten en cuenta que: los módulos de texto y los módulos de texto enriquecido personalizados del Editor de correo electrónico de arrastrar y soltar no pueden contener imágenes. 

Añadir imágenes

• Ve al contenido en el que quieres añadir el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
  • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
  • Base de conocimientos: En tu cuenta de HubSpot, dirígete a Contenido > Base de conocimientos.
  • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correos de marketing.
• Haz clic en el nombre de tu contenido. 

Nota: sólo se pueden añadir archivos deimagen .png, .ico, .bmp, .jpg y .gifa los emails marketing

• Insertar una imagen: 
  • Para añadir 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 de 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 las 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, puede optimizar el tiempo de carga o la resolución de la imagen. En el panel derecho, pase el ratón por encima de la imagen y haga clic en Detalles.
• 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. Obtenga más información sobre la optimización del tiempo de carga de las páginas 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 

• Ve al contenido en el que quieres añadir el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
  • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
  • Base de conocimientos: En tu cuenta de HubSpot, dirígete a Contenido > Base de conocimientos.
  • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correos de marketing.
• Haz clic en el nombre de tu contenido. 
• En el editor de contenidos, haz clic en la imagen para mostrar la barra de herramientas de edición de imágenes.
• Edita la imagen: 
  • Para ajustar cómo se envuelve el texto alrededor de la imagen, haz clic en los iconos de alineación inline . 

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

• Para sustituir una imagen en un módulo de texto enriquecido, haz clic en la imagen , luego haz clic en el icono de sustitución replace repl y añade una nueva imagen.

• Para enlazar la imagen, añadir texto alternativo o establecer el comportamiento de carga, haz clic en la imagen , y luego haz clic en el icono 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 Alt , introduce texto para describir a los motores de búsqueda y a los lectores de pantalla qué es la imagen. También puedes añadir texto alternativo a las imágenes en la herramienta de archivos . Añadir texto alternativo mejorará la accesibilidad y el SEO de tu sitio. Obtenga más información sobre la accesibilidad de los sitios web en nuestra documentación para desarrolladores.

Nota: añadir texto alternativo a una imagen no añade el texto del 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 en vivo. 

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

• • • Valor predeterminado del navegador: el comportamiento de carga de la imagen se determina por la configuración del navegador del visitante. 
    • Predeterminada: la imagen se cargará tan pronto como la página se carga. 

• • 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. 
    • No follow: este enlace no está asociado a 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.

• Para aplicar tus cambios, haz clic en Publicar o Actualizar en la parte superior derecha, y luego haz clic en Publicar o Actualizar en el cuadro de diálogo. 

Editar una imagen en un módulo de imagen

• Ve al contenido en el que quieres añadir el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
  • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
  • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correos de marketing.
• Haz clic en el nombre de tu contenido. 
• En el editor de contenidos, 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 Alt , introduce texto para describir a los motores de búsqueda y a los lectores de pantalla qué es la imagen. También puedes añadir texto alternativo a las imágenes en la herramienta de archivos . Añadir texto alternativo mejorará la accesibilidad y el SEO de tu sitio. Obtenga más información sobre la accesibilidad de los sitios web en nuestra documentación para desarrolladores.

Nota: añadir texto alternativo a una imagen no añade el texto del 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 en vivo. 

• Para ajustar el tamaño de la imagen en diferentes dispositivos, haz clic en el menú desplegable Tamaño y selecciona una opción:
  
  • Ajustar automáticamente: la imagen escalará su tamaño para adaptarse al dispositivo en el que se vea. 
  • Altura y anchura exactas: la imagen se mostrará con el mismo tamaño en todos los dispositivos.
• Para establecer un límite al tamaño de la imagen, haz clic en el menú desplegable Tamaño máximo y selecciona una opción : 
  • 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 una anchura y altura específicas establecidas en los campos anchura y altura.  
• Para establecer el comportamiento de carga de imágenes, haz clic en el menú desplegable Carga de imágenes  y selecciona una opción : 
  • Valor predeterminado del navegador: el comportamiento de carga de la imagen se determina por la configuración del navegador del visitante. 

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

• • Ansioso: la imagen se carga lo antes posible. 
• 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.
• Para aplicar los cambios, haga clic en Publicar o Actualizar en la parte superior derecha.