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.

Kanchha Kaji Prajapati

Bosa Themes

Enhance your online store with powerful Elementor widgets and a versatile, ready-to-use template library designed for seamless customization and enhanced functionality. Please visit <a href="https://bosathemes.com/bosa-elementor-for-woocommerce" rel="nofollow ugc">Plugin Homepage</a> for more information.
🌟 Collection of Elementor Page Templates!
✅Pre-built Templates Library – Access a collection of Elementor Page Templates to build your site effortlessly and efficiently.
✅Variety of Shop Templates – A diverse collection of homepages and inner pages specially designed for your online store.
✅Seamless Import System – Easily import Templates for quick and hassle-free customization.
Browse the full library of <a href="https://bosathemes.com/bosa-elementor-for-woocommerce/#template-list" rel="nofollow ugc">Templates</a>
🚀 Collection of Widgets
Elegant widget sets designed to enhance your eCommerce website, effortlessly and efficiently.
✅Woo -Product Tabs(PRO): Organize products in a clean, easy-to-navigate tab format within a single page. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woo-product-tabs-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Image Carousel(PRO): Display multiple images in a compact, interactive, and visually appealing format to easily navigate through them. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/image-carousel-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Testimonial Slider(PRO):Display client’s reviews or testimonials in a rotating, interactive format, enhancing credibility and trust for a product or service. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/testimonial-slider-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Archive Products: Display your product archive in an organized layout for easy browsing. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-products-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Products List: Show a list of products with easy navigation and detailed descriptions. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-products-list-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Categories: Display your product categories to help users navigate your store efficiently. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-categories-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Archive Carousel: Showcase products in a sleek carousel design, perfect for highlighting categories or featured products. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-carousel-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Categories List: Display a list of product categories in an organized, visually appealing layout. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-categories-list-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Site Logo: Easily customize your site logo to represent your brand. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/site-logo-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Blog: Display your blog posts in a clean, easy-to-read format for better user engagement. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/blog-grid-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Contact Form 7: Integrate a user-friendly contact form with customizable fields to connect with your audience. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/contact-form-7-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Product Slider(PRO): Allow users to browse products in a smooth slider, enhancing the shopping experience. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-product-slider-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Grid Products (PRO): Display your products in a grid layout for a neat and user-friendly shopping experience. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-grid-products-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Grid Carousel(PRO): Combine the power of grids and carousels to showcase your products dynamically. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-grid-carousel-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Hot Deals(PRO): Showcase your hot deals and discounts to attract more customers. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-hot-deal-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅Woo – Product Accordion (PRO): Display product details in a collapsible accordion style, allowing users to easily view more products without cluttering the page. <a href="https://demo.bosathemes.com/elementor-for-woocommerce/woocommerce-products-accordion-widget/" rel="nofollow ugc">[VIEW DEMO]</a>
✅More Coming Soon…

Bosa Elementor Addons and Templates for WooCommerce

Elementor Addon with widgets and templates for WooCommerce.

Magic Elements vs Bosa Elementor Addons and Templates for WooCommerce