Full Width Two Column Slider

Note: The section this module is added to should have its Content Alignment set to Full width.

**
View a live demo of this module.**

Content

• Include as many slides as needed with image, eyebrow, heading, sub-heading, text, and/or buttons
• Include aria labels on slider arrows for screen reader accessibility
• Change vertical alignment of columns (top, middle, bottom)
• Change placement of columns (image to left of text, image to right of text)
• Change placement of columns on mobile (image above text, image below text)

Styles

• Set dark mode
• Change text alignment
• Set max width on text
• Change styling of lists
  • Change space between list items
  • Change bullet type
  • Change bullet color (not applicable to image bullets)
  • Enclose bullet (if using icon or image can enclose it in a colored box)

---

Usage Guide

The Full Width Two Column Slider is designed to create impactful visual storytelling sections on your HubSpot pages. This module works exceptionally well for product showcases, feature highlights, testimonials, or case studies where you need to pair compelling imagery with descriptive content.

When adding this module through the HubSpot page editor, you’ll want to drag it into a section container rather than a narrow column to take advantage of its full-width design. Remember to configure your section’s Content Alignment to “Full width” in the section settings panel—this is crucial for the module to display properly across the entire viewport.

This slider excels on homepage hero areas, product pages, and landing pages where you need to showcase multiple offerings or features without overwhelming visitors. The responsive column switching options make it particularly valuable for mobile optimization, allowing you to control whether images appear above or below text on smaller screens.

To maximize effectiveness, consider your image-to-text ratio when building slides. High-quality, consistent imagery works best—aim for images with similar aspect ratios across slides to maintain visual harmony. When crafting your slide content, use the eyebrow text to establish context, compelling headings to grab attention, and concise body text to convey key benefits.

The module’s dark mode toggle in the style options is particularly useful when your images are light-colored and you need text contrast. Additionally, the text max-width control prevents your content from stretching too wide on large desktop screens, maintaining optimal readability.

For best results, limit slides to 3-5 items to avoid choice paralysis, and ensure your call-to-action buttons use contrasting colors that align with your theme’s brand settings.