How to use Microsoft Power Pages | Create Business Web Site

Hi everyone, Kevin here. Today we are going to look at how you can  use the new Microsoft Power Pages. With Power Pages, you can pull together professional  business websites very quickly and easily.

And not only can you pull together simple  websites, but you can also pull together fully data driven web applications, and it  turns out that it's actually surprisingly easy. At least I was able to do  it. Let's check this out.

To get started with Power Pages, head  to the following website. You'll find a card up above or you can click on the link  down below in the description of this video. Once you land on this homepage, let's click  on this button that says try it for free.

Here it'll prompt you to  enter in your email address, and you have to enter in either a  Microsoft work or school account. Unfortunately, it does not accept  personal Microsoft accounts. I'll type in this account, then check this box  and then let's click on start your free trial.

Welcome to Power Pages. We have a website that we need to  create, so let's click on get started. It asks me next if I have any experience creating  websites.

We have three different options, no never before, yes, I have made at  least one, or I build them professionally. That's not me. I’ll select no  I’ve never built one before.

Once I click on that, here I can now choose from  a template, and this will make it a lot easier to get started. Right up on top, we have the  default design template, and then we also have some more advanced examples or what you could  describe as fully fledged web applications. Here you can set up a website to schedule  meetings or even an after-school program registration website.

Down below we see  two more that are still coming soon. And in the future, you'll likely see far  more templates here, but just remember, this service is still relatively new, so  you just have 3 templates to choose from. When I click into one of these templates, here I can see a preview of  what this template looks like.

Here I can see everything that's  contained in this template, and this one contains a simple contact us form. Down below, I can even preview this template  on different form factors. Here I can see what it looks like on mobile.

These websites are  optimized for all of the different form factors. This one looks pretty good, so  I'll click on choose template. Next, I need to give my site a name and  I've been meaning to set up an investor relations website, so I'll answer in the  Kevin Cookie Company Investor Relations.

The default web address looks fine. In the future, you'll also be able to tie this site that you create in Power  Pages with an actual domain name. Since this is just testing it out,  I also like the trial environment, but I could also choose another  environment to create this website in.

All of these settings now look  good, so let's click on done. And look at that, Power Pages is  now setting up my new website. I'm excited to see what this looks like.

Power  Pages has now finished creating my website. That was a lot faster than I could do, and by default it drops me into this  environment called the Design Studio. Because this is my first-time using Power  Pages, here I also see a first run experience.

I can click through this to see all of the  different pages and what all I can do here, but that's what we're going  to do in this tutorial. So here I'll click on this X. Within the Design Studio, over on the left-hand  side, you'll see that there are a few different tabs that we can jump to, and we'll work  through all of these to see what all you can do, but we're going to start on the one called pages.

And within pages, here I can see all of the  different pages that comprise my website. Here I can see that there's a page called home  and that's the one that's currently selected. With home selected, here I can see what my home  page looks like.

Here I can see all the contents that are on the home page. I can shift into one  of these other pages, for example, there’s a page called pages and that links off to other pages.  Here I also have subpages, so as I click into these different pages, over on the right-hand  side I can see what those pages look like.

I even have a page called contact us and here I can see the contact us page  and it also includes a form. Let's click back into the one called home. Back on the home page, you'll notice that there's  this navigation bar on the top of the page.

This navigation bar reflects the order of all  of my pages over here in the main navigation. So here you see home is the top item,  it's the leftmost on the navigation. I have pages and these sub-pages are sub-pages of  pages, so they appear within this dropdown list.

Then I also have contact us. Now here, let's say I were to move contact us  up within pages. So here I made it a sub-page.

Now we see it within this grouping, but  let's say I wanted to promote it again. Here I could click on this ellipsis,  and I could promote this sub-page and now it once again shows up as  its own item on the navigation bar. I could also click on this plus icon If  let's say I want to add an additional page.

Here I can type in a name and  also choose one of these layouts, but for now I have enough  pages, so I'll stick with these. If for whatever reason, you no longer needed  a page, you can click on this ellipsis and then you could delete the page. With  home selected on the left-hand side, it's very easy to make edits to my page, in fact,  here I could just click on one of these items.

Here’s an image, I can click on that, and let's  say I want to add a logo for the Kevin Cookie Company. Here I can click on image and  let me upload an image from my computer. I finished uploading the Kevin Cookie Company  logo.

Here I can click on OK, and here you see that it swaps out that existing image for my  logo, and if I wanted to resize it, here I can make it bigger, or I can make it smaller.  So, it's really what you see is what you get. Over here too, right now it just refers to the  generic company name.

Here I can remove that and let's type in the Kevin Cookie Company Investor  Relations. With the text object selected, you'll notice that there's this context menu underneath  that allows me to modify how the text appears. So, let's say I wanted to make it bold. 

Here I can bold it, italicize, underline it, I can make all those different  modifications here, and in fact, every object on the page  has a similar context menu. I can click on the logo and here I can  modify that. I could click on this button and depending on what object you select,  you'll have different options within the context menu.

As I move my mouse around the  page, you'll notice that these plus icons appear. You'll see them all over the page and  this allows me to add additional sections. So, let's say that I really like this color  bar that appears at the bottom of this section, and maybe I want a similar one under the header.

Here I can click on this plus icon and  here I could add another column section, a two-column section, so I can  add all these different sections, or I can add a spacer. I’ll select  spacer and here that adds this white bar. I can click within this new section  and here too I have that context menu.

I can click on background and let me give it  this yellow color, it kind of matches our logo. And with this section now, I  can move a section up or down. So, let's say I want this section  at the bottom or at the top.

Here I can click within that section. I can click on the ellipsis and here I can  move it down or if I click back in here, here I can move it back up. So, you can move  all of these sections up or down to position them exactly where you want them.

Now this  is an Investor Relations website, so I need to start customizing some of this content and  this is the great thing about using a template. You could start simply pasting in your  own content. Here it wants me to create an engaging headline and there's nothing more  engaging than saying deliciousness in every bite!

Now, I also want to include some subtext.  When I have this object selected, once again, I see that plus icon. I'll click on that,  and here I can add different components.

I can add text, I could add buttons, images, videos, another spacer. You can even insert  Power BI visualizations into your website. You could add a list, a form, and even an iFrame  if you want to insert some code into your website.

Here I'll simply select text and  let me type in some text here. Now that I've entered some text in, by default,  it's really hard to read, but once again, with this object selected, I have this context  menu that allows me to change the look and feel, and here's an option for text color. Here I'll set it to white and that  definitely stands out a little bit more.

Now, at the end of this paragraph, I have an  asterisk (*) and I want to insert a disclaimer. So here once again, I'll click on this plus  icon, and I can insert another component. Once again, I'll select text and here I'll paste  in the disclaimer.

With the disclaimer, I'll select this drop-down list and let's make it small  text. I don't want it to stand out that much. Also, it's really hard to read, but I  don't want to make it that easy to see.

So here I could make it white, but once  again that stands out a little bit too much, so let me go with one of these maybe darker  colors just so it doesn't stand out quite as much. Underneath the text, there's this button here  where it asks me to add a call to action. Here I could click on the button  and just like with the text, here I get this context menu that allows  me to edit the button.

Here for example, I can change the style. Currently it's a primary  button, but I could also change it to secondary. I'll stick with primary.

Over here on the left-hand  side, I can edit the button. This allows me to type in my own button label and here I think a good call  to action is invest toooo-day. And right down below, I can also link  to a URL.

I can type in a custom URL, or it can link to any one of the  pages contained within my site. Here I’ll click on this drop down and I'm going to  send people to sub-page one and then click on OK. Now that I've added a call to action, I want to test out this button to see  that it actually works as I expect it to.

In the top right-hand corner,  there's this option to preview. Let's click on that. Here I can preview on my desktop, or you'll also get a QR code so you  can preview on your mobile device.

That’s pretty cool. I'll click on desktop. Here I can see  a full screen preview of my website and it's starting to look pretty nice.

Right here, I see all the text that I modified and  here's that button with the call to action. If I click on this, it successfully  sends me to the subpage. That's exactly what I was expecting.

Back  within the Design Studio, I want to make a few tweaks to that page that I send people  to when they click on this call to action. Over here on the left-hand side, I can see  that it's currently called subpage one. I can click on this ellipsis and  here I can access the page settings.

It's currently called subpage one  but let me change the name to invest and then I could also change the URL.  I’ll change this to invest as well. Then I'll click on OK.

And here that updates the name of this page,  and this link will still work as expected. It updates the name, so it now  points to this new location. The top of the page is starting to come together  nicely.

On this investor relations website, I also want to feature one of our main  commercials for the Kevin Cookie Company, and I want to place it right here under this  section. So once again, to add another section, I can click on this plus icon, and here  I have all of these different options. I want to select the one column layout.

Once I select one of these layouts, now I can  choose a component to add to this section, and once again this is similar to  the components that we saw earlier. Once again, I said I wanted to add a  commercial. Here I'll select video and with video you can insert a YouTube video, a  Microsoft Stream video or just in video URL.

I'll type in the URL for a YouTube  video and then click on OK. And check that out, this has now inserted  our official commercial onto the website. And just like we saw before, when  you select one of these components, you have this context menu that allows  you to modify this item or this component.

So here for example, I can click on these settings  here and for a video you could define what the start time is, whether you want to show the  player controls, if you want it to autoplay, or if you want it to loop. Now all the  defaults look good for me, so I'll click on OK. Now that we've inserted a video component, let's  add a few more components.

Here once again, I can click on this plus icon and  let's say, let's add a spacer here. And right here, I’ll click on the plus  again and this time let's add a button, and for this button, maybe we'll  say watch more commercials. And for this I'll type in a link to a  URL, and I'll type in my YouTube page, and then click on OK.

So here I  have a nice call to action again. Here I'll change the style to secondary. Here I could adjust the alignment,  so I'll place it in the center.

So it's really easy to start  pulling together your website. You could position things where you want them. You could insert different components.

It really is what you see is what you  get. As we've been editing this website, we've been editing this in the desktop  view, but coming soon you'll also be able to edit in a tablet view and you'll  be able to edit in a mobile view as well. Those two are coming soon.

And if you feel a little daring, you  can also jump into the code view. Here I can click on this icon, and this  will show you all of the different code that makes up the page that  we see here on the screen. To turn this off, you can once again click  on the desktop view and we're back into the main design view that we had earlier.

Over on the  left-hand side, there's another tab called styling and when I click on that I can very  quickly change the theme of my website. Here I'm currently on the default one called  orange, but here I could switch to turquoise, or maybe I want to switch to bright blue, or here's  teal. So, I have all of these different options.

I’ll go back to the default of orange. Right up  here, I can see the color palette that it uses. Now, let's say you have a business  and you have your brand colors.

You could define all those colors right up here. Here I can also set the background color. I can also define what all of these different  fonts look like, so maybe the title, I want it to be a specific font, a specific  weight, I can customize all of that right here.

I could also define what the buttons  look like. When we inserted the button, I can choose from a primary and secondary. Here I can change what those look like. 

And down below, I can also adjust the margins and the spacing of the page. Over on the  left-hand side, there's another tab called data. Let's click on this one.

This drops me in the data view, and this is how  you can start building some web applications. Now on my investor relations website,  I want to see if people want to invest in the company, so I want to  collect people's name and also their potential investment amount. Right over  here, I can add a new table to this website.

I’ll click on this plus icon and here I can type  in a table name. Here I'll select investment amount. Once I type in my table name, here I'll  click on create.

It's now created a new table called InvestmentAmountKCC, and by default it  just has one column in this table. Now once again, I want to collect the person’s name and also  how much they want to invest. So, I can use this default column called name, but I do want to  add another column.

Here I'll click on new column. This opens up a pane over on the right-hand side, and here I can enter the  display name for this column. I'll type in investment amount.

I could also type in a description.  Here I can define the data type. Right now, it's simply a single line of  text, but here I can change that to a number.

Here it also asks me if I want to set a format. I’ll leave it to none, and here I  can define whether it's required, and I want this to be a required field, so  here I'll select required. All this looks good.

I’ll click on save. Now that we have this  table, I want to create a form that will appear on the website and when someone fills  out the form, it'll populate this table. So up above, let's click on forms.

On  the forms page, let's click on new form. Within this prompt, here I can type in a form  name and here I'll type in investment amount KCC. I can also enter a description, but I think it's  fine for now.

I'll click on create. This now drops me on a screen where I can build my form and  currently by default it just asks for the name, but once again, I want to know how much someone  wants to invest in the Kevin Cookie Company. Here I can click on add field and here I see  that field that I added called investment amount.

I'll select that and that now shows up on my form. I'll close this. Right up here, I  can also add different components.

Let's say I want to add different sections. Here I could add a toggle, a rich text editor, and  there are some other options down below as well, but once again, I'm just going to leave this  as a simple form. This all looks good now.

In the top right-hand corner, I'll click on  save. Now that I've finished saving my form, here I can also click on publish. Now that I've  created my form, I want to insert this onto one of my webpages.

Back in the top left-hand corner,  let's switch back into the pages tab. I’ll expand this category of pages and let me select this  subpage called invest. And here for subpage one, I'm going to call this how much will you invest? 

Now that I've typed in a title, right down below, once again, I'll click on the plus icon, and I can  see all these different components that I can add. This time I’ll select form. I want to  use the new form that I just created.

This opens up a prompt where I can now add a form. I'll click on new form. Here I need to select  what table I want this form to write to.

Here I'll type in the table  name that we just created. Here I can select a form. I'll select this one.

Over here I can click on data and I can define  what happens when data is entered into this form and I want it to simply create a new record,  but I also have some other options as well. I’ll select this one. Over here I can also define what  happens when someone submits this form.

Here I have a few different options. I’ll simply show a success message. And lastly, I could also specify  whether it should show a CAPTCHA.

I’ll uncheck these two boxes and then click on  OK. Here I see my newly created form on the site that people can now fill out, but before  people can come in and fill out this form, I need to make sure that the proper permissions  are set. Here when I click on this component, here, I can click on permissions in the context  menu, and here there's a set of existing permissions for site visitors.

And when I click  into this, I can review what the permissions are, so it's set so anonymous users can come  in and they can fill out this form. This looks good. I'll click on save.

Now that the form is in  place and all the permissions are set, let's preview what this looks like and let's submit  the first submission. Here I'll click on preview. This opens up our form and we can now test it out. 

I'll type in my name and for an investment amount, this seems like a really good opportunity. I'd  say 5,000,000 is probably the right amount. Next, let's click on submit.

Now that I've submitted the form, over on  the left-hand side, let's click back into data and here if we go back to the investor  interest table, here I can see the submission. Here's Kevin and $5 million. So, this is how  you can get data back from forms.

Over on the left-hand side, there's another tab called setup  and right here there are some more capabilities. Here you can set up your website to  work with various identity providers. So, if you want people to log into  your website, and you could use all sorts of options like Azure Active Directory,  Facebook, LinkedIn and the list goes on and on.

You also have various security settings. Coming  soon, you'll be able to convert your website into a progressive web application or a PWA and  down below there are some administration tools. If we click into the ellipses, here you'll see  some of the other options and how Power Pages fits into the Power ecosystem of apps.

You can use Power Automate  to automate various flows, so let's say for instance someone submits a form  on your website. You could set it up using Power Automate, so maybe it automatically sends an  email to you. Or you could have it automatically post a message to Teams.

So, you can do all  sorts of automations using Power Automate. Down below you also have some portal  management features. All right, well, that's how easy it is to set up an investor  relations website to somehow convince people that the cookie business is a good one. 

That's how easy it is to use Power Pages. To watch more videos like this one,  please consider subscribing, and I'll see you in the next video.