Exercise - Generate a website with Copilot

30 minutes

In this exercise, you'll create a website for a real estate company, including a home page, listings page, services page, About Us page, and Contact Us page. You'll use Copilot in Microsoft Power Pages to generate the site, its content, and a color theme.

Note

Results may vary due to the generative nature of Copilot. Use this exercise as a guide rather than a step-by-step replication.

Create a real estate website using Copilot

Sign in to your Microsoft Power Pages environment.
If this is your first time using Microsoft Power Pages, select Get started.
On the Create a site screen, scroll to the bottom to locate the text input field with the placeholder "Describe the site you want and let AI create the first draft." Enter the following prompt:
```
Create a professional real estate website to showcase listings, services, and contact information
```
Select Submit.
Copilot generates a site name and web address based on your prompt. Change the site name to Contoso Real Estate and the web address to contosorealestate-nnnn.

Note

The nnnn in the web address is a unique identifier generated by Copilot to ensure uniqueness. You'll need to modify it to produce a unique identifier.

Select Next.
Copilot prompts you to choose a site layout. You can select Try Again to generate a new layout or Next to proceed with the current one. Select Next to continue.
Copilot then generates more pages that could be used in the site based on the prompt. Select the following pages:
- About Us
- Contact Us
- Property Listings
- Services
Then select Done.

Copilot sets up and generate the full site, which may take a few minutes.

Once generated, you'll be redirected to the site in the design studio, where you can further customize it. A pop-up may appear introducing Microsoft Power Pages features; you can close it.
Select the Home icon in the top left corner to go to the Power Pages home page.

Add the website to the Real Estate Solution

In the left navigation pane, select Solutions.
Select Real Estate Solution. If it doesn't exist, select + New solution, name it Real Estate, and create a new publisher with the prefix res. Save the publisher and create the solution.
Under the solution Objects, select Site.
If your site appears in the list, no further action is needed. If not, or if Site isn't listed, select Add existing > Site, and choose your newly created site to add it to the solution.
Select the back arrow in the top-left corner to return to the Solutions page.
Select Home in the left navigation pane to go back to the Power Pages home page.

Modify the website home page

On the Home page, under Active sites, identify the Contoso Real Estate Power Pages site that you previously created and then select Edit. Close any introductory Copilot pop-ups that may appear.
In the design studio, select Pages on the left pane.
In the Main navigation pane, select Home to open the Home page.
Replace the main header text with:
```
Welcome to Contoso Real Estate
```
Replace the secondary text below the header with:
```
Your trusted partner in real estate
```
Select the button, then choose Edit from the pop-up.
Change the Button label to View Listings, then select Link to a page and choose Property Listings.

Select OK to apply changes.
Scroll down until you see the section with the two columns.

Note

In the case where you don't have a section with two columns, change the layout of one of the existing columns by hovering over the section and selecting it.

Select Layout in the pop-up toolbar and then select the 2 Column layout.

In the left column, replace the title text with Our Services and make it a Heading 2 text type.
Below Our Services, replace the text with the following:
```
We offer a range of services to help you buy, sell, or rent your property.
```
With the text still selected, select Copilot in the pop-up toolbar and then select Rewrite. This uses AI to generate new text for the section.
Experiment with the different options Copilot provides. Set the Tone to Professional and the Length to Make it longer. Then select Replace Text to add the new text to the section.
Select the Call to Action button below the newly generated text.

Note

In the case where you don't have a button, add a new button by selecting the Add a component button under the text and then selecting Button.

With the button selected, on the pop-up that appears, select Edit.
Under Edit Button, change the Button Label to Learn More.
Select the Link to a page option and then select the Services page from the dropdown.

Select OK.
In the right column, select the image and select Image in the pop-up toolbar.
In the Add an image pop up, select Stock images and search for contact and select an image that you like.

Select Insert.
Replace the title text under the image with Contact Us and make it a Heading 2 text type.
Below Contact Us, replace the text with the following:
```
Get in touch with us to learn more about our services or to schedule a showing.
```
With the text still selected, select Copilot in the pop-up toolbar and then select Rewrite. This uses AI to generate new text for the section.
Set the Tone to Professional and the Length to Make it longer. Then select Replace Text to add the new text to the section.
Select the Call to Action button below the newly generated text. On the pop-up that appears, select Edit.
Under Edit Button, change the Button Label to Send a Message.
Select the Link to a page option and then select the Contact Us page from the dropdown.

Select OK.

This section should now look similar to this. If not, adjust the content to best match the screenshot below.
Delete any other sections so that you just have the Header / Nav Bar section, the Main hero section, the Services / Contact Us section, and the Footer sections.

Select the section you want to delete. Select the More ellipsis on the toolbar and then select Delete.
Now we'll be adding a new section with Copilot but first, we need a spacer. Just above the footer, select Add a section and then select Spacer.
With the Spacer selected, select Edit Background in the pop-up toolbar and select one of the brand colors.
Then open the Copilot chat window by selecting the Copilot icon in the top right corner of the design studio. You'll be asking Copilot to add a new section for you.

In the chat window, type the following:
```
Create a section for customer testimonials
```
Press Enter.
A new section will be generated for you.

Note

Content generated by Copilot won't always be the same or perfect, so you may need to tweak the content to better fit your needs.

Select Keep it to add the section to your site.
Select the section and then select Layout in the pop-up toolbar. Then select the 3 Column layout.
In the new section in the center of the section, under Add a component, select the More ellipses and then select Image.
Under Add an image, select Stock images > Icons. Search for people and select an image that you like.

Select Insert.
With the image selected, set the following properties in the toolbar:
- Align: Center Align
- Design > Layout > Width: 60%
Select the plus icon under the image and then select Text. With the text component selected, select Copilot in the pop-up toolbar and then describe the text you need to generate:
```
A short testimonial for a real estate company from a happy customer
```
Select Enter.

Once the text generates, select Add to page.
Select the plus icon under the text and then select Text. Change the text type from Paragraph to Subheading 1. Change the alignment to Center Align.
Replace the text with a customer name of your choice.
Drag and drop the name above the testimonial.
Add two more testimonials so that your section has three columns similar to the image below, copying the formatting from the last several steps.
Change the Text color of the customer names to match the colors of the site.

Generate a color theme for the website

Now that the main content of the home page is complete, let's use Copilot to generate a color theme.

In the Copilot chat window, type the following:
```
Create a color theme using blue, red and white for the website
```
Press Enter.
A color theme will be generated for you.
You can select Try Again to generate a new color theme or select Apply Theme to apply the generated color theme to the site.

Select Apply Theme.
Once the theme has been applied, adjust the colors of the site so that the content is more readable.

Hover over the site header and select Edit site header.

On the Edit site header panel, select Styling and change the Header background to a neutral color.

Select Title and change the Weight to Bold and the Color to a color that stands out against the background.

Select Site Navigation and change the Color to a color that stands out against the background. Change the on-hover color to a different color.
Change the styling for all the buttons, texts, spacers, backgrounds, and other elements on the site to match the new color theme, make the content more readable, and ensure that the site looks professional to your liking.

Preview the website

On the top right corner of the design studio, select Preview.
Select Desktop to preview the site on a desktop screen.
Sign in with your Microsoft account if prompted and Accept the permissions requested.
Scroll through the site to verify visual consistency, readability, and that all buttons and links function as expected.

Feedback

Was this page helpful?