🚀 Overview

The Accordion Footer Menu Widget for Elementor is a purpose-built widget that transforms long, space-hungry footer link lists into compact, collapsible accordions. It’s ideal for content-rich WordPress sites that need clean mobile navigation, better scanability, and improved Core Web Vitals by reducing layout clutter.

Experience: Inspired by real ecommerce, blog, and SaaS sites where footers carry dozens of links (policies, help, categories), this widget bundles them into sections that expand on tap—streamlining the user journey on small screens while preserving SEO-friendly markup.

Best for: Agencies, theme builders, ecommerce stores, membership sites, publishers and corporate sites using Elementor.

✨ Key Features

• True Accordion Behavior: Expand one section at a time (optional), or allow multiple sections to stay open.
• Unlimited Sections & Levels: Group links under headings; optional second-level nesting for large catalogs.
• Icon & Indicator Controls: Choose toggle icons (chevron/plus/minus), rotate on open, set sizes/gaps.
• Typography & Spacing: Fine-tune title/body fonts, letter spacing, line height, paddings and dividers.
• State Styling: Normal/hover/active colors for titles and links; border and background controls.
• Responsive Rules: Force accordion mode on mobile/tablet while keeping columns expanded on desktop.
• Accessibility-Aware: Emits semantic headings, ARIA attributes and keyboard-navigable controls.
• Link Tracking Ready: Works with analytics click tracking and UTM parameters (no code changes).
• Lightweight: Minimal CSS/JS; inherits theme styles to avoid bloat and conflicts.

⚙️ Technical Stack

• Platform: WordPress 5.8+ with Elementor (Free or Pro).
• Languages: PHP 7.4/8.x, HTML5, CSS3, JavaScript (ES6).
• Compatibility: Works with popular themes (Hello, Astra, GeneratePress, Block themes with Elementor).
• Server: Any standard WP hosting (Apache/Nginx), HTTPS recommended.
• Performance: No external frameworks; respects Elementor’s asset loading & breakpoints.

🧩 Installation Guide

1. Ensure WordPress and Elementor are installed and activated.
2. Upload the plugin to /wp-content/plugins/ or install the ZIP via Plugins → Add New → Upload.
3. Activate the plugin. In Elementor, open your Footer template (Theme Builder).
4. Add the widget Accordion Footer Menu and create sections (e.g., Company, Help, Legal, Categories).
5. Customize icons, colors, typography and responsive behavior; update the footer template.
6. Test on mobile to confirm accordion behavior and link tracking.

📦 Deliverables

• Plugin source code (GPL) for the Accordion Footer Menu widget.
• Elementor widget with controls (content, style, advanced).
• Documentation: install, usage, styling & troubleshooting.
• Sample JSON export for a footer template (optional).

📱 Supported Platforms

• WordPress 5.8+ / 6.x
• Elementor (Free or Pro)
• Modern browsers: Chrome, Edge, Firefox, Safari

🧠 Notes

• License: Distributed under the GPL—you may study, modify and redistribute under GPL terms.
• Customization Tips: Mirror your header IA in the footer, add “contact” micro-CTAs, and use nofollow on policy links if desired.
• SEO Assurance: Uses semantic headings and clean lists; accordions are crawlable; avoid hiding critical internal links behind JS when SEO is critical.
• Trust & UX: Keep legal links visible; ensure adequate contrast and large tap targets for accessibility.

👨‍💻 Original Developer Credit

Credit to the original author of this Elementor widget. For premium support or the commercial listing, visit:
Original Author on CodeCanyon.

🔒 Disclaimer

This item is provided under the GPL for educational and development purposes. We are not affiliated with Elementor or the original developer unless explicitly stated. All trademarks are the property of their respective owners. For official updates and vendor support, purchase a valid license from the original marketplace.