1. Introduction (Overview)

The Event List with Sidebar module helps you display and organize events in a clean, responsive layout. Visitors can easily explore events using category and tag filters, view recent events, and switch between grid and list layouts. You can also manage multiple events, automatically hide past events, and use pagination to keep large event listings organized and easy to browse. 

2. Key Features

• Multiple Event Management - Add and edit multiple events easily.
• Category Filters – Filter events by category from the sidebar.
• Tag Filters – Find relevant events using tags.
• Recent Events – Display the latest events based on their date.
• Grid & List View – Let visitors switch between grid and list layouts.
• Auto Hide Past Events – Automatically hide events after their date passes.
• Pagination – Organize large event listings across multiple pages.
• Responsive Design – Works smoothly across desktop, tablet, and mobile.

3. Installation – Downloading the Module from HubSpot Marketplace

• Log in to your HubSpot account.
• Go to the Marketplace from the main navigation menu.
• Search for your module by name.
• Find the module in the results and click Install.
• If it’s a paid module, you can also click Buy Now to purchase and install directly.

4. How to Use – Adding the Module to Your Page

The Event List with Sidebar module makes it easy to display and manage your events directly within HubSpot. Add the module to your page, configure your event content and sidebar filters, choose your preferred layout, and customize the display to match your website.

1. 1. Open your HubSpot page editor.
   2. Click Add Module.
   3. Search for Event List with Sidebar.
   4. Drag and drop the module into the desired section of your page.
   5. Add and configure your events, categories, tags, and recent event settings.
   6. Choose between Grid View or List View and configure pagination and other display options.
   7. Customize the module styling to match your website.
   8. Preview and publish your page to display the event listing.

5. Module Settings Guide

Content Tab: 

1. Sidebar Labels – Customize the labels for Categories, Recent Events, and Tags to match your website.

2. Enable List View – Enable the list view option to let visitors switch from the default grid layout to a list layout.

3. Add Multiple Events – Add and manage multiple events with an image, title, start and end time, location, and CTA button.

4. Pagination – Set the number of events displayed per page and organize larger event listings with pagination.

5. Hide Past Events – Automatically hide events once their scheduled date has passed.

6. Show Recent Events – Choose how many recent events you want to display in the sidebar.

 

2. Style Tab

1. Module Settings – Set the module width to full or custom, and customize the background color and overall spacing.

2. Sidebar Styling – Customize sidebar labels, categories, recent events, and tags with controls for font size, text color, border color, checkbox color, active and hover colors, background color, line height, and arrow color. You can also style the Show More/Show Less button with custom font size, background, hover, and text colors.

3. Event Card Styling – Customize event card headings, line height, buttons, meta information, dates, images, and card backgrounds to match your website design.

4. Button Styling – Control button font size, text color, background color, border color, arrow color, hover color, and spacing.

5. Meta Information & Date – Customize date and meta text with text transform, font size, text color, and background color options.

6. Image Settings – Set separate image heights for desktop and mobile devices, and adjust the image border radius for a consistent look.

7. Background Settings – Customize the background color of the event listing and different module sections to match your website's design.

8.Pagination Styling – Customize pagination with font color, background color, font size, and hover color options. 

 

6. Examples / Demo Preview

View the module in action: https://www.modfrybus.shop/event-list-with-sidebar

7. Support & Contact

For questions or support, contact us at productqueriemodfrybus@outlook.com We’re happy to help!