Estate 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:

  • A strip of color at the very top of the page. This is just a 10px high item with a background color applied that stretches across the width of the layout.
  • A navigation menu CSSMenu. This also stretches across the layout. 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).
  • An empty header item Header. This is centered in the window and has a width of 980px and padding of 20px, making the full width of the item 1020px (an item’s width is made up of its width, and combined left and right padding, so 980 + 20 + 20). The height is variable, so it will grow to fit its content.
  • Three empty body items Body1, Body2, and Body3 that have the same settings as Header.
  • Two footer items, Footer1 and Footer2 that also have the same settings as the header and body items, but these contain further items that will appear on every page.
  • FooterNav, which contains site navigation.
  • FooterForm contains a simple contact form. SocialIcons contains a selection of social media icons ready to connect to connect your site with the major social networks.
  • The header, body, and footer items are each contained inside wrapper items that is used to create the block of color that stretches the full width of the layout. FooterWrapper has a 5px red top spacer item to separate it from the body.

Home page

The home page has content in the header and body items. They contain:

  • A large image in the Header item.
  • A semi-transparent item called HeaderText containing some title text that stretches across the width of the image. The transparency has been applied using the Graphic Effects option in the Inspector palette. This title will be combined with the large image to make a single graphic.
  • Body1 contains two items that are side by side. These each contain some text and an inflow graphic.
  • Body2 contains a large image that is the full width of the layout.
  • Body3 contains a full width item containing text.

The subsequent 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 appears on all the pages in the site, go to the Master page and 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.

Forms

The forms in the footer and on the contact page are controlled by the Send Form Action. To make them work you’ll need to enter the email address you want the completed forms to be delivered to in the Recipient Address field of the Actions palette (with the FooterForm item selected).

Make sure you do this on the Master page for the footer item – that way you’ll be setting it on each of the pages in the site.

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 Arvo 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=‘https://fonts.googleapis.com/css?family=Arvo:700|Open+Sans:300,300italic,700,700italic' 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

No users have voted.

How would you rate this answer?



Thank you for rating this answer.

Related Articles

No related articles were found.

Continue