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

> A guided tour of every section in the Vara SaaS Customizer panel.

# Customizer tour

# Customizer tour

Every setting Vara SaaS offers lives in one Customizer panel: **Appearance → Customize → Vara SaaS**. There is no theme options page, no setup screen to hunt through, and nothing to configure in a file.

![Screenshot: the full Customizer panel with all seven Vara SaaS sections listed](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/customizer-tour-panel.png)

## The seven sections

> **[Global Colors](/customization/colors-reference.md)**
>
> Eleven brand colors. These propagate into Elementor's global palette.

> **[Typography](/customization/typography-reference.md)**
>
> Base font family and base font size.

> **[Layout](/customization/layout-settings.md)**
>
> Container, navbar arrangement, sidebar switch, logo width, header CTA buttons.

> **[General](/customization/general-settings.md)**
>
> Feature toggles — sidebar, scroll to top, page title, breadcrumbs, theme toggle.

> **[Single Post](/customization/single-post-settings.md)**
>
> Post layout and which metadata is displayed.

> **[Navigation Icons](/customization/navigation-icons.md)**
>
> Per-menu-item icons plus their size, spacing, and color.

> **[Footer](/customization/footer-settings.md)**
>
> Footer columns, logo, description, email, social icons, copyright.

## A note on the three custom controls

Three controls in this panel are not stock WordPress. Each was built for the theme:

| Control | Where | What it does |
| - | - | - |
| **Stepper** | Typography → Base font size | Numeric input with increment and decrement arrows, clamped to 12–48 px |
| **Toggle** | Layout and General sections | A switch-style on/off control instead of a checkbox |
| **Social Icon** | Footer → social icons | A picker that validates and previews Font Awesome icon classes |

![Screenshot: the footer social icon picker control showing a grid of Font Awesome icons](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/customizer-tour-social-control.png)

**Live preview**

All theme settings use `postMessage` transport, so changes apply to the preview instantly without
a full page refresh. If a preview seems frozen, switch sections to force a repaint.

## The settings, at a glance

Every setting with its default value in one table.

### Global Colors

| Setting | Default |
| - | - |
| Primary | `#7c3aed` |
| Secondary | `#cebdff` |
| Tertiary | `#4edea3` |
| Background | `#f8fafc` |
| Surface / Card BG | `#ffffff` |
| Text | `#0f172a` |
| Headings | `#0f172a` |
| Muted Text | `#55647a` |
| Links | `#7c3aed` |
| Borders | `#e2e8f0` |
| Dropdown BG | `#ffffff` |

### Typography

| Setting | Default | Options / range |
| - | - | - |
| Base Font-family | `Roboto, sans-serif` | Six allowlisted stacks |
| Base font size (px) | `16` | 12–48 |

### Layout

| Setting | Default | Options / range |
| - | - | - |
| Container layout | `wide` | `wide`, `boxed` |
| Navbar layout | `left` | `left`, `centered` |
| Enable sidebar | `true` | on / off |
| Primary CTA text | `Explore Features` | free text |
| Primary CTA URL | `#features` | free text |
| Secondary CTA text | `Build Now` | free text |
| Secondary CTA URL | `/contact/` | free text |
| Logo Max Width (px) | `150` | 50–400 |

### General

| Setting | Default |
| - | - |
| Enable sidebar | `true` |
| Enable scroll to top button | `true` |
| Show page title | `true` |
| Show breadcrumbs | `false` |
| Show theme toggle in navbar | `true` |

### Single Post

| Setting | Default | Options |
| - | - | - |
| Single post layout | `sidebar-right` | `sidebar-right`, `sidebar-left`, `fullwidth`, `boxed` |
| Show post meta | `true` | on / off |
| Show publish date | `true` | on / off |
| Show author name | `true` | on / off |

### Navigation Icons

| Setting | Default | Range |
| - | - | - |
| Enable menu icons | `false` | on / off |
| Icon size (px) | `16` | adjustable |
| Icon spacing (px) | `6` | adjustable |
| Icon color | *(empty — inherits)* | any hex |
| Icon hover color | *(empty — inherits)* | any hex |
| Icon for *(each menu item)* | *(empty)* | Font Awesome class |

> [!NOTE]
>
> The per-menu-item icon settings only appear once a menu is assigned to the **Primary Menu** location. Until then the section shows a notice instead.

### Footer

| Setting | Default |
| - | - |
| Footer columns | `4` (range 2–4) |
| Footer contact email | your admin email |
| Footer brand description | Built-in placeholder paragraph |
| Footer copyright HTML | Current year + site title |
| Footer logo | *(empty)* |
| Footer logo max width (px) | `120` (range 40–300) |
| Social icons alignment | `left` |
| Social 1–4 URLs | *(empty)* |
| Social 1–4 icons | X, LinkedIn, GitHub, YouTube |
| Column 1–3 titles | Product, Resources, Company |
| Column 1–3 links | Placeholder link lists |

## Input validation

Every setting is sanitized on save. You cannot put unexpected values into the database through the Customizer.

| Setting type | Validation |
| - | - |
| Colors | Hex color only |
| Font family | Allowlist of six stacks |
| Layout choices | Allowlist of valid values |
| Icon classes | Strict Font Awesome class pattern |
| Alignment | Allowlist of valid alignments |
| Footer columns | Integer, clamped to 2–4 |
| Booleans | Normalised to true/false |
| Copyright HTML | Filtered through `wp_kses_post` |

**Why this matters**

Sanitization is why a mistyped value degrades gracefully instead of breaking your layout. If the
Customizer rejects something, that is the validation working.

## Settings storage

All theme settings are stored as **WordPress theme mods** — the same mechanism WordPress uses for its own settings.

This means:

* They live in the database, not in theme files
* They **survive theme updates** untouched
* They are portable with a WordPress export
* Switching themes removes them, which is correct behaviour

See [Settings will not save](/troubleshooting/settings-not-saving.md) if a setting appears not to persist.

## Where things are NOT

Some things people expect in a Customizer are not there, by design.

> **There is no header/footer builder**
>
> The header and footer structure is fixed. You configure their content and colors, but you cannot rearrange or remove regions. For full control you need a child theme. See [Header and menus](/customization/header-and-menus.md).

> **There is no custom CSS field in the panel**
>
> Use **Appearance → Customize → Additional CSS**, which is WordPress's own control, or a child theme. See [CSS and design tokens](/developers/css-and-design-tokens.md).

> **There is no per-post layout picker in the post editor**
>
> Layout is controlled globally in the Customizer, and per page through the **Sidebar Settings** box on pages. Single posts follow the global setting.

## Related

> **[Header and menus](/customization/header-and-menus.md)**
>
> How the header actually works.

> **[Dark mode](/customization/dark-mode.md)**
>
> The one theme feature not in this panel.


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