User Guide:
Dynamic Counter Pro

Walkthrough Video on How to Use the Dynamic Counter Pro Module and Explore All Its Features in Detail

Adding the Module to Your HubSpot Page

To get started with the Dynamic Counter Pro module, follow these simple steps:

• Navigate to Your Page: Go to your HubSpot account, and in the Design Manager, select the page or template where you'd like to add the module.
• Drag and Drop the Module: In the left sidebar, search for Dynamic Counter Pro. Simply drag and drop the module into your desired location on the page.
• Save and Publish: After placing the module, save your changes, update the counter number and all the text as per the need and publish the page to make it live.

Configuring the Module: Style Tab

The Style Tab lets you customize the appearance of the module to match your branding and layout preferences.

Container Options

• Full Width: Enable or disable a full-width container depending on the desired layout.
• Max Width: Set the maximum width of the container to control its size on larger screens.
• Spacing: Adjust the spacing for both desktop and mobile views to ensure optimal layout.

Header Section Styling

• Max Width: Define the maximum width for the header section for consistency with the container.
• Heading Title HTML Tag: Choose the appropriate HTML tag (e.g., H1, H2) for SEO purposes.
• Text Alignment: Set the alignment of the heading title to center, left, or right.
• Alignment: Adjust the header section alignment as needed. Align the entire header block horizontally to the left, right, or center.
• Spacing: Configure the spacing for both desktop and mobile views for a responsive design.

Counter Body Styling

This includes a variety of options to customize and control each element within the counter for enhanced design flexibility.

Counter Container:

• Max Width: Define the maximum width for individual counter container.
• Counter Alignment: Adjust the alignment of each individual counter within its maximum width, particularly useful when displaying a single counter.

Font Size

• Font Size: Adjust the font size of the counter number for better visibility and as per the need.

Alignment

• Counter Alignment: By default, the counter and text are centered. Choosing left alignment will position both to the left.

Counter Divider Line:

• Enable/Disable Divider: Choose whether or not to display a line between counters.
• Divider Color: Pick a color for the divider line to match your design.

Counter Gap:

• Adjust Gap: Control the gap between counters for both desktop and mobile views to maintain a clean layout.

Color Options

• Text Color White: Toggle this option to turn all text within the counter module white, making it pop against dark backgrounds.
• Override Color Options: Customize text colors for different elements like heading title, counter number and text within the module.

Animation Options

• Counter Animation: Enable or disable the counter animations for an engaging effect.
• Animation Duration: Specify the animation duration in milliseconds to control the speed of the counting animation.