Features Breakdown: Smart Image Grid (Hybrid Slider) This section is a versatile collection that functions as both a standard CSS Grid and a Swipeable Carousel. It offers dual layout modes (Overlay vs. Card Style) and allows for precise control over responsiveness and spacing directly from the editor.

1. Hybrid Layout (Grid vs. Slider)

• Mode Switching: Independent toggles to enable Slider Mode (Carousel) for Desktop and Mobile separately.

  • Example: You can have a static grid on Desktop but a swipeable slider on Mobile.

• Responsive Columns: Set specific column counts for Desktop (2 to 6 columns) and Mobile (1 or 2 columns).

• Gap Control: Fine-tune the spacing (gutters) between cards with separate pixel-sliders for Mobile and Desktop.

• Smart Pagination: Toggle navigation dots on/off and customize the Active and Inactive dot colors to match your branding.

2. Image Styling & Ratios

• Aspect Ratios: Force all images to a uniform shape regardless of their original dimensions. Options include Natural (Auto), Square (1:1), Portrait (3:4), Landscape (4:3), and Cinema (16:9).

• Visual Effects:

  • Zoom on Hover: Toggle a smooth zoom animation when the user hovers over an image.

  • Corner Radius: Adjust the roundness of the image corners (0px to 40px).

3. Content Strategy (Text Positioning)

• Dual Layout Modes:

  • Overlay Mode: Text sits on top of the image. Includes controls for Overlay Color, Opacity, and "Show on Hover Only".

  • Below Image: Text sits underneath the image in a classic card style. Includes a specific Card Background Color setting.

• Alignment Matrix:

  • Vertical: Align text to the Top, Center, or Bottom (Overlay mode).

  • Horizontal: Align text to the Left, Center, or Right.

• Adaptive Colors: The editor provides separate color pickers for Overlay Text (usually white/light) and Below Text (usually dark), so switching modes doesn't break readability.

4. Typography & Sizing

• Section Header: dedicated settings for a main Heading and Rich-Text Subheading with alignment options (Left/Center).

• Responsive Sizing: Independent font-size sliders for Desktop and Mobile for every text element (Section Heading, Subheading, Card Title, Card Description).

• Font Source: Toggle between the global Theme Font or force a specific Custom Font for headers and body text.

5. Block Content

• Dynamic Blocks: Add unlimited image blocks.

• Block Settings: Each block contains an Image Picker, Title, Subheading, and a clickable Link (making the whole card clickable).

6. Spacing & Visibility

• Container Width: Choose between Full Width or a constrained Max Width (adjustable from 800px to 1800px).

• Smart Padding: Side margins can inherit the Theme's default spacing or be overridden with custom pixel values.

• Device Visibility: Checkboxes to hide the entire section on Desktop or Mobile devices.