Page builders: Elementor, Bricks, Divi and more
On this page
Pages built with Elementor, Bricks, Divi, Beaver Builder, WPBakery, Oxygen, Breakdance, Zion Builder, Spectra or the block editor navigate like any other page. There’s nothing to configure.
Editing is left alone
When you open a page in a visual builder, AjaxPress recognises the builder and steps aside completely, so the builder loads exactly as it would without AjaxPress. This covers Elementor, Divi (Divi 5 included), Bricks, Beaver Builder, Oxygen, Breakdance, WPBakery, Visual Composer, Zion Builder, Thrive Architect, Brizy and the Customizer preview. Links that lead into a builder load the normal way too.
If a builder’s editor doesn’t load or behaves oddly, first check that Settings → AjaxPress → Basic → Enable SPA for Admin Dashboard is off. It only affects wp-admin, and visitors see no difference. On WordPress 7.0 and newer, leave it off anyway.
Widgets, sliders and animations
Each page loads as a complete page, with all of its scripts, so sliders, carousels, entrance animations, tabs, popups and galleries work on every page just as they do without AjaxPress. You don’t need to re-initialise anything.
A persistent player in a builder
A player that should keep playing must be on every page, so put it in a global template, never on a single page. Page content is exactly what changes when a visitor moves on.
Elementor
- Go to Templates → Theme Builder → Footer and edit your footer (or create one for the entire site).
- Add your player: an Audio widget, an HTML widget with your player code, or a radio plugin’s widget.
- Select the widget, open Advanced, and set CSS ID, for example
my-radio-player. - Mark it. With AjaxPress Pro, enter
#my-radio-playerunder Settings → AjaxPress → Media Players. With the free plugin, use an HTML widget and putdata-ajaxpress-persiston the player’s wrapper. - Give it its own positioning. Elementor styles widgets through their section, and those styles stop applying once the player has moved.
Bricks
Build a footer template set to show on the entire site, put the player in it, and give the player element a CSS ID (Style → CSS → CSS ID). Use that ID in Media Players, or add the data-ajaxpress-persist attribute under the element’s Attributes.
Divi
Use the Divi Theme Builder to create a global footer, put the player module in it, and set a CSS ID under Advanced → CSS ID & Classes. Then use that ID in Media Players.
See Keep audio or video playing across pages for identity keys, positioning and testing.
Forms built with a builder
Elementor forms, Bricks forms and the other builders’ form widgets submit their own way, over their own ajax, and AjaxPress leaves them to it. If a builder form ever submits twice or stops before its confirmation message, update AjaxPress (2.4.2 fixed the known cases), then opt the form out with data-ajaxpress-ignore-submit. See Forms.
Troubleshooting
| Symptom | Try first |
|---|---|
| The builder’s editor won’t load | Turn off Enable SPA for Admin Dashboard |
| The player disappears when you change page | Move it into a global header or footer template |
| The player jumps to the wrong place | Give it its own position: fixed CSS |
| The player loses its styling after moving | Rewrite styles that relied on its parent section |
| A builder form sends twice | Update AjaxPress, then add data-ajaxpress-ignore-submit to the form |
When you report a builder problem, tell us the builder and its version, your theme, and whether Enable SPA for Admin Dashboard is on. Builder behaviour changes a lot between versions.