WP Manifestindependent plugin directory
manifest / builders / binghatti-lp-plugin

Mercedes-Benz Elementor Widgets

This is a binghatti Landing Page plugin with required Elementor widgets for WordPress to create the landing page.

by Irfan · github.com/irfanabbasi22/binghatti-lp-plugin

★ 1stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/irfanabbasi22/binghatti-lp-plugin/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/irfanabbasi22/binghatti-lp-plugin ↗

A custom WordPress plugin that provides premium Elementor widgets for creating stunning Mercedes-Benz branded pages with advanced animations, video sections, sliders, and interactive elements.

📋 Table of Contents

📝 Description

This plugin extends Elementor page builder with custom widgets specifically designed for Mercedes-Benz branded websites. It includes GSAP animations, video backgrounds, interactive sliders, 360° tours, and more.

✨ Features

  • 6 Custom Elementor Widgets - Fully integrated with Elementor's visual editor
  • GSAP Animations - Smooth scroll-triggered animations using GreenSock Animation Platform
  • Lazy Loading - All videos and images are lazy-loaded for optimal performance
  • Responsive Design - Mobile-first approach with dedicated mobile settings
  • Custom Fonts - Aktiv Grotesk and Fino Sans fonts included
  • Performance Optimized - Conditional asset loading based on widget usage

🔧 Requirements

  • WordPress: 5.0 or higher
  • PHP: 7.4 or higher
  • Elementor: 3.0.0 or higher
  • jQuery: Included with WordPress

📦 Installation

  1. Upload Plugin Files

    • Upload the mercedes-benz-elementor-widgets folder to /wp-content/plugins/ directory
    • Or install via WordPress admin: Plugins → Add New → Upload Plugin

  2. Activate Plugin

    • Go to WordPress admin → Plugins
    • Find "Mercedes-Benz Elementor Widgets" and click "Activate"

  3. Verify Installation

    • Go to any page/post editor with Elementor
    • Look for "Mercedes-Benz" category in the widget panel
    • All custom widgets should be available

🎨 Widgets Overview

1. Mercedes Video Widget

Full-width video section with height options and mobile support.

2. Content Overflow Stack Widget

Stacked video sections with GSAP scroll-triggered pinning animations.

3. Branded Luxury Slider Widget

Interactive image slider with background video and Owl Carousel integration.

4. Branded 360 Tabs Widget

360° tour tabs with navigation controls.

5. Branded Footer Widget

Comprehensive footer with form integration, social media links, and background images.

6. Floating Buttons Widget

Fixed-position contact buttons (Phone, WhatsApp, Video Call) with glassmorphism effect.

📖 Widget Usage Guide

1. Mercedes Video Widget

Purpose: Display full-width videos with customizable height and mobile support.

How to Use:

  1. Drag the "Mercedes Video" widget to your page
  2. Video Settings:
    • Enter Video URL (MP4 format recommended)
    • Upload Poster Image (optional)
    • Configure Autoplay, Muted, Loop, Plays Inline
  3. Mobile Settings:
    • Set Mobile Video URL (optional, falls back to desktop video)
    • Upload Mobile Poster Image
    • Configure mobile-specific video settings
  4. Style Settings:
    • Choose Height: 100vh, 100%, or Custom
    • Set Object Fit: Cover, Contain, Fill, None, or Scale Down

Best Practices:

  • Use optimized MP4 videos (H.264 codec)
  • Provide poster images for better loading experience
  • Use mobile-optimized videos for better mobile performance

2. Content Overflow Stack Widget

Purpose: Create stacked video sections with GSAP scroll animations.

How to Use:

  1. Drag the "Content Overflow Stack" widget to your page
  2. Add Sections:
    • Click "Add Item" to create a new section
    • For each section:
      • Section Number/ID: Enter a number or identifier
      • Heading: Add heading text (supports HTML, use <span> for normal font weight)
      • Description: Add description text
      • Video Source: Choose Media Library or Video URL
      • Video Settings: Configure Autoplay, Loop, Muted, Plays Inline, Preload
      • Object Fit: Choose how video fills container (default: Cover)
      • Fade Opacity: Enable/disable fade animation
      • Background Color: Set content area background color
  3. Style Settings:
    • Set Wrapper Background Color
    • Set Text Color (applies to all text elements)
    • Configure Typography for Content, Heading, and ID

Best Practices:

  • Use at least 2-3 sections for best visual effect
  • Enable "Fade Opacity" for smooth transitions
  • Set appropriate background colors for text readability

3. Branded Luxury Slider Widget

Purpose: Create an interactive image slider with background video.

How to Use:

  1. Drag the "Branded Luxury Slider" widget to your page
  2. Background Video:
    • Choose Video Source (Media Library or URL)
    • Configure video settings (Autoplay, Loop, Muted, Plays Inline, Preload)
  3. Heading: Add main heading (supports HTML)
  4. Add Slides:
    • Click "Add Item" to create slides
    • For each slide:
      • Slide Title: Main title text
      • Slide Subtitle: Subtitle text
      • Slide Images: Add multiple images (will be displayed as carousel)
  5. Style Settings:
    • Set Text Color (applies to heading, titles, and navigation arrows)
    • Configure Typography for Heading, Slide Title, and Slide Subtitle

Features:

  • Automatic slide navigation with Previous/Next buttons
  • Image carousel within each slide (Owl Carousel)
  • Smooth fade transitions between slides
  • Image zoom effect on hover

4. Branded 360 Tabs Widget

Purpose: Display 360° tour tabs with navigation.

How to Use:

  1. Drag the "Branded 360 Tabs" widget to your page
  2. Add Tabs:
    • Click "Add Item" to create tabs
    • For each tab:
      • Tab Title: Title displayed on navigation button
      • 360° Tour URL: Enter iframe URL for the 360° tour
      • Iframe Title: Accessibility title for iframe
  3. Style Settings:
    • Set Text Color (applies to button text and arrows)
    • Configure Button Typography

Features:

  • Previous/Next navigation buttons
  • Dynamic button text showing current tab title
  • Smooth tab transitions

5. Branded Footer Widget

Purpose: Create a comprehensive footer with form, links, and social media.

How to Use:

  1. Drag the "Branded Footer" widget to your page
  2. Background Images:
    • Upload Desktop Background Image
    • Upload Mobile Background Image (optional)
  3. Content:
    • Connect Heading: Heading text for connect section
    • Express Interest Heading: Main heading text
    • Link 1 & Link 2: Footer links with text and URL
  4. Social Media Links:
    • Click "Add Item" to add social media links
    • Select Platform: Instagram, Facebook, YouTube, LinkedIn, or Snapchat
    • Enter URL and Aria Label
  5. Form:
    • Paste HubSpot form embed code in the Form Embed Code field
  6. Style Settings:
    • Footer Details Background: Background color for details section
    • Footer Form Background: Background color for form section
    • Text Color: Color for general text
    • Link Color: Color for links and arrows
    • Social Icon Color: Color for social media icons

Form Integration: The widget accepts HubSpot form embed code. Example:

<script src="https://js-eu1.hsforms.net/forms/embed/26977003.js" defer></script>
<div class="hs-form-frame" data-region="eu1" data-form-id="e0dc98ef-7019-4efd-97e0-e6d1a491cf2b" data-portal-id="26977003"></div>

6. Floating Buttons Widget

Purpose: Add fixed-position contact buttons with glassmorphism effect.

How to Use:

  1. Drag the "Floating Buttons" widget to your page
  2. Add Buttons:
    • Click "Add Item" to create buttons
    • For each button:
      • Icon Type: Select Phone, WhatsApp, or Video Call
      • Button URL: Enter link URL
      • Aria Label: Accessibility label
      • Extra CSS Class: Optional custom class
  3. Style Settings:
    • Icon Color: Set icon color
    • Icon Size: Set icon size

Features:

  • Fixed positioning (right side on desktop, bottom on mobile)
  • Glassmorphism effect with backdrop blur
  • Smooth hover animations
  • Responsive design (horizontal layout on mobile)

🎨 Custom Fonts

The plugin includes two custom font families:

Aktiv Grotesk

  • Weights Available: Hair, Light, Regular, Medium, Bold
  • Usage in Elementor:
    1. Go to Elementor → Settings → Fonts
    2. Find "AktivGrotesk" in the font list
    3. Select it for any typography control

Fino Sans

  • Style Available: Italic
  • Usage in Elementor: Same as above, look for "Fino Sans"

Note: Fonts are automatically loaded when widgets are used on a page.

📚 Reference

Design Source

All widgets are based on the reference design from:

  • Reference File: reference-uae/ref.html
  • Location: Project root directory

Key Technologies Used

  • GSAP (GreenSock): For scroll-triggered animations
  • ScrollTrigger Plugin: GSAP plugin for scroll-based animations
  • Owl Carousel: For image carousels in Branded Luxury Slider
  • Intersection Observer API: For scroll-based animations and lazy loading

CSS/JS Assets

  • GSAP: Loaded from CDN (cdnjs.cloudflare.com)
  • ScrollTrigger: Loaded from CDN
  • Owl Carousel: Loaded from CDN
  • Custom CSS/JS: Located in assets/css/ and assets/js/

Font Files

  • Location: assets/fonts/
  • Format: WOFF2 (modern browsers)
  • Fonts: Aktiv Grotesk (5 weights) and Fino Sans (Italic)

🚀 Performance Optimization

Lazy Loading

  • All videos use loading="lazy" attribute
  • All images use loading="lazy" attribute
  • All iframes use loading="lazy" attribute

Conditional Asset Loading

  • GSAP and ScrollTrigger only load when Content Overflow Stack widget is used
  • Owl Carousel only loads when Branded Luxury Slider widget is used
  • Widget-specific CSS/JS files load only when their widgets are present

Best Practices

  1. Video Optimization:

    • Use compressed MP4 videos (H.264 codec)
    • Provide poster images
    • Use appropriate preload settings

  2. Image Optimization:

    • Compress images before uploading
    • Use appropriate image formats (WebP recommended)

  3. Mobile Performance:

    • Use mobile-specific videos and images when available
    • Test on actual mobile devices

🐛 Troubleshooting

Widgets Not Appearing

  • Ensure Elementor is installed and activated
  • Check Elementor version (requires 3.0.0+)
  • Clear browser cache and WordPress cache

Animations Not Working

  • Ensure GSAP and ScrollTrigger are loading (check browser console)
  • Verify jQuery is loaded
  • Check for JavaScript errors in browser console

Fonts Not Displaying

  • Clear browser cache
  • Check font files exist in assets/fonts/ directory
  • Verify font paths in assets/css/fonts.css

Videos Not Playing

  • Check video format (MP4 recommended)
  • Verify video URLs are accessible
  • Check browser console for CORS errors
  • Ensure autoplay policies are met (videos must be muted for autoplay)

📝 Version History

Version 1.0.1

  • Added lazy loading for all videos and images
  • Added mobile video and poster settings to Video Widget
  • Added object-fit setting to Content Overflow Stack Widget
  • Fixed CLS (Cumulative Layout Shift) issues in Branded Luxury Slider
  • Improved responsive design for Floating Buttons

Version 1.0.0

  • Initial release
  • 6 custom Elementor widgets
  • GSAP animations integration
  • Custom fonts support

👥 Support

For issues, questions, or feature requests:

  • Check the troubleshooting section above
  • Review widget documentation in this README
  • Contact the development team

📄 License

This plugin is proprietary software developed for Mercedes-Benz branded websites.

🙏 Credits

Last Updated: 2024

Reference Site - https://www.binghatti.com/en/branded-projects/mercedes-benz-places