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.

Magic Elements vs PowerPack Addons for Elementor (Free Widgets, Extensions and Templates)