ECS – Ele Custom Skin for Elementor
About ECS – Ele Custom Skin for Elementor
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.
Quick facts
Contributors
dudaster
How Sourcemap Explorer detects ECS – Ele Custom Skin for Elementor
WordPress plugins all load assets from a predictable path: /wp-content/plugins/<slug>/. Sourcemap Explorer enumerates every such URL on the rendered page (script tags and stylesheets) and pulls the version from the ?ver= cache-buster query parameter when WordPress emits one. The slug is then cross-referenced against the wordpress.org plugin directory to attach the human-readable name, author, install count, rating and changelog you see on this page.
- 1
Find /wp-content/plugins/ele-custom-skin/ in the Network tab
Open DevTools → Network → reload the page. Filter by "JS" or "CSS" and look for asset URLs starting with `/wp-content/plugins/ele-custom-skin/`. Each match confirms the plugin is loading on the page. Sourcemap Explorer enumerates every plugin path automatically and lists each one in the popup's Stack tab.
- 2
Read the version from the ?ver= query string
WordPress appends the plugin version as a cache-busting query parameter to its asset URLs (`?ver=4.1.11`). Sourcemap Explorer pulls this version directly. The version on this page (4.1.11) is the latest published on wp.org — the version on a real site may lag.
- 3
Cross-reference with wp.org for human-readable metadata
Once the plugin slug is identified, fetch `https://api.wordpress.org/plugins/info/1.2/?action=plugin_information&request[slug]=ele-custom-skin` to read the human-readable name, author, install count, rating and changelog. This page already does that for you.
Plugin ecosystem context
An Elementor add-on. Elementor is one of the dominant WordPress page builders, and its add-on ecosystem (Essential Addons, Happy Elementor Addons, Premium Addons, ElementsKit) extends the visual builder with extra widgets and templates.
Screenshots
Installation
- Install and activate Elementor (free).
- Upload and activate ECS – Ele Custom Skin for Elementor through the Plugins screen.
- Go to ECS Modules in the WordPress admin and toggle on only the modules you need.
- Activated modules register their controls, widgets, and assets automatically.
Updating from ECS 3.x? Just update the plugin. The Legacy module activates automatically; all your existing loop skins keep working.
FAQ
No. ECS detects existing loop templates and activates the Legacy module automatically on update. Everything works exactly as before.
Yes. Go to ECS Modules and toggle anything off. Disabled modules load zero CSS, zero JS, and register no hooks on the front end.
No JavaScript is needed for the colour switch itself. The CSS variables are written server-side under [data-ecs-scheme="alt"]. The Dark Mode Switcher widget adds a small script only to set that attribute on <html> when the visitor toggles — a cookie prevents any flash on page load.
Yes. Layout injection is disabled in the editor so you can edit children normally. A live preview is generated via AJAX when you click away from a child.
No. It uses CSS scroll-snap — no jQuery plugin, no swipe library.
Go to Templates Theme Builder in Elementor. You’ll see a new document type called Custom Layout. Build your frame there and place the ECS Placeholder widget wherever you want a child to appear.
Dark Mode Colours, Menu Responsive, Editorial Text, Style Templates, JSON PowerEdit, and Loop Custom Layout work with Elementor free. Container Layout (Custom Layout mode) requires Elementor Pro.
Changelog
4.1.11
- Fixed: WordPress Menu. The Fill Width (stretch) CSS rule that forces width: 100% and left: 0 on the dropdown panel is now scoped to ECS dropdown layout mode only. Previously it applied to all nav menus with Fill Width enabled, overriding Smartmenus.js positioning calculations on menus using the native Elementor Breakpoint and collapsing the dropdown to the toggle width instead of the full header width.
4.1.10
- Fixed: WordPress Menu — dropdown panel no longer mispositioned when ECS Mobile Menu module is active and the nav menu uses Elementor’s native Breakpoint control. Previously, the CSS toggle-align rules (applied by default to all nav menus) used !important to override position/left/transform, which conflicted with Smartmenus.js position calculations, causing the dropdown to appear clipped or off-screen. The dropdown alignment rules now require the ECS layout to be explicitly set to “dropdown” for at least one breakpoint.
- Fixed: WordPress Menu — nav menu alignment no longer resets to left-aligned when ECS Mobile Menu module is active. Previously, a global CSS rule with a flex-start fallback overrode the user’s existing alignment setting whenever the Elementor CSS cache was stale. Alignment is now applied per-widget via direct Elementor selectors, so it only takes effect when the user has explicitly set a value.
- Fixed: Mobile Menu — resolved PHP warning “Undefined array key inner_tab” in PHP 8.x. Position anchors in the color controls upgrade pointed to tab-type controls that have tabs_wrapper but no inner_tab, causing Elementor’s get_position_info() to access an undefined key.
4.1.9
- Fixed: Legacy module (ECS Loop Skin) — removed redeclaration of $current_permalink property that caused a PHP Fatal error with Elementor Pro 4.x due to a PHP 8.1+ property inheritance rule.
4.1.8
- Fixed: Legacy module — Pro detection now correctly uses ELECSP_VER constant (ECS Pro 4.x) instead of the removed ele_custom_skin_pro() function from 3.x; “Get ECS Pro” notice and locked preview controls no longer appear when ECS Pro is active.
- Added: Dynamic Repeater Builder module card now appears in the modules list with a preview.
- Improved: Pro modules list — Legacy Pro module always displayed last.
4.1.7
- Fixed: Container Layout — containers set as hidden via Elementor’s responsive
visibility controls were still displayed when the module was active.
4.1.6
- Fixed: Container Layout — PHP warnings for undefined variables $cond_arrows and $cond_dots on PHP 8.3.
4.1.5
- Fixed: WordPress Menu — native Elementor mobile/tablet Breakpoint now works
correctly when no responsive layout override is set for that device. - Fixed: Container Layout — Slider navigation arrows and pagination dots now
visible in editor preview in all device modes.
4.1.2
- Fixed: ECS widgets not appearing in Elementor panel — only visible in search.
4.1.1
- Fixed: PHP Fatal error on PHP 8.1+ — typed property $current_permalink incompatible with parent Skin_Base.
4.1.0
- NEW: Style Templates — save and reuse widget style presets across pages and sites.
- NEW: JSON PowerEdit — edit widget settings JSON directly from the panel.
- NEW: Loop Custom Layout — arrange Loop Grid items inside a Custom Layout template.
- Improved: Dark Mode Colours — stability and compatibility improvements.
- Improved: Container Layout — better editor preview, cycling and fallback behaviour.
- Fixed: PHP 8.2 dynamic property deprecation in Legacy module.
- Tested with Elementor 3.35 and WordPress 6.8.
4.0.0
- Rebuilt from the ground up — modular architecture, every feature is a toggleable module.
- NEW: Default Colours tab in Elementor Site Settings with per-colour dark mode support.
- NEW: Dark Mode Switcher widget (toggle / dual / dropdown modes, full style controls).
- NEW: Container Layout module — Custom Layout mode and Slider mode.
- NEW: Menu Responsive module.
- NEW: Editorial Text widget.
- NEW: ECS Modules admin page.
- Legacy (ECS 3.x): loop skin and Ajax Load More preserved in the Legacy module, auto-activated on update.
3.1.7
- Fixed errors with Elementor 3.7.
- Added support for dynamic media breakpoint CSS.
3.1.0
- Ajax Pagination URL change is now optional.
- Experimental reinitialization of Elementor JavaScript after Ajax requests.
2.0.0
- NEW: Custom Grid Template with Loop Item placeholder widget.
1.0.0
- Initial release — Loop skin for Elementor Posts and Archive Posts widgets.
Detected by Sourcemap Explorer
We enumerate every /wp-content/plugins/<slug>/ path on the page, and pull the version from the ?ver= query string when WordPress emits one.