Loyalcoders

Magic Elements is a comprehensive extension for Elementor, designed to enhance your page-building capabilities with a wide variety of customizable widgets, pre-designed templates, and advanced features. Whether you’re a beginner or an experienced developer, this plugin provides tools to make your website-building process faster and easier.
<h3>Features:</h3>
<ul>
<li>A collection of unique and powerful Elementor widgets.</li>
<li>Header & Footer Builder for full-site layout control.</li>
<li>Pre-designed templates to kickstart your designs.</li>
<li>Easy-to-use interface with seamless integration.</li>
<li>Fully responsive and optimized for performance.</li>
</ul>
<h3>Elementor Widgets Included</h3>
Magic Elements ships with a focused library of 28 Elementor widgets, covering content, marketing, navigation, and layout use‑cases:
<ul>
<li>✅ Image – Flexible image widget with full style controls.</li>
<li>✅ Button – Modern buttons with icon, hover, and alignment options.</li>
<li>✅ Pricing Table – Create pricing / plan tables with badges and CTA.</li>
<li>✅ Team – Showcase team members with image, name, role, and socials.</li>
<li>✅ Text Editor – Enhanced text/content block with styling controls.</li>
<li>✅ Image Accordion – Interactive image accordion with hover/click reveal.</li>
<li>✅ Flip Card – Front/back card with animated flip interaction.</li>
<li>✅ Heading – Advanced headings with typography and decorative styles.</li>
<li>✅ Post Category Tab – Filter posts by category in a tabbed layout.</li>
<li>✅ Accordion – FAQ/accordion content with icons and animations.</li>
<li>✅ Counter – Animated number counters for stats and milestones.</li>
<li>✅ Category List – List blog categories with icons and links.</li>
<li>✅ Card – Content card with image, title, text, and button.</li>
<li>✅ Tab – Horizontal tabs for organizing content sections.</li>
<li>✅ Post – Blog posts grid with thumbnail, meta, and excerpt.</li>
<li>✅ Image Compare – Before/after image comparison slider.</li>
<li>✅ Light Box – Custom lightbox for images, text, or video content.</li>
<li>✅ Post List – List style blog layout with meta and read more.</li>
<li>✅ Page List – List of selected pages with icons and links.</li>
<li>✅ Multiple Button – Repeater-based multi-button layout (button groups).</li>
<li>✅ Icon Box – Icon + title + description info boxes.</li>
<li>✅ Info Box – Content/info box with icon and call-to-action button.</li>
<li>✅ Feature List – Feature rows with icons, titles, and descriptions.</li>
<li>✅ Review – Testimonial/review block with rating stars.</li>
<li>✅ Timeline – Vertical timeline with dates, titles, and content.</li>
<li>✅ Progress Bar – Animated progress/skill bars with percentage.</li>
<li>✅ Multi Step – Multi-step wizard/flow with steps, content, and completion popup.</li>
<li>✅ Nav Menu – Custom header navigation menu with logo, search, and mega-menu ready structure.</li>
</ul>
Elevate your Elementor experience and create visually stunning websites with ease.
<h3>Source Code</h3>
The uncompiled JavaScript and CSS source code for this plugin is available in the following repository:
https://github.com/loyalcoder/magic-elements
This repository contains the original source files used to generate the minified assets included in the <code>/assets/dist/</code> directory of the plugin. You can review, study, and modify the source as needed.
<h3>Build Instructions (If applicable)</h3>
To generate the minified assets from the source code, follow these steps:
<ol>
<li>Clone the repository: <code>git clone [Your Repository URL]</code> (Replace with your actual repository URL)</li>
<li>Navigate to the project directory: <code>cd [Your Repository Directory]</code> (Replace with your actual directory name)</li>
<li>Install dependencies: <code>npm install</code></li>
<li>Build the project: <code>npm run build</code> (or your specific build command, e.g., <code>yarn build</code>, <code>gulp build</code>)</li>
</ol>
The generated files will be placed in the <code>dist</code> directory, ready to be used in your WordPress plugin. (Adjust this if your build process outputs to a different directory)
<h3>Credits</h3>
Developed by <a href="https://loyalcoder.com" rel="nofollow ugc">LoyalCoder</a>. Inspired by the needs of Elementor users worldwide.

Magic Elements

Enhance Elementor with advanced widgets, templates, and features for customizable, stunning designs.

Md. Abu Bakkar Siddik

Turbo Addons

Md Rashedul islam Siraji

Md Shariful Islam

Md Rabiul Alam

<a href="https://turbo-addons.com/" rel="nofollow ugc">Turbo Addons</a> is your all-in-one toolkit for elementor page builder featuring powerful widgets, WooCommerce, and 200+ ready templates. Build fast, responsive, and professional WordPress websites with ease.
<h3>TURBO ADDONS ELEMENTOR HAS 90+ ADVANCED FREE AND PRO ELEMENTOR WIDGETS WITH 200+ READY TEMPLATES, BLOCK, SECTIONS, ELEMENTS & BEST WOOCOMMERCE WIDGETS FOR ELEMENTOR.</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/INXYWM6WRvE?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>Why Choose Turbo Addons for Elementor?</h3>
Turbo Addons is your all-in-one free elementor addons to build stunning, fast, and fully responsive WordPress websites without coding.
<ul>
<li>90+ powerful free and pro widgets</li>
<li>WooCommerce-ready: product grids, categories, cart buttons, product all details</li>
<li>200+ ready-made templates and 100+ ready block/sections</li>
<li>Full design control with Elementors interface</li>
<li>Lightweight and performance-optimized</li>
<li>Compatible with both free and Pro Elementor</li>
</ul>
Whether you’re a designer, developer, or business owner Turbo Addons gives you everything you need to build better websites, all in one place.
<h3>Our Latest Templates</h3>
<ul>
<li><a href="https://turbo-addons.com/turbo-templates/business-service-provider-home/" rel="nofollow ugc">Business/Service Provider</a></li>
<li><a href="https://turbo-addons.com/turbo-templates/electric-vehicle-home/" rel="nofollow ugc">Auto Mobile/Vehicle</a></li>
<li><a href="https://turbo-addons.com/turbo-templates/cattle-farm-dairy-elementor-template-kit/" rel="nofollow ugc">Cattle Farm</a></li>
</ul>
<a href="https://turbo-addons.com/templates/" rel="nofollow ugc">Explore All Templates</a>
<h3>Key Features of Turbo Addons for Elementor</h3>
Turbo Addons includes 90+ (more are coming) highly customizable widgets for Elementor, each designed to enhance the functionality of your website:
<h4>50 FREE ADVANCED WIDGETS:</h4>
<ul>
<li><a href="https://turbo-addons.com/advanced-accordion/" rel="nofollow ugc">Advanced Accordion </a> Create responsive FAQ and collapsible content sections in Elementor with text, images, and shortcodes.</li>
<li><a href="https://turbo-addons.com/preview-card/" rel="nofollow ugc">Preview Card </a> Showcase products, portfolios, or features with stylish interactive preview cards for Elementor.</li>
<li><a href="https://turbo-addons.com/info-box/" rel="nofollow ugc">Info Box </a> Highlight key information with modern icon boxes, titles, and descriptions in Elementor.</li>
<li><a href="https://turbo-addons.com/icon-button/" rel="nofollow ugc">Icon Button </a> Add customizable call-to-action buttons with icons and hover effects in Elementor.</li>
<li><a href="https://turbo-addons.com/social-bar/" rel="nofollow ugc">Social Bar </a> Display social media icons and profile links beautifully on your Elementor website.</li>
<li><a href="https://turbo-addons.com/dual-header/" rel="nofollow ugc">Dual Header </a> Design creative dual-style headings and titles with advanced typography options.</li>
<li><a href="https://turbo-addons.com/text-animation" rel="nofollow ugc">Text Animation </a> Add animated text effects and engaging headlines to Elementor pages.</li>
<li><a href="https://turbo-addons.com/image-floating-effect/" rel="nofollow ugc">Image Floating Effect </a> Create eye-catching floating image animations for modern Elementor designs.</li>
<li><a href="https://turbo-addons.com/image-overlay-effect/" rel="nofollow ugc">Image Overlay Effect </a> Add stylish hover overlays and interactive effects to Elementor images.</li>
<li><a href="https://turbo-addons.com/accordion" rel="nofollow ugc">Advance Accordion </a> Organize FAQs, templates, and content sections with advanced accordion layouts.</li>
<li><a href="https://turbo-addons.com/business-hour/" rel="nofollow ugc">Business Hour </a> Display business opening hours and schedules in a clean responsive layout.</li>
<li><a href="https://turbo-addons.com/top-bar/" rel="nofollow ugc">Top Bar </a> Add announcement bars, contact info, or promotional messages at the top of your site.</li>
<li><a href="https://turbo-addons.com/team-slider/" rel="nofollow ugc">Team Slider </a> Showcase team members in a responsive slider with social links and details.</li>
<li><a href="https://turbo-addons.com/image-carousel/" rel="nofollow ugc">Image Carousel </a> Display images, galleries, and showcases with a responsive Elementor carousel.</li>
<li><a href="https://turbo-addons.com/review-star/" rel="nofollow ugc">Review Star </a> Add star ratings and customer reviews to build trust and social proof.</li>
<li><a href="https://turbo-addons.com/countdown-timer/" rel="nofollow ugc">Count Down Timer </a> Create urgency with animated countdown timers for sales and events.</li>
<li><a href="https://turbo-addons.com/pricing-table/" rel="nofollow ugc">Pricing Table </a> Build responsive pricing tables and subscription plans with Elementor.</li>
<li><a href="https://turbo-addons.com/advance-header/" rel="nofollow ugc">Advanced Heading </a> Create stylish headings with advanced typography and dual text styles.</li>
<li><a href="https://turbo-addons.com/popular-posts/" rel="nofollow ugc">Popular Post </a> Display trending and popular blog posts automatically in Elementor.</li>
<li><a href="https://turbo-addons.com/shape-divider/" rel="nofollow ugc">Section Divider </a> Separate Elementor sections with creative shape dividers and layouts.</li>
<li><a href="https://turbo-addons.com/food-menu/" rel="nofollow ugc">Food Menu </a> Create attractive restaurant and cafe food menus with Elementor.</li>
<li><a href="https://turbo-addons.com/single-testimonial/" rel="nofollow ugc">Single Testimonial </a> Showcase customer testimonials and reviews in a professional layout.</li>
<li><a href="https://turbo-addons.com/data-table/" rel="nofollow ugc">Data Table </a> Create responsive and sortable tables to display structured content easily.</li>
<li><a href="https://turbo-addons.com/photo-stack/" rel="nofollow ugc">Photo Stack </a> Display layered image stacks with creative hover animations in Elementor.</li>
<li><a href="https://turbo-addons.com/image-icon-card/" rel="nofollow ugc">Image Icon Card </a> Combine images, icons, text, and buttons in stylish Elementor cards.</li>
<li><a href="https://turbo-addons.com/banking-card/" rel="nofollow ugc">Banking Card </a> Showcase virtual banking and payment cards with modern card layouts.</li>
<li><a href="https://turbo-addons.com/google-map/" rel="nofollow ugc">Google Map </a> Embed responsive Google Maps with markers and customization options.</li>
<li><a href="https://turbo-addons.com/advanced-search/" rel="nofollow ugc">Advanced Search </a> Add smart search functionality with filters and instant search results.</li>
<li><a href="https://turbo-addons.com/image-compare/" rel="nofollow ugc">Image Compare </a> Compare before and after images with an interactive slider effect.</li>
<li><a href="https://turbo-addons.com/event-calendar/" rel="nofollow ugc">Event Calendar </a> Display events and schedules in a responsive Elementor calendar layout.</li>
<li><a href="https://turbo-addons.com/scroll-to-top/" rel="nofollow ugc">Scroll To Top </a> Improve user experience with a smooth scroll-to-top button.</li>
<li><a href="https://turbo-addons.com/scroll-navigation/" rel="nofollow ugc">Scroll Navigation </a> Create one-page scroll navigation menus with anchor links in Elementor.</li>
<li><a href="https://turbo-addons.com/navigation-menu/" rel="nofollow ugc">Navigation Menu –</a> Build responsive and customizable navigation menus for Elementor websites.</li>
<li><a href="#" rel="nofollow ugc">Cookie Consent –</a> Add GDPR-ready cookie consent banners with full customization options.</li>
<li><a href="https://turbo-addons.com/contact-form-7/" rel="nofollow ugc">Contact Form 7 –</a> Style and customize Contact Form 7 forms easily inside Elementor.</li>
<li><a href="https://turbo-addons.com/logo-carousel/" rel="nofollow ugc">Logo Carousel –</a> Showcase client and brand logos in a responsive carousel slider.</li>
<li><a href="https://turbo-addons.com/counter/" rel="nofollow ugc">Counter –</a> Display animated counters for statistics, achievements, and milestones.</li>
<li><a href="https://turbo-addons.com/news-ticker/" rel="nofollow ugc">News Ticker –</a> Show scrolling news headlines and announcements with ticker animations.</li>
<li><a href="https://turbo-addons.com/elementor-audio-player/" rel="nofollow ugc">Audio Player –</a> Add customizable audio players with playback and volume controls in Elementor.</li>
<li><a href="https://turbo-addons.com/accordion-slider" rel="nofollow ugc">Accordion Slider –</a> Create interactive accordion sliders with expandable image and content panels.</li>
<li><a href="https://turbo-addons.com/modal-popup" rel="nofollow ugc">Modal Popup –</a> Display popups for promotions, forms, videos, and announcements in Elementor.</li>
<li><a href="https://turbo-addons.com/metro-grid" rel="nofollow ugc">Metro Grid –</a> Showcase posts and portfolios in stylish metro-style grid layouts.</li>
</ul>
<h3>40+ Pro Widgets:</h3>
<ul>
<li>Testimonial Slider : Showcase customer testimonials in responsive sliders with modern customizable layouts.</li>
<li>3D Carousel Create interactive 3D carousels for images, content, and showcases in Elementor.</li>
<li>3D Flip Box Add stylish 3D flip animations to content boxes with hover effects in Elementor.</li>
<li>Timeline Build responsive timelines, roadmaps, and milestone sections with Elementor.</li>
<li>Progress Milestones Display project progress and milestones with animated progress indicators.</li>
<li>Review Archive Showcase customer reviews in responsive grid and list layouts for Elementor.</li>
<li>Post List Display blog posts and custom content in filterable responsive card layouts.</li>
<li>Icon List Create stylish icon lists with flexible layouts and custom Elementor styling.</li>
<li>Image Vertical Scrolling Add smooth vertical scrolling image galleries and banners to Elementor pages.</li>
<li>Category Post Counter Display category-wise post counts dynamically for blogs and WooCommerce sites.</li>
<li>Advanced Featured Card Highlight features and services with animated responsive card designs.</li>
<li>Hero Slider Design full-width hero sliders with images, text, buttons, and animations.</li>
<li>Tour Guide Create interactive website tours with tooltips and guided walkthroughs.</li>
<li>PDF Flip Book Turn PDFs and documents into realistic interactive flipbooks in Elementor.</li>
<li>Text Gradient Create eye-catching gradient text effects with advanced typography controls.</li>
<li>Live Visitor Counter Show real-time visitor counts to increase trust and engagement.</li>
<li>CSV Data Table Convert CSV files into responsive and dynamic HTML data tables easily.</li>
<li>Advanced Post Filter Filter blog posts dynamically by categories and subcategories in Elementor.</li>
<li>Off Canvas Add sliding off-canvas menus, sidebars, and hidden content panels.</li>
<li>Advanced Search Pro Add AJAX-powered live search with filters and instant search results.</li>
<li>Image Hotspot Create interactive images with clickable hotspots, tooltips, and links.</li>
<li>WhatsApp Chat Add a floating WhatsApp chat button for instant customer communication.</li>
<li>Post Like Counter Let users like or dislike posts with live vote counter updates.</li>
<li>Woo Products Card Showcase WooCommerce products in stylish responsive card layouts.</li>
<li>WOO Product Pagination Add AJAX pagination for smooth WooCommerce product navigation.</li>
<li>WOO Category Display WooCommerce categories with images, titles, and product counts.</li>
<li>WOO Mini Cart Add a floating WooCommerce mini cart with quick checkout access.</li>
<li>WOO Product Short Description Display WooCommerce product short descriptions with custom styles.</li>
<li>WOO Product Price Showcase WooCommerce product prices with advanced styling options.</li>
<li>WOO Product Meta Display WooCommerce product tags, SKU, and category information beautifully.</li>
<li>WOO Product Related Show related WooCommerce products to increase upsells and engagement.</li>
<li>WOO Product Breadcrumb Add SEO-friendly WooCommerce breadcrumbs for better product navigation.</li>
<li>WOO Product Rating Display WooCommerce product ratings and review counts with star icons.</li>
<li>WOO Product Stock Show real-time WooCommerce product stock and availability status.</li>
<li>WOO Product Navigation Add previous and next navigation between WooCommerce products easily.</li>
<li>WOO Product Tabs Display WooCommerce product tabs with fully customizable Elementor styles.</li>
<li>WOO Product Image Showcase WooCommerce product images with zoom and lightbox effects.</li>
<li>WOO Product Button Add customizable WooCommerce buy now and product action buttons.</li>
<li>WOO Product Cart Display WooCommerce add-to-cart buttons with quantity and icon controls.</li>
</ul>
<h3>Extensions (More Coming Soon):</h3>
<ul>
<li><a href="https://turbo-addons.com/turbo-tooltip/" rel="nofollow ugc">Turbo Tooltip Extension New! </a>Add tooltips to any Elementor widget instantly. Just activate the extension from the Turbo Addons dashboard no shortcode or coding needed. Once enabled, a Tooltip control panel appears in every Elementor widget for easy setup.</li>
</ul>
<h3>How to Use Turbo Addons for Elementor</h3>
<ol>
<li>
Add a Widget:
<ul>
<li>Open any post or page in the Elementor editor.</li>
<li>In the Elementor widget panel, locate the Turbo Addons category.</li>
<li>Drag and drop the desired widget to your section.</li>
</ul>
</li>
<li>
Customize Widget Settings:
<ul>
<li>Click on the widget to open its customization panel.</li>
<li>Adjust design, layout, and functionality options as needed.</li>
</ul>
</li>
<li>
Publish or Update:
<ul>
<li>After making the desired changes, click <code>Publish</code> or <code>Update</code> to save.</li>
</ul>
</li>
</ol>
<h3>License</h3>
Turbo Addons for Elementor is licensed under the <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GNU General Public License v2 or later</a>.

Turbo Addons Elementor

Turbo Addons for Elementor offers 90+ widgets & 200+ modern ready templates - free menu, slider, post list, modal, accordion, grid, woocommerce & mroe

Magic Elements vs Turbo Addons Elementor