Assistant Freeway Express Template
28th of August, 2015
There is only one master page in this template. It’s made up of:
- A 1000px wide item at the top of the page topline that acts as a top border of the page.
- A logo item Logo that contains styled text. this can also contain a graphic item if you prefer.
- A menu CSSMenu the contents of which are center aligned.
- A divider item, divline1 that divide the header content from the first body item.
- An empty body item Body1 that is also 1000px wide.
- A divider item, divline2 that divide the first body item from the second body item.
- An empty body item Body2 that is again 1000px wide.
- Two footer items Footer1 and Footer2 with navigation, social media icons, address, and copyright information.
Body1 contains a large graphic item.
Body2 contains three child items that are positioned in columns. Each one contains a centered inline graphic (a graphic that’s been inserted into the run of text) item followed by text.
Body1 contains two child items that are laid out in rows. Each contains an inline graphic item and left or right aligned text.
Body2 contains 2 child items, this time laid out in a content plus sidebar layout. Again, there is an inline graphic item and text in both items.
Body1 contains some headline text.
Body2 contains a contact form that has been laid out using inline items.
The subsequent pages contain items and content that’s largely the same as the items described above.
The image used in the template is from picjumbo.
Editing the template
To add new menu items to the navigation menu that appear on all the pages in the site, go to the Master page, 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 completed form to be delivered to in the Recipient Address field of the Actions palette (with the Form item selected).
To add new fields, select divline3, Footer1, and Footer2 and move them down the page. Now select an existing field and duplicate (Command-D) to create another item the same as the selection, or press the right arrow key, hit return and then go to the Insert menu and select the form item you want to add. If adding a radio button or checkbox, it may be a good idea to insert an HTML item first and draw a new radio or checkbox inside that.
If you end up with a big X in Body2, the item is overlapping the content below it, so you’ll need to move divline3 and Footer1 and 2 further down the page.
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. You may need to do this up to three times as the items are rollovers made up of three items. A quicker way to do it is to select the top item, then using the Action palette select the item at the top of the list. For instance, if removing the Google Plus icon, this would be the item named google. The other icons will automatically re-center.
The fonts used in the site are Google Fonts Roboto. 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 () 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 Roboto (Thin) font set to Roboto > Light.
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.