Unit 1 of 7 Ｓ Next Ｔ

＂ 100 XP

Introduction to Power Pages design studio

5 minutes

Power Pages provides a unified intuitive experience for makers to create, customize, and manage
modern data-driven business websites. Just sign in to https://make.powerpages.microsoft.com/
to get started.

Power Pages Home provides a single view of all your websites in an environment and allows you
to create more sites using the available templates.

Template hub accelerates creation of the new sites using feature-rich templates targeting specific
business scenarios. To solve unique business needs start with one of the generic design templates
that include page structures, navigation, and commonly used pages.

Learn hub helps makers, administrators, and developers learn how to design, build, administer,
and extend sites through documentation, guided tutorials, and videos.
Solutions is where you can access the different solutions that are deployed to the current
environment and create now ones.

Power Platform provides easy access to the different maker portals available such as the Power
Apps maker portal.

Power Pages design studio

To start with Power Pages design studio, sign in to Power Pages Home , select a site and then
select Edit. Use Create a site to provision a new site if necessary.

The design studio is organized into workspaces that help makers focus on specific tasks.

Design and build web pages in the Pages workspace, organize site navigation, and add
content in a low-code environment.

Create modern look and feel, apply corporate branding, and manage global site styles in the
Styling workspace.

Model, visualize, and manage business data in the Data workspace.

 Configure key aspects of your Power Pages site including authentication and permissions in
the Set up workspace.

Power Pages is built on the foundation of Power Apps portals. Many of the tools and methods
used to configure Power Pages use the functionality of Power Apps portals. For advanced
configurations that aren't available in the Power Pages design studio, the Portal Management app
is accessible from the overflow menu (...).

Next unit: Work with pages

Continue Ｔ
Ｒ Previous Unit 2 of 7 Ｓ Next Ｔ

＂ 100 XP

Work with pages

3 minutes

You can quickly add and organize new pages in the Pages workspace of Power Pages design
studio.

Create a page
In the Power Pages design studio, select Pages workspace, and then select + Page. You'll be
presented with the option to select from either standard or custom layouts. The standard layout
choices depend on the site template used and the custom layouts are the page templates added
to the site by makers and pro developers.

After you've entered a page name and selected a layout, the page will appear on the canvas, and
you can start adding and editing components to the page.
Configure site structure
You can configure where and how the page appears in the site navigation. Select the ellipsis (...)
next the page you want to move and then perform one of the available actions.

７ Note

The selection of available actions depends on the page position in the navigation.

You can move the page up and down, make it a subpage. Hide it from the main navigation by
moving to the Other pages group (the page will still be accessible via a URL), duplicate the entire
page, or delete it. You can also change the page hierarchy in the Main navigation section by
dragging and dropping the page name. For the full list and detailed description of available
actions, go to Create site structure.

Preview a page
You can preview the page by selecting Preview from the command bar.
Select Desktop to preview your page in a browser, or scan the QR code to view the page on a
mobile device.

７ Note

Using preview command resets the site cache. System will retrieve a fresh copy of the site
configuration and the relevant business data. That may have a brief impact on the page
performance.

Next unit: Page components

Continue Ｔ
Ｒ Previous Unit 3 of 7 Ｓ Next Ｔ

＂ 100 XP

Page components
3 minutes

After a page has been created, you can add components to create the layout and add static and
dynamic content. This simple design approach will add corresponding HTML, CSS, or code to the
page without the need to know the structure or syntax of these languages.

To add a section, select any existing section on the page, select the plus sign (+) or Add a section,
and then select from one of the available section layouts.

 Tip

Section layout can be changed later, after the section has already been created.

To add a component, select either an empty section or an existing element where you'd like to
place the component. Use the plus sign (+) or the overflow button (...) to display all available
components, and then select a component to insert.
There are two types of the components.

Standard components are used to create page layout and static content.

Connected to data components are used to display dynamic and interactive content based
on Dataverse data.

All sections and components allow for in-context editing and you can edit any section or
component directly from the canvas. When a section or a component is selected, context menu
appears where you can adjust properties of the selected element such as alignment, style, color,
size, etc. For more information, see Customize webpages for more details about available
components and their properties.

Source code
Often there are requirements for other elements that aren't available as the design studio
components. A page might need more complex layout and formatting, or call for more CSS or
JavaScript. These requirements can be created in the Visual Studio Code for the Web editor that
allows makers and pro developers to view and modify the source code of the page and
associated CSS and JavaScript.

To view the source code of the page, select Edit code button in the command bar.

After selecting Edit code, you'll be redirected to Visual Studio Code for the Web to make your
edits to the page HTML, CSS, or JavaScript. After the source code is saved, the changes are
synchronized to appear on the canvas.
 ２ Warning

You can potentially damage the layout of your page by entering incorrect syntax in the
source code. Create a copy of the original code before making any significant changes.

Next unit: Site styling and templates

Continue Ｔ
Ｒ Previous Unit 4 of 7 Ｓ Next Ｔ

＂ 100 XP

Site styling and templates

3 minutes

A theme describes the colors, fonts, section margins, and other design elements of a Power Pages
site. Each site is provisioned with a theme defined by the selected template. Using Styling
workspace elements, you can customize the theme to align the site appearance with the design
requirements such as specific corporate branding.

Styling
You can choose a theme from several available presets and then apply customizations. Any
customization is applied immediately to the page on canvas making it easy to work with the basic
styling.

Custom CSS
For more complex styling requirements Power Pages design studio allows makers to upload
custom CSS files.

Once the custom CSS file is uploaded, it will apply to all themes, and the page canvas will reflect
the applicable styles. You can upload multiple CSS files and set their order as required. For more
information about custom CSS, see Manage CSS files in Power Pages in product documentation.

Styling can also be applied to individual pages using Visual Studio Code for the Web editor. When
a page is opened in the editor, three files are loaded: HTML, CSS, and JavaScript. Any changes in
CSS file will apply to the selected page only.
Templates
For complex sites, standard layouts available in Power Pages design studio may not be sufficient.
For these scenarios, Power Pages supports creating pages using custom layouts.

Because Power Pages is built on the foundation of Power Apps portals, it can use page templates
created by makers and pro developers in Portal Management app. When a new Page Template is
defined, it becomes available in the design studio as a custom layout.

For detailed information on how to create custom page templates, go to Create and manage
page templates and Store source content by using web templates in the Power Apps
documentation.

Next unit: Exercise - Edit pages

Continue Ｔ
Ｒ Previous Unit 5 of 7 Ｓ Next Ｔ

＂ 100 XP

Exercise - Edit pages

15 minutes

The purpose of this hands-on-lab is to create a web page and edit source code by using Power
Pages design studio.

At the end of these exercises, you'll be able to:

Open Power Pages design studio to edit your portal.

Create new page using a standard template.
View the source code of the page.
Add custom HTML code directly.

For this exercise, you'll need to have the following things:

A provisioned Power Pages site in your environment. If you don't have a Power Pages site
available, follow the Create and manage Power Pages sites instructions to create one.

Scenario
To enhance the website experience for visitors, sometimes it's necessary to add custom HTML
content to a page. In this exercise, you'll add HTML code that creates a dismissible alert. The code
will also include a small fragment in Liquid language creating a dynamic greeting for the visitor.

High-level steps
1. Open your portal in Power Pages design studio.
2. Create a new landing webpage.
3. Edit page, add a spacer and content placeholder then add HTML code.
4. Save the page and browse the site to view the results.

Detailed steps

Launch Power Pages design studio

 1. Sign in to Power Pages .

2. Select a target environment by using the environment selector in the upper-right corner.

3. Select your site then select Edit to launch the design studio.

4. Make sure Pages workspace is selected.

Create a web page

1. Select + Page button.
2. Enter a page name.
 3. Select Landing Page standard layout, then press Add.

Edit page
1. Select the first button on the page. Press the plus sign (+), then select Spacer element. That
command will add small space before our custom content.

2. Select the spacer, press the plus sign (+), then select Text element. That command will add a
placeholder for our custom content.

3. Your page should look like this:

4. Press Edit code to open the page in Visual Studio Code for the Web editor.

5. When prompted, select Open Visual Studio Code:

6. This selection will open a new window or a tab with Visual Studio Code for the Web. Locate
the text element created earlier with the words Enter text :
7. Copy the following code and paste it into the page source replacing <p>Enter text</p>
content:

HTML

<div role="alert" class="alert alert-info alert-dismissible">

<button type="button" data-bs-dismiss="alert" aria-label="Close"
class="close"><span aria-hidden="true">×</span></button>
<strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong>
Get your unlimited free education at
<a href="https://learn.microsoft.com/">Microsoft Learn</a>
</div>
 8. Your content should now look like this:

9. Press Ctrl-S (⌘-S on macOS) to save the file.

10. Switch to design studio window. Press Sync button to synchronize the editors and show the
updated content on the canvas:
 11. The changes will appear on the design studio canvas. Press Preview button in the top right
corner then select Desktop.

12. Your custom page with a dismissible alert will open.

13. Check that the greeting includes current month.

14. Press cross (x) icon to dismiss the alert.

Next unit: Check your knowledge

Continue Ｔ
Ｒ Previous Unit 6 of 7 Ｓ Next Ｔ

200 XP

Check your knowledge

6 minutes

Answer the following questions to see what you've

learned.

1. Which workspace isn't part of Power Pages design studio? *

Data

Styling

Pages

Automation

2. What component can't be added to a webpage by using Power Pages design studio? *

List

Three-column section

Gallery

IFrame

3. Where can custom layouts for Power Pages site be created? *

Microsoft Word

Portal Management app

Power Pages design studio

 Custom layouts are not supported

Check your answers

Ｒ Previous Unit 7 of 7 Ｓ

＂ 100 XP

Summary
1 minute

Power Pages design studio is a straightforward, no-code, low-code environment that allows
makers to build and configure a powerful data-driven business site.

To review, this module covered the following topics:

The structure and features of the Power Pages design studio.

How to add pages and organize them in the hierarchy of the portal.
How to add various components to portal pages.
How to view and edit page source code.
Different methods to modify the site appearance.

Next steps
In the next module, you'll learn about Data workspace in Power Pages studio and how to secure
access to pages and data.

Module incomplete:

Go back to finish Ｔ