Microsoft launched Power Pages as the fifth product to its Power Platform family on May 24, 2022. Power Pages helps to create business websites easily and instantly. Moreover, it also helps to create data-driven web applications using built-in templates and easy customization. In this blog, we will discuss in detail how to use Microsoft Power Pages to create business websites. So, let’s get started!
Try Power Pages for Free
Microsoft Power Pages offers a 30-day free trial to Microsoft work or school account holders. Go to https://powerpages.microsoft.com/ and click “Try it for free”. Now sign in using your Microsoft work or school account. Once you are signed in, you are all set to start using Microsoft Power Pages.
Create New Website using Template
Now that you have access to Power Pages, let’s start with creating a new website using the built-in templates. Follow the below steps to do it:
- From the main dashboard of Power Pages, click “Get started”.
- Now select one of the three boxes depending on whether you have any experience creating websites. If you are doing it for the first time, then select “No, I’ve never built one before”.
- You have to pick the template for your website. There are multiple simple to complex website templates that you can use to create simple websites or complete data-driven web applications. Since you are learning how to use the tool, so pick the first template “Default design template”. Once you click it, you will get a preview of the template about how it looks like, such as web pages, desktop and mobile versions, etc. Afterward, click “Choose template”.
- Enter the website name as you want. You will also get a default web address for the site that you can keep as it is or change to whatever you want. Moreover, soon you will be able to link Power Pages websites with actual domain name. Once you are all done, click “Done”.
This way, you have created the initial version of the website.
Design Studio
After creating the website, Power Pages will take you to the Design Studio, which is where you can now add pages to the website, add/edit content, and do a lot more. Moreover, you get a menu bar on the left side that you can use to go to pages, styling, data, etc. Now, let’s explore what you can access with Design Studio.
Pages
On the left side, you can see all the pages that are currently added to your website. You will see the Home, Pages, and Contact us page. You can click on them to see what these pages look like. In addition, you can also look at additional sub-pages within those pages.
Navigation Bar
Click on the “Home” page and there you will see the navigation bar that currently shows a default company logo and a horizontal list of all the pages of your website. You can change the position of these pages in the navigation bar by dragging the page up or down from the “Main navigation” section located on the left side.
You can also click the “+” icon next to the “Main navigation” to add more pages. Similarly, if you want to delete an existing page, then right-click the page name and then click “Delete”.
Edit Components of Pages
Go to the “Home” page on your newly created website. Now let’s see how you can edit the default components showing there. Let’s assume you want to change the logo. So, click on the logo and then click “Image”. Now select the image from your computer and click “OK”. This way, the image will be uploaded and you can resize it to fit with the website’s appearance.
Next let’s change the website name, which is currently showing “Company name” as default. To change the name, click on it and then start typing the name. You also get a context menu that you can use to change the font, make it bold, or do other basic customizations. You get this context menu on every object on the website.
Add and Move Sections
When you move your mouse around the “Home” page, you can see a “+” icon showing up at different times. It basically allows you to add more sections to that page. So, click any “+” icon that shows up while navigating. There you will see you can add a section layout with 1 or more columns, spacer, etc. Moreover, you can also move any section up and down. Simply click on that section and then click “Move down” from the context menu.
Add Text Components
You can edit all the text you see on the pages currently and can even add more text. Let’s start editing the text by changing the “Create an engaging heading” text on the Home page. So, click on that text and start typing or pasting already written content. From the context menu, you can change the color, font, size, and other elements of the text. Moreover, you can click the “+” icon to add a new text box, image, video, button, spacer, form, etc.
Button Component
Just like editing text, you can also edit the buttons on your website easily. Let’s discuss it by changing the “Add a call to action here” button on the Home page. Click the button and then use the context menu to change its style and other settings. Click “Edit” to change its text and also set whether it should refer to a URL link or some page on your website.
Once you have customized the button, you can see how it works from the website preview. Click the “Preview” button located at the top right corner and then select desktop preview. You will see a complete preview of your website that your viewers will see. Now click that button and see if it performs as you want.
Page Settings
You can change the name and other details of the website pages easily. To do that, right-click the page name from the “Main navigation” section and click “Page settings”. There you can name that page and also enter the partial URL of your choice. Once done, click “OK”.
Add Video Component
Just like adding images or text, you can easily add videos to your website. Let’s do it by adding a video in a new section. Go to the “Home” page and click the “+” icon beneath any section where you want to place the video. Now pick “1 Column” and then click “Video”. Lastly, add the YouTube, Microsoft Stream, or Video URL from where you want to link the video. Once done, click “OK”. Once the video is added, you can use the context menu to change some settings, such as start time, autoplay, loop, etc.
Additional Components
Power Pages allows you to add as many components as you want. You can add text, button, image, spacer, video, list, form, Power BI, and iFrame. Let’s assume you want to add the “Watch more videos” button beneath the video. So, click the “+” icon beneath the video and then select “Button”. Write the button label and then provide the URL where you want to direct the visitor. Once done, click “OK”. This way, you can add as many components as you want.
Edit Display Modes and Code View
All the editing we are going currently is in desktop mode. You can change the mode to tablet or mobile from the top right corner. However, those two modes are currently unavailable and are coming soon. Moreover, you can also view the code that makes up the whole website by clicking the “</>” icon located at the top right corner.
Styling
From the left menu bar, click “Styling”. This is where you can change the style elements of the website. You can style the website by changing the theme, color palette, background, fonts, buttons, sections, etc. In short, this is the place to give your website the style that matches your business model.
Data, Tables, and Forms
From the left menu bar, click “Data”. This is where you can start building web applications. For example, let’s say you want to create a form that asks your visitors if they want to invest in your startup. For that, you want to get their name and potential investment amount. So, let’s first create a table and then a form that will appear on your website.
To create a table, click the “+” icon located next to “Tables in this site”. Give the table the name and then click “Create”. This way, the table is created. It has a Name column by default, so you now just have to add a new column for the investment amount. So, click “New column”, enter the name of the column as “Investment Amount”, change its data type to “number” and set it “Business required” under the “Required” section. Once done, click “Save”.
Now you have to create a form that website visitors can fill, and corresponding to it your newly created table fills out. To create a form, click the “Forms” tab and then click “New form”. Enter the form name and then click “Create”. It will take you to the next page where you can now customize the form and publish it.
By default, your form has a name field, but you have to add another field to let visitors add the investment amount. So, click “Add field” and then select “Investment Amount” from the list. Moreover, you can add different components to your form, such as a 1-column tab, 1-column section, toggle, etc. Once you have set up the form, click “Save” from the top right corner and then click “Publish form”.
As the form is created, it’s time to post it on one of your web pages. Go back to “Pages” from the left menu bar and then go to one of the subpages. You can change the page title to something like “Investment Discussion”. Now click the “+” icon and then click “Form”. In the pop-up window, click “New form” and then select the table and form you just created. Go to the “Data” tab and there you can choose what to do when someone adds data. You can set it to create a new record, update an existing record, etc. Similarly, go to the “On submit” tab and there you can choose what to do when someone fills the form. You can set it to show success message, redirect to webpage, or redirect to URL. Lastly, go to the “CAPTCHA” tab and decide if you want to show CAPTCHA or not. Once all done, click “OK”.
This way the form is created successfully and now shows up on the page. You can also change the permissions on who can access, write, etc. Click “Permissions” from the context menu and change the permissions as you want.
You can see how your form works by previewing your website. So, click “Preview” from the top right corner and test out how your form works by entering a test data and then see if the record adds to your table located in the “Data” section.
Set Up – Identity Providers and Permissions
From the left menu bar, click “Set up”. This is where you can set identity providers. For example, if you want viewers to create or log in to an account, you can let them use their Google, LinkedIn, Twitter, Microsoft, or similar other accounts to sign in. In addition, you can also set your security settings and soon can convert your website to a progressive web application.
Power Automate
If you click the 3-dots vertical icon located below “Set up”, you get some additional options. For example, you can use the “Flow” (Power Automate) to automate different workflows of your website. For example, let’s say someone submitted a form on your website. So, you can set a flow that is about getting an update on the email. Similarly, you can create many other automated flows this way. It also reflects how Power Pages is linked with other Microsoft Power apps.
Wrapping Up
Microsoft Power Pages is offering intuitive and user-friendly platform for creating simple to complex websites and web applications with ease. Its simple click-based approaches and feature-rich customization support let anyone with no technical experience create websites right away. So, follow the above steps and create your first website with Power Pages right now.
We’re one of the highest-rated, most-loved technology services company in Toronto providing world-class IT support to SMBs and Enterprises. Sun IT Solutions is a Toronto City-based, multiple award-winning IT support company providing Managed IT Services, Managed Security Services, Cloud Services, Business continuity and disaster recovery (BCDR), Cyber Security Training and Dark Web Monitoring, IT Support Services, IT Consulting, IT Outsourcing Services and Remote IT Support
Our business model is built around keeping your tech support costs flat and predictable – which means that we work hard 24/7 to ensure that your IT infrastructure and tech stack is always operating smoothly and efficiently.
