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.
Marketing

 

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

 

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

 

Module content

Before-After-content-img

 

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

before-after-m-style-img

 

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
We aim to reply within 1 business day.