Snapper Freeway Express Template

21st of July, 2015

Template overview

Master Pages

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:

  • HeaderWrapper contains items to space the header content as well as the header. It stretches the full width of the layout 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 HTMN item LogoWrapper, which allows more control over positioning.

  • A navigation menu CSSMenu.

  • A main item Body that is centered within wrapper item BodyWrapper that stretches the full width of the layou. BodyWrapper is used to create the strip of gray color behind the Body item, which is centered in the window.

  • On Photo Master, Body contains a large image and two HTML items Text1 and Text2. 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.

Works page

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.

Contact page

  • An item contact that contains some text and a contact form.

The remaining pages contain content that’s similar to the items already covered.

Editing the template

Navigation menu

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

Forms

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).

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.

Fonts

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 . 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.

User Opinions

No users have voted.

How would you rate this answer?



Thank you for rating this answer.

Related Articles

No related articles were found.

Continue