Skip to content

Documentation: Using the HubSpot SmartImageSwap Module on a Page (Drag and Drop)

This documentation details the use of the HubSpot "SmartImageSwap" module to integrate device-specific images on your web pages. You will learn how to add, configure, and customize this module to optimize performance and enhance user experience.

Prerequisites

Before you begin, make sure you have the following:

  • Access to HubSpot: A HubSpot account with necessary permissions to edit pages.
  • HubSpot SmartImageSwap Module: Installed and ready to use on your pages. Verify that this module is available in your HubSpot account.

Features of the SmartImageSwap Module

The SmartImageSwap module offers several customizable options, including:

  • Image Replacement: Automatically swap images based on the user's device (desktop or mobile).
  • Performance Optimization: Load only the necessary images to reduce page weight and improve loading speeds.
  • Image Adaptation: Adjust images to fit perfectly on different devices.
  • Priority Styles Control: Customize CSS classes for different devices to maintain consistent branding.
  • User Experience Enhancement: Improve the browsing experience by ensuring relevant and optimized images are displayed.

Steps to Use the SmartImageSwap Module on a Page (Drag and Drop)

Follow these steps to integrate and customize the SmartImageSwap module on your web pages:

Step 1: Access the Page Editor
  1. Log in to your HubSpot account.
  2. In the dashboard, select "Marketing," then "Website," and finally "Pages."
Step 2: Select or Create a Page
  1. Choose an existing page to edit by clicking on its name or create a new page by clicking "Create a new page."
  2. Give your page a name and select a template if necessary. Click "Create."
Step 3: Add the SmartImageSwap Module with Drag and Drop
  1. Once in the page editor, locate the section where you want to integrate the SmartImageSwap module.
  2. Drag the "SmartImageSwap" module from the "Modules" sidebar to the desired location on the page.
  3. Release the mouse to drop the module. It will automatically adjust to the existing layout.
Step 4: Configure and Customize the Module
  1. Click on the added SmartImageSwap module to open its configuration options.
  2. Configure the images for desktop and mobile by uploading the necessary files.
  3. Use style options to adjust the module's appearance:
    • Set CSS classes for desktop and mobile images.
    • Ensure proper alignment and spacing.
    • Customize text and background colors as needed.
  4. Enable or disable the mobile image loading as per your requirements.
Step 5: Preview and Publish
  1. Preview the page to see how the SmartImageSwap module will appear to visitors.
  2. Ensure all configurations and customizations are correct.
  3. Click "Publish" to make the page accessible to the public.

Support and Additional Resources

For more information on using the SmartImageSwap module or for further assistance:

  • Refer to the official HubSpot documentation or specific SmartImageSwap module guides.
  • Contact us via email at contact@comconception.fr

By following these steps, you can effectively integrate the SmartImageSwap module into your HubSpot pages, ensuring optimal performance and a seamless user experience across all devices.