Power Pages Tutorial – Building Pages

This Power Pages tutorial series will guide you on creating your website from scratch, without the need for writing any code. This part 1 of the tutorial will talk through creating pages and defining layouts.

If you don’t know how to setup your account and get started with Microsoft Power Pages, please refer to our previous post

Get Started – Power Pages

Understanding the tool

Before we dive deeper into the page creation, let us understand the structure of the tool so that we can navigate through the tutorials easily.

Main Menu

The main menu is displayed in the left side of the tool. There are 6 options out of which 2 are hidden behind the 3 dots.

1. Pages
2. Styling
3. Data
4. Setup
5. Flows
6. Portal Management

Sub Menu

When you click on any of the menu option, there will be a sub menu that will offer configuration options for that particular selected menu.

For e.g. The sub menu related to “Pages” gives the options to create new pages or sub-pages, delete pages, and update the hierarchy.

Main Panel

This is where the magic happens. In the context of pages, you can define layouts, add components and design individual sections to build exactly whatever you want with the tool.

Power Pages Tutorial – Pages

Now that we understand the basic structure of the tool. Let’s jump into the page builder, called “Pages. Here, you will define the core layout and components of the website. Simply put this is the html part. But the best part is that you can do it without the knowledge of any code.

Adding Pages

You can add new pages via the Navigation Panel.

You can add pages in 2 ways

1. You can add a new page by click on the + button besides the “Main Navigation” title
2. You can also add a new sub-page by click on 3 dots besides a “Page” and click on “Add a new subpage”

Changing Navigation Hierarchy

1. You can convert a page into a sub-page by simply clicking on the 3 dots besides a page and clicking on “Make this a sub page”
2. You can convert a sub-page into a page by simply clicking on the 3 dots besides a sub page and click on “Promote this sub page”

Note: You can also change the hierarchy by dragging and dropping the pages

Anatomy of a page

Every page is made up of 3 parts

1. Header – You can update the logo and title of the website in the header
2. Body – This contains the main contents of the page
3. Footer – The copyright details are mentioned in the footer. The footer can be modified to add more details as well.

Designing a page

Within the body of the page, you can add new sections by click on the + icons

You can add the following types of sections

1. 1 column – Single column that will occupy the entire width of the section
2. 2 column – 2 columns that will be equally distributed in width
3. 3 column – 3 columns that will be equally distributed in width
4. One third left – 2 columns with the left column occupying 1/3rd of the space and right column occupying 2/3rd
5. One third right – 2 columns with the right column occupying 1/3rd of the space and left column occupying 2/3rd
6. Spacer – This full width spacer can be used to reduce the clutter on the website

Adding components to the section layout

Once the section layout is selected you can add individual components to each section. Each section can hold multiple components.

Within each section you can add the following components

1. Text – Display a simple block of text that can be styled based on preferences
2. Button – Add a button that can open a URL or open a page from the website when clicked
3. Image – Add an image
4. Video – Add a nice looking video to add more interactivity to your website
5. Spacer – Reduce the clutter by adding spacers
6. Power BI – Embed a Power BI chart into your website. The possibilities can be endless here
7. List – Display a list from a data source
8. Form – Collect data with forms that can be customized as per your requirements
9. Frame – Add an iFrame to embed external web pages such as “Google form” or “Google Maps”

Conclusion

With this we conclude the 1st part of the power pages tutorial series. You have learnt the following

1. Adding pages
2. Adding sub pages
3. Updating the navigation hierarchy
4. Adding sections
5. Choosing section layouts
6. Adding components to section layouts

Try out power pages and comment below with links to your innovative ideas on how to use power pages.