Horizontal Slides Panel

A Horizontal Slides Panel is a UI component that enables smooth left-to-right sliding of content, commonly used for displaying images, cards, or information in a structured and interactive way.

Key Features of a Horizontal Slides Panel Module :

✅ Smooth Horizontal Scrolling

✅ Click Sliding

✅ Multiple Layouts

✅ Responsive & Adaptive Design – Adjusts based on screen size and touch gestures.

✅ Text & Images  – Supports various content types within slides.

How to Set Up the Horizontal Slides Panel Module in HubSpot :

In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.

Select the page where you want to apply the module.

Search for "Horizontal Slides Panel" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For Horizontal Slides Panel, select your preferred layout (e.g., Layout 1, Layout 2 or  Layout 3). You can easily rearrange the event cards within the chosen layout to create the ideal content flow and visual arrangement.

Options : 

• Layout 1 : The layout features a heading and description, allowing you to add a minimum of 3 and a maximum of 4 cards. Each card includes a title, description, and Call-to-Action (CTA), providing a flexible and engaging content display.
• Layout 2 : The layout features a heading and description, allowing you to add up to maximum 5 cards. Each card includes a title, description, and an icon, providing a flexible and visually engaging content display.
  
• Layout 3 : The layout features a heading and Call-to-Action (CTA), allowing you to add up to 3 cards. Each card includes a title and description, providing a flexible and visually engaging content display.
  

Heading/Description & CTA : 

Users can add or remove jQuery JavaScript as needed, providing flexibility to enhance functionality or optimize performance based on their requirements.

Module Style Options: 

Module Setting :

Adjust the margins, padding, background colors, and container width to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.

Heading/Description & CTA Setting :

Users can customize the module’s spacing and adjust the typography for the heading, description, and Call-to-Action (CTA). This includes modifying the color, font size, weight, and line height for both mobile and desktop views, ensuring a personalized and visually cohesive design across all devices.

Column Setting :

You can customize the Content Column by adjusting the spacing, corner radius, background color, border, and box shadow, allowing for a visually refined and well-structured design.

Column Content Setting :

You can customize the typography for the card content by selecting fonts, sizes, and styles that match your design preferences. Additionally, you can adjust the spacing for both desktop and mobile views and set the alignment for a visually cohesive and responsive design.

We hope you enjoy using our horizontal slides panel module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.