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.

POSIMYTH

Sagar Patel

Devang Vachheta

<a href="https://wdesignkit.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">WDesignKit</a> is the ultimate designer tool for WordPress, empowering designers to create stunning websites in minutes. It’s the fastest way to build a WordPress website, making it a must-have tool for every WordPress designer or agency owner.
 <a href="https://wdesignkit.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc"> VISIT WDESIGNKIT WEBSITE</a>
<h3> Quick Navigation Links</h3>
<a href="https://wdesignkit.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc"> Visit Website</a> | <a href="https://www.youtube.com/c/POSIMYTHInnovations/?sub_confirmation=1" rel="nofollow ugc">Video Tutorials</a>| <a href="https://learn.wdesignkit.com/docs/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">Documentations</a> | <a href="https://roadmap.wdesignkit.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">Roadmap</a> | <a href="https://www.facebook.com/groups/884892449594153" rel="nofollow ugc">Join Facebook Community</a> | <a href="https://wordpress.org/support/plugin/wdesignkit" rel="ugc">Free Support</a> | <a href="https://store.posimyth.com/helpdesk/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">Premium Support</a> | <a href="https://wdesignkit.com/chat/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">AI Chat (Instant Answers)</a>
<h3>Complete WDesignKit Features Explained Under 4 Mins <a href="https://www.youtube.com/watch?v=Bw5IHPxr0Nc" rel="nofollow ugc"> Watch Now</a></h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Bw5IHPxr0Nc?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>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/4RhZwuyFd8k?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&start=101&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>What is WDesignKit ?</h3>
<ul>
<li><a href="https://wdesignkit.com/templates?builder_req=1001&utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">1600+ Elementor Page Templates, Kit & Sections</a></li>
<li><a href="https://wdesignkit.com/templates?builder_req=1002&utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">1500+ Gutenberg Templates & Patterns</a></li>
<li><a href="https://wdesignkit.com/widgets?builder=1&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">80+ Elementor Widgets Library</a></li>
<li><a href="https://wdesignkit.com/widgets?builder=2&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">30+ Gutenberg Blocks Library</a></li>
<li><a href="https://wdesignkit.com/widgets?builder=3&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">30+ Bricks Elements Libary</a></li>
<li><a href="https://wdesignkit.com/widget-builder/elementor-widget-builder?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">Elementor Widget Builder</a> (Custom Code to Elementor Widget)</li>
<li><a href="https://wdesignkit.com/widget-builder/gutenberg-blocks-builder?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">Gutenberg Blocks Builder</a>(Custom Code to Gutenberg Blocks)</li>
<li><a href="https://wdesignkit.com/widget-builder/bricks-elements-builder?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">Bricks Elements Builder</a> (Custom Code to Bricks Elements)</li>
<li><a href="https://wdesignkit.com/widgets/page-builder-widgets-converter?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks#wkit-one-click-convert" rel="nofollow ugc">1- Click Widget Convertor</a> — Easily Convert Elementor Widgets to Gutenberg Blocks or Bricks Elements & Vice Versa </li>
<li><a href="https://wdesignkit.com/cloud-workspace?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">Cloud Workspace</a> — Collaborate with your Team & Store Page Templates, Figma Designs or Custom Widgets on Cloud </li>
<li><a href="https://wdesignkit.com/figma-kits?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">60+ Figma Designed Websites</a></li>
</ul>
<h3>🔍 OUR PRODUCTS</h3>
<a href="https://theplusaddons.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">🥇 The Plus Addons for Elementor</a> – 120+ Elementor Widgets to create Elementor Widgets Easily.
<a href="https://nexterwp.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">🥇 NexterWP Theme, Blocks & Extensions</a> – Best Starter Theme for WordPress with 22+ WordPress Extension & 90+ Gutenberg Blocks.
<a href="https://uichemy.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=widgetslinks" rel="nofollow ugc">🥇 UiChemy – Figma to Elementor & Bricks Convertor</a> – Convert your Figma Templates In Live Elementor Website using our <a href="https://www.figma.com/community/plugin/1265873702834050352/" rel="nofollow ugc">FREE Figma Plugin.</a>
<h3>External services</h3>
<ol>
<li>wdesignkit.com API : This API is used to fetch plugin-related data for onboarding and updates. It sends the plugin version and identifier during activation, updates, or specific plugin-related requests. For more details, you can review the <a href="https://wdesignkit.com/privacy-policy" rel="nofollow ugc">Privacy Policy</a> and <a href="https://wdesignkit.com/terms" rel="nofollow ugc">Terms of Service</a>.</li>
<li>api.wordpress.org : This API retrieves plugin metadata and compatibility information from WordPress.org. It sends the plugin identifier during updates or when checking compatibility. More information can be found in the <a href="https://wordpress.org/about/privacy/" rel="ugc">Privacy Policy</a> and <a href="https://wordpress.org/tos/" rel="ugc">Terms of Service</a>.</li>
<li>api.posimyth.com : The plugin connects to this API for two purposes: collecting optional feedback during deactivation and storing anonymized data during onboarding. For deactivation feedback, anonymized data is sent voluntarily by users, while onboarding interactions transmit minimal anonymized statistics. These APIs are only accessed during feedback submission or onboarding. You can find more details in the <a href="https://api.posimyth.com/privacy-policy/" rel="nofollow ugc">Privacy Policy</a> and <a href="https://api.posimyth.com/terms-and-conditions/" rel="nofollow ugc">Terms of Service</a>.</li>
</ol>

WDesignKit – Elementor & Gutenberg Starter Templates, Patterns, Cloud Workspace & Widget Builder


I have tried this plugin and love it , it has many innovative features such as you can create custom widgets and also customise pre build widgets too. They have options to build widgets for different editor such as Elementor, Bricks and Gutenburg I have tried one widget for elemetor and it’s work like a charm. Wish luck to team for more future updates.


Best widget builder

3000+ Elementor Templates, Gutenberg Templates, Widgets Builder for Elementor, Gutenberg & Bricks, Cloud Workspace & Figma Files, 160+ Widgets Library

Magic Elements vs WDesignKit – Elementor & Gutenberg Starter Templates, Patterns, Cloud Workspace & Widget Builder