Features Breakdown: Hero Slideshow Pro (Progress Bars) This section is a cinematic, auto-playing slideshow designed for high-impact visual storytelling. It features a unique "Progress Bar" navigation system that visually indicates the duration of each slide before transitioning.

1. Dimensions & Ratios

• Height Modes: Choose how the slideshow fits the screen:

  • Fullscreen: Forces the slider to cover 100% of the viewport height.

  • Fixed Pixel: Set a specific height (e.g., 600px).

  • Fixed Ratio: Lock aspect ratios (e.g., 16:9, 21:9, 4:3) separately for Mobile and Desktop.

• Side Padding: Toggle between Theme Standard margins or Custom Padding (px) to control the width of the content container.

2. Slide Management & Media

• Responsive Images: Upload separate images for Desktop and Mobile for each slide to ensure perfect framing.

• Overlay: Add a colored layer over the images with adjustable Opacity % to improve text readability.

• Animation: Smooth fade transition between slides.

3. Content Layout & Typography

• Alignment Matrix: Total control over content positioning.

  • Vertical: Top, Middle, Bottom.

  • Horizontal: Left, Center, Right.

  • Text Align: Left, Center, Right text justification.

  • Note: Alignment settings are completely independent for Mobile and Desktop.

• Typography:

  • Font Control: Use the global Theme Font or force specific Custom Fonts for Headings and Body text.

  • Sizing: Independent font-size sliders for Desktop and Mobile for Headings, Descriptions, and Buttons.

4. Buttons (Dual CTAs)

• Two Buttons per Slide: Configure a primary and secondary Call-to-Action for each slide.

• Styling:

  • Backgrounds: Choose solid colors or Custom Gradients.

  • Borders: Toggle borders and set border colors (useful for "Outline" style buttons).

  • Global Shape: Adjust the Corner Radius (0-50px) for all buttons in the slider.

5. Navigation (Progress Bars)

• Visual Indicator: Instead of standard dots, this slider uses animated bars at the bottom.

• Autoplay Control: Set the duration (in seconds) for each slide. The bar fills up to show remaining time.

• Interaction: Clicking a bar instantly jumps to that specific slide.

6. Visibility & Spacing

• Vertical Gap: Adjust the spacing between the content and the top/bottom edges of the slide.

• Section Margins: Control the margin above and below the entire slideshow section.

• Device Targeting: Options to hide the section on Mobile Only or Desktop Only.