Loyalcoders

<p><strong>Magic Elements</strong> 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.</p>
<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>
<p>Magic Elements ships with a focused library of <strong>28 Elementor widgets</strong>, covering content, marketing, navigation, and layout use‑cases:</p>
<ul>
<li>✅ <strong>Image</strong> – Flexible image widget with full style controls.</li>
<li>✅ <strong>Button</strong> – Modern buttons with icon, hover, and alignment options.</li>
<li>✅ <strong>Pricing Table</strong> – Create pricing / plan tables with badges and CTA.</li>
<li>✅ <strong>Team</strong> – Showcase team members with image, name, role, and socials.</li>
<li>✅ <strong>Text Editor</strong> – Enhanced text/content block with styling controls.</li>
<li>✅ <strong>Image Accordion</strong> – Interactive image accordion with hover/click reveal.</li>
<li>✅ <strong>Flip Card</strong> – Front/back card with animated flip interaction.</li>
<li>✅ <strong>Heading</strong> – Advanced headings with typography and decorative styles.</li>
<li>✅ <strong>Post Category Tab</strong> – Filter posts by category in a tabbed layout.</li>
<li>✅ <strong>Accordion</strong> – FAQ/accordion content with icons and animations.</li>
<li>✅ <strong>Counter</strong> – Animated number counters for stats and milestones.</li>
<li>✅ <strong>Category List</strong> – List blog categories with icons and links.</li>
<li>✅ <strong>Card</strong> – Content card with image, title, text, and button.</li>
<li>✅ <strong>Tab</strong> – Horizontal tabs for organizing content sections.</li>
<li>✅ <strong>Post</strong> – Blog posts grid with thumbnail, meta, and excerpt.</li>
<li>✅ <strong>Image Compare</strong> – Before/after image comparison slider.</li>
<li>✅ <strong>Light Box</strong> – Custom lightbox for images, text, or video content.</li>
<li>✅ <strong>Post List</strong> – List style blog layout with meta and read more.</li>
<li>✅ <strong>Page List</strong> – List of selected pages with icons and links.</li>
<li>✅ <strong>Multiple Button</strong> – Repeater-based multi-button layout (button groups).</li>
<li>✅ <strong>Icon Box</strong> – Icon + title + description info boxes.</li>
<li>✅ <strong>Info Box</strong> – Content/info box with icon and call-to-action button.</li>
<li>✅ <strong>Feature List</strong> – Feature rows with icons, titles, and descriptions.</li>
<li>✅ <strong>Review</strong> – Testimonial/review block with rating stars.</li>
<li>✅ <strong>Timeline</strong> – Vertical timeline with dates, titles, and content.</li>
<li>✅ <strong>Progress Bar</strong> – Animated progress/skill bars with percentage.</li>
<li>✅ <strong>Multi Step</strong> – Multi-step wizard/flow with steps, content, and completion popup.</li>
<li>✅ <strong>Nav Menu</strong> – Custom header navigation menu with logo, search, and mega-menu ready structure.</li>
</ul>
<p>Elevate your Elementor experience and create visually stunning websites with ease.</p>
<h3>Source Code</h3>
<p>The uncompiled JavaScript and CSS source code for this plugin is available in the following repository:</p>
<p>https://github.com/loyalcoder/magic-elements</p>
<p>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.</p>
<h3>Build Instructions (If applicable)</h3>
<p>To generate the minified assets from the source code, follow these steps:</p>
<ol>
<li>Clone the repository: <code>git clone [Your Repository URL]</code> <em>(Replace with your actual repository URL)</em></li>
<li>Navigate to the project directory: <code>cd [Your Repository Directory]</code> <em>(Replace with your actual directory name)</em></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>
<p>The generated files will be placed in the <code>dist</code> directory, ready to be used in your WordPress plugin.  <em>(Adjust this if your build process outputs to a different directory)</em></p>
<h3>Credits</h3>
<p>Developed by <a href="https://loyalcoder.com" rel="nofollow ugc">LoyalCoder</a>. Inspired by the needs of Elementor users worldwide.</p>


Magic Elements

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

Dicko Andrean

<p>Unlock your Elementor page building experience with 75+ powerful and growing widgets and extensions, designed to help you create interactive, visually stunning, and performance-optimized WordPress websites—without writing a single line of code. Instantly access free professionally designed template kits, a ready-to-use and growing icon library with over 2,000 icons, plus a full theme builder to complete your WordPress site—all in one lightweight toolkit.</p>
<p>Unlike relying on multiple WordPress plugins, RTMKit provides an all-in-one solution to enhance your workflow. Whether you’re building blogs, online stores, or full business websites, RTMKit equips you with the tools to design faster, smarter, and prettier than ever before.</p>
<h3>🚀 Why Choose RTMKit ?</h3>
<p>✅ All-in-One Solution – Avoid plugin overload. RTMKit replaces multiple Elementor addons with a single, optimized package.<br />
✅ Free Elementor Form Builder – Build custom forms easily, no extra plugin needed.<br />
✅ Trusted by 40,000+ Active Websites – Growing steadily with global users.<br />
✅ 75+ Advanced Widgets – Add interactive functionality with ease.<br />
✅ 50+ Ready-Made Template Kits – Covering a wide range of niche business categories.<br />
✅ 1.500+ Ready-to-use icon library – Pre-made icons for instant visual impact.<br />
✅ Fully Customizable – Adjust every element, template, and widget to suit your brand.<br />
✅ Seamless Integrations – Compatible with WooCommerce and essential WordPress tools.<br />
✅ Lightweight & Fast – Engineered for speed without plugin bloat.<br />
✅ Top Ratings – Rated 4.8 out of 5 stars on WordPress.org.<br />
✅ Dedicated Support Team – Get help fast, whenever you need it.</p>
<h3>Useful Links</h3>
<p><a href="https://support.rometheme.net/" rel="nofollow ugc">Docs</a> | <a href="https://www.youtube.com/playlist?list=PLiDcdRZHQZ66vm5sZ6maMY-CZiZuweCRo" rel="nofollow ugc">Video Tutorials</a> | <a href="https://www.facebook.com/groups/rometheme" rel="nofollow ugc">Join Community</a> | <a href="https://rometheme.net/roadmap/" rel="nofollow ugc">What’s New?</a> | <a href="https://rometheme.net/pricing/" rel="nofollow ugc">Upgrade To Pro</a> | <a href="https://wordpress.org/support/plugin/rometheme-for-elementor/reviews/#new-post" rel="ugc">Share Review</a></p>
<p>Elementor Website Builder is required for this plugin.</p>
<h3>🌟 75+ Elementor Widgets and Counting — Built to Enhance Your Workflow</h3>
<ol>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/header-info/" rel="nofollow ugc">Header Info</a> – Highlight address, phone, or email in the header.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/offcanvas/" rel="nofollow ugc">Header Offcanvas</a> – Add a toggleable offcanvas area for demos, forms, or sidebar content.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/nav-menu/" rel="nofollow ugc">Nav Menu</a> – Create clean dropdown menus for smooth navigation.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/search/" rel="nofollow ugc">Search</a> – Interactive search with classic or modal options.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/site-logo/" rel="nofollow ugc">Site Logo</a> – Display your brand logo easily.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/accordion/" rel="nofollow ugc">Accordion</a> – Collapsible sections for FAQs and content organization.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/advanced-heading/" rel="nofollow ugc">Advanced Heading</a> – Extended typography and style options for headings.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/advanced-tabs/" rel="nofollow ugc">Advanced Tabs</a> – Organize content into horizontal or vertical tabs.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/animated-heading/" rel="nofollow ugc">Animated Heading</a> – Dynamic text effects to make headlines stand out.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/back-to-top/" rel="nofollow ugc">Back to Top</a> – Customizable scroll-to-top button.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/bar-chart/" rel="nofollow ugc">Bar Chart</a> – Vertical or horizontal bar charts for comparisons.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/blockquote/" rel="nofollow ugc">Blockquote</a> – Highlight quotes, testimonials, or statements.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/call-to-action/" rel="nofollow ugc">Call To Action</a> – Compelling CTA blocks with headline, text, and button.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/card-carousel/" rel="nofollow ugc">Card Carousel</a> – Responsive, swipeable card slider for featured content.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/client-grid/" rel="nofollow ugc">Client Grid</a> – Display client logos in a clean grid.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/countdown/" rel="nofollow ugc">Countdown</a> – Real-time countdown timers for urgency.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/counter/" rel="nofollow ugc">Counter</a> – Animated number counters for stats and milestones.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/hero-slider/" rel="nofollow ugc">Hero Slider</a> – Full-width sliders with image or video backgrounds.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/image-accordion/" rel="nofollow ugc">Image Accordion</a> – Interactive horizontal or vertical image accordions.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/image-box/" rel="nofollow ugc">Image Box</a> – Combine image, icon, and text in a clean layout.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/image-comparison/" rel="nofollow ugc">Image Comparison</a> – Before-and-after image comparison slider.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/image-gallery/" rel="nofollow ugc">Image Gallery</a> – Responsive gallery grid or masonry with lightbox.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/line-chart/" rel="nofollow ugc">Line Chart</a> – Smooth line graphs to show data trends.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/pie-doughnut-chart/" rel="nofollow ugc">Pie & Doughnut Chart</a> – Circular animated charts for data visualization.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/post-block/" rel="nofollow ugc">Post Block</a> – Highlight posts in bold block-style cards.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/post-grid/" rel="nofollow ugc">Post Grid</a> – Present blog posts in a modern grid layout.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/post-list/" rel="nofollow ugc">Post List</a> – Display posts in a clean vertical list.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/pricing-table/" rel="nofollow ugc">Pricing Table</a> – Showcase pricing plans with features and CTAs.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/progress-bar/" rel="nofollow ugc">Progress Bar</a> – Display completion percentages visually.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/social-icons/" rel="nofollow ugc">Social Icons</a> – Customizable social media profile icons.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/social-share/" rel="nofollow ugc">Social Share</a> – Styled buttons to share content across platforms.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/team-member/" rel="nofollow ugc">Team Member</a> – Showcase team with photo, role, and social links.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/testimonials-carousel/" rel="nofollow ugc">Testimonials Carousel</a> – Rotating customer testimonials with ratings.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/text-marquee/" rel="nofollow ugc">Text Marquee</a> – Continuously scrolling text for announcements or offers.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/video-button/" rel="nofollow ugc">Video Button</a> – Sleek video play button with popup or lightbox.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/woo-product-grid/" rel="nofollow ugc">Woo Product Grid</a> – Display WooCommerce products in a customizable grid.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">RTMForm</a> – Most User-Friendly Form Builder.  </li>
</ol>
<h3>🌟 50+ Advanced Widget in the Premium upgrade — and continuously growing.</h3>
<ol>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/advanced-toggle/" rel="nofollow ugc">Advanced Toggle</a> – Toggle elements with custom styling and animations.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/animated-circle-button/" rel="nofollow ugc">Animated Circle Button</a> – Stylish circular buttons with hover effects for modern call-to-actions.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/breadcrumbs/" rel="nofollow ugc">Breadcrumbs</a> – Customizable navigation trail for better UX and SEO.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/image-hotspot/" rel="nofollow ugc">Image Hotspot</a> – Add interactive markers on images with tooltips, supporting dynamic content like posts or products.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/image-stack-info/" rel="nofollow ugc">Image Stack Info</a> – Showcase grouped images with ratings and key details.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/interactive-link/" rel="nofollow ugc">Interactive Link</a> – Add hover effects with images, text, buttons, and creative reveal animations.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/pricing-list/" rel="nofollow ugc">Pricing List</a> – Clean service or restaurant-style pricing menus.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/client-carousel/" rel="nofollow ugc">Client Carousel</a> – Interactive slider for multiple client logos.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/image-marquee/" rel="nofollow ugc">Image Marquee</a> – Smooth scrolling image strips, perfect for logos or portfolios.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/pricing-image-box/" rel="nofollow ugc">Pricing Image Box</a> – Pricing layouts combined with product images.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/textual-showcase/" rel="nofollow ugc">Textual Showcase</a> – Highlight information with animated or scroll-revealed text blocks.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/widgets/post-carousel/" rel="nofollow ugc">Post Carousel</a> – Add an interactive carousel to feature posts in limited space.  </li>
</ol>
<p>We’re constantly adding new features and improvements with every update. Take your design to the next level by upgrading to the Pro version.</p>
<h3>🌟 Advanced Extensions Toolkit:</h3>
<ol>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Glass Effect (Free)</a> – Add modern frosted glass or blur-style backgrounds to sections, columns, or widgets.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Duplicator (Free)</a> – Instantly duplicate any post or page for faster design workflow.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Tooltips (Free)</a> – Show helpful hover tips or extra info on icons, buttons, and text.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Wrapper Link (Free)</a> – Turn any section, column, or container into a clickable link area.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Advanced Sticky (Pro)</a> – Keep nav bars, headers, or columns fixed while scrolling with smart positioning controls.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Custom Cursor Effect (Pro)</a> – Replace the default cursor with creative, interactive cursor styles.  </li>
</ol>
<h3>🌟Free Form Builder for Elementor:</h3>
<p>Note: RTMForm Builder is required for this plugin.</p>
<p>Style contact, feedback, and newsletter forms directly within Elementor. With full control over every form field—including text, radio buttons, checkboxes, and GDPR consent—you can build branded, responsive forms without writing a line of CSS. Optimized for both usability and conversions.</p>
<ol>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Checkbox</a> – Multi-option fields with custom styles and alignment.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Date</a> – Calendar input for selecting dates.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Email</a> – Collect user email addresses with customizable fields.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Number</a> – Number input fields with validation.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Radio Button</a> – Single-option selections with styled buttons.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Select</a> – Dropdown input with full styling control.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Submit Button</a> – Customizable call-to-action with hover effects and icons.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Telephone</a> – Phone number field with country code and masking.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Text</a> – Standard input fields for short content.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Text Area</a> – Long-form input for messages or feedback.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">Time</a> – Input field for selecting times.  </li>
<li><a href="https://rometheme.net/plugins/rtmform/" rel="nofollow ugc">GDPR Consent</a> – Required checkbox for privacy or terms compliance.  </li>
</ol>
<h3>🌟 Single & Archive Post Builder for Elementor:</h3>
<p>Note: RTMKit PRO is required for this plugin.</p>
<p>Design your blog and archive pages with complete layout flexibility. Use post grids, carousels, block styles, author bios, navigation links, and more—all styled visually inside Elementor. Deliver a seamless content experience that keeps readers engaged across your site</p>
<ol>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Post Author</a> – Showcase author details like name, avatar, and bio.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Post Content</a> – Display the main content of a post with styling options.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Post Comment</a> – Integrate a comment section to boost engagement.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Post Excerpt</a> – Show a short preview or summary of a post.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Featured Image</a> – Display featured images with adjustable size and layout.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Post Info</a> – Show meta details like date, categories, tags, or reading time.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Post Navigation</a> – Add previous/next navigation links between posts.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Post Title</a> – Display post titles dynamically with full typography control.  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Archive Title</a> – Display archive page titles dynamically (category, tag, author, or date).  </li>
<li><a href="https://rometheme.net/plugins/rtmkit/elements/" rel="nofollow ugc">Archive Posts</a> – Show posts filtered by archive types with layout control.  </li>
</ol>
<h3>🧭 Need Help Getting Started?</h3>
<p>Check out our Getting Started Guide and Documentation for step-by-step tutorials to help you make the most of RTMKit Addons.</p>
<h3>🙋 Have a Question?</h3>
<p>Visit our Support Forum on WordPress.org. Our team is ready to assist you with any issues or questions you might have.</p>
<h3>🚀 Want to Unlock More Power?</h3>
<p>Explore the RTMKit PRO version to access exclusive widgets, advanced features, and premium design tools—all crafted to supercharge your Elementor workflow.</p>
<h3>🎥 Prefer Visual Learning?</h3>
<p>Watch our video tutorials and walkthroughs on YouTube and learn how to build stunning websites with RTMKit.</p>
<h3>⭐ Found RTMKit Helpful?</h3>
<p>We’d love to hear your thoughts! Leave us a review on WordPress.org and help others discover RTMKit Addons.</p>


RTMKit

All-in-one toolkit for Elementor: advanced addons, theme builder, forms, icons & templates to build stunning sites fast and easy.

Magic Elements vs RTMKit