Before/After Module Documentation
Overview
"Before/After module" might refer to a feature that allows you to quickly compare an image before and after applying certain edits or adjustments.
Features Included
The Before/After Module in HubSpot offers beneficial features for your web page to help drive more traffic and offer transparency.
These features include:
- Website Design: In web design, a "Before/After module" could be a plugin or module that displays a visual comparison of a webpage's design or layout before and after changes are made.
- Fitness/Health: In the context of fitness or health, a "Before/After module" might be a feature in an app or program that lets users compare their physical progress by displaying side-by-side images taken before and after a fitness regimen.
- Home Renovation/Interior Design: When dealing with home renovations or interior design, a "Before/After module" might showcase transformations by presenting photos of a space before and after remodeling.
- Historical Comparison: In historical research or analysis, a "Before/After module" could be a tool that visually displays changes over time, such as urban development or landscape changes in a certain area.
- Marketing/Advertising: In marketing, a "Before/After module" could refer to a feature that demonstrates the benefits of a product or service by displaying a comparison of a user's situation before and after using the offering.
- Educational Context: In education, a "Before/After module" might be used to illustrate concepts by presenting scenarios before and after a certain event or process.
- Data Analysis/Visualization: In data analysis, a "Before/After module" could be a tool that visualizes changes in data trends or patterns over time.
- Responsive Design: Since websites are accessed on various devices with different screen sizes, it's important for the Before/After to be responsive. This means that the module should adjust its size, layout, and content to fit well on screens of different sizes, from desktops to mobile phones.
- Customization: Before/After module can be customized in terms of styling, animations, and behavior.
Module Set up
Setting up the Before/After Module is easy and straightforward. All you have to do is perform a simple drag and drop.
Now let’s go through the setup steps:
- First, log in to your HubSpot account and navigate to the “Marketing” tab.

- Click on “Website” in the dropdown menu and select “Website Pages” from the extended menu.

- Select the template and create your web page as usual. Under the module selection menu, search for “Before/After” and select the module.

Module content

Under “Content”, you can edit the content you want to be displayed on your Before/After section. Easily adjust and update the “Animation”, “Historical Comparison” and "Images slider" as you please.
Module styles

Module can be custom-styled to image style, draggable icon style and divider easily managed.
Support
Revival Pixel Support
For support, please reach out via email to support@revivalpixel.com
We aim to reply within 1 business day.