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 Element Pack – Widgets, Templates & Addons for Elementor