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

> What Vara SaaS is, who it is for, and where its limits are.

# Overview

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

![Screenshot: the Vara SaaS homepage showing the header, hero, features, testimonials, pricing and footer](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/theme-overview-homepage.png)

## Who it's for

> **SaaS and product teams**
>
> You need a credible marketing site this quarter, you don't want to spend three weeks on template decisions, and you want to change your own branding without a developer.

> **Agencies and freelancers**
>
> You hand sites to non-technical clients. That means the client needs a Customizer they can use, not a theme that requires PHP. Every brand change is a color picker.

> **Technical blogs**
>
> The blog, archive, and single-post templates are unusually well developed — reading time, an auto-generated table of contents, related posts, category filtering, sticky posts, and full dark mode.

> **Accessibility-conscious teams**
>
> The theme is marked *accessibility-ready* on WordPress.org. Skip links, landmark regions, focus states, and keyboard-navigable submenus are implemented, not retrofitted.

## Who it's not for

Being honest here saves everyone time.

> **You want a full site editing theme**
>
> Vara SaaS is a **classic** theme. Its page structure comes from PHP template files (`header.php`, `footer.php`, `home.php`, `single.php`), not from block templates. You can build page content with blocks, but you are not editing the site's chrome in the site editor. If your entire team lives in the WordPress site editor, a native block theme will suit you better. See [How the theme works](/introduction/how-it-works.md).

> **You want Elementor Theme Builder header/footer templates**
>
> Vara SaaS does **not** register Elementor Theme Builder locations. The header and footer are theme PHP styled through the Customizer, not through Elementor's Theme Builder interface. This is deliberate — it guarantees the header is fast and consistent — but Elementor's Header and Footer templates will not attach to this theme. See [Header and menus](/customization/header-and-menus.md).

> **You need WooCommerce templates**
>
> WooCommerce will run, but Vara SaaS does not ship WooCommerce-specific templates, product page styling, or checkout styling. The theme is untested for it and has not been through the WordPress.org WooCommerce review.

> **You need a megamenu builder**
>
> The navigation supports nested dropdowns several levels deep with viewport-aware flipping, but there is no built-in megamenu builder. For column-style megamenus, pair the theme with a dedicated plugin — see [Plugin compatibility](/integrations/plugin-compatibility.md).

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

**What this means for your Core Web Vitals**

Fonts and stylesheets are the two most common causes of poor LCP and CLS on a WordPress site.
The theme removes both as variables. What remains is under your control — your images, your
hosting, and your plugins. See [Performance](/performance/optimization.md).

### 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](/introduction/how-it-works.md).

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

| Body class | Meaning |
| - | - |
| `vara-saas-boxed` | Container layout is set to **boxed** |
| `vara-saas-full` | Container layout is set to **wide** |
| `vara-saas-sidebar-enabled` | The sidebar is switched on site-wide |
| `vara-saas-sidebar-disabled` | The sidebar is switched off site-wide |
| `vara-elementor-active` | Elementor is active on this request |
| `vara-saas-builder-page` | This specific page is owned by a page builder |

## What ships in the box

> **4 finished pages**
>
> Home, About, Services, and Contact — each with a complete Elementor layout — plus a Blog page for your posts.

> **A full blog system**
>
> Featured post, category filtering, sticky-post support, reading time, table of contents, related posts, aside post format, and threaded comments.

> **Dark mode**
>
> A navbar toggle that persists your choice, with color tokens remapped for contrast in dark.

> **Built-in SEO basics**
>
> Open Graph tags, a theme-color meta tag, and a minimal `WebSite` JSON-LD block.

> **Font Awesome 6.5.1**
>
> Bundled locally for menu icons and social icons. No external CDN dependency.

> **A setup wizard**
>
> Installs Elementor and imports the demo pages in three clicks, with no manual file copying.

## Requirements

| Requirement | Minimum | Notes |
| - | - | - |
| WordPress | 6.0 | Tested up to 6.8 |
| PHP | 7.4 | No extensions required beyond WordPress core |
| Database | MySQL 5.7 / MariaDB 10.2 | Standard WordPress requirements |
| HTTPS | Recommended | Required for correct dark-mode persistence and caching |
| Elementor | 3.x | Recommended, not required |
| Contact Form 7 | 5.x | Optional, needed for the demo contact form |

> [!TIP]
>
> The theme works fully without Elementor. If you prefer the block editor, the theme still gives you a complete, styled site — you just don't get the demo page designs. See [Block editor](/integrations/block-editor.md).

## Next steps

> **[Install the theme](/introduction/installation.md)**
>
> From WordPress.org or an uploaded zip, in under two minutes.

> **[What's included](/introduction/whats-included.md)**
>
> A feature-by-feature and file-by-file map of what you downloaded.


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