ElementsKit 4.0: Faster Load Times, Full Accessibility, and Angie Compatibility 

ElementsKit 4.0 is not a feature-packed release in the traditional sense. There’s no long list of new widgets or flashy additions. Instead, what we focus on: three things that matter more than any single widget ever could: performance, accessibility, and Angie compatibility.

We rebuilt how ElementsKit loads its assets, audited every widget for accessibility compliance, and made the plugin work with Elementor’s AI assistant. This post walks through what changed, why we made these choices, and what it means for your sites.

▶️Watch ElementsKit 4.0 Updates at a glance 👇

Why ElementsKit 4.0 – What Drove This Release

Every release starts with a question: what do users actually need more of right now? For 4.0, the answer wasn’t more widgets or modules. It was a stronger foundation.

ElementsKit has grown a lot over the years. More widgets, more modules, more flexibility. But that growth came with a quiet cost. Those versions used to load heavier assets on every page or older code paths that weren’t pulling their weight anymore. And, some other accessibility issues, such as interactions that worked well with a mouse but didn’t always work with a keyboard.

But that doesn’t mean things were broken in ElementsKit. But it wasn’t as sharp as it could be.

Performance was the first thing we wanted to fix. Core Web Vitals matter more than ever for SEO, agentic browsing, and user experience. Users shouldn’t have to install a caching plugin just to compensate for their page builder addon. If a widget isn’t on your page, its code doesn’t bring any profit to your business. That principle drove most of the engineering work in this release.

Accessibility was the second driver. And honestly, one of the hardest parts to get right. Making widgets accessible isn’t just adding a few ARIA labels. 

It means more than that; we have to rethink how accordions indicate their state, how popups manage focus, how image comparison sliders function without a mouse, and how custom dropdowns behave for screen reader users. 

It’s detailed, widget-by-widget work that’s easy to skip and hard to fake. Even modern site-building tools often ship layouts with poor keyboard navigation and missing screen reader support. We wanted ElementsKit to handle this properly, so users don’t have to patch it themselves.

And finally, Angie. Elementor introduced its AI assistant, and it made sense to make ElementsKit’s features like headers, footers, mega menus, and templates work with it. Not to replace how you build, but to give you another way to move faster when you want to.

That’s what 4.0 is really about. A faster foundation, a more inclusive one, and a smoother workflow, no matter how you prefer to build.

Performance: Faster Load Times Without Losing a Single Feature

The biggest change in ElementsKit 4.0 is how the plugin loads its assets. And the results show up immediately in the numbers.

The Performance Issue We Set Out to Solve

For years, ElementsKit loaded its CSS and JavaScript the same way most plugins do: one large combined stylesheet, one shared script bundle, all enqueued on every page. That approach is simple, but it has a hidden cost. If you use the Accordion widget on your homepage, the browser still downloads styles for the Tab widget, the Testimonial widget, the Countdown Timer, and every other widget you’re not using. As ElementsKit grew, that unused weight grew with it.

Core Web Vitals penalized us for it. Lighthouse scores flagged it. And more importantly, real users on slower connections felt it.

The Fix: Per-Widget Asset Loading

In ElementsKit 4.0, we split every widget into its own CSS file and its own JavaScript file. Each widget now declares exactly what it needs, and the browser only loads those files when the widget is actually present on the page. If a widget isn’t on your page, its styles and scripts don’t load. Simple as that.

Shared utilities that genuinely need to load everywhere, like common layout helpers or responsive breakpoints, and they still do. But they’re now separated from widget-specific code, so nothing loads unnecessarily.

The Results From Our Optimization Work:

Here’s what our internal testing showed after the switch:

Metric	Improvement
Total Blocking Time (TBT)	Up to 80% reduction
SEO Score	About 50% improvement
Largest Contentful Paint (LCP)	About 16% faster
Overall Mobile Performance	Approximately 40% improvement
Frontend CSS Loading	Reduced by 50%

These numbers are the direct effect of loading less unnecessary code on every page.

Unnecessary Assets Clean Up From ElementsKit

Along with the loading strategy change, we cleaned house across the codebase.

ElementsKit Lite used to ship its own copy of Font Awesome, even though Elementor already bundles it. That was a full megabyte of duplicated font files loading on every WordPress site running ElementsKit Lite. In 4.0, we removed the duplicate and switched to Elementor’s Font Awesome package. That alone saved about 1.05 MB per install.

We also removed roughly 371 KB of unused JavaScript from the Free plugin and about 11 MB of redundant Composer data from the Pro version. Neither of those affected any functionality. They were leftover weight from the plugin’s growth over the years.

On the script side, we centralized third-party libraries under a single assets/libs/ directory. Chart.js, DataTables, Magnific Popup, TwentyTwenty, and others used to live scattered across widget and module folders, sometimes duplicated. Now they live in one place, load only when needed, and are easier to maintain. We also replaced an older Bootstrap-based UI helper with a lighter purpose-built one (ekit-ui.js), which improved how accordions, tabs, and toggles handle interactions.

How You Get Benefits from ElementsKit Performance Improvements?

You don’t need to do anything to benefit from these improvements. Update to the ElementsKit 4.0 Version, and your existing sites automatically start loading less code, rendering faster, and scoring better on Core Web Vitals. Same widgets, same features, same design flexibility, just significantly less weight behind the scenes.

If you’ve been holding off on optimization because you weren’t sure where to start, this update is the easiest performance win you can get without touching a single line of your site. 

Accessibility Improvements in ElementsKit: Built for Everyone! 

Performance is easy to measure. Accessibility is harder, but it matters just as much. In 4.0, we ran a full WCAG 2.1 AA audit across every ElementsKit widget in both the Free and Pro plugins, and rebuilt the ones that needed it.

Why did this need real work?

Elementor widgets often build custom UI patterns like accordions, tabs, popups, offcanvas panels, search dropdowns, image comparison sliders, and radial menus. Visually, they look clear. But under the hood, many of them relied on plain div and span elements with click handlers. 

And that works fine with a mouse, but it falls apart the moment someone tries to navigate with a keyboard or listen to the page with a screen reader.

There were some accessibility issues in the older versions, including:

• Clickable elements that weren’t real buttons. 
• Icon-only controls with no accessible names,
• Popups that didn’t announce themselves as dialogs.
• Hidden menu items are still reachable by the Tab key.
• And custom dropdowns that couldn’t be opened with a keyboard at all. 

Each one is a small thing on its own. Together, they add up to a plugin that isn’t fully usable for a real segment of users.

What We Changed for this Elementor Addon Accessibility Improvements

The audit covered every interactive widget. Here’s what got fixed across the two plugins:

• Accordions and toggles now use proper heading, button, and region semantics. Screen readers correctly announce the trigger, whether the panel is expanded or collapsed, and which content belongs to which heading.

• Tabs follow the WAI-ARIA tabs pattern. Arrow keys move between tabs, Home and End jump to the first and last, and aria-selected stays in sync with what’s active.
• Popups, modals, and offcanvas panels use role=”dialog” and aria-modal=”true”, with accessible labels tied to visible titles when available. And, lose buttons are real buttons with meaningful labels, not icon-only spans.
• The Image Comparison widget, which used to be mouse-only, is now a proper keyboard-operable slider. Arrow keys move the divider in small steps, Page Up and Page Down move in larger ones, Home and End jump to either extreme, and screen readers announce the current position as it changes.
• The Circle Menu widget also got a full accessibility layer on top of its visual behavior. The trigger is focusable, hidden radial links are properly removed from the tab order when collapsed, and the menu supports Enter, Space, and Escape.
• The Advanced Search widget’s custom category and tag selectors are now wired as ARIA comboboxes with listbox dropdowns and full keyboard support, like arrow keys to navigate, Enter to select, or Escape to close.
• Icon-only buttons across widgets, such as Back to Top, Social Share, Header Search triggers, and popup close controls, now have proper accessible names so screen reader users know what they do.

And visible focus indicators are in place across every interactive widget, so keyboard users can always see where they are on the page.

Why Accessibility Improvements are Harder Than It Looks

Accessibility isn’t something you can fix by running a script. It’s not a checkbox. It has to be considered widget by widget, interaction by interaction. 

And, some crucial questions like: What does this control do? What should a screen reader announce? What happens when the user presses Enter? Escape? Tab? Where does focus go when a popup closes?

That kind of detailed work is easy to skip and hard to fake. Even AI-generated layouts routinely ship with poor keyboard navigation, missing ARIA attributes, and popups that trap keyboard users with no way out. It’s one of the areas where automation still doesn’t do a great job.

But the good news for Elementor users is that we wanted ElementsKit 4.0 to handle it properly by default. So the sites you build with it are usable by everyone, including people using keyboards, screen readers, or other assistive technology. So now you can add an ElementsKit feature without having to think about it or patch it after the fact.

How Do ElementsKit Accessibility Improvements Benefit You?

If your clients care about accessibility compliance and more do every year, especially in regulated industries and public-facing organizations. Then, ElementsKit 4.0 is a meaningful step forward. You get widgets that meet WCAG 2.1 AA standards out of the box, without needing custom code or third-party accessibility plugins to fill the gaps.

And if you’ve never thought much about accessibility before, this update quietly makes your sites better for a slice of users you probably never realized were struggling with them.

Angie Compatibility: AI-Assisted Building Without Leaving Elementor

Elementor recently introduced Angie, its built-in AI assistant. Instead of dragging widgets and adjusting settings one by one, you can describe what you want and let Angie build the structure for you. It’s a natural next step for anyone who spends hours a week building similar sections across different sites.

With 4.0, ElementsKit’s most-used building features now work with Angie directly.

What You can Generate with Angie

You can use Angie to generate headers, footers, and mega menus. These are the design parts that take the longest to design from scratch and get right across breakpoints. Instead of starting with a blank canvas and dragging in widgets one by one, you describe the layout you want: like a sticky header with a logo, primary menu, and search icon, or a three-column footer with contact info, quick links, and a subscribe form, and Angie generates a starting point you can refine.

Template insertion works the same way. If you’ve saved templates in ElementsKit or want to pull from the built-in library, Angie can insert them into the right place in your page based on what you’re asking for, rather than making you dig through modal windows to find and place them manually.

Why are These Building Blocks First

Headers, footers, mega menus, and templates are the pieces most builders reuse across projects. They’re also the ones where a blank canvas is the biggest source of friction. New sites often stall at the header stage. You know what you want, but recreating it widget by widget takes an hour before you’ve even started the actual content.

Making these Angie-compatible means the parts of a site that used to slow you down at the very beginning now have a much faster starting point. You still control the design, the styling, the responsive behavior. Angie just gets you past the empty screen.

What This Means for Your WordPress Workflow

If you already use ElementsKit, nothing about your existing workflow changes. All the widgets, all the modules, all the settings work exactly as they did before. Angie is an option, not a replacement.

But when you want to move faster, building a new client site under a deadline, testing layout ideas, and prototype structures before committing to a design. But now you have an AI-assisted path that stays inside the Elementor editor you already know. No switching tools, no importing generated code, no cleanup afterward. You prompt, review, adjust, and keep building.

That’s the point. Speed when you want it, control when you need it.

Codebase Improvements: Stronger Foundations For Websites

Alongside the big user-facing changes, 4.0 also ships a round of behind-the-scenes cleanup across the codebase. We tightened how data flows through the plugin, such as how values get sanitized before they appear on the page, how redirects are handled, how dates behave across time zones, and how translatable strings pass context to translators.

None of this changes anything you’ll see. Your widgets look the same. Your settings work the same. But the code sitting behind them is now more consistent, more secure, and better aligned with WordPress development best practices.

It’s the kind of work that doesn’t show up on a features list, but it’s the reason a plugin stays reliable as it grows. Every release, we chip away at the older code paths that have accumulated over the years, and 4.0 is a meaningful step in keeping the plugin healthy for the long run.

 How to Update to ElementsKit 4.0

Updating to ElementsKit 4.0 is straightforward. If you’re already using ElementsKit, the update will appear in your WordPress dashboard under Plugins → Installed Plugins. Click Update Now, and you’re done.

A few things worth keeping in mind before you update:

• Take a backup first. This is standard advice for any plugin update. But it’s especially worth doing with this kind of mega release: new asset loading, cleaned-up code paths, updated dependencies. Any reputable backup plugin or your host’s backup tool will do the job.
• Clear your caches after updating. Because CSS and JavaScript are now loaded per widget, you’ll want to clear any caching plugin, server-side cache, and CDN cache so browsers pick up the new asset structure instead of serving stale files. Once the caches are cleared, the performance improvements will start showing up on the frontend right away.
• Test a page before going live. If you run a large or complex site, load a few of your most important pages after updating: a homepage, a landing page, and a page that uses a lot of ElementsKit widgets. And check that everything looks and behaves the way it should. In our testing, existing pages transition cleanly, but a quick spot check is always worth the two minutes.
• If you’re running ElementsKit Pro, both plugins should be updated together to stay in sync.

Wrapping Up

ElementsKit 4.0 isn’t the biggest release we’ve ever done in terms of new widgets or new modules. It’s the biggest release we’ve ever done in terms of what happens under the surface.

Faster asset loading that cuts Total Blocking Time by up to 80%. A full accessibility audit that brings both Free and Pro up to WCAG 2.1 AA standards. Angie compatibility that lets you generate headers, footers, mega menus, and templates with AI, right inside Elementor. And a round of codebase cleanup that keeps the foundation strong for everything that comes next.

None of these changes are things you have to learn or configure. You update the plugin, and your sites automatically load faster, work better with assistive technology, and open up to a new way of building, without you having to change how you work.

If you’ve been using ElementsKit for a while, this is the update that makes it feel new again. And if you’re just getting started, this is a good time to explore what a modern, well-optimized page builder addon can do.

Update to 4.0 today from your WordPress dashboard. We think you’ll feel the difference.