Homestyle Freeway Express Template
21st of July, 2015
There is only one master page in this template. It’s made up of:
- A header item Header that contains the logo, a review cart link and a navigation menu. The header is centered within the window.
- The logo item Logo contains editable text and has a dashed border. It’s left aligned by default (the Float option is set to Left).
- An item that contains an E-Review button Action item (part of the Freeway Shop Action suite). If you’re not using this template as a commerce template then you can remove this item.
A navigation menu Menu. This is also centered within the window at a width of 1024px. The contents are centre 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).
An empty body item Body1 that has the same settings as the header.
A footer item Footer1 also has the same settings as the header and body items. It contains some standard copyright text that you should update for your needs, and:
An item SmallSet7 containing a selection of social media icons to connect your site with the major social networks.
The header, body, and footer items are each contained inside wrapper items that is used to create the block of color that stretches the full width of the window. Each of the items has a semi-transparent background applied — these have been set using the Graphic Effects section in the Inspector. FooterWrapper has a 5px gray top border to separate it from the body.
The page itself has a background image applied that can be changed to suit your site. It also makes use of theAuto Clearfix Action, which is used to fix up some of the CSS styling on output. It shouldn’t need to be changed or removed.
The home page has additional content in the body item. It contains:
Two columns Content1 and Content2. These contain a small inline image each and some styled text. They (and all other content items) have a dashed border applied to match the items in the header.
Two rows of content items Content3 and Content4 that both stretch across of the width of the body item. The first contains a large flexible image and some styled text; the second contains call to action text.
Aside from the Contact page, the subsequent pages contain items and content that’s largely the same as the items described above.
This page contains a contact form and Google Map.
Item Contact contains a contact form, which is contained within an item called FormWrapper
The map item item1 is contained within an item called MapWrapper. The width fills the available space. MapWrap has a dashed border, like all the content items in the template.
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.
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 forms to be delivered to in the Recipient Address field of the Actions palette (with the page 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, select the icon you want to remove by clicking on it, then go to the View menu and select Select Parent (or press [Cmd-Ctrl-Up]) and hit the Backspace key. The other icons will automatically fill the new space.
The fonts used in the site are Google Fonts Arvo, Pacifico, and 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
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700|Pacifico|Roboto:300,500,300italic,500italic' rel='stylesheet' type='text/css'> to the new value and update your font sets in the Font Sets dialog from the Edit menu. Find out more about using web fonts in our Google Web Fonts article.
The pin in the Google Map can be placed in any location you like. To do this, go to the Contact page, select the Map item, open the Actions palette and add your address to the Address field. If you have a specific Lat/Long value to enter, change the Location Entry popup to Advanced.