Macro Freeway Pro Template
17th of March, 2015
There are two master pages in this template — Master Dark should be used when the image on the page is dark, and Master Light when it’s light. They consist of:
A header item header that stretches the full width of the window. This has a semi-transparent background on the Light master page that’s applied using the Graphic Effects section of the Inspector
header-center is centered within the header and has a width of 96%. It contains:
A logo item logo that currently just contains the letter P (that’s styled using Google fonts, see below). The text can be changed to anything else or be replaced with a graphic
A navigation menu nav. This has a submenu and makes use of a third-party Action called BAM that allow the submenus to be images. Details of how to edit the menu can be found below
Three submenu items submenu1, submenu2, and submenu3 that are used by the BAM Action
A footer item credit that’s used to contain the credit or caption of the image on the page. It has a semi-transparent background on the Light master page that’s applied using the Graphic Effects section of the Inspector, and contains two further items previous and next that can be used to apply links to other pages to create a slideshow effect. They can be removed if they’re not needed
The page has a background image applied — this is the main content for your pages and will be different on each one. The style (.cover) is used to make sure the image stretches to fill the browser window
Used to tell your visitors about yourself or your company. In addition to the master content, this page contains:
A container item container that is 90% of the width of the page, maxing out at 1200 pixels wide (so it can never grow wider than 1200 pixels – the text becomes unreadable beyond this). This contains:
An image item image that stretches the full width of the container item
A content item content that contains text
Editing the template
To add new top-level menu items to the navigation menu go to the Master page, double click the Menu item and 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.
You have a choice of two types of submenu — images or text. The submenus are currently using images. We’ve used the BAM Action to make things easier to work with.
The Action is placed as a submenu item — this is done by pressing return after a top-level menu item (the first level of indentation in the list), indenting by one place [Cmd-Opt-Right Arrow] and going to the Insert menu and selecting BAM from the Action submenu. You can then select another item on the page that will become the submenu when the page is published. You can then add your submenu content to the selected item and make it look any way you want.
In this template the submenus are located in the pasteboard area above the page that stretch the full width of the window — submenu1, submenu2, and submenu3. These contain centered thumbnail images with links applied. When adding your own content, use/duplicate these items replacing the images for your own.
If you’re rather just use text then delete the BAM Actions and add text as you would normally.
Don’t forget that you’ll need to repeat the process for the other master page (or copy and paste from one master to the other — you’ll need to relink the BAM Actions to their submenu items if you do this).
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 new menu items are added and the page is resized (the screenshot shows the Estate template, but the result could be the same).
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 arrows in the footer item can be used to create navigation within sections of the site. These are set manually, so after adding your pages, go through each of them and apply links to them. Remember to update them when you add new pages to the site.
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 (such as the ones in the submenus), remember that they need to be imported as pass-throughs. Regular graphic items can’t be made flexible.
The fonts used in the site are Google Fonts Geostar 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 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 h2 style a mid gray. 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 Paper to Magnesium (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 Paper again.