> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Beaver Builder, Divi, and Bricks are detected — here's what that means and what it doesn't.

# Other builders

# Other page builders

Vara SaaS detects three page builders besides Elementor and steps aside for them too.

**Important distinction**

These builders are **recognised**, not **integrated**. The theme will let them take over a page's
layout — but it will not push your brand colors or typography into them. Only Elementor receives
the global color and font injection.

## Supported builders

| Builder | Detection signals |
| - | - |
| **Elementor** | `_elementor_data`, `_elementor_edit_mode`, editor/preview query args |
| **Beaver Builder** | `_fl_builder_data` post meta, `FLBuilderModel` class loaded |
| **Divi** | `_et_pb_use_builder` meta, `et_fb` query argument |
| **Bricks** | `_bricks_page_content_2` meta, `bricks` query argument |

When any of these are present on a page with content, the theme removes its container, page title, sidebar, and breadcrumbs, and lets the builder render full width — exactly as it does for Elementor.

## What works the same

> **Full-bleed layout**
>
> Container, theme `h1`, sidebar, and breadcrumbs are removed on detected pages.

> **Header and footer retained**
>
> Your site chrome stays in place and is styled from the Customizer.

> **Dark mode**
>
> The token layer applies. Hardcoded colors inside builder content will not remap — that is up to the builder.

> **Body classes**
>
> `vara-elementor-active` and `vara-saas-builder-page` are added, so you can target builder pages in custom CSS.

## What does not work

> [!WARNING]
>
> **No brand color or font injection.** With Beaver Builder, Divi, or Bricks, you must set your brand colors and fonts inside that builder's own global settings. The theme's Customizer controls the theme's own components — header, footer, blog, single posts — and will not restyle your builder content.

This is the practical difference between Elementor and the others in this theme:

| Feature | Elementor | Beaver / Divi / Bricks |
| - | - | - |
| Theme steps aside | Yes | Yes |
| Full-width layout | Yes | Yes |
| Brand colors injected into builder globals | **Yes** | No |
| Typography injected | **Yes** | No |
| Demo page layouts available | Yes | No |
| Dark mode remapping of builder globals | **Yes** | No |

**Recommendation**

If you are choosing a builder for this theme, use Elementor. It is the integration the theme was
built around, and the difference is significant enough to matter.

## Theme Builder equivalents

> [!WARNING]
>
> **Elementor Theme Builder, Beaver Builder's Theme Builder, Divi's Theme Builder, and Bricks' template system will not attach their header or footer templates.** None of these are registered locations. The theme's PHP header and footer always win.
>
> If you need a custom header or footer, you need a child theme. See [Child themes](/developers/child-themes.md).

## Choosing between builders

| If you want | Use |
| - | - |
| The demo page layouts and automatic branding | **Elementor** |
| To avoid a page builder entirely | **The block editor** — see [Block editor](/integrations/block-editor.md) |
| A different builder you already know well | It will work for layout; manage brand colors in the builder |

## Verifying detection works

**1. Build your page**

Save it with your builder, not just preview it.

**2. Check the body class**

View source and look for `vara-saas-builder-page` on the `body` element.

**3. Assign the template as a fallback**

Set the page's template to **Page Builder Full Width** under Page Attributes. This guarantees full width regardless of whether detection succeeds. See [Page templates](/templates/page-templates.md).

**The template is the reliable route**

Builder detection is a convenience. Assigning **Page Builder Full Width** is a guarantee. If you
use a builder other than Elementor, do both.

## Troubleshooting

> **The theme container still wraps my builder page**
>
> Detection failed. Assign **Page Builder Full Width** to the page — that works regardless of the builder.

> **My builder's colors don't match my theme colors**
>
> Expected. Only Elementor receives injected global colors. Set your brand colors in your builder's own global settings.

> **My builder's header/footer template does nothing**
>
> Theme Builder locations are not registered for any builder. Use a child theme.

> **The page looks broken in dark mode**
>
> Hardcoded colors in your builder content will not remap. Use the builder's global settings or theme-aware classes instead of hardcoded hex values.

## Related

> **[Elementor](/integrations/elementor.md)**
>
> The fully integrated option.

> **[Block editor](/integrations/block-editor.md)**
>
> No builder at all.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.