Estate Freeway Pro Template
10th of March, 2015
There is only one master page in this template. It’s made up of:
- A strip of color at the very top of the page. This is just a 10px high item with a background color applied that stretches across the width of the window (100% width)
- A navigation menu Menu. This also stretches across the window. The 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)
- An empty header item Header. This is centered in the window and has a flexible width of 86% and padding of 2%, making the full width of the item 90% (an item’s width is made up of its width, and combined left and right padding, so 86 + 2 + 2). The height is variable, so it will grow to fit its content
- Three empty body items Body1, Body2, and Body3 that have the same settings as Header
- Two footer items Footer1 and Footer2 that also have the same settings as the header and body items, but these contain further items that will appear on every page
- FooterNav, which contains site navigation
- FooterForm contains a simple contact form.* SocialIcons contains a selection of social media icons ready to connect 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. FooterWrapper has a 5px red top border to separate it from the body and a background image applied
The home page has content in the header and body items. They contain:
- A flexible slideshow in the HeaderWrapper item
- A semi-transparent item in HeaderWrapper containing some title text that stretches across the width of the window. The transparency has been applied using the Graphic Effects option in the Inspector palette
- Body1 contains two items that span 50% of the item’s width (46% width and a total of 4% padding). These each contain some text and an inflow pass-through graphic. These are set to become 100% wide at the Phone (Landscape): 667 breakpoint, to prevent them becoming too narrow
- Body2 is an empty item but has a 500px height so that the background image applied to the wrapper item behind it, BodyWrapper2, can be seen. The Background Scrolls option for this item has been turned off, which causes the image to remain static while the page is being scrolled
- Body3 contains a 100% width item containing text
The subsequent pages contain items and content that’s largely the same as the items described above.
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.
If it does, you should make a note of the width of the window 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 slideshow is made up of four HTML items with background images and the Target Show Hide Layer Action applied. The style that is applied to each of the items (.fbg) makes sure the image scales to fit the item.
To change the images, open the Item view of the Site panel (by clicking the top of the Site Panel), select one of item Image1, Image2, Image3, or Image4 and use the Inspector palette to change the background image using the Image popup in the Background section.
To add a new image, select the topmost image by clicking on it and go to the Item menu and select Duplicate (or press [Cmd-D]. Open the Actions palette and increase the Target # option by one. The slideshow is controlled by the Sequence Timer Action — after adding a new image, select the page in the Site panel, open the Actions palette, and select Yes alongside the number that you set in the Target Show Hide layer Action.
You could also use an Exhibeo item here. To do this, remove all the ImageN items, double click inside HeaderWrapper, and go to the Insert menu and select Exhibeo Import.
Once you’ve selected the Exhibeo slideshow (Slide will work the best here, we think), make sure you give the item a 100% width and an appropriate minimum height – don’t set it too high otherwise it might end up taller than the slideshow and you’ll end up with a gap. Just set it high enough to see the item in Freeway. You’ll also want to remove the height from the HeaderWrapper item at the default and 667 breakpoint.
When replacing flexible images (not background images like those used in the slideshow), remember that they need to be imported as pass-throughs. Regular graphic items can’t be made flexible.
The forms in the footer and on the contact page are controlled by the Send Form Action. To make them 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 FooterForm item selected).
Make sure you do this on the Master page for the footer item – that way you’ll be setting it on each of the pages in the site.
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 and Open 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 </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 text throughout the site uses the same text styles. Headings are set using the h1—h3 tags and regular text uses the .Content 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 h3 style (the red text you see at the top of text based items) a deep gray. Open the Edit Styles dialog (you can also get to this with [Cmd-Ctrl-E]), select h3 from the list on the left and change the color from Crimson to Concrete (you can choose any color, we’re just using that because it’s already in the list). Once you ok the dialog, all the h3s in the site will be set to that color. To change them back, just repeat the steps and select Crimson again.