How to Use Image Slider Modules in HubSpot

The image slider module in HubSpot lets you showcase multiple visuals in a compact, interactive space on your website pages and landing pages. This guide walks you step by step through inserting, configuring, and customizing image sliders so you can create engaging, on-brand experiences.

Where You Can Use HubSpot Image Sliders

You can add an image slider module to most drag-and-drop content types in your account. Typical placements include:

• Website pages built with drag-and-drop areas
• Landing pages using drag-and-drop templates
• Blog templates that support modules
• Custom page templates created in the design tools

The module may appear as a standalone image slider or as part of a larger theme layout, depending on your HubSpot theme or template.

Adding an Image Slider in HubSpot

Follow these steps to insert the module on a page using the content editor.

Step 1: Open Your HubSpot Content Editor

1. In your HubSpot account, navigate to Marketing > Website > Website Pages or Marketing > Landing Pages.
2. Locate the page where you want to add the slider and click Edit.
3. Make sure the page uses a drag-and-drop layout area that allows modules to be inserted.

Step 2: Insert the Image Slider Module

1. In the left sidebar, search for Image slider using the module search field.
2. Drag the Image slider module into the desired area on the page.
3. Drop the module where you want the slider to appear in the layout.

Once the module is in place, you can begin adding and configuring the slides directly from the sidebar editor.

Configuring HubSpot Image Slider Settings

The image slider module includes several configuration options that control appearance, behavior, and slide order. These options may vary slightly depending on your theme, but common settings are described below.

Slider-Level Settings in HubSpot

In the module settings panel, you will typically see controls such as:

• Slider height and width: Define fixed dimensions or allow responsive sizing.
• Transition type: Choose slide or fade effects between images.
• Transition speed: Adjust how quickly slides move from one to the next.
• Auto-advance: Turn automatic rotation on or off and set the delay time.
• Navigation controls: Show or hide arrows, dots, or thumbnails, depending on the module.
• Looping behavior: Decide whether the slider repeats when it reaches the last slide.

Adjust these options to match your page layout and user experience goals.

Adding Images to a HubSpot Image Slider

1. In the module settings, locate the Slides or Images section.
2. Click Add or Add slide to insert a new slide.
3. Select an image from your file manager or upload a new file.
4. Repeat the process for each additional slide you want to include.

Use consistent dimensions and aspect ratios for all images to keep the slider clean and professional.

Editing Individual Slides in HubSpot

Each slide can be edited separately to control its content and link behavior. For every slide, you can typically configure:

• Image: Replace or update the slide image from the file manager.
• Alt text: Provide descriptive text for accessibility and SEO.
• Link: Turn the slide into a clickable element that links to an internal or external page.
• Open in new tab: Decide whether the link opens in the same window or a new one.

To edit a slide, select it in the list of slides, apply your changes, and then save or update the module.

Managing Slides in HubSpot: Order and Deletion

Controlling slide order is essential for guiding visitor attention. You can easily reorder and remove slides in the module configuration.

Reordering Slides in a HubSpot Slider

1. In the Slides section, hover over the slide you want to move.
2. Use the drag handle or reorder control to drag the slide up or down the list.
3. Release when the slide is in the desired position.

The visual order in this list reflects the order in which images appear in the published slider.

Deleting Slides from a HubSpot Slider

1. Select the slide you wish to remove.
2. Click the Delete or trash icon next to that slide.
3. Confirm the deletion if prompted.

Review the slider after deleting a slide to ensure transitions and storytelling still make sense.

Styling HubSpot Image Sliders

Beyond basic configuration, you can adjust styles to align with your site branding. Styling options may differ by theme or custom template, but you often have access to:

• Spacing and padding: Control the space around the slider.
• Background color: Add a solid background behind the images.
• Border and radius: Add borders or rounded corners.
• Shadow effects: Create depth to highlight the slider area.

For advanced control, developers can use HubL and CSS in the design tools to fully customize the slider’s layout and behavior within HubSpot templates.

Best Practices for HubSpot Image Slider Optimization

To make the most of your slider from a UX and performance perspective, follow these recommendations.

Optimize Images for Speed

• Compress images before uploading to reduce file size.
• Use appropriate formats such as JPEG for photos and PNG or WEBP for graphics.
• Keep dimensions matched to the maximum display size needed.

Improve Accessibility and SEO in HubSpot

• Add descriptive alt text for every image.
• Avoid putting critical content only inside slider images.
• Ensure text in images has sufficient contrast and is readable.

Design for Engagement

• Use the first slide for your most important message.
• Limit the total number of slides to maintain focus.
• Set transition timing so users have enough time to view each slide.

More Resources for HubSpot Users

For the original platform documentation on this feature, review the official article on how to use image slider modules. You can also explore additional strategic guidance and implementation support from agencies such as Consultevo, which focuses on marketing and digital optimization.

By configuring your image slider module carefully and following these best practices, you can create visually compelling, fast-loading sliders across your HubSpot pages that enhance user experience without sacrificing performance or accessibility.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`