Snapper Freeway Pro Template
17th of March, 2015
There are two master pages in this template — Master Page is for general content and Photo Master is for the photo pages. They consist of:
A header item Header that is centered in the window and has a width of 80%. It’s contained inside a wrapper item HeaderWrapper that stretches the full width of the page and has a light gray color applied. Header contains:
NameWrapper, which is intended for the name of site owner
A logo item logo, which is a graphic item contained inside HTMNL item LogoWrapper, which allows more control over positioning
A navigation menu nav
A main item Body that is centered within wrapper item BodyWrapper that stretches the full width of the window. BodyWrapper is used to create the strip of gray color behind the Body item, which is centered in the window with a width of 90%
On Photo Master, Body contains a large flexible image and two HTML items Text1 and Text2. The image has a style around it .reducer that is used to reduce the leading and margins to zero so that there’s no gap between the image and the item below it. You shouldn’t need to remove or change the style, but if it does get removed then you can reapply it by selecting the image, pressing the right arrow once and applying the style (it’s a paragraph style so even though you’re not selecting the image, it will be applied to the paragraph around it). Text1 just contains text. Text2 contains some sharing buttons and the Visitor Comments Action
A footer item footer (also in a wrapper that’s the same as the wrappers above, just with a different color) that contains social media icons ready to connect to connect your site with the major social networks and an item for any copyright information you may want to add
This page contains:
- Three content items that have the same structure as the content on the Photo Master page, just smaller in size. They are laid out in a row of three columns and designed to become a column of three rows at the Phone (Landscape): 667 breakpoint
- An item contact that contains some text and a flexible contact form
The remaining pages contain content that’s similar to the items already covered.
Editing the template
To add new 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.
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 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 Alegreya. 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 .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 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 Black to Strawberry (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 Black again.