Design Studio and Building Pages
The design studio is your command centre for building Power Pages sites. Learn the four workspaces, how to use Copilot to create pages, and how to edit content visually.
What is the design studio?
The design studio is like a visual website editor — similar to Wix or Squarespace, but connected to your business data.
Tom does not know HTML or CSS. But he can open the design studio, drag sections onto a page, type text, add images, and drop in a form that saves data to Dataverse — all without writing code.
Think of it as four workshops under one roof: one for pages, one for styling, one for data, and one for settings. Each handles a different part of building your site.
The four workspaces
The design studio is divided into four workspaces. Each one handles a specific job.
| Workspace | What It Does | What You Do Here |
|---|---|---|
| Pages | Create and edit web pages | Add pages, edit text, insert components, arrange layout |
| Styling | Control the look and feel | Change colours, fonts, logo, apply themes |
| Data | Connect to Dataverse tables | Create tables, add columns, configure forms and lists |
| Setup | Configure site settings | Authentication, site visibility, progressive web app, custom domain |
Think of it like building a house
- Pages workspace = the rooms (layout, furniture, content)
- Styling workspace = the paint and decor (colours, fonts, branding)
- Data workspace = the plumbing (database connections, data flow)
- Setup workspace = the permits and utilities (security, domain, settings)
You move between them as needed. Most time is spent in Pages and Styling.
Pages workspace: where you build
The Pages workspace is where Tom spends most of his time. It provides:
- WYSIWYG editor — click on text and type. What you see is what visitors get.
- Section layouts — choose column arrangements (1 column, 2 columns, 3 columns)
- Components — drag and drop ready-made building blocks (forms, lists, text, images, buttons)
- Page hierarchy — create parent pages with child pages underneath for organised navigation
When Tom creates a new page, he picks a layout, adds sections, and drops in components. The page updates in real time as he works.
Creating pages with Copilot
Copilot is built into the design studio. Instead of building every page from scratch, Tom can describe what he wants and Copilot generates it.
How Tom used Copilot for his enquiry page:
- He clicked “Create a page with Copilot” in the Pages workspace
- He typed: “A page where property buyers can submit an enquiry with their name, email, phone number, and a message about which property they are interested in”
- Copilot generated a page with a heading, introductory text, and a form with the right fields
- Tom reviewed it, tweaked the heading text, and added the Summit Realty logo
- Done — a working enquiry form in minutes
What Copilot can do in Power Pages
Copilot helps with several tasks in the design studio:
- Generate entire pages from a text description
- Create forms connected to Dataverse tables
- Add sections and text based on prompts
- Suggest layout changes for better user experience
Copilot does not replace the design studio — it accelerates it. You always review and refine what Copilot generates.
Exam tip: Copilot in Power Pages
The exam tests whether you know Copilot can:
- Create pages from natural language descriptions
- Generate forms connected to Dataverse
- Work inside the design studio (not as a separate tool)
Remember: Copilot generates a starting point. The maker always reviews and customises the output.
Editing pages: the WYSIWYG experience
Editing is straightforward — click on any element and modify it directly.
| Action | How to Do It |
|---|---|
| Edit text | Click on the text block and type |
| Add a section | Click the ”+” between sections, choose a column layout |
| Add a component | Open the component panel, drag onto the page |
| Rearrange | Drag sections or components up and down |
| Delete | Select the element, press delete or use the context menu |
| Add a page | Click “New page” in the page list, choose blank or use Copilot |
Tom does not need to understand HTML. The design studio handles all the code behind the scenes. If a developer wants more control, they can switch to the code editor for direct HTML and CSS access, but that is optional.
Styling workspace: making it look right
The Styling workspace controls the visual identity of the entire site with a single set of controls.
| Setting | What It Controls | Tom’s Choice |
|---|---|---|
| Theme colours | Primary, secondary, background, text colours | Summit Realty blue and white |
| Fonts | Heading and body typefaces | Clean sans-serif fonts |
| Logo | Site logo in the header | Summit Realty logo |
| Button styles | Shape, colour, hover effects | Rounded blue buttons |
| Custom CSS | Advanced overrides for developers | Tom skipped this (no CSS knowledge needed) |
Changes in the Styling workspace apply site-wide. Change the primary colour once and every button, link, and heading updates automatically.
Data workspace: connecting to Dataverse
The Data workspace lets you manage the Dataverse tables your site uses — without leaving the design studio.
You can:
- View existing tables and their columns
- Create new tables directly from the workspace
- Add columns to existing tables
- Configure table permissions (who can read, create, update, delete)
Tom created a “Viewing Requests” table here with columns for buyer name, property reference, preferred date, and message. He then dropped a form component on his enquiry page and connected it to this table.
Setup workspace: site configuration
The Setup workspace handles everything behind the scenes:
| Setting | Purpose |
|---|---|
| Site visibility | Public (anyone) or private (restricted while building) |
| Authentication | Configure local login, Azure AD B2C, social providers |
| Progressive Web App | Enable app-like experience on mobile devices |
| Custom domain | Use your own domain (summitrealty.com) instead of the default |
| Site details | Name, description, default language |
Tom kept his site private while building and testing. Once everything was ready, he switched to public to go live.
The full workflow: template to live site
Here is the typical journey:
- Create — Pick a template, use Copilot, or start blank
- Build pages — Add and edit pages in the Pages workspace
- Connect data — Set up tables and permissions in the Data workspace
- Style — Apply branding in the Styling workspace
- Configure — Set up authentication and domain in the Setup workspace
- Preview — Test the site before publishing
- Publish — Make the site live for visitors
Exam tip: workspace responsibilities
Match the task to the workspace:
- “Change the font” → Styling
- “Add a new page” → Pages
- “Create a Dataverse table” → Data
- “Configure authentication” → Setup
- “Describe a page to AI” → Copilot in the Pages workspace
Flashcards
Knowledge check
Tom wants to change the primary colour and font across his entire Power Pages site. Which workspace should he use?
Tom described an enquiry form in plain English and Power Pages generated a working page with the form. Which feature did he use?
Where would Tom configure Azure AD B2C authentication for his property portal?
🎬 Video coming soon
Next up: Components, Themes, and Publishing — the building blocks that bring your Power Pages site to life.