Creating the Page Structure •  1:52 min

Now that we have our data types set up, we are going to structure our pages. Let’s start with our index page, which is currently blank.
1. Double-click to view the page’s Property Editor. 


This is where we can find all of our customization options for this particular page. 

By default, the width of our page is 1080px and for this course, we will leave it as is. Let’s change the height of our page to something smaller, however, like 750px as to see the borders of our page.

We can expand the height later when our design needs it!

Let’s also set the background style to “Flat color” and click on the small box of color to open the color picker.

Then we can drag to select a light grey (#FAFAFA) and edit the number to the right of our selection to 100, or an opacity of 100%. 

2. Select a group and draw it on to the index page. 


Now we have customized our index page, but we need a way to contain the elements that we add to our application.

For this, we will add a group. Double-click on the group to view its Property Editor just like we did with the index page itself. Since our page width is 1080px, we can set this group’s width to 1060px to give ourselves 10px of margin on each side of our page.

3. Center the group horizontally. 


This will position the group in the middle of the page.

We will find this option in the “Arrange” dropdown at the top right-hand corner of our application editor. Click into this dropdown and select “Center horizontally.” You should see the group move to the middle of your page, at which point you can customize its height to fit wherever you’d like. 

Now that our page has a foundation, we can clone it to create the other pages that we know our dessert application will need. 

4. Clone the index page. 


By planning our pages in advance, we are creating a roadmap for ourselves to follow.

In the “Pages” dropdown, click to “Add a new page” and call it “Recipe.” Underneath the page name, there’s a “Clone from” dropdown where we can select the index page. 

Click the “Create” button, then repeat this process for our user profile and settings pages. Now we are ready to design our application!

Challenge: Customize your index page and add a group to contain your elements, then clone that index page as a starting point for the rest of your application.