Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Ajaxified Templates for Elementor

开发者 rgblab
更新时间 2026年10月1日 03:16
捐献地址: 去捐款
PHP版本: 7.4 及以上
WordPress版本: 7.1
版权: GPLv2 or later
版权网址: 版权信息

标签

ajax elementor navigation elementor templates page transitions

下载

1.0.0 1.0.1

详情介绍:

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. Now on the WordPress Playground. 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: List of widgets, found under the "Ajaxified Templates for Elementor" category in the Elementor editor: 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: 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 or you can test it on your own on WordPress Playground. Need help? Have a feature request? Visit the support thread. Please consider donating even a small sum via PayPal.

安装:

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
  1. Go to Settings > Permalinks, select "Post name" and click Save Changes.
  2. Create an empty page, for example "Home".
  3. 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
  1. Go to Templates > Saved Templates and click Add New.
  2. 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.
  3. 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
  1. 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.
  2. Drag the Ajax Navbar widget onto the page, directly on the page and not inside a template.
  3. 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.
  4. 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.
  5. 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)
  1. Edit one of your templates, or the front page, with Elementor.
  2. Drag the Ajax Button widget where you need it, for example a "Get in touch" button in the Home template.
  3. 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.

升级注意事项:

Best practice is to always use latest plugin version.

常见问题:

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.

Why do I see a 404 page when I refresh or share a slug URL such as /about?

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:

  1. 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.
  2. 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.

How does the Ajax Button get its URL?

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.

How do I underline the active or hovered menu item?

The current page's menu item gets the ajtem-nav__item--active class 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.

Do shared links and browser back/forward buttons work?

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 ajtemContentLoaded event on document, with the loaded markup as its detail. The plugin also exposes window.ajtem.loadTemplate( templateId ), so your own code can load a template.

更新日志:

1.0.1 (29. September 2026) 1.0.0 (25. September 2026)