Skip to main content

​
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

​
Why Elementor

​
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 requirements in Requirements.

​
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

​
What changes on a builder page

​
Brand color propagation

On every page load, the theme writes your colors into Elementor’s active kit. 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.
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.

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

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.
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 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.
Expected behavior. The theme overwrites them from the Customizer on every request. Make your changes in the Customizer.
Usually an incomplete import. See Setup wizard issues.

Demo pages

The four imported Elementor layouts.

Other page builders

Beaver Builder, Divi, and Bricks.