​

What Vara SaaS is

Vara SaaS is a WordPress theme for SaaS marketing sites. It is built around one idea: the theme should handle everything structural and repetitive, and your page builder should handle everything visual. In practice the theme renders your header, footer, blog, archives, single posts, and category listings — all fast, accessible, and consistent. Elementor renders your homepage, landing pages, and anything you design by hand.

​

Who it’s for

​

Who it’s not for

Being honest here saves everyone time.

​

The design philosophy

Four decisions run through the whole theme and explain most of its behavior.

​

1. Performance is a feature, not an optimization

• Fonts are self-hosted. Inter and JetBrains Mono ship inside the theme as woff2 only. There is no request to fonts.googleapis.com, ever — no third-party connection to wait on.
• The main stylesheet doesn’t block render. It is served with a media="print" onload swap plus a <noscript> fallback, so it downloads in parallel instead of stalling first paint.
• Font Awesome is preloaded rather than queued behind everything else.
• JavaScript is deferred, and the animation script loads at a lower priority than content-critical code.
• Blog and single-post assets are conditional. The blog index stylesheet only loads on archives, search, and the blog home. Single-post CSS and the table-of-contents script only load on singular views. A landing page built in Elementor loads almost none of it.
• Image markup stays native. No lazy-loading shim, no custom picture element, nothing to fight WordPress’s own image handling.

​

2. Accessibility is structural

• A skip link is the first focusable element on every page, jumping to #site-content.
• There is exactly one <main> landmark per page. Getting this wrong is the single most common theme accessibility failure, and version 1.0.7 fixed it.
• Submenus expose aria-expanded and are closable with Escape, from the keyboard or by clicking outside.
• Dropdowns flip side when they’d overflow the viewport, so they never disappear off-screen on a narrow display.
• Pagination uses screen-reader-only text for “previous” and “next” rather than bare arrows.
• Links that open in a new tab announce it to assistive technology.
• The no-JavaScript navigation fallback renders a valid nested <ul> list, not the orphaned <li> markup WordPress’s own wp_page_menu() produces.
• Version 1.0.7 systematically corrected heading hierarchy across templates and raised text contrast to WCAG 2.2 AA.

​

3. Branding should never require a developer

Every brand decision is a Customizer control under Appearance → Customize → Vara SaaS: eleven colors, a font family, a base font size, container width, logo width, footer layout, CTA button labels and URLs, and about a dozen feature toggles. There is no branding option that requires editing a file. When you change a color, the value is written into a CSS custom property and pushed into Elementor’s global color palette, so Elementor widgets using “Primary” follow your brand automatically. See How the theme works.

​

4. The theme should get out of the way

When Vara SaaS detects that a page is built with a page builder — Elementor, Beaver Builder, Divi, or Bricks — it removes its own container, page title, and sidebar from that page and lets the builder run full width. page.php, single.php, and front-page.php all do this. The theme also adds body classes you can target in custom CSS:

​

What ships in the box

​

Requirements

​

Next steps