Timeline Module Documentation Page

A "timeline module" in the context of software or web development typically refers to a component or feature that allows users to create, manage, and display chronological events in an interactive and visually appealing manner. Here's a knowledge base covering various aspects of a timeline module:

Key Features : 

1. Event Management: Users can add, edit, and delete events along a chronological timeline. Each event typically includes details such as a title, description, date, and optionally.
2. Responsive Design: The timeline module should be responsive, meaning it adapts smoothly to different screen sizes and devices. This ensures a consistent user experience across desktops, tablets, and mobile devices.
3. Customizable Styling: Users can customize the appearance of the timeline to match their branding or design preferences. This includes options for colors, fonts, sizes, and overall layout.
4. Smooth Animations: Implement smooth animations to enhance the user experience during drag-and-drop actions.

How to Set Up the Timeline Module in HubSpot : 

1. In the main dashboard, go to the ‘Content’ tab and select ‘Website’ or ‘Landing Pages’ based on where you want the timeline section. 
   
2. Choose the appropriate page on which you would like to use it.
   
3. Search for the "Timeline with Animation" and Drag and drop the module into the desired location on your page.
   
   

Module Defaults Options: 

Heading & Description : 

You can customize the content displayed in your Timeline Heading Sections. Easily modify and refresh the "Heading" and "Description" as desired, and even choose to hide the section if you wish.

Options : 

• Heading & Description Hide/Show Toggle

Timeline Content :  

In module, managing timelines, including adding and removing items and changing titles, descriptions, and years, is quite straightforward. Here’s a guide to help you.

Options : 

• Timeline Add/Remove
• Title Content Add/Remove
• Description Content Add/Remove
• Year Content Add/Remove
  

Timeline Position :  

You can easily customize the timeline in HubSpot by adjusting the following:

• Timeline Position: Choose to have the timeline start on the left or the right side.
• Text Alignment: Align the timeline text to the left or right.

These options allow you to tailor the timeline's appearance to fit your preferences and needs.

Options :

• Timeline Start with Left
• Timeline Start with Right
• Left Align
• Right Align

Module Style Options: 

Module Setting :

Customize the max width of containers within your section to suit your layout preferences. Fine-tune spacing between elements for desktop and mobile views to optimize visual appeal and usability. Choose from background colors and gradients to enhance sections and modules throughout your site. Set unified styles for headings across your module.

Heading & Description Setting:

Users can customize the max width, bottom spacing and content alignments. and also users can customize the typography to fit the heading and description font size, weight, and line height for both mobile and desktop views. They can also adjust the spacing for mobile and desktop.

Users can customize the background color, spacing, border radius, and max width, including box shadow, vertical border, and dots, to align with their branding.

Users can customize the typography to fit the timeline content font size, weight, and line height for both mobile and desktop views. They can also adjust the bottom spacing.

We hope you will love working with our timeline module and creating a seamless experience for both your users and marketers on your team. Here at Colde Accelerator, we strive to ensure that your experience with HubSpot is a great one! If you need a custom HubSpot module or require a customized HubSpot CMS or CRM setup, Please Contact Us.