Homeshop Freeway Pro Template
12th of March, 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 at a width of 90%
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), and then centered at the Tablet: 768 breakpoint
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. It’s right aligned by default (the Float option is set to Right), and then centered at the Tablet: 768 breakpoint
A navigation menu Menu. This is also centered within the window at a width of 90%. 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). This item is set to show the responsive icon at the Navigation Breakpoint: 960 breakpoint
An empty body item Body1 that has the same settings as the header
A footer item Footer 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 the Auto 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 are equally sized items that become rows instead of columns when the browser window is below 768 pixels wide (so at the Tablet: 768 breakpoint). 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 84% 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 Content4 contains a flexible contact form, which is contained within an item called FormWrap, which has a percentage based with (62.5%). Apart from the submit button, the form items are all set to 93% of FormWrap, so they also grow and shrink with the browser window
The map item Map is contained within an item called MapWrap. They both have a width of 100% so they fill 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 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 it doesn’t break when reducing the width of the window. The example below shows what happens when two new menu items are added and the page is resized (the screenshot shows the Estate template, but the result is the same).
If it does, you should make a note of the width that causes it to break, make a new breakpoint at that width (in the Media Types dialog from the Edit menu), and select it from the Show Icon at Breakpoint option in the Actions palette.
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).
When replacing flexible images, remember that they need to be imported as pass-throughs. Regular graphic items can’t be made flexible.
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 </head>. Change the Google fonts line (
<link href=‘http://fonts.googleapis.com…) 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/Lng value to enter, change the Location Entry popup to Advanced.
The text thought the site uses the same text styles. Headings are set using the h1—h2 tags and regular text uses the .PageContent style. There are other styles used, but these are the main ones. You can change any aspect of the styling by opening the Edit Styles dialog from the Edit menu, selecting the style and then making changes.
As an example, let’s make the h2 style (the blue text you see at the top of text based items) pink. Open the Edit Styles dialog (you can also get to this with [Cmd-Ctrl-E]), select h2 from the list on the left and change the color from Template Color 1 to Pale Bubblegum (you can choose any color, we’re just using that because it’s already in the list). Once you ok the dialog, all the h2s in the site will be set to that color. To change them back, just repeat the steps and select Template Color 1 again.