Serenity Freeway Express Template

21st of July, 2015

Template overview

Master Page

There is only one master page in this template. It’s made up of:

  • An item HeaderWrapper that stretches the full width of the layout.

  • HeaderWrapper contains a centered item Header. This contains:

  • Logo1 and Logo2, which each contain some HTML text with a shadow applied. They also have a semi-transparent background that’s been applied using the Graphic Effects section in the Inspector palette.

  • A navigation menu CSSMenu that is wrapped inside an item CSSMenuWrapper. 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).

  • Two empty body items Body1 and Body2. These are centered in the window and have spacer items to help give the content space to breathe. The heights are variable so they will grow to fit their content.

  • The body items are each contained inside a BodyWrapper items. These have a gray color applied and are used to set the background color of the site’s content.

  • A footer item Footer that has the same structure as the body items. The only difference is that the wrapper has a different color applied.

  • SocialIcons contains a selection of social media icons ready to connect to connect your site with the major social networks.

  • FooterText contains some standard copyright text that you should update for your needs.

Home page

Aside from the master content, the home page contains:

  • An center-aligned image that has a 3 pixel border applied.

  • An item Content1 that contains text.

Contact page

  • Body2 contains a set of form items that can be used to receive messages from your visitors.

The remaining pages contain items and content that’s largely the same as the items described above.

Editing the template

Navigation menu

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 they all fit in the menu.


The form on the contact page is 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 page selected).

Social icons

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, go to Page view (by clicking the word Site over the left hand column) and select the icon you want to remove by clicking on it in the list of items. Make sure to select the parent item that has the Action cog icon on it. Once it’s selected, hit the Backspace key to delete it. The other icons will automatically fill the new space.


The fonts used in the site are Google Fonts Oswald 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 . Change the Google fonts line <link href='|Open+Sans:300' rel='stylesheet' type='text/css'> 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.

User Opinions

100% thumbs up 0% thumbs down (1 vote)

How would you rate this answer?

Thank you for rating this answer.

Related Articles

No related articles were found.