Make your content interactive and engaging with Accordion Pro, a flexible and modern accordion module designed for feature showcases, FAQs, and service highlights. This module helps you organize information into expandable sections, combining text, images, and videos for a clean, user-friendly experience.

With 3 ready-to-use layouts (Layout 1, Layout 2, and Layout 3), you can present content in classic split view, synchronized media with accordion, or feature grid style — all without coding. Built for responsiveness, customization, and performance, Accordion Pro ensures your content is easy to update, visually appealing, and optimized for every device.

Key Features of a Feature Accordion Pro Module :

• Multiple Layout Options – Choose from Layout 1, Layout 2, or Layout 3 with a simple setting.
• Customizable Headline & Description– Add engaging titles, and supporting text.
• Easy Content Updates – Update text, images, and media fields without coding.
• Advanced Customization – Control fonts, colors, spacing, and layouts directly in the editor.
• Responsive Design – Optimized for desktop, tablet, and mobile.
• Background Styles – Gradient, image or solid color options.
• Typography & Color Controls – Easily adjust fonts, sizes, and colors.
• Lightweight & Fast – Clean code ensures quick load times.
• User-Friendly – Built for marketers and businesses with no coding required.

How to Set Up the Use Feature Accordion Pro 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 "Feature Accordion Pro" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options : 

• Layout 1 – A classic accordion design with text-based expandable sections for simple content presentation.

• Layout 2 – A split layout combining an accordion on one side with synchronized images or videos on the other.

• Layout 3 – An advanced layout with accordion content on the left and dynamic feature lists or supporting visuals on the right.

 

• Heading Enable
  Toggle the main heading on or off. Ideal if you want a clean accordion without a title.
• Enter Heading
  Add and customize the main heading text. Use this to capture attention with a strong, engaging message.
• Description Enable
  Toggle the supporting description on or off. Useful when you want only the heading without extra text. 
• Enter Description
  Add descriptive text under the heading. Perfect for explaining benefits or context in 1–2 lines. It's only available in layout 1 and 3.

Accordion Content :

• Accordion Items
  Add multiple collapsible items with a title and description. Perfect for presenting features, FAQs, or step-by-step information in an organized way.
• Title
  Enter the main title for each accordion item. Ideal for highlighting the feature name, question, or key point.
• Description
  Add supporting text under each title. Useful for explaining details, benefits, or answers in 1–3 short sentences.
• Arrow Icon
  Choose or upload an icon that appears next to each title. Helps make items visually distinct and more engaging
• Video/Image Option
  Choose whether to display an image or a video in the accordion’s media column. Ideal for making your content more engaging and interactive. It's only available in layout 2.

Image Column :

Upload and manage the main image that appears in the image column. Ideal for product photos, illustrations, or brand visuals.

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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 Setting :

The Heading & Description Settings in Feature Accordion Pro allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices. Description does not available in layout 2.

Image Column Setting :

The Image Column Setting gives you complete control over how your visuals appear in the accordion module. You can adjust the image height to maintain consistent proportions, apply border radius for modern rounded edges, fine-tune spacing to create balanced layouts, and customize the border style, width, and color to frame your visuals. These options ensure your image or video blends seamlessly with the overall design while staying aligned with your brand style.

Inner Section Setting : 

The Inner Section Setting gives you complete control over the styling of the accordion’s content area. You can customize the background with solid colors, gradients, or images to match your brand, while the border radius option allows you to add modern rounded corners for a polished look. Fine-tune spacing (padding and margins) to create balanced layouts, and adjust the border style, width, and color for added definition. Additionally, the Below Section Corner Background setting provides an extra design layer to create seamless transitions and visually distinct sections. It's only option available in layout 1.

Accordion Setting :

• Accordion Title
  Customize the style of the accordion titles, including font, size, color, and spacing. Ensures headings are clear and match your brand.
• Accordion Description Setting
  Control the appearance of the accordion content area with typography, color, and spacing options. Perfect for making text easy to read and engaging.
• Arrow Setting
  Adjust the style, size, and color of the accordion toggle arrow to match your design and improve user interaction.

We hope you enjoy using our feature accordion pro 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.