# Page builders: Elementor, Bricks, Divi and more

> How AjaxPress works with visual builders, where to put a persistent player, and what to check when a builder misbehaves.

Source: https://arraystory.com/docs/ajaxpress/page-builders-elementor-bricks-and-divi/

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.

> [!TIP]
> 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

1. Go to **Templates → Theme Builder → Footer** and edit your footer (or create one for the entire site).
2. Add your player: an Audio widget, an HTML widget with your player code, or a radio plugin's widget.
3. Select the widget, open **Advanced**, and set **CSS ID**, for example `my-radio-player`.
4. Mark it. With AjaxPress Pro, enter `#my-radio-player` under **Settings → AjaxPress → Media Players**. With the free plugin, use an HTML widget and put `data-ajaxpress-persist` on the player's wrapper.
5. 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](https://arraystory.com/docs/ajaxpress/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](https://arraystory.com/docs/ajaxpress/forms/#opt-a-form-out).

## 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.