Adding an image gallery module to your template showcases images on your site. Learn how to add slides to an Image Slider module and customize your style settings.
- In your HubSpot account, navigate to your blog, landing pages, or website pages.
- Hover over the page or post with 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.
- In the left pane, click + Add to insert a new slide into your image gallery.
-
- Click Select image to select an image from your computer or your file manager.
- Click to toggle the Show caption switch on to display a caption below this image. Then, use the rich text editor to enter your caption.
- To link the image to a webpage, add a Link URL.
- After you've made your selections, click Back to Image Gallery.
- Hover over a slide and click the pencil icon edit tto add a slide image and edit its caption and URL:
- Click Replace to replace an image from your computer or your file manager.
- Click Remove to remove the image.
- Click to toggle the Show caption switch on to display a caption below this image. Then, use the rich text editor to enter your caption.
- Enter any Alt text that you want to include.
- To link the image to a webpage, add a Link URL.
- After you've made your selections, click Back to Image Gallery.
- To delete a slide from your image gallery module, hover over an existing slide and click the trash icon delete.
- To reorder your slides in your image gallery module, click on a slide and drag and drop it into place.
After you've added your images for your image gallery, you can customize your module options in the left sidebar editor:
- 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.
- Loop slides: click to toggle on to automatically repeat your slides.
- Auto advance: click to toggle on if you want your slides to automatically scroll on your page.
- Time in seconds between auto-scrolling: use the arrow keys to indicate the number of seconds in between slides.
- Show navigation buttons: click to 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.
- 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.
- Slide transitions: choose which visual effect (Slide or Fade) you'd like to see when transitioning between slides.
- 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.
- Click the Styles tab at the top of the module editor to access your settings for your image gallery module:
- Customize the Font family, Font size, Text color, Text alignment, Line height, 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.
- After you've added your images and style settings, click Save and go to module list.
- Click Publish or Update to take your changes live.