Floral Freeway Express Template
21st of July, 2015
There is only one master page in this template. It’s made up of:
- A 900px wide header item with the page logo, shopping cart, and navigation. The navigation menu CSSMenu is centered in the header, and the contents of the menu are center aligned (the menu settings can be seen in the Actions palette [Cmd-Opt-A] when you have the menu selected).
- Four empty body items Body1, Body2, Body3, and Body4 that are also 900px. There are two divider items (topdiv1 and topdiv2) above Body1 and two divider items (bottomdiv1 and bottomdiv2) below Body4 that serve as decorative elements.
- A Footer with copyright information and social media icons.
The homepage has content in the body items. They contain:
- Body1 contains a slideshow built with Target Image and Sequence Timer. The images can be swapped easily, just make sure that the items InitialImage and Image1 are the same photo. To quickly show the items in the Site Panel, click the word Site at the top of it. Click it again to go back to the site overview.
- Body2 contains some welcome and introduction text.
- Body3 contains three items that are side by side. These each contain an inflow graphic, text, and a link to more information.
The Store page makes use of the Freeway Shop suite of Actions. If you want to add or remove products, look for the items called ProductWrapper1 through ProductWrapper8. To remove them, just select the item and delete as normal. To add them, select the item and press Command-D to duplicate the item and move it into position.
The buy buttons (BuyButton1, BuyButton2, etc) each have a child graphic item (Price1, Price2, etc) that contains the price. To edit the price, edit the text in this graphic item and in the E-Buy Button Action applied to the buy button.
Find out more about these actions in our Freeway Shop Actions article.
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.
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 Body2 item selected).
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, go to Page view (by clicking the word Site over the left hand column) and select the icon you want to remove by clicking on it in the list of items. Make sure to select the parent item that has the Action cog icon on it. Once it’s selected, hit the Backspace key to delete it. You will need to adjust the other icons to fill the space.
The fonts used in the site are Google Fonts Della Respira and Alegreya Sans. 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=Della+Respira|Alegreya+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 Della Respira font set to Della Respira and Alegreya Sans to Alegreya Sans.
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.