Design Studio

Design Studio (labeled Designer in the admin sidebar) is the visual editor for your program website. Configure global colors and backgrounds, arrange components on each page template, and preview changes before publishing. Dynamic components—marked with a bolt icon—pull live data from Apps, Articles, Pages, and Rewards.

This guide covers the editor layout, template types, available components, and save workflow. For app-specific data setup, see the linked app guides rather than duplicating their configuration steps here.

Overview

From Content → Designer you can:

• Preview the member site while editing (header, content, footer stack)
• Edit by section — Content, Header, Footer, Auth, or Global settings
• Switch page templates — Home, Articles, Claims, Quizzes, Rewards, Profile, Basic Page, and custom page templates
• Add, reorder, and configure layout and dynamic components
• Manage custom page templates used by Pages
• Save theme changes to the live program website

Editor drawer sections

Where to find it

• Route: /design/{programId}
• Side navigation: Content → Designer

Open the editor with the settings floating action button (bottom-right). The right-hand drawer holds all editing controls; the main canvas shows a live preview.

Prerequisites

• An open program with program administrator access
• Editor role (or higher) — required to add components, change settings, and save
• Observer can open Design Studio to preview but cannot save theme changes
• Apps and content should be configured first when using dynamic components—for example Leaderboards before Progress, Awards before Awards, Articles before Articles Preview
• Menus drive Menu Bar links; Pages supply data for Page Headings / Page Text on custom templates

Editor layout

Main preview

The canvas renders your site in layers:

1. Header components (always visible except on Auth templates)
2. Content components for the selected page template
3. Footer components

Empty sections show a dashed placeholder prompting you to add components.

Right drawer

Toggle the drawer with the settings FAB. Five tabs across the top switch context:

When Content is selected, use the Select the template you wish to edit dropdown to switch templates. Custom template names appear after the system templates.

Drawer footer tools

When no unsaved changes exist:

When you have unsaved edits, the footer shows a save button instead.

Step-by-step

Open Design Studio and select a template

1. Open Content → Designer.
2. Click the settings FAB (bottom-right).
3. Choose a drawer tab (Content, Header, etc.).
4. For Content, pick a template from the dropdown (for example Home).
5. Review Active Components in the drawer and the matching preview on the canvas.

Add and arrange components

1. In the drawer, scroll to Available Components.
2. Hover a component tile and click + to add it.
3. Drag Active Components to reorder.
4. Click a component row to expand its settings panel.
5. Adjust fields (headings, colors, spacing, visibility toggles—varies by component).
6. Click save in the drawer footer when Active Components show pending changes.

You can only add one new component at a time—finish or collapse the current component editor before adding another.

Save your theme

1. After edits, the drawer footer switches to save.
2. Click save to persist webTheme to your program.
3. Confirm changes on the live member site (Site preview or your program URL).

Unsaved changes are tracked program-wide—switching templates or drawer tabs does not auto-save.

Configure global branding (Global tab)

Open the Global drawer tab to edit program-wide visuals:

Colors

• Primary — main brand color used across buttons and accents

Section Background Colors

• Site (canvas), Header, Content, Footer — optional background colors per region; use clear controls to reset transparency

Site Background Image

• Enable/disable, pick image from gallery or uploads
• Repeat mode, height (viewport or fixed pixels), vertical alignment, scroll behavior (fixed or scroll)
• Optional image overlay (gradient or solid screen) to improve text contrast

Manage custom page templates

Custom templates extend the system Basic Page layout for Pages.

1. Open the drawer on Content.
2. Click the gear icon next to the template dropdown (Manage Custom Templates).
3. Enter a New Custom Template Name (for example, “FAQ” or “Leaderboard Hub”) and add it.
4. Select the new template from the dropdown.
5. Add components from Available Components (same palette as Basic Page).
6. Save the theme.
7. Assign the template to pages on the Template tab in Pages.

From the manager you can rename or delete custom templates. Deleting removes the template from Design Studio—update any Pages that referenced it first.

Page templates reference

System templates shipped with every program:

Custom templates you create appear in this list and in the page Template picker.

Components reference

Components available depend on the selected drawer tab and page template. Common building blocks:

Layout and content (static)

Navigation (dynamic)

Apps and program data (dynamic)

For Progress and Awards card styling, expand the component in Active Components—editors expose heading, icon, card grid, and color options. Eligibility, rankings, and bucket links are configured in the respective app guides, not in Design Studio.

Authentication

Header and footer editing

Header (drawer tab)

• Add Menu Bar once to render Primary Menus; the language control appears when you have Active languages in Translations
• Optional Banner, Heading Section, Image, and column text for announcements above main content

Footer (drawer tab)

• Add Menu for footer links, plus text/image blocks as needed

Header and footer components apply across templates unless you are editing Auth pages (authentication uses a separate component stack).

Tips and limitations

• Editor role required to save — Observers can preview layouts but cannot publish theme changes.
• Save explicitly — Changes are not live until you click save in the drawer footer.
• One new component at a time — The + button disables while a new component editor is open.
• Dynamic components need data — Empty Progress or Awards blocks usually mean no Active app records or tag filters exclude the signed-in member.
• Page fields need components — Page title and body only render when Page Headings / Page Text are on that page’s template.
• Custom templates and pages — Create the template here first, then assign it on each page record.
• Demo programs — Save and structural edits are disabled on demo programs.
• Grid helper — Use Grid to align components; it does not affect the live site.

Related

• Pages — Page content and template assignment
• Menus — Navigation labels and destinations
• Articles — Blog content for Articles components
• Leaderboards — Data behind Progress Preview
• Target Trackers — KPI tables paired with Progress layouts
• Awards — Data behind Awards component
• Claims — Offers on Claims template
• Quizzes — Quizzes template content
• Rewards Catalog — Rewards and Rewards Preview components
• Data Buckets — Source data for leaderboard and tracker components
• Members — Profile page and tag-driven visibility