Site Frame

Site Frame is the reusable desktop shell in Pixelgrade LT — the set of rails that wrap your content and give your site a clear outer edge instead of running wall-to-wall. Your Pixelgrade LT site is built on the Anima block theme, so you set the Site Frame up in two places: Style Manager controls how it looks, and Appearance → Menus carries the optional menu it can hold.

Site Frame is part of Style Manager and appears whenever Style Manager is active. It comes with Pixelgrade LT and works without Pixelgrade Plus.

What Site Frame is

The Site Frame is a visual shell that lives on the edges of the desktop layout, separate from the content inside. It gives your site a deliberate outer border, a dedicated place to surface a secondary navigation, and a rhythm that stays consistent as visitors move between pages.

Site Frame styles

Site Frame is a system, not a single look. Each style is a distinct visual language for the shell, and Pixelgrade LT exposes the ones it supports so you can pick the one that fits your site. More styles will be added over time; each new style appears as a selectable option alongside the existing ones, with its own shape and rhythm.

Editorial

Editorial is the first Site Frame style. It presents as a set of narrow framed rails along the edges of the desktop viewport, in the spirit of a classic editorial layout where the page content sits inside a clearly drawn border.

The rails carry the site's secondary navigation (assigned through the Site Frame menu location described below), pick up their color treatment from the Palette and Color Grade controls, and adapt to dark mode alongside the rest of the site. Because the rails are part of the shell rather than the content, they stay in place as visitors scroll and as they move between pages.

Turn on a Site Frame style

The Site Frame style, palette, and color grade all live in Style Manager, inside the Tweak Board section. New sites start with the frame off (Style set to None), so you opt in when you want it.

In the WordPress admin, go to Appearance → Pixelgrade Design to open the Pixelgrade hub.
Open the Design System tab and choose Open Style Manager (this opens the Site Editor with the Style Manager sidebar). You can also reach it from the Home tab's Open Design System quick link.
In the Style Manager sidebar, open the Tweak Board section and scroll to the Site Frame controls.
Set Style to Editorial to switch the frame on. Leave it on None to keep the site running edge-to-edge with no frame.

Palette and Color Grade

Two controls tune how the site frame looks across every style. Both preview live as you adjust them.

Palette: picks which of your site's overall palettes the frame draws from. Match it to your content palette for a unified look, or point it at a contrasting palette to make the frame stand apart from the page.
Color Grade: sets how intense the frame's color treatment is relative to the content. You get 12 tonal grades plus an Accent option, which lets you go from an almost-invisible frame to a deliberately prominent one. Accent automatically follows the brand color of the palette you selected.

Both controls are dark-mode aware, so the grade you choose keeps its intended feel when visitors switch modes.

Site Frame has its own dedicated menu location called Site Frame. Any menu you assign there is rendered inside the frame instead of in the main header, which lets you keep short-form, supporting navigation separate from the primary menu.

Note: Your main header menu is edited as a Navigation block in the Site Editor. The Site Frame menu is separate — it uses a classic menu location, so you assign it under Appearance → Menus. Your theme (Anima) registers this location, which keeps the Menus screen available for it.

In the WordPress admin, go to Appearance → Menus.
Select or create the menu you want in the site frame.
Under Menu Settings, tick the Site Frame display location and save.

Items in the Site Frame menu are auto-styled to suit the shell, so you don't need to pick icons or adjust labels by hand:

Single-character items: a label that is just one character is rendered as a monogram letter, which works well as a compact brand mark inside the rail.
Social profile links: URLs that point to a known social network are detected and rendered as the matching social icon.
Regular links: normal menu items are rendered as discreet nav items that sit quietly inside the frame.

Site Frame on mobile

The Site Frame is a desktop-layout element and does not render its own rails on mobile. Instead, any items you have assigned to the Site Frame menu are appended to the bottom of the main mobile menu, so mobile visitors see a single, combined list of navigation rather than two separate menus stacked on top of each other.

You don't need to duplicate links between the primary menu and the Site Frame menu to reach mobile visitors — the merge happens automatically.

Colors, fonts, and spacing: Style Manager (Appearance → Pixelgrade Design → Design System → Open Style Manager).
Your main header menu: edit the Navigation block in the header template part in the Site Editor (Appearance → Editor).

Updated on July 1, 2026