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.
2022-05-31 01:15
