CmsGram (JOOMPAID)— Premium CMS Directory

The Jmodules USP module is a powerful and flexible solution for showcasing your Unique Selling Points on your Joomla website with beautiful, customizable card layouts and advanced filtering capabilities.

This module offers multiple layout styles, real-time search functionality, and comprehensive customization options that allow web developers and site administrators to create engaging USP displays that seamlessly integrate with their website's design. Here's a comprehensive guide to utilizing the Jmodules USP module effectively.

1. Flexible Layout Options

    Multiple Column Layouts: Display your USPs in 1, 2, 3, or 4 columns to perfectly match your design needs and content density.
    Vertical & Horizontal Layouts: Choose between traditional vertical layout (icon above content) or modern horizontal layout (icon beside content) for different visual impacts.
    Responsive Grid System: Built on Bootstrap 5, ensuring your USPs look perfect on all devices from mobile phones to large desktop screens.
    Customizable Spacing: Control the gap between USP cards with four spacing options (small, medium, large, extra large) for optimal visual breathing room.

2. Advanced Filtering & Search

    Group Filtering: Organize USPs into up to 10 custom groups with color-coded filter buttons, allowing visitors to quickly find relevant features.
    Real-Time Search: Instantly search through all USP titles and descriptions as you type, with results appearing immediately.
    Combined Filtering: Use group filters and search together for precise results, perfect for large USP collections.
    Smart Animations: Smooth fade transitions when filtering or searching create a polished, professional user experience.
    Clear Button: One-click clear functionality to reset search instantly.

3. Rich Icon Integration

    Font Awesome Library: Choose from over 1,500 Font Awesome icons with an intuitive visual icon picker.
    Custom Icon Colors: Set global icon colors or customize each icon individually to match your branding.
    Five Size Options: Scale icons from small (fa-lg) to huge (fa-5x) for the perfect visual impact.
    Icon Positioning: Icons automatically adjust positioning based on your chosen layout style (vertical or horizontal).

4. Eight Pre-Designed Card Styles

    Default: Clean white background with subtle shadow for professional, corporate sites.
    Elevated: Prominent shadow creating depth and dimension, perfect for modern material design.
    Bordered: Defined borders with minimal shadow for clean, minimalist aesthetics.
    Minimal: Pure simplicity with no borders or shadows for ultra-minimal designs.
    Gradient: Fully customizable gradient backgrounds with direction control for vibrant, creative sites.
    Glassmorphism: Trendy frosted glass effect with blur for modern, sophisticated designs.
    Outline: Transparent cards with colored borders for light, airy layouts.
    Inset Shadow: Inner shadow creating a pressed effect for unique, tactile designs.

5. Nine Interactive Hover Effects

    Soft Shadow: Shadow intensifies on hover for subtle depth enhancement.
    Lift Effect: Cards rise slightly creating an interactive, elevated feel.
    Subtle Zoom: Cards scale up 5% for attention-grabbing emphasis.
    Rotate X/Y: 3D rotation effects adding dynamic, modern interactions.
    Pulse: Gentle scale animation for smooth, rhythmic movement.
    Wobble: Playful shake effect perfect for creative, fun designs.
    Float: Smooth up and down motion creating elegant movement.
    None: Option to disable hover effects for static, traditional presentations.

6. Powerful Animation System (AOS)

    Animate On Scroll: USPs come to life as visitors scroll down the page with smooth, professional animations.
    Multiple Animation Types: Choose from fade, flip, slide, and zoom animations with directional variants (up, down, left, right).
    Per-Item Animations: Each USP can have its own unique animation effect for creative, dynamic presentations.
    Configurable Timing: Control animation delay and duration for perfect synchronization with your page design.
    Performance Optimized: Animations are lightweight and won't impact page load times.

7. Call-to-Action Buttons

    Optional Buttons: Add custom buttons to any USP with configurable text and URLs.
    Flexible Positioning: Position buttons at the bottom of cards with left, center, or right alignment.
    Custom Styling: Full control over button CSS classes for perfect integration with your site's design.
    Internal & External Links: Link to any page on your site or external resources.

8. Extensive Styling Control

    Color Customization: Set custom background colors for cards, icons, and group buttons to match your brand perfectly.
    Border Radius Options: Choose from six corner roundness options (none, standard, large, extra large, soft, circular).
    Text Alignment: Align content left, center, or right to match your design aesthetic.
    Title Tag Control: Choose HTML heading tags (H2-H5) for proper SEO structure.
    Custom CSS Classes: Add custom CSS classes to titles, buttons, and cards for unlimited design possibilities.
    Gradient Configuration: When using gradient style, customize start color, end color, and direction (7 options).

9. User-Friendly Configuration

    Subform Interface: Add, remove, and reorder USPs with an intuitive drag-and-drop interface.
    Visual Icon Picker: Browse and select icons visually without memorizing icon names.
    Color Pickers: Choose colors with visual color pickers for easy customization.
    Organized Settings: Settings are logically grouped into tabs (Basic, Groups, USP Items, Layout, AOS) for easy navigation.
    Helpful Descriptions: Every setting includes clear descriptions explaining its purpose.

10. Performance & SEO

    Lightweight Code: Optimized JavaScript and CSS ensure fast page load times.
    Semantic HTML: Proper HTML structure makes USPs easily discoverable by search engines.
    Responsive Images: Icons scale perfectly without additional image files.
    No jQuery Dependency: Pure vanilla JavaScript for better performance.
    Debounced Search: Search input is debounced to prevent excessive processing.