1. Overview & Core Features
The Super Multi-Mode Slider is a highly responsive, touch-friendly, and visual-first HubSpot module designed for maximum versatility. Unlike standard modules, it combines three distinct layout frameworks into a single component, allowing you to seamlessly swap between modes without needing separate assets.
Hero Banner Mode
Designed for landing page headers. Supports split layouts (left/right grid) or full-cover overlays with content cards, animations, and dual call-to-action buttons.
Product Cards Mode
Render a multi-item shop carousel displaying price rows, customized sales tags, stars rating indicators, and individual "Buy/Cart" buttons.
Testimonials Mode
Display quote layouts, client avatars, designations, and ratings. Supports configurable multi-column formats (1, 2, or 3 slides visible at once).
2. Getting Started
- Drag and drop the Super Multi-Mode Slider module onto your page inside the HubSpot Page Editor.
- In the content editor panel, select your desired Slider Mode (Layout Type) from the choice list: Hero Banner, Product Cards, or Testimonial Quotes.
- Add slides inside the Slides Content List. The content fields will adapt dynamically based on your chosen slider mode.
3. Settings Reference Guide
This reference details the customization groups available in the Slider Style Configurations section of the sidebar editor:
1. Color Theme Settings Group
Customize global theme colors. Colors automatically support alpha-opacity sliders inside the editor.
Sets default progress indicators, active slide dots, solid button fills, and primary outlines.
Used for testimonial quote icons, client avatar borders, and product sale badges.
Sets the background color of the entire slider section.
Sets the background fill inside product cards, testimonial cards, and floating hero overlays.
Defines default base typography colors for headings, description bodies, and secondary labels.
2. Card Border & Shadow Settings Group
Configure card wrappers globally. Custom properties allow borders and shadows to change dynamically on hover.
Toggle border outlines or box-shadow layers on and off.
Sets the rounded corner radius (px) and border outline thickness.
Enables a smooth 3D translate-lift and scaling effect when the user hovers over cards.
Customize specific card backgrounds and deep drop-shadow glows when active.
Changes the outline color when hovering. The system splits styles dynamically, ensuring colors render even if default borders are disabled.
Customize text colors inside the cards on hover (e.g. titles, prices, ratings, testimonial quotes). Colors transition smoothly.
3. Button Styling Settings Group
Customize shapes, hover overrides, and custom button iconography.
Choose between a filled primary button or a transparent outlined button.
Manually configure text colors, background fills, and outline colors when hovering over buttons (ignores defaults).
Add icons to the left or right of buttons. Choose between a Right Arrow SVG, Shopping Cart SVG, or upload a Custom Icon Image.
4. Product Grid & Badge Settings Group
Controls visibility toggles and display settings for Product Cards Mode.
Choose to display 1, 2, 3, or 4 columns on large screens. Auto-reduces for tablet/mobile.
Toggles star ratings, buy buttons, or badges. Layout elements collapse automatically if toggled off.
Fully customize badge tags: background color, text color, border-radius, font size, and layout offsets.
5. Testimonial & Navigation Settings Group
Configure testimonials and layout navigation shapes.
Choose to display 1, 2, or 3 client testimonial cards concurrently.
Style arrows as circles, squares, or pure icons. Fully customize backgrounds, icons, vertical positions, and side offsets.
Upload custom images to replace default SVG arrow designs.
Adaptive Content Rule: If you leave any optional slide field blank (like ratings, descriptions, sale badges, or buy button texts), the module will automatically hide the container and re-align surrounding content. No empty placeholder gaps or broken layouts!
4. Mobile Gestures & Support
The slider is fully optimized for touch devices, supporting inertia swipe navigation. On smaller screens, layouts stack dynamically, and padding configurations scale down proportionally to ensure a pristine viewing experience.