Description
Ajaxified Templates for Elementor is a free WordPress plugin that will allow you to swap Elementor templates in and out of the page over AJAX, so a visitor moving through your site never waits for a full browser reload.
You design each page of your site as an Elementor template, map those templates to URL slugs in the plugin’s Ajax Navbar widget, and the plugin fetches the matching template when a visitor clicks. The surrounding page stays where it is, only the content area changes.
You will be able to:
- Build every page of your site visually in the Elementor editor, as Elementor templates
- Map each template to a readable URL slug such as /about, straight from the Ajax Navbar widget
- Load a template over AJAX instead of reloading the whole page, requesting only the content the visitor asked for
- Share, bookmark and refresh individual slugs, which are rendered by PHP on direct load
- Keep browser back and forward buttons working through history states
- Link to a template from anywhere on the page with the Ajax Button widget, which takes its URL from the navbar automatically
- Highlight the current menu item, both after a click and on a direct load or refresh
List of widgets, found under the “Ajaxified Templates for Elementor” category in the Elementor editor:
- Ajax Navbar – logo, menu items and the content area the templates load into. Each menu item points one URL slug at one template, and a Default Template is shown on the front page itself
- Ajax Button – optional button that loads a template from anywhere on the page, for example a call to action inside one of your templates
Both widgets are styled from Elementor: typography, text shadow, colors, background, box shadow, border, border radius, padding, hover animation, transition duration and item gap.
Key features and compatibility:
- Fully compatible with both Elementor Free and Elementor Pro
- Templates are rendered server-side on first load, so a shared link or a refresh shows the right content
- A URL that matches no slug answers with a real 404 status and a “Content not found” message, so search engines don’t index broken slugs
- The AJAX layer is lightweight vanilla JavaScript, with no jQuery dependency
- Fires an
ajtemContentLoadedevent after every AJAX load, so other code can hook into it
Please note: this plugin needs a static front page (Settings > Reading) and pretty permalinks such as “Post name” (Settings > Permalinks). The slugs are served through that front page by the plugin rather than existing as separate WordPress pages. The plugin shows a warning in the dashboard while either setting is missing.
You can check out the plugin demo here.
Need help? Have a feature request? Visit the support thread.
Please consider donating even a small sum via PayPal.
Screenshots
Installation
Install the Ajaxified Templates for Elementor plugin as any other WordPress plugin. More info can be found in the official WordPress step-by-step guide here.
Then build your site in four steps.
1. Set up WordPress
- Go to Settings > Permalinks, select “Post name” and click Save Changes.
- Create an empty page, for example “Home”.
- Go to Settings > Reading, set “Your homepage displays” to “A static page” and pick that page as the Homepage.
2. Create a template for every page
- Go to Templates > Saved Templates and click Add New.
- Create one template per page of your site, for example Home, About, Services and Contact, and design each one in Elementor. These are templates, not WordPress pages, so do not create them under Pages.
- Publish every template. Each one will appear in the plugin’s “Select Template” dropdowns.
Build only the page content in these templates. The navbar lives on the front page, so do not add the Ajax Navbar widget to a template.
3. Build the front page with the Ajax Navbar widget
- Edit your front page with Elementor. For a page that shows only your own design, set Page Layout to “Elementor Canvas” or “Elementor Full Width” in the page settings.
- Drag the Ajax Navbar widget onto the page, directly on the page and not inside a template.
- Under Logo, pick a Logo Image and a Default Template. The Default Template is shown on the front page itself and whenever the logo is clicked.
- Under Menu Items, add one item per page of your site. For each item pick the template in “Select Template”, set the “Menu Label”, and optionally a “URL Slug”. An empty slug is generated from the label, so “About Us” becomes /about-us.
- Style the navbar from the Style tab, then publish the page.
The templates load into the content area right below the menu, inside the widget. Anything else you place on the front page, such as a hero image above the navbar or a footer below it, stays in place while the content changes.
4. Add Ajax Buttons (optional)
- Edit one of your templates, or the front page, with Elementor.
- Drag the Ajax Button widget where you need it, for example a “Get in touch” button in the Home template.
- Pick the target template in “Select Template” and set the “Button Label”.
Point a button at a template that also has a menu item in the Ajax Navbar. The button then takes that menu item’s slug, so its URL works on refresh and when shared too.
When everything is set, open your site, click through the menu and buttons, then refresh a slug such as /about to check that it loads directly.
FAQ
-
Do I need Elementor installed?
-
Yes. This plugin requires Elementor to be installed and active.
-
Does it work with Elementor Free version?
-
Yes, it works perfectly with the free version of Elementor.
-
Can I use it with Elementor Pro?
-
Yes, it’s fully compatible with Elementor Pro as well.
-
Do I need to set a static front page in Settings > Reading for the plugin to work?
-
Yes. Go to Settings > Reading and set “Your homepage displays” to a static page, then place the Ajax Navbar widget on that page. The slugs are served through the front page, so the plugin cannot work without one.
-
Which permalink structure do I need to select in Settings > Permalinks?
-
Select “Post name” under Permalink structure and click Save Changes. Other pretty structures such as Day and name or a custom /%category%/%postname%/ work too. Plain (?p=123) does not work, and neither does any structure that contains /index.php/, because WordPress writes no .htaccess rewrite rules for it.
-
Clicking a menu item loads the template via AJAX, but a refresh or a shared link asks the server for that URL directly, so two WordPress settings have to be right:
- Settings > Permalinks must be set to “Post name” (or another pretty structure without /index.php/). After saving, check that the .htaccess file in your WordPress root contains the “BEGIN WordPress” rewrite rules. If WordPress could not write the file, the Permalinks screen shows the rules to paste in yourself.
- Settings > Reading must have “Your homepage displays” set to a static page, and that page must contain the Ajax Navbar widget with the slug you are opening.
The plugin shows a warning in the dashboard while either setting is wrong. If both are right and a slug shows the wrong content instead, check that no real page, post or category uses the same name, since WordPress serves that first.
-
Are the slugs real WordPress pages?
-
No. A URL such as /about is not a separate WordPress page or post. The plugin resolves the slug and renders the Elementor template you mapped to it, both on direct load and during AJAX navigation.
-
Where do I set up the slugs?
-
In the Ajax Navbar widget. Each menu item has a “Select Template” dropdown and a “URL Slug” field – together they point one URL at one template. If you leave the slug empty it is generated from the menu label.
-
What shows on the front page itself?
-
The template picked as “Default Template” in the Ajax Navbar widget. Clicking the navbar logo loads it as well.
-
The button uses the slug of the Ajax Navbar menu item that points at the same template, so it always links to a URL that also works on refresh. A button pointing at a template that is not in the navbar falls back to a slug made from its label, which works on click but not on a direct load.
-
The current page’s menu item gets the
ajtem-nav__item--activeclass and is styled from the “Hover and Active” tab. In the Ajax Navbar widget go to Style > Menu Items, set Border Type to Solid, unlink the Width sides and set only Bottom (e.g. 3px), set the normal Border Color to transparent, then pick the underline color under “Hover and Active” > Border Color. -
What happens with a URL that matches no slug?
-
The front page is shown with a “Content not found” message, and the response carries a real 404 status.
-
Where can I find the widgets?
-
After activating the plugin, open Elementor editor — your new widgets will appear under the “Ajaxified Templates for Elementor” category.
-
Yes. The plugin updates the browser URL and manages history states during navigation, so back and forward behave normally. Opening or refreshing a slug directly also works, because the matching Elementor template is rendered server-side on that request.
-
Can I run my own code after a template is loaded?
-
Yes. Every AJAX load dispatches an
ajtemContentLoadedevent ondocument, with the loaded markup as its detail. The plugin also exposeswindow.ajtem.loadTemplate( templateId ), so your own code can load a template.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Ajaxified Templates for Elementor” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Ajaxified Templates for Elementor” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0 (25. September 2026)
- Initial release