In the previous mission, we set up the interface for a Back link.
In this article, we will add a header section to our New Car screen to help separate the space between the navigation and the main sections. It will display an icon, and the title "New Car". It will also have a line that separates it from the section below it.
Remember, if you are no longer on New Car screen, you can navigate to it by clicking on the vertical ellipsis ( ⋮ ) of the Cars app, and selecting the Manage link, and then customizing the New Car screen.
Add Another Section
1. Drag in a section object and change its Caption to "secHeader".
2. Click the arrow ( ▼ ) beside the title of secHeader and then click Section > Move Up to move this section between secNav and secMain.
3. Under its Style, find Bottom Border to make a line that separates the header from the main section:
- Bottom Border Size: 1px
- Bottom Border Color: Silver
- Bottom Border Style: Solid
4. Change the padding of the secHeader to 1x for top, bottom.
Add an Icon to the Header
1. Into the secHeader, drag in an Icon object and select it.
2. Change its caption to "IconCab".
3. For the actual icon, select the cab from the menu.
4. Change the Size to 4X-Large.
5. Click Save to save your work.
When previewed, the icon should look like this:
Add Text to the Header
1. Add another column to the secHeader by clicking the ⊕ icon next to Cols.
2. If you don't remember, we can set the alignment for each cell. Select the left cell, set alignment to Center Left. Note that you are changing the padding of an individual cell, not the entire section.
3. Also for this cell, check “Collapse as small as possible”. See? Nice tiny space!
4. Still in this cell, scroll down and change the right padding to 1x.
5. Now let’s select the right cell, change the alignment to Center Left.
6. Drag a Text object into the right cell and change its text to "New Car".
7. To make this object look like a Title, change its Font Type to Title.
8. Click Save to save your work.
Coming Up Next...
Click over to Preview Mode to take a look at your screen. It should look something like this:
Looks great so far! Now let’s move on to our next section: adding buttons!