CMS-Pages-Editor

Adding images to an image gallery module

Last updated: June 26, 2018

Applies to:

To add a slide to one of HubSpot's Image Slider modules:

  • In your HubSpot Marketing Basic, Professional, or Enterprise account, navigate to Marketing WebsiteBlog, Landing Pages, or Website Pages.
  • Locate the page or post containing the image slider module that you want to update, then click Edit.
  • Click directly on the image slider module in the content editor or click the module icon in the left sidebar and select the Image Gallery module from your module list. 
  • Click + Add slide to insert new slides into your image gallery.
  • Hover over a slide and click the edit icon edit tto add a slide image and edit its caption and URL:
    • Click Select image to select an image from your computer or file manager.
    • Enter any Alt text that you want to include. 
    • Switch the Show caption toggle ON if you want to display a caption below this image. Then use the rich text editor to enter your caption.
    • If you want this image to link to a webpage, add a Link URL.
    • After you've made your selections, click Back to Image Gallery.

edit-slide

  • To delete a slide from your image gallery module, hover over an existing slide and click the trash can icon delete.
  • To reorder your slides in your image gallery module, click on a slide and drag and drop it into place.

reorder%20slides

After you've added your images for your image gallery, you can customize your module options in the left sidebar editor:
  1. Display mode: choose which type of slider you'd like to appear on the page. You can choose a standard slider; a slider with thumbnail images for your visitors to navigate between; or a lightbox gallery, which allows users to click on a thumbnail to open a lightbox and navigate between the full size version of your slides. 
  2. Loop slidesswitch this toggle ON to automatically repeat your slides.
  3. Auto advance: switch this toggle ON if you want your slides to automatically scroll on your page.
  4. Time in seconds between auto-scrolling: use the arrow keys to indicate the number of seconds in between slides.
  5. Show navigation buttonsswitch this toggle ON  to add indicators to the bottom of the slider to show visitors how many slides there are and which one they're currently viewing. 
  6. Variable height: use the dropdown menu to select whether you'd like your slider to remain as tall as the tallest slide, or resize automatically with each image.
  7. Slide transitions: choose which visual effect (Slide or Fade) you'd like to see when transitioning between slides.
  8. Caption Position: if you choose to show captions on your slides, choose whether you'd like these captions to be superimposed on top of your images or displayed beneath the images. 

image-gallery

  • Click the Styles tab at the top of the module editor to access your settings for your image gallery module:
    • Customize the font family, color, line height, alignment, and styles for your image gallery captions.
    • Set the padding and margins around your image gallery images and thumbnails. Click the Uniform checkbox to set the same amount of spacing around each image.
    • Specify the background color and styling of the image gallery module itself. Click Apply to see your changes reflected on the module in the editor.

image-gallery-styles

  • After you've configured your images and settings, click Save and go to module list
  • Click Publish or Update to take your changes live. 

Was this article helpful?

If you still need help you can get answers from the , or to contact support.