Landing Pages

Insert and edit images in rich text modules

Last updated: February 26, 2021

Applies to:

All products and plans

You can insert one or more images with other types of content (text, CTAs, etc...) in a rich text module. You can then customize your image's appearance and loading behavior. Single images can also be added to the Image default module

Please note: these steps only apply to rich text modules. Text elements in the drag and drop email editor cannot contain images. 

Add an image to your content in a rich text module

Please note: only .png, .ico, .bmp, .jpg, and .gif image files can be added to marketing emails.

  • In your HubSpot account, navigate to your blog, email, landing pages, or website pages.

  • Click the name of the blog post, email, landing page, or website page to edit.

  • Click the rich text module where you want the image to appear.
  • In the upper right section of the rich text toolbar, click the image icon insertImage. im
  • In the right panel, you can:
    • Select an image from your files tool.
    • Click Add image to upload a new image from your computer or via file URL.
    • Click Design with Canva to create a new image with Canva.

Edit an image

  • To activate image style controls in the menu bar, click the image in the rich text editor.
    1. To adjust how text aligns and wraps around your image, select an Image layout.
    2. To add a link to your image, click the link icon.
    3. To adjust the size of your image, click the Width and Height arrows or enter a pixel value
    4. To adjust the padding around your image, click the Spacing dropdown menu and enter pixel value around the edges of the image icon.

editor-for-rich-text-images

  • To remove an image from a rich text module, click the image, then click the trash icon delete or press the Delete/Backspace key on your keyboard.
  • To replace the image, click the image, then click the replace icon replace and add a new image.

Edit advanced image options

You can edit advanced options for your image to add alt text, customize the image link, or control the way it loads on your page. Images in marketing emails will only support the option to add alt text. 

To make advanced edits to your image:

  • Click the image.
  • Click the pencil icon edit.
  • In the upper right of the pop-up window, click Advanced.
    • Add alt text to describe to search engines what your image is displaying.
    • If your image is linked, you can customize the link type. This tells search engines how this link relates to your website.
    • You can apply lazy loading so the image only loads if a visitor scrolls to this content on your page. To apply lazy loading to images inserted into a rich text module, in the Advanced pop-up box, click the Lazy Loading dropdown menu and select Lazy

lazy-load-for-inserted-image-1

    • Click Apply to save your advanced edits.