Tranquil Freeway Express Template

21st of July, 2015

Template overview

Master Page

There is only one master page in this template. It’s made up of:

  • A 1000px wide header item with the page logo, contact information, and navigation. The CSSMenu contents are center aligned, as is the menu itself (the menu settings can be seen in the Actions palette [Cmd-Opt-A] when you have the menu selected).
  • One empty body item Body that is also 1000px. 
  • A Footer with copyright information, and social media icons.
  • The background is a large image applied to the page.

Home page

  • Body1 contains two side-by-side items. Each contains a photo and description. Below those is a wider News item.

The subsequent pages contain items and content that’s largely the same as the items described above.

The images used in the template are from picjumbo and Gratisography.

Editing the template

Navigation menu

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).

Social icons

To edit the links in the social icons in the footer, open the Edit menu and select URLs. In the dialog that appears you can double click an existing URL to replace it with your personal one.

To remove any unwanted icons, select the icon you want to remove by clicking on it and press Delete. The other icons will automatically re-center.


The fonts used in the site are Google Fonts Muli and Nothing You Could Do. 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=‘|Montserrat:400,700' 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:

  1. Click the link above and download icon (the down arrow in the top right of the page).
  2. Install the fonts.
  3. Restart Freeway.
  4. Open the Edit menu and select Font Sets.
  5. Change the Screen Font option of the Muli (Light) font set to Muli > Light, Muli (Normal) font set to Muli > Normal and Nothing You Could Do to Nothing You Could Do.

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:

  1. Click on a blank spot of the pasteboard to clear any items that are selected.
  2. Use the keyboard shortcut Command+A to select all the items on the page.
  3. Choose the menu option Item > Distribute.
  4. 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.

User Opinions

No users have voted.

How would you rate this answer?

Thank you for rating this answer.

Related Articles

No related articles were found.