Skip to main content

​
Block editor

Vara SaaS is designed to work well with Gutenberg. You can build an entire site without installing a page builder. Screenshot: a page built entirely with Gutenberg blocks in Vara SaaS

​
What the theme gives the editor

theme.json supplies the block editor with the same design vocabulary the front end uses, so blocks look native to the theme rather than bolted on.

Color palette

Nine theme colors, available on every block that offers color controls.

Fonts

Inter and JetBrains Mono as global font options.

Type scale

Ten named sizes from display-lg down to overline.

Layout widths

1280 px content width, 1440 px wide width.

​
The palette

Screenshot: the block editor color palette showing all nine theme colors
The block palette and your Customizer colors are independent. theme.json declares fixed palette entries for the editor. Changing your brand colors in the Customizer does not automatically change the palette swatches you see in the block editor — those are static values from theme.json.In practice: use the palette for editor convenience, and if you need the exact brand color on a block, enter the hex value directly in Custom → Color. To change the palette itself, edit theme.json in a child theme.

​
Type sizes

​
Extra block features

See Block patterns and styles.

​
Building a page with blocks

1

Create the page

Pages → Add New, give it a title, and Publish.
2

Leave the template on Default

Block-built pages render inside the theme container, which is what you want for a content page. Use Page Builder Full Width only if you want a full-bleed canvas.
3

Add blocks

Use the pattern inserter for the hero, then compose the rest. Set Template → Full width on a Group block to span the wide layout.
4

Style with the palette

Apply theme colors and named type sizes rather than arbitrary values, so your pages stay consistent.
5

Check the front end

The editor approximates the front end, but always verify the published page.

​
Blocks or builder?

Both are supported. A practical decision guide.

Use blocks when

You are comfortable in Gutenberg. Your content is mostly text, images, and standard sections. You want fewer plugins and faster pages.

Use Elementor when

You want the four imported demo layouts. Your team is used to visual builders. You need complex marketing sections like pricing tables and testimonial grids.

​
Performance

Block-built pages are lighter than builder-built pages, because the theme loads almost no page-specific assets for them. The theme’s own CSS is roughly 61 KB uncompressed and compressed with gzip or brotli. There is no per-page CSS generation, and no external font request.

​
Editor vs front end differences

The editor is an approximation, not a preview. Expect small differences:
  • Container and padding can shift slightly
  • Elementor’s global colors do not appear in the editor if you have not visited the Customizer this session
  • Dark mode is a front-end feature — the editor always shows light
Always check the published page before calling something done.

Block patterns and styles

The hero pattern and lead style.

Typography reference

The editor’s type scale in full.