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

> How the theme detects Elementor pages, injects brand colors, and steps aside.

# Elementor

# Elementor

Elementor is the theme's first-class page builder. The four demo pages are built with it, and your brand colors propagate into it automatically.

![Screenshot: a page built with Elementor rendering edge to edge in Vara SaaS](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/elementor-full-width-page.png)

## Why Elementor

| Benefit | Detail |
| - | - |
| **Full-bleed layout** | The theme removes its container, title, and sidebar on Elementor pages |
| **Brand colors propagate** | Your Customizer colors are written into Elementor's global palette |
| **Dark mode support** | Elementor's global colors are remapped so builder content stays legible in dark mode |
| **Demo pages** | The four imported layouts are real Elementor pages you can edit |

## Installing

**Appearance → Vara SaaS Setup → Step 1** installs and activates it for you.

Manually: **Plugins → Add New → search "Elementor" → Install Now → Activate**.

Elementor 3.x or newer. See [Elementor](/integrations/elementor.md) requirements in [Requirements](/introduction/requirements.md).

## How the theme detects an Elementor page

The theme steps aside when **any** of these are true:

* The page's `_elementor_data` exists and is not empty
* The page's `_elementor_edit_mode` meta equals `builder`
* The current request is an Elementor editor or preview request

**Verify on any page**

View source and look for the `vara-saas-builder-page` class on the `<body>` element. If it is
there, the theme has detected the page as builder-owned.

## What changes on a builder page

| Theme element | On an Elementor page |
| - | - |
| Content container | Removed — your layout spans full width |
| Theme `h1` | Suppressed |
| Sidebar | Never rendered |
| Breadcrumbs | Never rendered |
| Header | Kept |
| Footer | Kept |

## Brand color propagation

On every page load, the theme writes your colors into Elementor's active kit.

| Theme setting | Elementor global |
| - | - |
| **Primary** | System color `primary` |
| **Secondary** | System color `secondary` |
| **Text** | System color `text` |
| **Tertiary** | System color `accent` |
| Remaining seven colors | Added as custom global colors |

So when you set your primary color in **Appearance → Customize → Vara SaaS → Global Colors**, every Elementor widget bound to "Primary" updates — buttons, headings, links, icon colors, divider colors.

> [!WARNING]
>
> **Edit brand colors in the Customizer, not in Elementor.** The theme writes to the kit on every request, so changes made directly in **Elementor → Site Settings → Global Colors** are overwritten the next time a page loads. The Customizer is the single source of truth.
>
> This also means the theme **overwrites the four Elementor system colors** for everyone, including administrators. If your client wants to edit brand colors in Elementor, that is not supported by this theme — they should use the Customizer.

## Typography in Elementor

The theme also writes its typography into the Elementor Kit, so Elementor's global fonts follow your Customizer choices.

**Set typography before designing pages**

Because the theme's fonts are pushed into Elementor's globals, choosing your font family in the
Customizer before you build pages saves you restyling widgets afterward.

## Recommended Elementor settings

> **Container width**
>
> Leave Elementor's defaults. The theme's own container settings do not apply to builder pages, so your Elementor layout width is entirely your choice.

> **Global colors**
>
> Set these in the Customizer, not here. Read the warning above.

> **Site Settings**
>
> Avoid editing global colors. Header and Footer templates will not attach — the theme does not register Theme Builder locations.

> **Optimized CSS**
>
> Leave it on. Elementor regenerates and reprints its CSS, which is a meaningful performance win on a multi-page site.

## Theme Builder will not attach

> [!WARNING]
>
> **Native Header & Footer Architecture for Maximum Speed and Site Stability.** Vara SaaS renders its core header and footer using lightweight, native PHP templates rather than shifting navigation structure into builder templates.
>
> This intentional engineering choice eliminates builder overhead, guarantees rock-solid Core Web Vitals, and maintains accessibility standards across every page, leaving page builders like Elementor free to focus where they shine most: designing gorgeous, high-converting page body content.

To build a custom header or footer you need a child theme. See [Child themes](/developers/child-themes.md).

## Recommended workflow

**1. Set colors and typography in the Customizer first**

This pushes your brand into Elementor's globals before you design anything.

**2. Assign Page Builder Full Width**

For marketing pages, assign the template in **Page Attributes** to guarantee full width.

**3. Design in Elementor**

Use global Primary, Secondary, and Text colors rather than hardcoding hex values — your pages then follow the brand automatically.

**4. Check dark mode**

Toggle the theme toggle and confirm your sections remain legible.

**5. Avoid hardcoded background colors**

They will not remap in dark mode and will look wrong.

## Troubleshooting

> **The theme container is still around my Elementor layout**
>
> The page is not being detected as builder-owned. Confirm it has been saved with Elementor, and that `_elementor_edit_mode` is `builder`. Also check for a caching plugin serving a stale page.

> **My Elementor global colors keep reverting**
>
> Expected behavior. The theme overwrites them from the Customizer on every request. Make your changes in the Customizer.

> **Elementor header/footer templates do nothing**
>
> The theme does not register Theme Builder locations. See the warning above.

> **The demo pages render blank**
>
> Usually an incomplete import. See [Setup wizard issues](/troubleshooting/setup-wizard-issues.md).

## Related

> **[Demo pages](/templates/demo-pages.md)**
>
> The four imported Elementor layouts.

> **[Other page builders](/integrations/other-builders.md)**
>
> Beaver Builder, Divi, and Bricks.


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