Portfolio Freeway Pro Template
17th of March, 2015
There are two master pages in this template — Overview Page and Detail Page. They are similar but serve two different purposes. They consist of:
A fixed sidebar item fixed-sidebar that is set to always be positioned at the left of the page in a fixed/pinned position, regardless of page scrolling. It’s set to get narrower when the browser window is smaller than (or equal to) the Tablet: 768 breakpoint. This contains:
A logo item header-title that contains the name of the template. The text can be changed to anything else or be replaced with a graphic. It’s shown at the larger breakpoints and hidden with the Display option in the Inspector’s output panel when the sidebar is made smaller
A small logo item title-small that contains just the first letter of the title item. It’s hidden at the larger breakpoints and displayed when the sidebar is made smaller
A navigation menu nav that has top-level items and submenus
A main item main that stretches the full width of the window. It has a left margin of 300 pixels to make space for the sidebar. When the sidebar gets smaller the left margin is changed to the new width of the sidebar (48 pixels). This item contains:
A feature/hero item hero that contains an image and some text. This is set to fill the available space with the image on the left and the text on the right on large screens (wider than 1600 pixels), at smaller sizes the image fills the available space and the text appears below it. On the Detail master there are three thumbnail images that appear directly below the main image
A row of four columns, each of which contain a smaller image and some text. These are set to become two rows of two columns at the Small Desktop: 1200 breakpoint right down to the smallest breakpoint when they go down to four rows
A footer item footer that can be used to put any copyright information you may want to add
The page itself has the Smooth Scroll Action and the Auto Clearfix Action applied. Smooth Scroll is used to smoothly scroll the page when navigation links are clicked. 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
This page contains:
An item form that contains the contact form
Two text fields, one for the visitors name, the other for their email address
A text area for the visitors message
A submit button
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 in the Contact item 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 Contact item selected).
The fonts used in the site are Google Fonts Lato. 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.
When replacing flexible images, remember that they need to be imported as pass-throughs. Regular graphic items can’t be made flexible.
The text throughout the site uses the same text styles. Headings are set using the h1—h3 tags and regular text uses the .main-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 green. 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 Base Dark to Accent (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 Base Dark again.