Core Concepts

Layouts

8 min read

Build a shared backdrop once, apply it to any scenes in your lesson, and edit it in one place — every scene that uses it updates instantly.

A layout is a shared backdrop you build once and apply to any scenes in your lesson. Put a header, directions, a score display, or navigation buttons on a layout, apply it to the five scenes that need them, and those elements appear behind each scene's own widgets. Edit the layout later and all five scenes update at once.

Three rules define how layouts behave:

A lesson can have many layouts. One for practice scenes, another for review scenes, a plain one for instructions — as many as your lesson needs.
Nothing applies automatically. A scene uses a layout only when you choose one for it, and each scene uses at most one layout. When you add a scene, Berdee asks which layout it should use (see Choosing a layout for a new scene).
Layouts are live-linked. A layout's widgets are not copied into scenes — every scene that uses the layout shows the same shared layer, so one edit reaches them all.

A layout's widgets render behind the scene's own widgets and stay fully interactive for students — a button on a layout is clickable, a timer runs, a score updates. A layout timer starts over on each scene that shows it; it doesn't carry one clock from scene to scene. And if a scene has no background color, image, or creative background of its own, it inherits the layout's.

For a step-by-step walkthrough that builds a quiz frame with a title bar and a running score, see the tutorial Give every question the same frame with a layout.

Where layouts live

Layouts have their own Layouts tab in the studio's left panel, right next to Scenes. It shows each layout with a caption like "Applied to 4 scenes", and ends with a dashed Add layout button — new layouts open with their name selected so you can rename them right away.

Layouts are deliberately kept out of the Scenes panel: that panel is the learner flow in order, and a layout is a backdrop scenes opt into, never a step students walk through.

Scenes that use a layout show a small layout chip on their thumbnail, so you can see at a glance which scenes share a backdrop.

Choosing a layout for a new scene

Once your lesson has a layout, adding a scene asks you to choose its layout first, whether you use Add scene, the + between scenes, + Add next scene, or the Lesson Graph's ＋ Add scene button. The dialog lists None — no layout and every layout in the lesson, with a preview of your new, blank scene under the one you've picked.

Berdee picks a sensible default: the layout of the scene you're on, or else the one most of your scenes use. Press Add scene to keep it.
Create new layout adds the scene with a new, blank layout, then opens that layout on the Layouts tab so you can design it.
Cancel doesn't add a scene.

Duplicating or pasting a scene doesn't ask, because the copy keeps the original's layout. A scene you create while drawing a path in the Lesson Graph doesn't ask either, and starts with no layout. You can change a scene's layout whenever you like (see Applying a layout to a scene).

While your lesson has no layouts, adding a scene shows a short introduction to layouts and asks whether you'd like to make one. Create a layout adds your scene with a blank layout applied and opens the layout for you to design. Not now just adds the scene. The introduction comes back each time you add a scene until the lesson has a layout; after that you get the layout picker instead. You can also create a layout from the Layouts tab whenever you're ready.

Creating a layout

Five ways, depending on where you are:

Add layout in the left panel's Layouts tab — creates an empty layout, ready to build.
Create new layout when you add a scene — creates the layout, applies it to the new scene, and opens it for editing (the introduction to layouts offers the same thing as Create a layout).
Add layout in the Lesson Graph toolbar — creates one and opens it in the designer, so you can start placing widgets immediately.
Save as layout on any scene card's ⋯ menu — copies that scene's widgets and background into a new layout. The scene itself is untouched, and the copy is not applied anywhere yet. Use this when one scene already has the look you want to share.
Convert to layout on a scene card's ⋯ menu — turns the scene itself into a layout, removing it from the lesson flow. This is the destructive sibling of Save as layout: use it for a scene that only ever existed to be a backdrop. It is never offered for the opening scene.

Applying a layout to a scene

You can apply a layout from three places:

A scene card's ⋯ menu → Apply layout… in the Scenes panel
The Apply layout action when you hover a scene card in the Lesson Graph
The Applied layout section of the scene's inspector — Choose… when the scene has none, Change… or Remove when it does

All three open the same dialog. It lists every layout in the lesson (plus None — no layout), and shows a live preview of the exact scene you are editing under whichever layout you have selected — so you see the combined result before you commit, not after.

Applying to several scenes? Use Apply to scenes… on the layout card's ⋯ menu in the Layouts tab (see below).
No layouts yet? The dialog offers Create a layout instead — it creates one, applies it to that scene, and opens it for editing.

Editing a layout

Select a layout in the Layouts tab to open it on the canvas, and edit it like any scene. While you are editing, the strip above the canvas reads "Editing layout — applied to N scenes" — a reminder that what you change here changes every scene using it.

A layout's inspector shows Background only (creative background, color, and image) — grading, progression, and the other scene settings belong to real scenes. See Scene Settings.

Each layout card in the Layouts tab has a ⋯ menu:

Rename — give it a name that says what it is for (Practice backdrop, Quiz frame).
Apply to scenes… — opens the Apply layout dialog with this layout chosen, for the scene that's open (or the Opening Scene, when the layout itself is open). It applies to one scene at a time; to give several new scenes a layout, choose it in the picker as you add them.
Duplicate — copy it as a starting point for a variant.
Convert to scene — moves the layout into the lesson flow as a regular scene. Scenes that were using it lose the shared layer, so Berdee confirms first and shows you the list of affected scenes.
Delete — removes the layout. If it is applied anywhere, Berdee confirms before removing the backdrop from those scenes.

Layouts and the Lesson Graph

Layouts are backdrops, not steps, so they have no card of their own on the Lesson Graph. But navigation you author on a layout's widgets — a "Back to the map" button, for example — is real for every scene that shows it. The graph draws that as a long-dash path from each scene that uses the layout, labeled with the button that fires it (When 'Back to the map' is pressed). Editing one of those paths edits the layout's wiring, so it changes the path for every scene using that layout.

A Navigate to Scene action always goes to the one scene you picked, wherever it's pressed. That makes a layout the right place for a way home (a map, a menu, a hub) and the wrong place for a Next button, which needs a different destination on each scene. For a step-by-step walkthrough, see the tutorial Share working buttons across scenes with a layout.

The unused-layout warning

A layout that is applied to no scenes produces the publish warning "Layout Isn't Applied To Any Scene". It does not block publishing — an unused layout does no harm — but it usually means you built a backdrop and forgot to apply it, or removed it from its last scene without meaning to.

If you used templates before

Layouts replace the old template scenes. The migration happened automatically: each template became a lesson-level layout, and every scene that used it now explicitly applies it — your lessons render exactly as before.

A few things did change going forward:

New scenes no longer inherit anything automatically. Instead, Berdee asks which layout the new scene should use, and preselects the one the scene you're on uses.
You choose exactly which scenes use a layout. You can apply the same layout to any scenes in the lesson, or different layouts to neighboring scenes.
**A closing scene takes no layout. Endings are edited directly; the Applied layout** section is hidden on one.

Layouts vs themes vs starter templates

Three separate things share the "make my lesson consistent" job:

Layouts (this page) — shared _widgets and backgrounds_ behind specific scenes, live-linked, applied per scene.
Themes and palettes — the _colors and fonts_ chosen when you create a lesson, which style new widgets and scenes automatically. See Themes and Palettes.
Starter templates — whole-lesson _starting points_ offered in the New lesson dialog (ready-made scenes you copy and edit). Those keep the name "template". See Creating a Lesson.

What belongs on a layout

Put something on a layout when you would be frustrated to update it in five places later:

A repeated background, frame, or header
Directions that stay visible across a sequence
A score display that should stay on screen, or a per-scene time limit (a layout timer starts over on each scene)
Shared navigation buttons that go to the same place from every scene, like Back to the map
Branding or decorative structure

Keep scene-specific prompts, questions, answer choices, and one-time hints on the scenes themselves — if content should change when the learner moves to the next step, it belongs on the scene, not the layout.