Navigating the Page Design Studio Editor

When you open Page Design Studio, you'll land in the editor — your workspace for building and customizing campaign pages. This article walks you through every area of the interface so you feel confident navigating the tool.

The editor is organized into three main zones: the Top Bar (campaign-level navigation and actions), the Editor Toolbar (page-level tools), and the Canvas & Panels (where you actually build).

The Top Bar

The top bar runs across the full width of the screen and stays visible at all times. It handles campaign-level navigation and publishing.

Element	What it does
PAGES / SETTINGS Tabs	Toggle between the page editor (PAGES) and campaign-level settings like theming and page options (SETTINGS).
Status Badge	Shows Draft (orange) or Published (green) so you know your campaign's current state at a glance.
Publish Button	Takes your page live. The dropdown arrow gives you additional options: Archive (remove from public view) and Discard Changes (revert to the last published version).
Exit	Leaves the editor and returns you to the campaign dashboard. You'll be prompted to save unsaved changes.

The Page Bar

Directly below the top bar, you'll find the page bar — this is where you manage the specific page you're working on.

Element	What it does
Page Tabs	Lists all pages in your campaign (e.g., Main Page, Thank You, Sponsor Hub). Click a tab to switch pages. The default page is marked with a ★ star icon.
Save Page	Saves your current work. This saves a draft — it doesn't publish the page. Get in the habit of saving frequently as you build.
View Full Page	Opens a full-screen preview of your page in a new browser tab so you can see exactly what visitors will see. The dropdown offers additional preview options.
Page Tools	A dropdown with page-level actions: Change Template, Default Page, Rename, Toggle Merge Fields, Add Page, Clone Page, Save as Template, Clear Page Content, and Delete Page. See the Using Page Tools article for details on each.

The INSERT Toolbar

Below the page bar sits the INSERT toolbar — your shortcut bar for adding content to the page. Instead of searching through the left panel, you can quickly insert common elements from here:

Prebuilt Content — pre-designed page sections like hero banners, location maps, count downs, donate widgets, and sponsor grids. These are ready-to-use building blocks that are dynamically adjusted for your specific campaign that you can drop in and customize.
Offers — insert your campaign's tickets, giving levels, sponsorship tiers, raffle entries, and items for sale directly into the page. These pull from the offers you've already configured in your campaign.
Buttons & Links — add call-to-action buttons and hyperlinks. Connect them to your ticket purchase flow, donation form, external URLs, or other destinations.
More — additional content types and insert options.

💡 Tip

The INSERT toolbar and the left Content panel both let you add content — they're two paths to the same result. The toolbar is faster for common items, while the left panel gives you the full catalog.

The Left Panel

The left side of the editor has a collapsible panel with three tabs:

Content Tab

This is your drag-and-drop toolbox. It contains individual content blocks you can drag onto the canvas:

Block	Description
Title	Heading text for section titles and page headlines.
Paragraph	Body text blocks for descriptions, stories, and details.
List	Bulleted or numbered lists for event schedules, agendas, or feature highlights.
Image	Upload photos, logos, or graphics. Supports common image formats.
Button	Call-to-action buttons (e.g., "Get Tickets," "Donate Now") that link to destinations you configure.
Table	Data tables for pricing tiers, schedules, sponsorship levels, or any structured info.

To add a block, simply drag it from the panel and drop it onto the canvas where you want it.

Rows Tab

Rows are the structural containers for your content. Think of them as the layout grid — each row defines how many columns that section of the page has and how they're sized. You drag a row layout onto the canvas first, then place content blocks inside the row's columns.

This gives you control over multi-column layouts without needing to write any code. For example, you might use a two-column row to place an image on the left and text on the right.

Settings Tab

When you select a specific content block or row on the canvas, the Settings tab shows its configurable properties — things like padding, alignment, colors, link destinations, image sizing, and more. The options here change depending on what type of element you have selected.

The Canvas

The canvas is the large center area of the editor — your live preview of the page. This is where your campaign page takes shape as you build it.

Here's what you can do on the canvas:

Drag and drop — move content blocks and rows around by dragging them to new positions.
Click to select — click any element to select it and see its settings in the left panel.
Inline editing — click text blocks to edit the content directly on the canvas.
Hover for controls — hover over elements to see move, duplicate, and delete controls.

💡 Tip

Dashed borders appear around elements when you're dragging — these guides show you exactly where the block will land when you release it.

Desktop / Mobile Toggle

At the top of the canvas area, you'll see two small icons — a desktop monitor and a mobile phone. These let you switch between desktop and mobile preview modes.

When you switch to mobile view, the canvas narrows to simulate a phone screen, so you can see how your page will look to visitors on mobile devices. All of the templates in Page Design Studio are responsive out of the box, but it's always good practice to check both views as you build — especially after rearranging content blocks or adjusting spacing.

⚠️ Note

The mobile preview is an approximation. For a pixel-perfect check, use View Full Page and open it on your actual phone or use your browser's device emulation tools.

Editor Zoom Controls

In the bottom-right corner of the toolbar, you'll find the zoom controls:

– / + buttons to zoom in and out incrementally.
A percentage dropdown in the middle showing your current zoom level (e.g., 100%).
A Reset button to snap back to the default zoom.

Zooming out can be helpful when you want to see the full page layout at a glance, while zooming in helps with precise edits to text and spacing.

The Settings Tab (Campaign-Level)

Clicking the SETTINGS tab in the top bar switches you out of the page editor and into campaign-level configuration. This is separate from the Settings tab in the left panel (which is block-level). Here you'll find:

Campaign Theme

This is where you control your campaign's color palette which are used as default when a template is applied. You have two options:

Global Brand Kit — uses your organization-wide color kits. You can choose which kit to use from the "Active Kit" dropdown and apply it to this campaign.
Campaign Override — lets you set custom colors for this campaign only, independent of the global kit. All 12 color properties become editable: Primary, Secondary, Accent, Background, Surface, Border, Primary Text, Secondary Text, Text on Primary, Secondary Background, Text on Secondary, and Link Color.

See the Campaign Theme: Global Brand Kit vs. Campaign Override article for a full walkthrough.

Page Options

Currently includes the "Show global navigation automatically" toggle, which controls whether visitors see your site-wide navigation bar on the campaign page. You may use this if you have multiple pages and you want to include the menu on top. If you don't turn on this option, then you would need to share urls to each non-default campaign separately wherever you are sharing these pages. Note that default page will always be loaded first if a specific page is not targeted.

Putting It All Together

Here's the typical workflow when you're building a page:

Open your campaign and enter Page Design Studio.
Select or switch pages using the page tabs in the page bar.
Set your colors in SETTINGS → Campaign Theme (if you haven't already).
Select a Template you prefer, and turn on features you plan no using.
Drag Rows onto the canvas to define your layout structure.
Drag Content blocks (Title, Image, Button, etc.) into your rows.
Use the INSERT toolbar to quickly add Prebuilt Content, Offers, or Buttons & Links.
Click any element and use the left panel Settings tab to fine-tune properties.
Toggle between Desktop and Mobile preview to check responsiveness.
Save Page frequently as you work.
When you're done, click View Full Page for a final preview, then Publish.

Introduction to Page Design Studio
Creating Your First Campaign Page
Managing Multiple Pages in a Campaign