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

> Container width, navbar arrangement, and the site-wide sidebar switch.

# Layout

# Layout and container

Three decisions that affect every page on your site: how wide the content is, how the navbar is arranged, and whether the sidebar is on.

**Admin path:** Appearance → Customize → Vara SaaS → Layout

![Screenshot: Customizer → Vara SaaS → Layout showing container, navbar and sidebar controls](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/layout-panel.png)

## Container layout

The single most visible layout decision.

| Option | Effect | Best for |
| - | - | - |
| **Wide** *(default)* | Content fills the viewport up to a generous max width | Modern SaaS sites, marketing pages, landing pages |
| **Boxed** | Content sits in a centered column with a distinct page background | Editorial sites, blogs, sites with a strong brand color |

![Screenshot: side-by-side comparison of wide and boxed container layouts](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/layout-wide-vs-boxed.png)

> [!NOTE]
>
> Changing this adds a `vara-saas-full` or `vara-saas-boxed` class to the `<body>` element, so you can also target it in custom CSS. See [CSS and design tokens](/developers/css-and-design-tokens.md).

**The content builder overrides this anyway**

On pages built with Elementor, Beaver Builder, Divi, or Bricks, the theme removes its container
entirely. Your container setting only affects pages the theme actually renders — blog, archives,
search, plain pages, and single posts. See [How the theme works](/introduction/how-it-works.md).

## Navbar layout

Controls how the header is composed.

| Option | Default | Effect |
| - | - | - |
| **Left** | ✔ | Logo left, navigation and CTAs right |
| **Centered** | | Logo centered, navigation arranged around it |

![Screenshot: the header in left-aligned and centered navbar layouts](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/layout-navbar-left-vs-centered.png)

The mobile menu, dark mode toggle, and CTA buttons are present in both layouts.

## Sidebar

| Control | Default | Effect |
| - | - | - |
| **Enable sidebar** | On | Site-wide sidebar switch |

The sidebar appears on single posts by default, in the position chosen by [Single post layout](/customization/single-post-settings.md).

> [!WARNING]
>
> **This is a site-wide switch.** Turning it off hides the sidebar on every page that would otherwise show it. Individual pages have their own override — see [Sidebars and widgets](/customization/sidebars-and-widgets.md).

## CTA buttons

Two buttons sit in the header on desktop. Both are fully editable.

| Setting | Default |
| - | - |
| **Primary CTA text** | `Explore Features` |
| **Primary CTA URL** | `#features` |
| **Secondary CTA text** | `Build Now` |
| **Secondary CTA URL** | `/contact/` |

![Screenshot: the header showing both CTA buttons with their labels](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/layout-header-ctas.png)

> [!WARNING]
>
> **These defaults point at demo anchors.** `#features` is an anchor inside the demo homepage, and `/contact/` assumes the imported contact page still exists at that slug. If you delete the demo pages without updating these, your header will link to nothing. Change both URLs as part of your launch pass.

## Logo width

**Admin path:** Appearance → Customize → Site Identity → Logo Max Width (px)

| Range | Default |
| - | - |
| 50–400 px | 150 |

Clamped automatically so a wide logo cannot push the menu off screen. See [Site identity](/getting-started/site-identity.md).

## Which layouts does the theme actually control?

This is worth internalising, because it determines where your layout settings have any effect.

| Page type | Theme controls the layout? |
| - | - |
| Home (Elementor) | **No** — builder owns it |
| Any page built with a builder | **No** — builder owns it |
| Blog index | Yes |
| Archive / category / tag / author | Yes |
| Search results | Yes |
| Single post | Yes, unless built with a builder |
| Plain WordPress page | Yes, unless built with a builder |
| 404 page | Yes |
| Blog hero and card grid | Yes — fixed, not configurable by container width |

> [!NOTE]
>
> If a layout change appears to do nothing, check whether that page is builder-owned. Use the `vara-saas-builder-page` body class as your diagnostic — see [How the theme works](/introduction/how-it-works.md).

## Recommended starting combination

For most SaaS marketing sites:

* **Container:** Wide
* **Navbar:** Left
* **Sidebar:** On, but set to *Full width* on posts if you do not have widgets to fill it
* **CTAs:** Point at your highest-intent pages — pricing, contact, or signup

## Related pages

> **[Layout settings reference](/customization/layout-settings.md)**
>
> Every setting in this panel, with defaults and ranges.

> **[Single post settings](/customization/single-post-settings.md)**
>
> Per-post layout and metadata controls.


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