ElementsKit Pro is an ultimate Elementor add-on pack that offers a comprehensive set of widgets, templates, and extensions to enhance your website-building experience. With its powerful features and seamless integration with Elementor, this plugin allows you to create stunning and professional-looking websites effortlessly. Whether you are a beginner or advanced user, this plugin provides a wide range of customization options and functionalities to meet your specific needs.

Plugin Version: 4.10.7
 
WordPress plugin ElementsKit Pro

Plugin Features

With ElementsKit Pro, you can access a vast library of pre-designed templates and blocks that can be easily imported and customized to match your websites style and branding. From headers and footers to various sections and layouts, you have the flexibility to create a unique and visually appealing website in no time.

One of the standout features of this plugin is its extensive collection of widgets. From advanced grid layouts, image hotspots, and pricing tables to social media feeds, testimonials, and countdown timers, you have a wide variety of widgets at your disposal to enhance the functionality and aesthetics of your website. Each widget is highly customizable, allowing you to adjust colors, fonts, spacing, and other properties according to your preferences.

ElementsKit Pro also offers numerous extensions that expand the capabilities of Elementor even further. You can add animation effects, parallax scrolling, and sticky sections to make your website more engaging and dynamic. Additionally, the built-in mega menu feature enables you to create elaborate and stylish navigation menus with ease.

To save time and effort, this plugin includes a powerful header and footer builder. You can design and customize your websites header and footer sections directly within Elementor, ensuring consistency throughout your site. The intuitive drag-and-drop interface simplifies the process, enabling you to arrange elements as you desire and make adjustments effortlessly.

Furthermore, this plugin offers seamless integration with popular third-party services and platforms. You can connect your website with Mailchimp, WooCommerce, Google Maps, and more to enhance the functionality and expand the possibilities of your website.

In conclusion, ElementsKit Pro is a versatile and feature-rich add-on for Elementor that empowers you to create professional and stunning websites without any coding knowledge. With its extensive library of templates, widgets, and extensions, as well as its user-friendly interface, this plugin is a must-have for anyone looking to elevate their website-building experience. Try out this plugin for WordPress and unlock the full potential of your design capabilities.

Specifications:

Release date: 11-10-2020
Last updated: 12-10-2026
Type: Paid
License: GPL 
Subject: Tools for Elementor
Compatibility: W5.x W6.x
Includes: Plugin
Language packs: English
Developer: Wpmet

Rating:
4.4428571428571 1 1 1 1 1 (210 Votes)

Download by subscription!

You need to log in on the site and purchase a club subscription!

Share with your friends!

 

A Guide to Configuring and Using ElementsKit Pro in Real Projects

ElementsKit Pro is best thought of not as a single widget, but as a broad extension suite for Elementor: modules, templates, a header and footer builder, mega menus, extra widgets, visual effects, post blocks, WooCommerce elements, and integrations for third-party forms. This guide does not repeat the short product summary from the top of the page. Instead, it walks through how to prepare your site, which features to enable first, how to build a practical use case, and how to verify that the result does not break your design, performance, or mobile navigation.

ElementsKit Pro working with WordPress and Elementor: setup and result verification
The overall workflow: the WordPress admin area, ElementsKit Pro settings, and the visible result inside Elementor.

The most common mistake with toolkits like this is turning everything on at once, building a page out of attractive blocks, and only later discovering conflicts with the theme, cache, mobile menu, or Elementor styles. A safer approach is different: define the task first, enable only the modules you actually need, build one testable section, validate it in the editor and on the live front end, and only then expand the page or template.

This article is for site owners, webmasters, and developers who already understand the basics of WordPress and Elementor but want to use ElementsKit Pro more deliberately. It covers installation at a high level, detailed post-install setup, a real-world header and mega menu scenario, result validation, troubleshooting for common issues, an FAQ, and a comparison with similar solutions.

What Problem the Plugin Solves and Where It Is Actually Useful

ElementsKit Pro extends Elementor when the standard set of elements stops being enough. If your site is built from individual sections, cards, tabs, accordions, galleries, post blocks, forms, menus, and WooCommerce widgets, an expanded toolkit saves time. That becomes especially noticeable on sites where you need to assemble several recurring areas quickly: a header, footer, services page, pricing section, testimonials area, product showcase, team cards, FAQ, and multi-level navigation.

The official WPMet page highlights several major feature areas: Header & Footer Builder, Mega Menu Builder, ready-made blocks and pages, a large widget library, and modules such as Conditional Content, Cross Domain Copy Paste, Advanced Tooltip, Advanced Sticky, Parallax, and Widget Builder. The documentation also makes it clear that widgets and modules are enabled from the ElementsKit admin panel, and that some features work as an extra layer on top of standard WordPress and Elementor functionality.

The practical value of the plugin is not that it replaces your theme or your entire development workflow. It is useful when a project is already built around Elementor and you want more interface components without writing a custom plugin. For example, on a clinic website you can build a header with office hours and a dropdown services menu; for an education site, a course page with tabs, FAQ, and testimonials; for an online store, product carousels, a mini cart, and category blocks; for an agency, a landing page with reusable sections and interactive cards.

At the same time, ElementsKit Pro does not remove the need for basic WordPress discipline. Your site still needs a solid theme, properly configured menus, optimized images, a clear page structure, and a backup before major changes. The plugin gives you tools, but it does not automatically fix weak site architecture.

Who ElementsKit Pro Is a Good Fit For, and When Another Route Makes More Sense

The plugin is a strong fit for users who already work in Elementor and want to expand the editor without switching to a separate builder. If your team is used to building pages visually, ElementsKit Pro helps keep the workflow unified: enable the required module, add the widget in the editor, configure spacing, colors, and responsiveness, then validate the page. For smaller studios, that is often easier than maintaining a library of custom blocks.

ElementsKit Pro is especially helpful in four situations. First, when you need a header and footer builder without switching to a dedicated theme builder. Second, when the site has complex navigation and a standard dropdown menu is not enough. Third, when you need to assemble many Elementor sections quickly but do not want to install several different addon plugins just to get a few individual widgets. Fourth, when you need fast prototyping: show the client a working page quickly, then refine the design carefully afterward.

The plugin may not be the right choice if the site is built entirely on the WordPress block editor without Elementor, if you need a fully custom interface with strict code requirements, if the project is sensitive to every kilobyte of CSS and JavaScript, or if the team is not prepared to test updates on a staging copy. A large addon bundle requires discipline: the more modules you enable, the more important it becomes to verify what is actually being used on the site.

There is also an organizational angle to consider. Discussions on WordPress.org include performance concerns and requests for better control over unused widgets. The developer notes that Elementor already has its own Element Manager, while users still expect clearer control over unnecessary elements. Because of that, it is worth deciding in advance who is responsible for auditing enabled widgets: the site owner, content manager, or developer.

What to Check Before Installing It on a Live Site

Before installing ElementsKit Pro, do more than confirm that Elementor is present. You also need to understand whether your current site setup can handle the additional layer of widgets and modules. WPMet documentation states that the Pro version depends on ElementsKit Lite, while WordPress.org lists the free core plugin requirements: WordPress at or above the catalog version, PHP at or above the minimum listed version, and an active Elementor installation. Elementor itself recommends a modern WordPress version, PHP 8.x as the preferred option, and sufficient memory limits.

Minimum pre-install checklist:

  • Create a backup of your files and database, or work on a staging copy if the site already has traffic.
  • Make sure Elementor is installed, active, and opens the editor without errors on a test page.
  • Confirm that ElementsKit Lite is installed and up to date, because the Pro addon uses it as its foundation.
  • Review WordPress and PHP memory limits, especially if the site already runs WooCommerce, forms, SEO plugins, and caching.
  • Document the current header, footer, and menu setup: take screenshots of the desktop and mobile versions so you have something to compare against later.
  • Clean up unnecessary Elementor drafts, but do not remove older templates until the new header or menu has been validated.

If the site runs behind cache, a CDN, or minification, you do not need to disable everything at once. It is better to know in advance where the cache is cleared and how to exclude a problematic file or page from optimization. For the first round of testing, use a page that is not critical for sales or lead generation. That lets you observe widget behavior without risking the most important part of the site.

If the site already uses another Elementor addon with similar widgets, do not enable duplicate blocks in ElementsKit Pro "just in case." Duplicates usually lead to extra styles, confusingly similar element names in the editor, and unnecessary friction for the content manager.

Installation and Initial Validation Without Unnecessary Risk

WPMet documentation describes Pro installation through a ZIP upload in the WordPress admin panel. This guide does not cover purchasing, payment, or license delivery. The practical installation flow is straightforward: Elementor should already be active, then ElementsKit Lite, and only after that should you upload and activate ElementsKit Pro. Once activated, do not start rebuilding the whole site right away. Open the ElementsKit admin area first and verify which modules and widgets are available.

A Safe Installation Sequence

  1. Open Plugins in the WordPress admin area and confirm that Elementor works on a test page.
  2. Check whether ElementsKit Lite is installed. If not, install the free version from WordPress.org and activate it.
  3. Upload the Pro addon ZIP through Plugins - Add New - Upload Plugin.
  4. After activation, open the ElementsKit section and review the Widgets and Modules panels.
  5. Do not enable every feature immediately. Turn on only the ones you need for the first scenario.

After installation, create a test Elementor page and add one simple ElementsKit widget, such as Icon Box, Accordion, or Button. Publish the page in a private or non-public area, open it in incognito mode, and confirm that the styles load correctly, the element displays properly on mobile, and the browser console shows no obvious JavaScript errors. It is a small test, but it quickly tells you whether WordPress, Elementor, the theme, and the addon are working together.

What Counts as a Successful Initial Check

Success is more than just seeing a green plugin status in the extensions list. A successful validation means the Elementor editor opens, the new widget can be dragged onto the page, changes save correctly, the front end displays the element without a broken layout, and the mobile version does not introduce horizontal scrolling. If the editor freezes at this stage, the widget panel does not load, or styles shift unexpectedly, move to troubleshooting instead of building a complex header.

Post-Install Setup: Enable Features Based on the Task, Not the Feature List

The most important sections after installation are ElementsKit - Widgets and ElementsKit - Modules. WPMet documentation clearly shows that widgets are enabled with toggles and then saved with the Save Changes button. It also explicitly recommends against turning everything on without a reason. That is not just a formality: in a large addon package, your choice of active elements determines how manageable the editor will be and how much unnecessary clutter enters the workflow.

Map of ElementsKit Pro widget and module configuration after installation
After installation, the first step is choosing the widgets and modules you actually need, not turning on the entire package for experimentation.

A Sensible Starter Set for a Typical Site

For a standard business website, it makes sense to begin with a small set: Header & Footer Builder, Nav Menu, Accordion or Advanced Accordion, Tab or Advanced Tab, Icon Box, Button, Testimonial, FAQ, and Blog Posts or Post Grid if the site includes a blog. If you need more complex navigation, add Mega Menu, but do not enable it until you are ready to configure both the WordPress menu and the header. For an online store, you can separately enable WooCommerce Product List, Product Carousel, Category List, or Mini Cart, but only if WooCommerce is already configured and the product catalog is populated.

Modules such as Parallax, Particles, Scroll Reveal, Mouse Cursor, Glass Morphism, and Liquid Glass can look impressive, but they are best enabled after the base structure is in place. They add visual effects, not core navigation, conversion, or content value. On sites with heavy mobile traffic, these effects need especially careful testing: evaluate not just how they look, but also readability, scroll performance, touch behavior, and whether they introduce unnecessary animation.

How to Choose Settings for the First Project

Start from the goal of the page. If the goal is to explain a service, you likely need tabs, accordions, icons, testimonials, and FAQ. If the goal is navigation through a large catalog, you need Header & Footer Builder, Nav Menu, Mega Menu, and possibly WooCommerce widgets. If the goal is to build a landing page quickly, ready-made blocks and templates can help, but they still need to be aligned with the site style: replace images, check spacing, remove unnecessary animation, and bring the headings into line with the actual page structure.

After enabling each block, validate it in Elementor and on a public page. If you enable a widget, place it on a test page. If you enable a module, verify that the expected interface option appears. If you enable Mega Menu, check the WordPress menu, the settings on the specific menu item, and the output in the header. This approach takes longer than "turn everything on," but it leaves a clear trail: you always know which setting controls what.

How to Roll Back a Questionable Setting

Rollback should be simple. If the issue appeared after enabling a specific module, disable it in ElementsKit - Modules, save changes, clear the cache, and check the page in a new window. If the issue appeared after adding a widget to a page, remove only that widget or revert the Elementor revision. If the issue affects the header, temporarily deactivate the Header template in ElementsKit Header Footer, but do not delete it until you identify the cause.

Header and Footer: How to Avoid Breaking Navigation When Switching to a Builder

Header & Footer Builder is one of the key modules in ElementsKit Pro. WPMet documentation shows a typical flow: enable the module, go to ElementsKit - Header Footer, create a new template, choose Header or Footer as the type, define display conditions, activate it, and open it in Elementor for editing. From there, you can add a logo, Nav Menu, buttons, contact information, search, or other elements to the template.

The most common mistake when creating a header is forgetting that the theme may already be outputting one. If the new header appears alongside the old one, check the theme settings first: many themes include their own controls for disabling the title, footer, or header area. If the theme does not provide a way to disable the old header, do not blindly hide it with CSS. It is better to choose a page template that does not output the duplicate header, or adjust the theme settings directly.

Display Conditions and Test Activation

When creating the template, ElementsKit asks you to choose a type and conditions. For the first test, you do not need to set Entire Site immediately. A safer approach is to create a header for one test page or a temporary section, validate the logo, menu, mobile behavior, and sticky effects, and only then expand the conditions. If the project is already live and visitors rely heavily on the menu, that reduces the risk of making the new header unusable on mobile devices.

When configuring the footer, check more than the visual appearance. Review functional links as well: privacy policy, contact details, store pages, terms of service, account links, or cart links. If you import a ready-made footer from a template library, replace the demo links right away. A ready-made template can save time, but it does not know your site structure.

Checking the Mobile Version

After saving the header, open a public page and test three widths: desktop, tablet, and smartphone. The menu should have proper spacing, a comfortable tap target, a clear expand icon, and no horizontal scrolling. If a hamburger icon suddenly appears on desktop, or the submenu will not close on mobile, review the Nav Menu settings, breakpoint, cache, and plugin version. ElementsKit changelog entries include fixes related to nav menu behavior, desktop hamburger display, submenu indicators, and mobile behavior, so navigation-related updates should not be ignored.

Mega Menu: The Use Case Where ElementsKit Pro Shows Its Strength Most Clearly

Mega Menu is one of the product-level features that most often motivates people to install ElementsKit Pro on content-heavy sites. WPMet documentation describes the flow clearly: enable the Header Footer and Mega Menu modules, create or configure a menu in Appearance - Menus, mark the menu as available for megamenu content, enable Mega Menu for a specific menu item, open EDIT MEGAMENU CONTENT, and build the content in Elementor. That last point matters: the mega menu is not just an abstract table of links, but full Elementor content attached to a menu item.

ElementsKit Pro mega menu setup: WordPress menu, Elementor content, and the final site output
The mega menu connects a standard WordPress menu, item-level settings, and Elementor content inside the dropdown area.

When a Mega Menu Is Justified

A mega menu is useful when a basic dropdown does not help visitors choose the right section. For example, an online store may need to surface categories, brands, promotions, and curated collections; an education site may need programs, courses, schedules, and resources; an agency may need services, industries, case studies, and contact paths. In those cases, the dropdown area can display columns, icons, short descriptions, and a call to action. If the menu has only five pages, a mega menu usually adds complexity without adding value.

A Practical Setup Sequence

  1. Create a standard WordPress menu and add the main items.
  2. Enable Header Footer and Mega Menu in ElementsKit - Modules.
  3. In Appearance - Menus, enable Enable this menu for Megamenu content.
  4. Open the settings for the specific menu item, enable Mega Menu, and save.
  5. Click EDIT MEGAMENU CONTENT and build the area in Elementor: columns, headings, links, icons, and small CTA blocks.
  6. Add Nav Menu to the ElementsKit header template and select the required WordPress menu.

Do not overload the dropdown area. A good mega menu helps visitors choose a path; it does not try to show the entire site at once. For the first version, three or four columns, short link groups, and one clear action are enough. If the menu is being used for a store, avoid stuffing it with heavy product carousels unless they are truly necessary. It is usually better to show categories and one promotional block, and leave products on the catalog page.

Ajax Load for a Heavy Menu

WPMet documentation includes a separate article on Ajax Load for Mega Menu. The idea is simple: the mega menu markup is not loaded immediately, but fetched when the user interacts with the menu item. That can help if the dropdown is heavy, contains a lot of content, and affects the initial page load. But Ajax Load should only be enabled after normal menu validation: first confirm that the mega menu works without it, then enable Ajax Load for the relevant item, save, clear the cache, and test the first menu opening.

Ajax Load should not be used as a way to hide an overly heavy navigation layer. If the menu includes dozens of images, nested carousels, and unnecessary effects, simplify the structure first and only then consider delayed loading.

Widgets, Templates, and Widget Builder: How to Keep the Editor from Turning Into a Storage Closet

ElementsKit Pro offers a large library of widgets and ready-made sections. That is useful, but in a real project, manageability matters more than raw quantity. If the editor presents dozens of similar elements, content managers start choosing at random: one section is built with Advanced Tab, another with the regular Tab, a third with a widget from a different addon. A few months later, maintaining that page becomes harder than hand-coding it.

Create a Short Internal Standard

It helps to decide in advance on an "approved set" for the project: which widgets should be used for FAQ, which ones for service cards, which block for testimonials, which for galleries, and which for pricing. Write it down in a project note or on an editor-facing documentation page. Then ElementsKit Pro becomes a library of tested building blocks, not an endless menu.

Ready-made templates are best imported as drafts, not as final design. After insertion, review the headings, copy, images, spacing, responsiveness, link states, and button styles. Demo blocks often look great in screenshots, but on a real site they may clash with longer headings, local image assets, or global Elementor color settings that are already in place.

When Widget Builder Makes Sense

In the documentation, Widget Builder is presented as a way to create your own Elementor widget through a visual interface and a set of control fields: Text, Number, Text-area, WYSIWYG, Code, Switcher, Select, Color, URL, Media, Icon, Slider, Border, and others. That is useful if you repeat the same block frequently and want to give editors structured fields instead of freeform layout controls. For example, a service card might include a heading, short text, icon, link, and color accent.

But Widget Builder should not be treated as a replacement for building complex functionality properly. If a block needs custom database queries, integrations, advanced permission logic, or form processing, a specialized plugin or custom development is a better choice. A visual widget builder works best for repeatable presentation blocks where fields, order, and a consistent visual format matter most.

Quality Control After Inserting Widgets

After adding a new widget, do not check appearance alone. Make sure images have alt text, buttons point to meaningful links, interactive elements are keyboard accessible, accordions do not hide critical information, and FAQ does not turn into a pile of repetitive SEO-style answers. ElementsKit changelog entries include fixes related to accessibility, alt text, sanitization, SVG handling, Elementor compatibility, and widget behavior. That is a useful signal: complex widgets need regular updates and post-update checks.

Practical Example: Building a Header with a Mega Menu for a Services Website

Let us walk through a concrete scenario. Imagine a WordPress services site with a home page, a "Services" section, individual service pages, a blog, and a contact page. The goal is to replace a standard dropdown with a header where the "Services" item opens a mega menu with columns, short descriptions, and a prominent consultation link. This is exactly the kind of task that fits ElementsKit Pro because it involves a WordPress menu, Header & Footer Builder, Nav Menu, and Mega Menu content created in Elementor.

Practical ElementsKit Pro scenario: goal, configuration, mega menu, and result validation
A practical scenario: from the user goal to enabled modules, menu setup, and validation on a live page.

Goal

Create a header that helps visitors quickly choose the right service category. The dropdown area should contain three columns: core services, popular solutions, and useful resources. It should also include a separate "Get a Consultation" button. On mobile, the menu must remain readable and must not take over the entire page in a way that prevents users from closing it.

Preparation

Before you begin, make sure the service pages already exist in WordPress and that a menu with a "Services" item is available under Appearance - Menus. In ElementsKit, enable Header Footer, Mega Menu, and the Nav Menu widget. If you plan to use icons, confirm that the required icon pack is enabled and visible in Elementor.

Steps

  1. In Appearance - Menus, enable megamenu content support for the selected menu.
  2. Open the "Services" menu item, enable Mega Menu, and save the settings.
  3. Go to EDIT MEGAMENU CONTENT and create three columns in Elementor.
  4. In the first column, add links to the main services; in the second, short blocks for popular solutions; in the third, two or three useful resources or a CTA.
  5. Create a header template in ElementsKit - Header Footer, choose Header, define the display conditions, and open Edit With Elementor.
  6. Add the logo, Nav Menu, and the consultation button. In Nav Menu, select the WordPress menu you created earlier.
  7. Save the template, open a test page, and verify the behavior of the "Services" dropdown.

Validation

On desktop, the mega menu should open next to the menu item, stay within the screen bounds, and avoid covering key page elements in a way that makes users lose context. On mobile, check that the menu opens properly, items are easy to tap, the panel closes in a clear and predictable way, and the page does not gain horizontal scrolling. After enabling Ajax Load, test the first open carefully: if the user sees a long empty area before content appears, the menu should be simplified or delayed loading should be turned off.

A Practical Nuance

If the mega menu includes images, icons, or template-style blocks, they may look good in the editor but still be too heavy on first load. Start with text links and small icons. Add images only where they genuinely help people choose, such as a mini preview of a product category or an illustration of a service area.

Result Validation: Editor, Front End, Performance, and Mobile Navigation

After configuring ElementsKit Pro, your review should follow a simple chain: Input -> Product logic -> Output -> Verification -> Failure symptom -> Fix. The input is the enabled widgets, the selected WordPress menu, the header template, and the mega menu content. The product logic is how ElementsKit modules connect WordPress settings, Elementor, and front-end output. The output is the finished header, the dropdown menu, the page widgets, and the resulting styles. Verification includes the editor, the public page, responsiveness, cache behavior, and the browser console.

What to Check in Elementor

  • The editor opens without the widget panel loading forever.
  • ElementsKit widgets appear in the expected category and can be dragged onto the canvas.
  • Changes save through Update and do not disappear after reloading the editor.
  • Responsive settings do not break the layout on tablet or smartphone.
  • Elementor global colors and fonts do not conflict with the imported template.

What to Check on the Front End

Open the page in a normal window and in incognito mode. If the site uses caching, clear it and test again. Check whether the header loads cleanly, whether the old theme header reappears, whether links work, whether the mega menu opens correctly, whether icons are visible, and whether the browser console shows errors. For interactive blocks such as tabs, accordions, modals, and videos, do not just inspect the initial state - test clicks as well.

A Lightweight Performance Audit

Do not assume the addon is "optimized by default" and therefore needs no validation. The official page emphasizes granular control and the ability to disable unused features, and the documentation shows how widget management works. In practice, check which elements are actually being used. Disable unused widgets, remove unnecessary imported sections, avoid applying heavy effects to every block, and do not stack multiple similar addons. If the page becomes noticeably heavier after enabling a module, simplify that specific block first instead of disabling the entire plugin.

Safe Improvements Without Editing Plugin Files

You should not edit ElementsKit Pro inside the plugin folder. Any changes there will disappear after an update and may break supportability. If you need a small visual adjustment, use a custom class in Elementor and place CSS in a safe location: theme custom CSS, a child theme, Elementor Pro settings, or a trusted snippets plugin. The example below does not rely on internal ElementsKit classes. It works through your own custom class, which you can assign to the header container or the section that contains the menu.

Example: Visible Focus State for Header Links

The goal is to make navigation easier to use with a keyboard without touching PHP or JavaScript. In Elementor, open the header container, add ekit-header-accessible in the CSS Classes field, then insert the CSS in a safe location on the site.

.ekit-header-accessible a:focus-visible {
  outline: 3px solid #5b6cff;
  outline-offset: 4px;
  border-radius: 4px;
}

.ekit-header-accessible a {
  text-underline-offset: 3px;
}

Validation is simple: open the page, press Tab, and check whether the current link is clearly visible in the header and dropdown menu. If the focus style looks too bold for the design, adjust only the outline color and thickness. Rollback is just as simple: remove the class from the container or delete the CSS block. Do not treat this snippet as a universal replacement for full accessibility testing, but for navigation it provides a fast and useful improvement.

Product Video

The official ElementsKit page includes a specific "Watch It In Action" video that shows the product in the context of Elementor and helps answer questions such as "how to use ElementsKit Pro" and "what this Elementor addon can do." It is most useful after the initial read-through of the guide: first you understand the logic of the modules and validation steps, then you see a visual walkthrough of the interface.

Use the video as a broad visual reference, not as a substitute for testing on your own site. The interface and feature set may vary depending on the plugin version, active modules, theme, and which widgets are enabled in the admin panel.

Common Issues and Troubleshooting

Most issues in ElementsKit Pro are not caused by a single button, but by the interaction between WordPress, Elementor, the theme, cache, active modules, and a specific widget. That is why troubleshooting should move from simple to complex: first verify that the required module is enabled, then check the editor, then the public page, then cache, the theme, and possible conflicts.

ElementsKit Pro troubleshooting: symptom, cause, validation, and fix
A troubleshooting map helps separate a configuration issue from a theme, cache, or Elementor conflict.

The Widget Does Not Appear in Elementor

Symptom: you search for the required element in the Elementor panel, but it is not there. Possible causes include the widget being disabled in ElementsKit - Widgets, the Pro addon not being active, ElementsKit Lite being missing, or the wrong module being enabled.

Check the ElementsKit widget panel, save the changes, refresh the editor page, and clear the browser cache. If the issue started after an update, review the changelog and support forum: similar issues with individual widgets are sometimes fixed in recent releases. Rolling back the entire site only makes sense if a specific widget is breaking a production page and there is no fast fix.

The Mega Menu Does Not Open or Shows an Empty Area

Symptom: the menu item is visible, but the dropdown area does not appear or opens empty. Possible causes include the Mega Menu module not being enabled, the menu not being marked for megamenu content, the settings being applied to the wrong item, the header using a different WordPress menu, or Ajax Load conflicting with cache or JavaScript optimization.

Check ElementsKit - Modules, then Appearance - Menus, then the specific menu item. Temporarily disable Ajax Load and test without cache. If the menu starts working, the issue is not the content itself but delayed loading or optimization. If it still does not work, recreate a test menu item and add minimal content without images.

The Header Is Duplicated Alongside the Old Theme Header

Symptom: after activating the header template, two headers appear on the page. The usual cause is that the theme continues to output its own header while ElementsKit adds a new one. Check the theme settings, the page template, the ElementsKit display conditions, and whether another header builder is active elsewhere.

The fix is to disable the theme header through its native settings or restrict the new template's display conditions to only the pages where it is needed. Do not start with CSS display: none on the old header: that may hide important navigation visually while leaving unnecessary markup and scripts in place.

The Elementor Editor Freezes or the Widget Panel Will Not Load

Symptom: Elementor takes a long time to open, the widget panel is blank, or the editing screen freezes. In its own documentation, Elementor recommends checking memory limits, version freshness, plugin conflicts, the active theme, ModSecurity, PHP Zlib, and max_input_vars. On a site with a large addon bundle, those checks are especially relevant.

Start with updates and memory limits. Then, on a staging copy, temporarily keep only Elementor and the required addon plugins active, disabling the rest one by one. If the issue appears only with a specific ElementsKit widget, remove that widget from the test page and review the changelog. If the problem affects the entire editor, do not try to fix it with random CSS tweaks.

Menu, Icon, or Widget Behavior Changed After an Update

Symptom: everything worked before the update, but afterward the hamburger appears on desktop, the submenu behaves differently, an icon no longer displays, or a widget changes its styling. The ElementsKit changelog includes many fixes specifically related to nav menu behavior, SVG, icon packs, TablePress, pricing tables, video widgets, and responsiveness. That means updates can change the details of how individual elements behave.

Check the changelog, clear the cache, update Elementor, and then test the page without JavaScript minification. If the issue is limited to one block, temporarily replace it with a simpler version or disable the questionable effect. Use a version rollback only as a temporary measure on a site copy if the public page is business-critical and there is no quick patch.

ElementsKit Pro FAQ

Can the plugin be used without Elementor Pro?

The official WPMet page states that ElementsKit works with the free version of Elementor, and Elementor Pro is not required for basic use of the addon features. That said, some specific scenarios may still depend on which Elementor or theme features your site uses.

Do I need to enable all widgets after installation?

No. The widget documentation shows that you can enable only the elements you need and save the changes. On a real site, it is better to activate only what the current project actually uses. That keeps the editor simpler and reduces unnecessary asset loading.

Why is the mega menu not appearing after setup?

Most often, the Mega Menu module is not enabled, megamenu content support is not activated for the WordPress menu, the settings were applied to a different menu item, or the header template is using the wrong menu. If Ajax Load is enabled, disable it temporarily and test without cache.

Can I replace an outdated or unattractive theme header with an ElementsKit header?

Yes, as long as the theme does not interfere with the new header template and allows its own header to be disabled or bypassed through a suitable page template. Before enabling it site-wide, test the new header on one page and on mobile.

Will ElementsKit Pro affect site speed?

Any large addon bundle can affect performance if you enable unnecessary elements, add heavy visual effects, and import too many templates. The official page emphasizes granular control and disabling unused functionality, so the practical answer is simple: enable only what you need, review cache behavior, and test the public page.

What should I do if a widget breaks after an update?

Start by clearing cache, reviewing the changelog, updating Elementor, and testing the page without aggressive minification. Then isolate the specific widget on a test page. If the issue repeats, temporarily replace the block and send the details to the developer through support.

Is ElementsKit Pro suitable for WooCommerce?

WPMet documentation includes a dedicated WooCommerce widget group: Product List, Category List, Mini Cart, and Product Carousel. The plugin can help shape the storefront and store navigation, but it does not replace WooCommerce product setup, shipping, payments, taxes, or transactional emails.

When is it better not to use this plugin?

If the site does not use Elementor, if you need the lightest possible custom code without a visual builder, or if the team is not prepared to maintain an addon bundle after updates, a narrower solution is usually the better choice. ElementsKit Pro is strongest when Elementor is already the main page-building tool.

When ElementsKit Pro Is the Right Choice

ElementsKit Pro is a strong choice for WordPress and Elementor sites that need extended widgets, a manageable header and footer, a mega menu, ready-made sections, and a fast visual workflow. Its main strength is how many practical tasks it brings together in one package: menus, header/footer templates, content widgets, WooCommerce blocks, and extra modules.

Before rolling it out, it is important to validate the environment, install the Lite foundation, enable only the modules you need, build one practical scenario, and test the public result. If the header, menu, widgets, and responsive behavior all work reliably after that, you can expand its use across other pages.

If you are ready to work this way, move to the download section and download the installation file to test it on your WordPress site. The best outcome is not just an activated plugin, but a clear set of enabled features, a working test page, and a defined list of modules the project actually needs.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.