Smile Freeway Express Template
21st of July, 2015
There is only one master page in this template. It’s made up of:
- A 1000px wide header item with the page logo and navigation. The CSSMenu contents are center aligned (the menu settings can be seen in the Actions palette [Cmd-Opt-A] when you have the menu selected).
- Two empty body items Body1 and Body2 that are also 1000px.
- A Footer with copyright and contact information.
- Body1 has a large image imported in it.
- Body2 has content items, which each have an inline image and text.
The subsequent pages contain items and content that’s largely the same as the items described above.
Editing the template
To add new menu items to the navigation menu that appears on all the pages in the site, go to the Master page and double click the Menu item. Add the text you want to appear in the list of existing links. The position of the text in the list corresponds to the position of the menu item in the menu.
After adding menu items, preview the site in a browser to make sure they all fit in the menu.
The form on the contact page is controlled by the Send Form Action. To make it work you’ll need to enter the email address you want the completed form to be delivered to in the Recipient Address field of the Actions palette (with the Form item selected).
The fonts used in the site are Google Fonts Open Sans and Lilita One. If you’d like to edit or add to these fonts, go to the Master page, open the HTML Markup dialog from the Page menu and select Before . Change the Google fonts line
<link href=‘http://fonts.googleapis.com/css?family=Lilita+One|Open+Sans:300' rel=‘stylesheet’ type=‘text/css’> to the new value and update your font sets in the Font Sets dialog from the Edit menu.
To download the fonts and use them in Freeway, do the following:
- Click the link above and download icon (the down arrow in the top right of the page).
- Install the fonts.
- Restart Freeway.
- Open the Edit menu and select Font Sets.
- Change the Screen Font option of the Open Sans (Light) font set to Open Sans > Light and Lilita One to Lilita One.
Find out more about using web fonts in our Google Web Fonts article.
Spacing the container items
As you are editing each page you will find that you need to move and resize items to fit the content. In order to make the items flush on the page again after entering your content, follow these steps:
- Click on a blank spot of the pasteboard to clear any items that are selected.
- Use the keyboard shortcut Command+A to select all the items on the page.
- Choose the menu option Item > Distribute.
- Set Direction to Vertical, Between to Items, Method to Fixed Distance, and Distance to 0px. This will make all the items flush against each other and look tidy on the page.