ECS – Ele Custom Skin for Elementor vs Magical Blocks – Elementor Style Blocks for Gutenberg

ECS adds what Elementor doesn’t have — without replacing what it does well. Every feature is a standalone module. Enable only what you need from ECS → Modules in the WordPress admin. Unused modules load zero CSS, zero JS, and register no hooks. 🎨 Dark Mode Colours A Default Colours tab appears inside Elementor’s Site Settings, right next to Global Colors. Set a Default and a Dark Mode colour for every global colour slot. Dark mode colours are written as CSS variables — no JavaScript swapping, pure CSS, zero flash. A fallback swatch shows the default colour when the dark slot is empty. The Dark Mode Switcher widget lets visitors toggle between light and dark with full style controls. 📐 Container Layout Two additional layout modes for Elementor Flex Containers: Slider Mode — Turn any container into a CSS-only slider. No JS library, no dependencies. Custom Layout — Pick a Theme Builder template as the layout frame. Place ECS Placeholder widgets inside the template; ECS distributes the container’s children into those slots automatically. Supports cycling and graceful fallback. Works live in the Elementor editor. 🔁 Loop Custom Layout Arrange Loop Grid items inside a Custom Layout template using ECS Placeholder widgets — powered by Elementor’s native Loop Grid query. Full editorial control over the item grid without leaving Elementor. 📱 Menu Responsive Turn any Elementor Nav Menu widget into a responsive hamburger menu. Layout, alignment, animation, and breakpoint controls — all from the Elementor panel. ✍️ Editorial Text Wrap images inside text blocks with float controls and captions. Magazine-style editorial layouts built entirely in Elementor. 🎨 Style Templates Save any widget’s Style tab settings as a named preset and apply them to other widgets of the same type in one click — across pages, templates, and sites. Export and import your full style library as JSON. 🛠 JSON PowerEdit Edit any Elementor widget’s raw settings JSON directly from the panel. Raw textarea for paste-and-replace, interactive tree view for surgical edits. Keyboard shortcut: Ctrl/Cmd + Enter to apply. ✅ Legacy (ECS 3.x — backward compatibility) The original loop skin functionality is preserved in the Legacy module for existing sites built with ECS 3.x. If you’re updating from ECS 3.x, this module activates automatically. For new projects, use Elementor’s native Loop Builder. Note: This plugin requires Elementor (free). Container Layout (Custom Layout mode) and Style Templates require Elementor Pro.

Magical Blocks brings the Elementor experience to Gutenberg – build stunning websites with the same powerful design controls you love, but 100% native to the WordPress block editor. 🎯 Why Magical Blocks? Elementor-Style Workflow – Familiar container-based layouts with Flexbox controls Lightweight & Fast – Only loads assets for blocks you actually use Design-First – Professional styling with full customization options WordPress Native – Built entirely on the Gutenberg block editor Developer Friendly – Clean code following WordPress coding standards 🚀 Get the Elementor Vibe in WordPress Editor Miss Elementor’s intuitive design controls? Magical Blocks brings that same power to Gutenberg: Flexbox Containers – Build complex layouts with direction, wrap, justify, and align controls Nested Containers – Create sophisticated multi-column designs with Inner Container blocks Full Responsive Control – Desktop, tablet, and mobile settings for every property Visual Design Panel – Intuitive controls just like your favorite page builder 📦 12 Free Blocks Layout Blocks: 1. Container Block – Powerful Flexbox container with full layout controls (direction, wrap, justify, align) 2. Inner Container Block – Nestable container for complex multi-column layouts 3. Section Block – Full-width sections with backgrounds and inner blocks Content Blocks: 4. Heading Block – Advanced typography controls with Google Fonts integration 5. Button Block – Stylish buttons with hover effects and icon support 6. Icon Box Block – Icon + text combinations for features and services 7. Testimonial Block – Customer reviews with avatar and star ratings 8. Info Box Block – Information cards with icons and call-to-action 9. Image Box Block – Image + text layouts with hover effects 10. Counter Block – Animated number counters for statistics 11. Progress Bar Block – Visual progress indicators with animations 12. Divider Block – Stylish separators with icons and text ⚡ Key Features Flexbox Layout System – Container blocks with full Flexbox controls like Elementor On-Demand Asset Loading – CSS/JS only loads when blocks are used Responsive Controls – Desktop, tablet, and mobile settings for all properties CSS Variables – Easy theme integration and customization Block Patterns – Pre-designed layouts (coming soon) Pro Blocks – Additional premium blocks available (coming soon) 🎨 Full Customization Every block includes comprehensive styling options – just like Elementor: Typography (font family, size, weight, line-height, letter-spacing) Colors (text, background, borders with opacity support) Spacing (padding, margin with responsive controls) Borders (width, radius, style, color) Shadows (customizable box shadows) Hover effects (transitions and transforms) Layout Controls (Flexbox direction, wrap, justify, align, gap) 🔧 Developer Features PHPCS compliant (WordPress Coding Standards) ESLint & Prettier configured Webpack build system with @wordpress/scripts Proper internationalization (i18n ready) Documented codebase with PHPDoc/JSDoc 💡 Perfect For Elementor Users Switching from Elementor to Gutenberg? Magical Blocks makes the transition smooth: Same container-based workflow you’re used to Familiar Flexbox layout controls Visual design panels for all styling options No learning curve – just start building!